当前位置:   article > 正文

【HTML+CSS】小兔鲜儿网站首页(静态网页)_htmlcss首页代码

htmlcss首页代码

目  录

一、项目介绍

二、网页示意图

三、开发流程

1.前期准备工作

2.编辑基本样式(base.css)

3.快捷导航部分

3.1 HTML部分

3.2 common.css部分

4.尾部版权部分

4.1 HTML部分

4.2 common.css部分

5.banner图部分

5.1 HTML部分

5.2 index.css部分

6.新鲜好物部分

6.1 HTML部分

6.2 index.css部分

7.生鲜部分

7.1 HTML部分

7.2 index.css部分


一、项目介绍

    小兔鲜儿网站首页是利用HTML+CSS进行开发,网站首页包括四部分内容,分别是快捷导航、banner图、新鲜好物、生鲜、尾部版权。

二、网页示意图

 

 

 

 三、开发流程

1.前期准备工作

        创建如下图所示的文件目录,css文件夹包含三个css文件,分别是base.css、common.css、index.css,images存放固定的照片,uploads存放随时更新的照片。

        base.css主要对首页的基本样式进行编辑。

        common.css主要对所有页面的重复部分进行编辑,包括快捷导航和尾部版权部分。

        index.css主要对网站首页其余部分进行编辑,包括banner图、新鲜好物、生鲜部分。

2.编辑基本样式(base.css)

  1. /* 基础公共样式 */
  2. /* 清除默认样式的代码 */
  3. /* 去除常见标签默认的 margin 和 padding */
  4. body,
  5. h1,
  6. h2,
  7. h3,
  8. h4,
  9. h5,
  10. h6,
  11. p,
  12. ul,
  13. ol,
  14. li,
  15. dl,
  16. dt,
  17. dd,
  18. input {
  19. margin: 0;
  20. padding: 0;
  21. }
  22. /* 內减模式 */
  23. * {
  24. box-sizing: border-box;
  25. }
  26. /* 设置网页统一的字体大小、行高、字体系列相关属性 */
  27. body {
  28. font: 16px/1.5 "Helvetica Neue", Helvetica, Arial, "Microsoft Yahei",
  29. "Hiragino Sans GB", "Heiti SC", "WenQuanYi Micro Hei", sans-serif;
  30. color: #333;
  31. }
  32. /* 去除列表默认样式 */
  33. ul,
  34. ol {
  35. list-style: none;
  36. }
  37. /* 去除默认的倾斜效果 */
  38. em,
  39. i {
  40. font-style: normal;
  41. }
  42. /* 去除a标签默认下划线,并设置默认文字颜色 */
  43. a {
  44. text-decoration: none;
  45. color: #333;
  46. }
  47. /* 设置img的垂直对齐方式为居中对齐,去除img默认下间隙 */
  48. img {
  49. vertical-align: middle;
  50. }
  51. /* 去除input默认样式 */
  52. input {
  53. border: none;
  54. outline: none;
  55. color: #333;
  56. }
  57. /* 左浮动 */
  58. .fl {
  59. float: left;
  60. }
  61. /* 右浮动 */
  62. .fr {
  63. float: right;
  64. }
  65. /* 双伪元素清除法 */
  66. .clearfix::before,
  67. .clearfix::after {
  68. content: "";
  69. display: table;
  70. }
  71. .clearfix::after {
  72. clear: both;
  73. }

3.快捷导航部分

3.1 HTML部分

  1. <!-- 快捷导航 -->
  2. <div class="shortcut">
  3. <div class="wrapper">
  4. <ul>
  5. <li><a href="#">请先登录</a></li>
  6. <li><a href="#">免费注册</a></li>
  7. <li><a href="#">我的订单</a></li>
  8. <li><a href="#">会员中心</a></li>
  9. <li><a href="#">帮助中心</a></li>
  10. <li><a href="#">在线客服</a></li>
  11. <li><a href="#"><span></span>请先登录</a></li>
  12. </ul>
  13. </div>
  14. </div>
  15. <!-- 头部 -->
  16. <div class="header wrapper">
  17. <div class="logo">
  18. <h1><a href="#">小兔鲜儿</a></h1>
  19. </div>
  20. <div class="nav">
  21. <ul>
  22. <li><a href="#">首页</a></li>
  23. <li><a href="#">生鲜</a></li>
  24. <li><a href="#">美食</a></li>
  25. <li><a href="#">餐厨</a></li>
  26. <li><a href="#">电器</a></li>
  27. <li><a href="#">居家</a></li>
  28. <li><a href="#">洗护</a></li>
  29. <li><a href="#">孕婴</a></li>
  30. <li><a href="#">服装</a></li>
  31. </ul>
  32. </div>
  33. <div class="search">
  34. <input type="text" placeholder="搜一搜">
  35. <!-- 定位实现放大镜 -->
  36. <span></span>
  37. </div>
  38. <div class="car">
  39. <span>2</span>
  40. </div>
  41. </div>

3.2 common.css部分

  1. /* 各个页面相同的样式表 */
  2. /* 版心 */
  3. .wrapper{
  4. width: 1240px;
  5. margin: 0 auto;
  6. }
  7. .shortcut{
  8. height: 52px;
  9. background-color: #333;
  10. }
  11. .shortcut .wrapper{
  12. height: 52px;
  13. }
  14. .shortcut .wrapper ul{
  15. float:right;
  16. }
  17. .shortcut .wrapper li{
  18. float: left;
  19. line-height: 52px;
  20. }
  21. .shortcut .wrapper a{
  22. padding: 0 16px;
  23. border-right: 1px solid #666;
  24. font-size: 14px;
  25. color: #dcdcdc;
  26. }
  27. .shortcut .wrapper li:nth-child(7) a{
  28. border-right: 0;
  29. }
  30. .shortcut .wrapper a span{
  31. display: inline-block;
  32. width: 11px;
  33. height: 16px;
  34. background-image: url(../images/sprites.png);
  35. background-position: -160px -70px;
  36. vertical-align: middle;
  37. margin-right: 8px;
  38. }
  39. /* 头部 */
  40. .header{
  41. margin: 30px auto;
  42. height: 70px;
  43. }
  44. .logo{
  45. float: left;
  46. width: 205px;
  47. height: 70px;
  48. }
  49. /* logo搜索引擎优化做法 */
  50. .logo h1{
  51. width: 205px;
  52. height: 70px;
  53. }
  54. .logo h1 a{
  55. display: block;
  56. width: 205px;
  57. height: 70px;
  58. background-image: url(../images/logo.png);
  59. background-size: contain;
  60. /* 字号归零,让h1里的字看不到 */
  61. font-size: 0;
  62. }
  63. .nav li{
  64. float: left;
  65. margin-right: 48px;
  66. line-height: 70px;
  67. }
  68. .nav li a{
  69. padding-bottom: 7px;
  70. }
  71. .nav li a:hover{
  72. color: #27ba9b;
  73. border-bottom:1px solid #27ba9b
  74. }
  75. .nav{
  76. float: left;
  77. margin-left: 40px;
  78. height: 70px;
  79. }
  80. .search{
  81. position: relative;
  82. float: left;
  83. margin-top: 24px;
  84. margin-left: 34px;
  85. width: 172px;
  86. height: 30px;
  87. border-bottom: 2px solid #e7e7e7;
  88. }
  89. .search input{
  90. padding-left: 30px;
  91. width: 172px;
  92. height: 28px;
  93. }
  94. .search input::placeholder{
  95. font-size: 14px;
  96. color: #ccc;
  97. }
  98. .search span{
  99. position: absolute;
  100. left: 2px;
  101. top: 0;
  102. /* display: inline-block; */
  103. width: 18px;
  104. height: 18px;
  105. background-image: url(../images/sprites.png);
  106. background-position: -79px -69px;
  107. }
  108. .car{
  109. position:relative;
  110. float: left;
  111. margin-top: 28px;
  112. margin-left: 15px;
  113. width: 23px;
  114. height: 23px;
  115. background-image: url(../images/sprites.png);
  116. background-position: -119px -69px ;
  117. }
  118. .car span{
  119. /* 绝对定位,盒子具备行内块特点 */
  120. position: absolute;
  121. right: -13px;
  122. top: -6px;
  123. width: 20px;
  124. height: 15px;
  125. background-color: #e26237;
  126. border-radius: 8px;
  127. font-size: 13px;
  128. color: #fff;
  129. text-align: center;
  130. line-height: 15px;
  131. }

4.尾部版权部分

4.1 HTML部分

  1. <!-- 尾部(版权区域)-->
  2. <div class="footer">
  3. <div class="wrapper">
  4. <div class="top">
  5. <ul>
  6. <li>
  7. <!-- 通过伪元素添加标签实现精灵图 -->
  8. <span>价格亲民</span>
  9. </li>
  10. <li>
  11. <span>物流快捷</span>
  12. </li>
  13. <li>
  14. <span>品质新鲜</span>
  15. </li>
  16. </ul>
  17. </div>
  18. <div class="bottom">
  19. <p>
  20. <a href="#">关于我们</a> |
  21. <a href="#">帮助中心</a> |
  22. <a href="#">售后服务</a> |
  23. <a href="#">配送与验收</a> |
  24. <a href="#">商务合作</a> |
  25. <a href="#">搜索推荐</a> |
  26. <a href="#">友情链接</a> |
  27. </p>
  28. <p>
  29. CopyRight@小兔鲜儿
  30. </p>
  31. </div>
  32. </div>
  33. </div>

4.2 common.css部分

  1. /* 尾部(版权区域) */
  2. .footer{
  3. height: 342px;
  4. background-color: #333;
  5. }
  6. .footer .wrapper{
  7. width: 1393px;
  8. }
  9. .footer .top{
  10. padding-top: 60px;
  11. padding-left: 135px;
  12. height: 175px;
  13. border-bottom: 3px solid #434343;
  14. }
  15. .footer .top li{
  16. position: relative;
  17. float: left;
  18. margin-right: 300px;
  19. width: 195px;
  20. height: 58px;
  21. line-height: 58px;
  22. }
  23. .footer .top li:last-child{
  24. margin-right: 0;
  25. }
  26. /* 伪元素添加的标签是行内显示模式 */
  27. .footer .top li::before{
  28. position: absolute;
  29. /* display: inline-block; */
  30. content: '';
  31. width: 58px;
  32. height: 58px;
  33. background-image: url(../images/sprites.png);
  34. vertical-align: middle;
  35. }
  36. .footer .top li span{
  37. margin-left: 80px;
  38. font-size: 28px;
  39. color: #fff;
  40. }
  41. /* 第二个li里边的before添加背景图位置属性 */
  42. .footer .top li:nth-child(2)::before{
  43. background-position: -64px 0;
  44. }
  45. /* 第三个li里边的before添加背景图位置属性 */
  46. .footer .top li:nth-child(3)::before{
  47. background-position: -130px 0;
  48. }
  49. .footer .bottom{
  50. padding-top:40px ;
  51. font-size: 14px;
  52. color: #999;
  53. text-align: center;
  54. }
  55. .footer .bottom a {
  56. font-size: 14px;
  57. color: #999;
  58. }
  59. .footer .bottom p{
  60. margin-bottom: 20px;
  61. }

5.banner图部分

5.1 HTML部分

  1. <!-- banner图区域 -->
  2. <div class="banner">
  3. <div class="wrapper">
  4. <!-- 有多少个图,就有多少个li -->
  5. <ul>
  6. <li><a href="#"><img src="./uploads/banner_1.png" alt=""></a></li>
  7. </ul>
  8. <!-- 侧导航 -->
  9. <div class="aside">
  10. <ul>
  11. <li><a href="#">生鲜<span>水果 蔬菜</span></a></li>
  12. <li><a href="#">美食<span>面点 干果</span></a></li>
  13. <li><a href="#">餐厨<span>数码产品</span></a></li>
  14. <li><a href="#">电器<span>床品 四件套 被枕</span></a></li>
  15. <li><a href="#">居家<span>奶粉 玩具 辅食</span></a></li>
  16. <li><a href="#">洗护<span>洗发水 美妆</span></a></li>
  17. <li><a href="#">孕婴<span>奶粉 玩具</span></a></li>
  18. <li><a href="#">服饰<span>男装 女装</span></a></li>
  19. <li><a href="#">杂货<span>户外 图书</span></a></li>
  20. <li><a href="#">品牌<span>品牌制造</span></a></li>
  21. </ul>
  22. </div>
  23. <!-- 箭头 -->
  24. <!-- prev:上一个 -->
  25. <a href="#" class="prev"></a>
  26. <!-- next:下一个 -->
  27. <a href="#" class="next"></a>
  28. <!-- 底部原点 -->
  29. <!-- 描述选中状态: current/active-->
  30. <ol>
  31. <li></li>
  32. <li></li>
  33. <li class="current"></li>
  34. <li></li>
  35. <li></li>
  36. </ol>
  37. </div>
  38. </div>

5.2 index.css部分

  1. /* banner */
  2. .banner {
  3. height: 500px;
  4. background-color: #f5f5f5;
  5. }
  6. .banner .wrapper {
  7. position: relative;
  8. height: 500px;
  9. background-color: pink;
  10. }
  11. /* 侧导航 */
  12. .banner .aside{
  13. position: absolute;
  14. left:0;
  15. top: 0;
  16. width: 250px;
  17. height: 500px;
  18. background-color: rgba(0,0,0,.8);
  19. }
  20. .banner .aside li{
  21. height: 50px;
  22. line-height: 50px;
  23. }
  24. .banner .aside a{
  25. position: relative;
  26. padding-left: 35px;
  27. padding-right: 19px;
  28. /* 宽度和父级一样 */
  29. display: block;
  30. height: 50px;
  31. font-size: 16px;
  32. color: #fff;
  33. }
  34. .banner .aside span{
  35. margin-left: 15px;
  36. font-size: 14px;
  37. }
  38. .banner .aside a:hover{
  39. background-color: #27ba9b;
  40. }
  41. /* a的里边最后的位置添加箭头 */
  42. .banner .aside a::after{
  43. position: absolute;
  44. right: 19px;
  45. top: 19px;
  46. content: '';
  47. width: 6px;
  48. height: 11px;
  49. background-image: url(../images/sprites.png);
  50. background-position:-80px -110px;
  51. }
  52. /* 箭头部分 */
  53. .prev,
  54. .next{
  55. position: absolute;
  56. top:228px;
  57. width: 45px;
  58. height: 45px;
  59. background-color: rgba(0,0,0,.2);
  60. background-image: url(../images/sprites.png);
  61. border-radius: 50%;
  62. }
  63. .prev{
  64. left:260px;
  65. background-position: 15px -60px;
  66. }
  67. .next{
  68. right: 10px;
  69. background-position: -23px -60px;
  70. }
  71. /* 底部原点 */
  72. .banner ol{
  73. position: absolute;
  74. left: 680px;
  75. bottom: 30px;
  76. width: 200px;
  77. height: 10px;
  78. }
  79. .banner ol li{
  80. float: left;
  81. margin-right: 15px;
  82. border-radius: 50%;
  83. width: 10px;
  84. height: 10px;
  85. background-color:rgba(255,255,255,0.4);
  86. cursor: pointer;
  87. }
  88. .banner ol .current{
  89. background-color: #fff;
  90. }

6.新鲜好物部分

6.1 HTML部分

  1. <!-- 新鲜好物 -->
  2. <div class="goods wrapper">
  3. <!-- hd header 头部-->
  4. <div class="hd">
  5. <h2>新鲜好物 <span>新鲜出炉 品质靠谱</span></h2>
  6. <a href="#">查看全部</a>
  7. </div>
  8. <!-- bd body 身体、内容 -->
  9. <div class="bd clearfix">
  10. <ul>
  11. <li>
  12. <a href="#">
  13. <img src="./uploads/new_goods_1.jpg" alt="">
  14. <h3>睿米无线吸尘器F8</h3>
  15. <div><span>899</span></div>
  16. <b>新品</b>
  17. </a>
  18. </li>
  19. <li>
  20. <a href="#">
  21. <img src="./uploads/new_goods_2.jpg" alt="">
  22. <h3>智能环绕3D空调</h3>
  23. <div><span>1299</span></div>
  24. <b>新品</b>
  25. </a>
  26. </li>
  27. <li>
  28. <a href="#">
  29. <img src="./uploads/new_goods_3.jpg" alt="">
  30. <h3>广东糯米煲仔饭</h3>
  31. <div><span>129</span></div>
  32. <b>新品</b>
  33. </a>
  34. </li>
  35. <li>
  36. <a href="#">
  37. <img src="./uploads/new_goods_4.jpg" alt="">
  38. <h3>罗西机械智能手表</h3>
  39. <div><span>3399</span></div>
  40. <b>新品</b>
  41. </a>
  42. </li>
  43. </ul>
  44. </div>
  45. </div>

6.2 index.css部分

  1. /* 新鲜好物 */
  2. .goods .hd{
  3. height: 114px;
  4. line-height: 114px;
  5. }
  6. .goods .hd h2{
  7. float: left;
  8. height: 114px;
  9. font-size: 29px;
  10. font-weight: 400;
  11. }
  12. .goods .hd h2 span{
  13. margin-left: 34px;
  14. font-size: 16px;
  15. color:#999;
  16. }
  17. .goods .hd a{
  18. float:right;
  19. color:#999;
  20. }
  21. .goods .hd a::after{
  22. content: '';
  23. display: inline-block;
  24. margin-left: 15px;
  25. width: 7px;
  26. height: 13px;
  27. background-image: url(../images/sprites.png);
  28. background-position: 0 -110px;
  29. vertical-align: middle;
  30. }
  31. .goods .bd li{
  32. position: relative;
  33. float: left;
  34. margin-right: 8px;
  35. width: 304px;
  36. height: 405px;
  37. background-color: #f0f9f4;
  38. text-align: center;
  39. }
  40. .goods .bd li:nth-child(4n){
  41. margin-right: 0;
  42. }
  43. .goods .bd li img{
  44. width: 304px;
  45. }
  46. .goods .bd li h3{
  47. margin: 20px 0 10px 0;
  48. font-size: 20px;
  49. font-weight: 400;
  50. }
  51. .goods .bd li div{
  52. color:#9a2e1f;
  53. font-size: 18px
  54. }
  55. .goods .bd li span{
  56. font-size: 24px;
  57. }
  58. .goods .bd li b{
  59. position: absolute;
  60. left: 17px;
  61. top: 18px;
  62. width: 28px;
  63. height: 51px;
  64. border: 1px solid #27ba9b;
  65. border-radius: 2px;
  66. font-size: 18px;
  67. color:#27ba9b;
  68. font-weight: 400;
  69. line-height: 24px;
  70. }

7.生鲜部分

7.1 HTML部分

  1. <!-- 生鲜 -->
  2. <div class="shengxian wrapper">
  3. <div class="hd">
  4. <h2>生鲜</h2>
  5. <a href="#" class="more">查看全部</a>
  6. <ul>
  7. <li><a href="#">水果</a></li>
  8. <li><a href="#">蔬菜</a></li>
  9. <li><a href="#">肉禽蛋</a></li>
  10. <li><a href="#">裤装</a></li>
  11. <li><a href="#">衬衫</a></li>
  12. <li><a href="#">T恤</a></li>
  13. <li><a href="#">内衣</a></li>
  14. </ul>
  15. </div>
  16. <div class="bd clearfix">
  17. <div class="left">
  18. <a href="#"><img src="./uploads/fresh_goods_cover.png" alt=""></a>
  19. </div>
  20. <div class="right">
  21. <ul>
  22. <li>
  23. <a href="#">
  24. <img src="./uploads/fresh_goods_1.jpg" alt="">
  25. <h3>美威 智利原味三文鱼排<br>
  26. 240g/袋 4片装<br>
  27. 海鲜年货</h3>
  28. <div><span>59</span></div>
  29. </a>
  30. </li>
  31. <li>
  32. <a href="#">
  33. <img src="./uploads/fresh_goods_2.jpg" alt="">
  34. <h3>红功夫 麻辣小龙虾1.5kg<br>
  35. 4-6钱/25-32只<br>
  36. 火锅食材</h3>
  37. <div><span>79</span></div>
  38. </a>
  39. </li>
  40. <li>
  41. <a href="#">
  42. <img src="./uploads/fresh_goods_3.jpg" alt="">
  43. <h3>三都港 冷冻无公害黄花鱼<br>
  44. 700g 2条 袋装<br>
  45. 海鲜水产</h3>
  46. <div><span>49</span></div>
  47. </a>
  48. </li>
  49. <li>
  50. <a href="#">
  51. <img src="./uploads/fresh_goods_4.jpg" alt="">
  52. <h3>渔公码头 大连鲜食入味<br>
  53. 即食海参 辽参刺参<br>
  54. 调味海</h3>
  55. <div><span>899</span></div>
  56. </a>
  57. </li>
  58. <li>
  59. <a href="#">
  60. <img src="./uploads/fresh_goods_5.jpg" alt="">
  61. <h3>越南白心火龙果4个装<br>
  62. 标准果400-550g<br>
  63. 新鲜水果</h3>
  64. <div><span>20</span></div>
  65. </a>
  66. </li>
  67. <li>
  68. <a href="#">
  69. <img src="./uploads/fresh_goods_6.jpg" alt="">
  70. <h3>广西沃柑 新鲜水果<br>
  71. 柑橘1.5kg<br>
  72. 新鲜水果</h3>
  73. <div><span>10</span></div>
  74. </a>
  75. </li>
  76. <li>
  77. <a href="#">
  78. <img src="./uploads/fresh_goods_7.jpg" alt="">
  79. <h3>进口 牛油果 6个装<br>
  80. 单果重约130-180g<br>
  81. 新鲜水果</h3>
  82. <div><span>50</span></div>
  83. </a>
  84. </li>
  85. <li>
  86. <a href="#">
  87. <img src="./uploads/fresh_goods_8.jpg" alt="">
  88. <h3>泰国进口山竹5A级 500g<br>
  89. 新鲜水果</h3>
  90. <div><span>60</span></div>
  91. </a>
  92. </li>
  93. </ul>
  94. </div>
  95. </div>
  96. </div>

7.2 index.css部分

  1. /* 生鲜 */
  2. .shengxian .hd{
  3. height: 96px;
  4. line-height :96px;
  5. }
  6. .shengxian .hd h2{
  7. float: left;
  8. height: 96x;
  9. font-size: 29px;
  10. font-weight: 400;
  11. }
  12. .shengxian .hd .more{
  13. float:right;
  14. color:#999;
  15. }
  16. .shengxian .hd .more::after{
  17. content: '';
  18. display: inline-block;
  19. margin-left: 15px;
  20. width: 7px;
  21. height: 13px;
  22. background-image: url(../images/sprites.png);
  23. background-position: 0 -110px;
  24. vertical-align: middle;
  25. }
  26. .shengxian .hd ul{
  27. float: right;
  28. margin-right: 65px;
  29. }
  30. .shengxian .hd ul li{
  31. float: left;
  32. }
  33. .shengxian .hd ul li a{
  34. padding: 2px 7px;
  35. margin: 0 6px;
  36. }
  37. .shengxian .hd ul li a:hover{
  38. background-color: #27ba9b;
  39. color: #fff;
  40. }
  41. .shengxian .bd .left{
  42. float: left;
  43. width: 240px;
  44. height: 610px;
  45. }
  46. .shengxian .bd .right{
  47. float: right;
  48. width: 990px;
  49. height: 610px;
  50. }
  51. .shengxian .bd .right li{
  52. float: left;
  53. margin-right: 8px;
  54. margin-bottom: 8px;
  55. width: 240px;
  56. height: 300px;
  57. }
  58. .shengxian .bd .right li:nth-child(4n){
  59. margin-right: 0;
  60. }
  61. .shengxian .bd .right li:hover{
  62. border: 2px solid #27ba9b;
  63. }
  64. .shengxian .bd .right li img{
  65. width: 232px;
  66. height: 200px;
  67. }
  68. .shengxian .bd .right li h3{
  69. width: 232px;
  70. font-size: 14px;
  71. font-weight: 700;
  72. }
  73. .shengxian .bd .right li div{
  74. color:#9a2e1f;
  75. font-size: 18px
  76. }
  77. .shengxian .bd .right li span{
  78. font-size: 24px;
  79. }
声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/盐析白兔/article/detail/612210
推荐阅读
相关标签
  

闽ICP备14008679号