devbox
weixin_40725706
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

网页常见布局案例解析+代码_简单页面布局代码

作者：weixin_40725706 | 2024-03-27 16:46:55

赞

踩

简单页面布局代码

第一块: header 

  1. <body>
  2.     <!-- ------------头部区域的开始------------------------------------------ -->
  3.     <!-- 多类名调用 -->
  4.     <div class="header w"> 
  5.         <!-- logo 部分 -->
  6.         <div class="logo">
  7.             <img src="images/logo.png" alt="" class="logo">
  8.         </div>
  9.         <!-- 导航栏用li包含a链接 -->
  10.         <div class="nav">
  11.             <ul>
  12.                 <li><a href="#">首页</a></li>
  13.                 <li><a href="#">课程</a></li>
  14.                 <li><a href="#">职业规划</a></li>
  15.             </ul>
  16.         </div>
  17.         <!-- 搜索 -->
  18.         <div class="search">
  19.             <input type="text" name="" id="" value="输入关键词">
  20.             <button>
  21.                 <img src="images/search.png" alt="" class="search_logo">
  22.             </button>
  23.         </div>
  24.         <!-- 用户 -->
  25.         <div class="user">
  26.             <img src="images/user.png" alt="" class="user_img">       
  27.             qq-lilei     
  28.         </div>
  29.  
  30.         
  31.     </div>
  32.     <!-- ------------头部区域的结束------------------------------------------ -->
  1.  
  2. * {
  3.     margin: 0;
  4.     padding: 0;
  5. }
  6. a {
  7.     text-decoration: none;
  8. }
  9. li {
  10.     list-style: none;
  11. }
  12. body {
  13.     background-color: #f3f5f7;
  14. }
  15.  
  16.  
  17. /* 版心 */
  18. .w {
  19.     width: 1200px;
  20.     margin: 0 auto;
  21. }
  22.  
  23. /*****************************头部 ***********************************/
  24. .header {
  25.     height: 40px;
  26.     /* background-color: pink; */
  27.     /* 会层叠w里面的margin，所以要左右要写auto */
  28.     margin: 30px auto;
  29. }
  30. .logo {
  31.     float: left;
  32.     height: 100%;
  33. }
  34. /* 导航栏 */
  35. .nav {
  36.     float: left;
  37.     margin-left: 60px;
  38. }
  39. .nav ul li {
  40.     /* 一行显示，横着排开 */
  41.     float: left;
  42.     margin: 0 15px;
  43. }
  44. .nav ul li a {
  45.     display: block;
  46.     /* 块级元素才有高度 */
  47.     height: 42px;
  48.     /* 不方便给宽度，用padding撑开 */
  49.     padding: 0 10px;
  50.     line-height: 42px;
  51.     font-size: 18px;
  52.     color: #050505;
  53. }
  54. .nav ul li a:hover {
  55.     /* 加下边框 */
  56.     border-bottom: 2px solid #00a4ff;
  57.     color: #00a4ff;
  58. }
  59. /* 搜索 */
  60. .search {
  61.     float: left;
  62.     width: 412px;
  63.     height: 42px;
  64.     /* background-color: skyblue; */
  65.     margin-left: 70px;
  66. }
  67.  
  68. .search input {
  69.     float: left;
  70.     width: 345px;
  71.     height: 40px;
  72.     border: 1px solid #00a4ff;
  73.     border-right: none;
  74.     /* “输入关键词” */
  75.     color: #bfbfbf;
  76.     font-size: 14px;
  77.     padding-left: 15px;
  78. }
  79. .search button {
  80.     float: right;
  81.     width: 50px;
  82.     height: 42px;
  83.     /* button 默认有个边框，手动去掉 */
  84.     border: 0;
  85.      
  86. }
  87. .search button .search_logo{
  88.     height: 100%;
  89. }
  90. .user {
  91.     float: right;
  92.     line-height: 42px;
  93.     height: 42px;
  94. }
  95. .user .user_img {
  96.     height: 100%;
  97.     border-radius: 70%;
  98. }

第二块:banner

大背景div蓝色+ 左中右三个div 

  1.    <div class="banner">
  2.         <!-- 放版心 -->
  3.         <div class="w">
  4.             <div class="subnav">
  5.                 <ul>
  6.                     <li><a href="#">前端开发 <span> &gt; </span></a></li>
  7.                     <li><a href="#">前端开发 <span> &gt; </span></a></li>
  8.                     <li><a href="#">前端开发 <span> &gt; </span></a></li>
  9.                     <li><a href="#">前端开发 <span> &gt; </span></a></li>
  10.                     <li><a href="#">前端开发 <span> &gt; </span></a></li>
  11.                     <li><a href="#">前端开发 <span> &gt; </span></a></li>
  12.                     <li><a href="#">前端开发 <span> &gt; </span></a></li>
  13.                     <li><a href="#">前端开发 <span> &gt; </span></a></li>
  14.                     <li><a href="#">前端开发 <span> &gt; </span></a></li>
  15.                 </ul>
  16.  
  17.             </div>
  18.             <!-- 课程表模块 -->
  19.             <div class="course">
  20.                 <h2>我的课程表</h2>
  21.                 <div class="bd">
  22.                     <ul>
  23.                         <li>
  24.                             <h4>继续学习 程序设计语言</h4>
  25.                             <p>正在学习-使用对象</p>
  26.                         </li>
  27.                         <li>
  28.                             <h4>继续学习 程序设计语言</h4>
  29.                             <p>正在学习-使用对象</p>
  30.                         </li>
  31.                         <li>
  32.                             <h4>继续学习 程序设计语言</h4>
  33.                             <p>正在学习-使用对象</p>
  34.                         </li>    
  35.                     </ul>
  36.                     <a href="#" class="more">全部课程</a>
  37.  
  38.                 </div>
  39.                  
  40.  
  41.             </div>
  42.         </div>
  43.     </div>
  1.  
  2. /*****************************banner ***********************************/
  3. .banner {
  4.     height: 421px;
  5.     background-color: #1c036c;
  6. }
  7. .banner .w {
  8.     height: 421px;
  9.     background: url(images/banner.jpg) no-repeat top center;
  10. }
  11. .subnav {
  12.     float: left;
  13.     width: 190px;
  14.     height: 421px;
  15.     background-color: #fff;
  16.     background: rgb(0,0,0,0.3);
  17. }
  18.  
  19. .subnav ul li {
  20.     height: 45px;
  21.     line-height: 45px;
  22.     margin: 0 20px;
  23.     /* padding: 0 20px; */
  24. }
  25.  
  26. .subnav ul li a {
  27.     font-size: 14px;
  28.     color: #fff;
  29. } 
  30. .subnav ul li a span {
  31.     float: right;
  32. }
  33. .subnav ul li a:hover {
  34.     color: #00a4ff;
  35. }
  36. .course {
  37.     float: right;
  38.     width: 230px;
  39.     height: 300px;
  40.     background-color: #fff;
  41.     margin-top: 50px;
  42.  
  43. }
  44. .course h2 {
  45.     height: 48px;
  46.     background-color: #9bceea;
  47.     text-align: center;
  48.     line-height: 48px;
  49.     font-size: 18px;
  50.     color: #fff;
  51. }
  52. .bd {
  53.     padding: 0 10px;
  54. }
  55. .bd ul li {
  56.     padding: 15px 0;
  57.     /* margin: 15px 0; 用padding 才能把使border-bottom的线不和文字贴合*/
  58.     border-bottom: 1px solid #ccc ;
  59. }
  60. .bd ul li h4 {
  61.     font-size: 16px;
  62.     color: #4e4e4e;
  63. }
  64. .bd ul li p {
  65.     font-size: 12px;
  66.     color: #a5a5a5;
  67. }
  68. .bd .more {
  69.     display: block;
  70.     height: 38px;
  71.     border: 1px solid #00a4ff;
  72.     margin-top: 5px;
  73.     line-height: 38px;
  74.     text-align: center;
  75.     font-size: 16px;
  76.     color: #00a4ff;
  77.     font-weight: 700px;
  78.     
  79. }

第三块 精品推荐

  1. <!-- ------------3.精品推荐区域的开始------------------------------------------ -->
  2.     <div class="goods w">
  3.         <h3>精品推荐</h3>
  4.         <ul>
  5.             <li><a href="#">JQuery</a></li>
  6.             <li><a href="#">JQuery</a></li>
  7.             <li><a href="#">JQuery</a></li>
  8.             <li><a href="#">JQuery</a></li>
  9.             <li><a href="#">JQuery</a></li>
  10.         </ul>
  11.         <a href="#" class="mod">修改兴趣</a>
  12.  
  13.     </div>

  1. /*****************************精品推荐版块 ***********************************/
  2. .goods {
  3.     height: 60px;
  4.     background-color: #fff;
  5.     margin-top: 10px;
  6.     /* 阴影: 水平  垂直 距离 透明度 */
  7.     box-shadow: 0 4px 3px 3px rgb(0,0,0,0.1) ;
  8.     line-height: 60px;
  9.  
  10. }
  11. /* 左边 */
  12. .goods h3 {
  13.     float: left;
  14.     margin-left: 30px;
  15.     font-size: 16px;
  16.     color: #00a4ff;
  17. }
  18. /* 中间 */
  19. .goods ul {
  20.     float: left;
  21.     margin-left: 30px;
  22.  
  23. }
  24. .goods ul li {
  25.     float: left;
  26.   
  27. }
  28. .goods ul li a {
  29.     padding: 0 30px;
  30.     font-size: 16px;
  31.     color: black;
  32.     border-left: 1px solid #ccc;
  33. }
  34. /* 右边 */
  35. .goods .mod {
  36.     float: right;
  37.     margin-right: 30px;
  38.     font-size: 14px;
  39.     color: #00a4ff;
  40. }

第四块 body

  1.    <!-- ------------4.核心内容区域的开始------------------------------------------ -->
  2.     <div class="box w" >
  3.         <div class="box-hd">
  4.             <h3>精品推荐</h3>
  5.             <a href="#">查看全部</a>
  6.         </div>
  7.  
  8.         <div class="box-bd">
  9.             <ul>
  10.                 <li>
  11.                     <img src="images/pic.png" alt="">
  12.                     <h4>Think PHP 5.0 博客系统实战项目演练</h4>
  13.                     <div class="info">
  14.                        <span> 高级</span> · 1125人在学习
  15.                     </div>
  16.                 </li>
  17.                 <li>
  18.                     <img src="images/pic.png" alt="">
  19.                     <h4>Think PHP 5.0 博客系统实战项目演练</h4>
  20.                     <div class="info">
  21.                        <span> 高级</span> · 1125人在学习
  22.                     </div>
  23.                 </li>
  24.                 <!-- 剩下的一样 -->
  25.                 <li>
  26.                     <img src="images/pic.png" alt="">
  27.                     <h4>Think PHP 5.0 博客系统实战项目演练</h4>
  28.                     <div class="info">
  29.                        <span> 高级</span> · 1125人在学习
  30.                     </div>
  31.                 </li>
  32.                 <li>
  33.                     <img src="images/pic.png" alt="">
  34.                     <h4>Think PHP 5.0 博客系统实战项目演练</h4>
  35.                     <div class="info">
  36.                        <span> 高级</span> · 1125人在学习
  37.                     </div>
  38.                 </li>
  39.                 <li> <img src="images/pic.png" alt="">
  40.                     <h4>Think PHP 5.0 博客系统实战项目演练</h4>
  41.                     <div class="info">
  42.                        <span> 高级</span> · 1125人在学习
  43.                     </div>
  44.                 </li>
  45.                 <li></li>
  46.                 <li></li>
  47.                 <li></li>
  48.                 <li></li>
  49.                 <li></li>
  50.             </ul>
  51.  
  52.         </div>
  53.  
  54.     </div>
  1.  
  2. /*****************************核心推荐版块 ***********************************/
  3. .box {
  4.     margin-top: 30px;
  5.  
  6. }
  7. .box-hd {
  8.     /* 清除浮动或者给hd高度, 不然下面的内容跑上去了*/
  9.     height: 45px;
  10. }
  11. .box-hd h3 {
  12.     float: left;
  13.     font-size: 20px;
  14.     color: #494949;
  15. }
  16. .box-hd a {
  17.     float: right;
  18.     font-size: 12px;
  19.     color: #a5a5a5;
  20.     margin-right: 30px;
  21. }
  22. /* 把li的父亲ul修改的足够宽,一行能装开5个盒子就不会换行了 */
  23. .box-bd ul {
  24.     width: 1225px;
  25. }
  26.  
  27. .box-bd ul li {
  28.     float: left;
  29.     width: 228px;
  30.     height: 270px;
  31.     background-color: #fff;
  32.     margin-right: 15px;
  33.     margin-bottom: 15px;
  34. }
  35. .box-bd ul li img {
  36.     width: 100%;
  37. }
  38. .box-bd ul li h4 {
  39.     margin: 20px 20px 20px 25px;
  40.     font-size: 14px;
  41.     color: #050505;
  42. }
  43. .box-bd .info {
  44.     margin: 0 20px 0 25px;
  45.     font-size: 12px;
  46.     color: #999
  47. }
  48. .box-bd .info span {
  49.     color: orange;
  50. }

 第五块 footer

1浮动问题

因为上一个板块body浮动了，所以footer的div会跑上面，要清除浮动

2 css添加清除浮动

  1. body {
  2.     background-color: #f3f5f7;
  3. }
  4. /* 清除浮动 */
  5. .clearfix:before, .clearfix::after {
  6.     content: "";
  7.     display: table;
  8. }
  9. .clearfix:after {
  10.     clear: both;
  11. }
  12. .clearfix {
  13.     *zoom:1;
  14. }

3 正文

  1.    <!-- ------------5.footer------------------------------------------ -->
  2.      <div class="footer">
  3.         <div class="w">
  4.             <div class="copyright">
  5.                 <img src="images/logo.png" alt="">
  6.                 <p>学成在线致力于普及中国最好的教育，它与中国一流大学和机构合作提供在线课程。<br>
  7.                     @ 2017年XTCG Inc.保留所有权利。-沪ICP备15025210号</p>
  8.                 <a href="#" class="app">下载APP</a>
  9.             </div>
  10.             <div class="links">
  11.                 <dl>
  12.                     <dt>关于学成网</dt>
  13.                     <dd> <a href="#">关于</a></dd>
  14.                     <dd> <a href="#">团队管理</a></dd>
  15.                     <dd> <a href="#">客户服务</a></dd>
  16.                     <dd> <a href="#">帮助</a></dd>
  17.                 </dl>
  18.                 <dl>
  19.                     <dt>关于学成网</dt>
  20.                     <dd> <a href="#">关于</a></dd>
  21.                     <dd> <a href="#">团队管理</a></dd>
  22.                     <dd> <a href="#">客户服务</a></dd>
  23.                     <dd> <a href="#">帮助</a></dd>
  24.                 </dl>
  25.                 <dl>
  26.                     <dt>关于学成网</dt>
  27.                     <dd> <a href="#">关于</a></dd>
  28.                     <dd> <a href="#">团队管理</a></dd>
  29.                     <dd> <a href="#">客户服务</a></dd>
  30.                     <dd> <a href="#">帮助</a></dd>
  31.                 </dl>
  32.             </div>
  33.  
  34.         </div>
  35.  
  36.      </div>
  1. /*****************************footer***********************************/
  2. .footer {
  3.     height: 415px;
  4.     background-color: #fff; /* 清除浮动 */
  5. }
  6. .footer .w {
  7.     /* 用margin有塌陷问题 */
  8.     padding-top: 35px; 
  9. }
  10. .copyright {
  11.     float: left;
  12. }
  13. .copyright p {
  14.    font-size: 16px;
  15.    color: #666;
  16.    margin: 20px 0 15px 0;
  17. }
  18. .copyright .app {
  19.     /* 链接行内元素,没大小,转换 */
  20.     display: block;
  21.     width: 118px;
  22.     height: 33px;
  23.     border: 1px solid #00a4ff;
  24.     text-align: center;
  25.     line-height: 33px;
  26.     font-size: 16px;
  27.     font-weight: 700px;
  28. }
  29. .links {
  30.     float: right;
  31. }
  32. .links dl {
  33.     float: left;
  34.     margin-left: 20px;
  35. }
  36. .links dl dt {
  37.     font-size: 16px;
  38.     color: #333;
  39.     margin-bottom: 5px;
  40. }
  41. .links dl dd a {
  42.     font-size: 12px;
  43.     color: #333;
  44. }

 dl 是自定义列表: 3.0 HTML 表格标签，列表-CSDN博客

页面设计小细节没有做，比如跳转链接没放，仅供参考

参考链接: 26-学成在线-精品推荐模块（下）_哔哩哔哩_bilibili

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/weixin_40725706/article/detail/325564
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号