论坛 › 电脑技术 › 前卫的网页样式设计：

legs+ 发表于 2024-12-7 21:01:50

前卫的网页样式设计：

总结的很到位

legs+ 发表于 2024-12-7 21:08:42

https://www.bilibili.com/video/BV1JY4y1W79E/?spm_id_from=333.999.0.0&vd_source=54629a941eeaa40a031e570ceae11bd7

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

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

希望大家喜欢

legs+ 发表于 2024-12-9 16:17:35

本帖最后由 legs+ 于 2024-12-9 16:19 编辑



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

<template>
<div class="news">
    <h3>百度新闻热榜</h3>
    <ul>
      <li v-for="(item, index) in newsItems" :key="index">
      <a :href="item.link">
          <span :class="item.color">{{ index + 1 }}</span>
          {{ item.title }}
      </a>
      </li>
    </ul>
</div>
</template>

<script>
export default {
data() {
    return {
      newsItems: [
      { title: "全国人大代表大会第二次全体会议热议", link: "#", color: "col1" },
      { title: "新冠疫苗接种工作进展顺利", link: "#", color: "col2" },
      { title: "科技公司发布最新智能手机", link: "#", color: "col3" },
      { title: "气候变化引发全球关注", link: "#", color: "" },
      { title: "2023年经济增长预测", link: "#", color: "" },
      { title: "国际奥委会宣布新一届奥运会举办城市", link: "#", color: "" },
      { title: "明星大咖出席电影首映礼", link: "#", color: "" },
      { title: "新研究揭示宇宙奥秘", link: "#", color: "" },
      ],
    };
},
};
</script>

<style scoped>
.news {
width: 360px;
margin: 50px auto;
border: 1px solid #ddd;
padding: 15px;
border-radius: 8px; /* 添加圆角 */
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* 添加阴影 */
background-color: #fff; /* 背景颜色 */
}

body {
margin: 0;
padding: 0;
font-family: Arial, sans-serif; /* 设置字体 */
}

h3 {
font-size: 20px; /* 增大标题字体 */
margin-bottom: 20px;
color: #333; /* 标题颜色 */
}

ul {
list-style: none;
margin: 0;
padding: 0;
}

li {
height: 40px; /* 增加行高 */
line-height: 40px; /* 增加行高 */
border-bottom: 1px dotted gray;
}

a {
font-size: 16px;
color: #333;
text-decoration: none;
display: flex; /* 使用 flexbox */
align-items: center; /* 垂直居中 */
}

a:hover {
color: red;
}

span {
margin-right: 10px;
font-weight: bold;
}

.col1 {
color: red;
}

.col2 {
color: #ff5c55;
}

.col3 {
color: #ffa552;
}

tbody tr:hover {
background: #f0f0f0; /* 悬停行的背景颜色 */
}
</style>我把代码奉上

legs+ 发表于 2024-12-9 16:22:42

这个我也是用vue3写的

legs+ 发表于 2024-12-9 16:25:57

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

查看完整版本: 前卫的网页样式设计：