前卫的网页样式设计:

电脑技术 电脑技术 97 人阅读 | 4 人回复 | 2024-12-07

马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。

您需要 登录 才可以下载或查看,没有账号?立即注册

x
QQ截图20241207205944.png


总结的很到位

回答|共 4 个

legs+ 发表于 5 天前| 字数 131 | 显示全部楼层

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

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

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

希望大家喜欢

legs+ 发表于 3 天前| 字数 1,771 | 显示全部楼层

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

QQ20241209-161606.png


当然,我这个程序是用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. <script>
  15. export default {
  16.   data() {
  17.     return {
  18.       newsItems: [
  19.         { title: "全国人大代表大会第二次全体会议热议", link: "#", color: "col1" },
  20.         { title: "新冠疫苗接种工作进展顺利", link: "#", color: "col2" },
  21.         { title: "科技公司发布最新智能手机", link: "#", color: "col3" },
  22.         { title: "气候变化引发全球关注", link: "#", color: "" },
  23.         { title: "2023年经济增长预测", link: "#", color: "" },
  24.         { title: "国际奥委会宣布新一届奥运会举办城市", link: "#", color: "" },
  25.         { title: "明星大咖出席电影首映礼", link: "#", color: "" },
  26.         { title: "新研究揭示宇宙奥秘", link: "#", color: "" },
  27.       ],
  28.     };
  29.   },
  30. };
  31. </script>

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

  42. body {
  43.   margin: 0;
  44.   padding: 0;
  45.   font-family: Arial, sans-serif; /* 设置字体 */
  46. }

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

  52. ul {
  53.   list-style: none;
  54.   margin: 0;
  55.   padding: 0;
  56. }

  57. li {
  58.   height: 40px; /* 增加行高 */
  59.   line-height: 40px; /* 增加行高 */
  60.   border-bottom: 1px dotted gray;
  61. }

  62. a {
  63.   font-size: 16px;
  64.   color: #333;
  65.   text-decoration: none;
  66.   display: flex; /* 使用 flexbox */
  67.   align-items: center; /* 垂直居中 */
  68. }

  69. a:hover {
  70.   color: red;
  71. }

  72. span {
  73.   margin-right: 10px;
  74.   font-weight: bold;
  75. }

  76. .col1 {
  77.   color: red;
  78. }

  79. .col2 {
  80.   color: #ff5c55;
  81. }

  82. .col3 {
  83.   color: #ffa552;
  84. }

  85. tbody tr:hover {
  86.   background: #f0f0f0; /* 悬停行的背景颜色 */
  87. }
  88. </style>
复制代码
我把代码奉上
QQ20241209-161606.png

legs+ 发表于 3 天前| 字数 12 | 显示全部楼层

QQ20241209-162136.png


这个我也是用vue3写的

legs+ 发表于 3 天前| 字数 13 | 显示全部楼层

奉上几个案例,全当抛砖引玉
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则