search

博客列表 >前端布局小案例（采用float+position布局等传统布局）-PHP培训十期线上班

前端布局小案例（采用float+position布局等传统布局）-PHP培训十期线上班

方小生
方小生原创
2019年12月23日 17:38:44992浏览

12月21日到22日作业

今天就要开始布局的知识练习了，好了，废话不多说，先看效果图
float布局小案例
图1 float布局

整体结构大概分为三个部分：header（头部）、nav（导航部分）、section（轮播部分）
这三个部分最外层套了一个div，用于将整体内容部分居中和限制宽度；
横排排列采用float；
中间导航部分采用表格布局；ps：会出现高度塌陷情况，外层的nav没有高度，设置了overflow:auto无效；后面采用清除效果

ps：代码还需优化，没有做到自适应，图片应设置为百分比让其随窗口大小改变而改变

具体实现代码：

css文件:index.css

  1. .space{
  2.     margin:auto;
  3.     width:1210px;
  4. }
  5. /*头部*/
  6. .header{
  7.     height:80px;
  8.     padding:20px 0;
  9.     box-sizing:content-box;
  10. }
  11. .logo-box{
  12.     float:left;
  13. }
  14. .icon-jinduchaxun{
  15.     position:relative;
  16.     left:-30px;
  17. }
  18. .header-right{
  19.     float:right;
  20.     height:80px;
  21.     line-height:80px
  22. }
  23. /*搜索框*/
  24. .search-box{
  25.     float:left;
  26. }
  27. .search{
  28.     border:1px solid #c0c0c0;
  29.     width:335px;
  30.     height:32px;
  31.     border-radius:8px;
  32.     padding:0 30px 0 10px;
  33.     box-sizing:border-box;
  34. }
  35. .icon-box{float:right}
  36. .icon-box .iconfont{
  37.     font-size:34px;
  38.     margin:0 9px;
  39. }
  40. /*导航*/
  41. .nav{display:block;width:100%;overlow：auto}
  42. .nav-box{
  43.     width:290px;
  44.     height:50px;
  45.     float:left;
  46. }
  47. .right-space{
  48.     margin-right:8px;
  49. }
  50. .nav-box .iconfont{
  51.     font-size:40px;
  52.     color:red;
  53. }
  54. .nav-box td{
  55.     padding:0 7px;
  56. }
  57. .nav-box .right-line{
  58.     border-right:1px solid #c0c0c0;
  59. }
  60. /*轮播*/
  61. .lunbo{
  62.     display:block;
  63.     margin:40px 0;
  64. }
  65. .lunbo img{
  66.     height:320px;
  67. }

html文件：index.html

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.     <!--<head> 标签用于定义文档的头部,描述了文档的各种属性和信息-->
  4.     <head>
  5.         <meta charset="UTF-8">
  6.         <title>float+position布局</title>
  7.         <link rel="stylesheet" type="text/css" href="./css/reset.css">
  8.         <link rel="stylesheet" type="text/css" href="./font/iconfont.css">
  9.         <link rel="stylesheet" type="text/css" href="./css/index.css">
  10.     </head>
  11. <body>
  12. <div class="space">
  13.     <!--头部-->
  14.     <header>
  15.         <div class="header">
  16.             <div class="logo-box">
  17.                 <img class="logo" src="images/logo.png">
  18.             </div>
  19.             <div class="header-right">
  20.                 <div class="search-box">
  21.                     <input class="search" type="search" name="">
  22.                     <span class="iconfont icon-jinduchaxun"></span>
  23.                 </div>
  24.                 <div class="icon-box">
  25.                     <span class="iconfont icon-huiyuan1"></span>
  26.                     <span class="iconfont icon-danmu1"></span>
  27.                     <span class="iconfont icon-fabu"></span>
  28.                     <span class="iconfont icon-fangda"></span>
  29.                     <span class="iconfont icon-huiyuan2"></span>
  30.                     <span class="iconfont icon-dianzan"></span>
  31.                 </div>
  32.             </div>
  33.         </div>
  34.     </header>
  35.     <!--导航-->
  36.     <nav class="nav">
  37.         <!--资讯-->
  38.         <table class="nav-box right-space" border-collapse="collapse" align="center" cellpadding="10" cellspacing="0" border="0">
  39.             <tbody>
  40.             <tr>
  41.                 <td rowspan="2">
  42.                     <span class="iconfont icon-gongdan"></span>
  43.                 </td>
  44.                 <td class="right-line">资讯</td>
  45.                 <td>器材</td>
  46.                 <td>大师</td>
  47.                 <td>学院</td>
  48.                 <td>实战</td>
  49.             </tr>
  50.             <tr>
  51.                 <td class="right-line">学习</td>
  52.                 <td>大赛</td>
  53.                 <td>裤子</td>
  54.                 <td>影视</td>
  55.                 <td>其它</td>
  56.             </tr>
  57.             </tbody>
  58.         </table>
  59.         <!--爱好-->
  60.         <table class="nav-box right-space" border-collapse="collapse" align="center" cellpadding="10" cellspacing="0" border="0">
  61.             <tbody>
  62.             <tr>
  63.                 <td rowspan="2">
  64.                     <span class="iconfont icon-icon_renwujincheng"></span>
  65.                 </td>
  66.                 <td class="right-line">爱好</td>
  67.                 <td>有品</td>
  68.                 <td>图片</td>
  69.                 <td>喝水</td>
  70.                 <td>飞机</td>
  71.             </tr>
  72.             <tr>
  73.                 <td class="right-line">姐妹</td>
  74.                 <td>坦克</td>
  75.                 <td>气球</td>
  76.                 <td>毛线</td>
  77.                 <td>其它</td>
  78.             </tr>
  79.             </tbody>
  80.         </table>
  81.         <!--软件-->
  82.         <table class="nav-box right-space" border-collapse="collapse" align="center" cellpadding="10" cellspacing="0" border="0">
  83.             <tbody>
  84.             <tr>
  85.                 <td rowspan="2">
  86.                     <span class="iconfont icon-gongdan"></span>
  87.                 </td>
  88.                 <td class="right-line">软件</td>
  89.                 <td>学习</td>
  90.                 <td>爱国</td>
  91.                 <td>敬业</td>
  92.                 <td>友善</td>
  93.             </tr>
  94.             <tr>
  95.                 <td class="right-line">技能</td>
  96.                 <td>富强</td>
  97.                 <td>互助</td>
  98.                 <td>仁义</td>
  99.                 <td>其它</td>
  100.             </tr>
  101.             </tbody>
  102.         </table>
  103.         <!--编程-->
  104.         <table class="nav-box" border-collapse="collapse" align="center" cellpadding="10" cellspacing="0" border="0">
  105.             <tbody>
  106.             <tr>
  107.                 <td rowspan="2">
  108.                     <span class="iconfont icon-DOC"></span>
  109.                 </td>
  110.                 <td class="right-line">编程</td>
  111.                 <td>吃饭</td>
  112.                 <td>周易</td>
  113.                 <td>黄山</td>
  114.                 <td>合肥</td>
  115.             </tr>
  116.             <tr>
  117.                 <td class="right-line">美女</td>
  118.                 <td>上海</td>
  119.                 <td>杭州</td>
  120.                 <td>北京</td>
  121.                 <td>其它</td>
  122.             </tr>
  123.             </tbody>
  124.         </table>
  125.     </nav>
  126.     <div style="width:100%;clear:both;"></div>
  127.     <!--轮播-->
  128.     <section class="lunbo">
  129.         <img class="pic-1" src="./images/2.jpg" alt="图1">
  130.         <img class="pic-2" src="./images/banner-right.jpg" alt="图2">
  131.     </section>
  132. </div>
  133. </body>
  134. </html>
上一条：1220_jquery选择器2 第37课下一条：1220作业
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多