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

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

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

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%;overlowauto}
  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>
声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议