前卫的网页样式设计：

总结的很到位

https://www.bilibili.com/video/B ... 40a031e570ceae11bd7

上面的B站的艾编程UP主的30个前卫网页样式设计，涵盖了网站样式的方方面面，希望大家喜欢，当然要有一定的实力

如果点击率高的话，我会把源代码奉上

希望大家喜欢

当然，我这个程序是用vue3写的，不是HTML+CSS

1. <template>
   
2.   <div class="news">
   
3.     <h3>百度新闻热榜</h3>
   
4.     <ul>
   
5.       <li v-for="(item, index) in newsItems" :key="index">
   
6.         <a :href="item.link">
   
7.           <span :class="item.color">{{ index + 1 }}</span>
   
8.           {{ item.title }}
   
9.         </a>
   
10.       </li>
    
11.     </ul>
    
12.   </div>
    
13. </template>
    
14. 
    
15. <script>
    
16. export default {
    
17.   data() {
    
18.     return {
    
19.       newsItems: [
    
20.         { title: "全国人大代表大会第二次全体会议热议", link: "#", color: "col1" },
    
21.         { title: "新冠疫苗接种工作进展顺利", link: "#", color: "col2" },
    
22.         { title: "科技公司发布最新智能手机", link: "#", color: "col3" },
    
23.         { title: "气候变化引发全球关注", link: "#", color: "" },
    
24.         { title: "2023年经济增长预测", link: "#", color: "" },
    
25.         { title: "国际奥委会宣布新一届奥运会举办城市", link: "#", color: "" },
    
26.         { title: "明星大咖出席电影首映礼", link: "#", color: "" },
    
27.         { title: "新研究揭示宇宙奥秘", link: "#", color: "" },
    
28.       ],
    
29.     };
    
30.   },
    
31. };
    
32. </script>
    
33. 
    
34. <style scoped>
    
35. .news {
    
36.   width: 360px;
    
37.   margin: 50px auto;
    
38.   border: 1px solid #ddd;
    
39.   padding: 15px;
    
40.   border-radius: 8px; /* 添加圆角 */
    
41.   box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* 添加阴影 */
    
42.   background-color: #fff; /* 背景颜色 */
    
43. }
    
44. 
    
45. body {
    
46.   margin: 0;
    
47.   padding: 0;
    
48.   font-family: Arial, sans-serif; /* 设置字体 */
    
49. }
    
50. 
    
51. h3 {
    
52.   font-size: 20px; /* 增大标题字体 */
    
53.   margin-bottom: 20px;
    
54.   color: #333; /* 标题颜色 */
    
55. }
    
56. 
    
57. ul {
    
58.   list-style: none;
    
59.   margin: 0;
    
60.   padding: 0;
    
61. }
    
62. 
    
63. li {
    
64.   height: 40px; /* 增加行高 */
    
65.   line-height: 40px; /* 增加行高 */
    
66.   border-bottom: 1px dotted gray;
    
67. }
    
68. 
    
69. a {
    
70.   font-size: 16px;
    
71.   color: #333;
    
72.   text-decoration: none;
    
73.   display: flex; /* 使用 flexbox */
    
74.   align-items: center; /* 垂直居中 */
    
75. }
    
76. 
    
77. a:hover {
    
78.   color: red;
    
79. }
    
80. 
    
81. span {
    
82.   margin-right: 10px;
    
83.   font-weight: bold;
    
84. }
    
85. 
    
86. .col1 {
    
87.   color: red;
    
88. }
    
89. 
    
90. .col2 {
    
91.   color: #ff5c55;
    
92. }
    
93. 
    
94. .col3 {
    
95.   color: #ffa552;
    
96. }
    
97. 
    
98. tbody tr:hover {
    
99.   background: #f0f0f0; /* 悬停行的背景颜色 */
    
100. }
     
101. </style>

复制代码

我把代码奉上

这个我也是用vue3写的

奉上几个案例，全当抛砖引玉