PHP8.1.21版本已发布
vue8.1.21版本已发布
jquery8.1.21版本已发布

博客列表 > CSS学习用table和float+position两种方式进行网页布局-PHP第十期线上培训班

CSS学习用table和float+position两种方式进行网页布局-PHP第十期线上培训班

Dseven
Dseven 原创
2019年12月23日 08:55:19 679浏览

用传统方式完成网页布局(大作业1221-1222)

1.用table实现网页布局

代码:

  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport"
  6. content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  7. <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8. <title>全站首页导航与轮播图1220作业(table布局)</title>
  9. <link rel="stylesheet" href="../static/font/iconfont.css">
  10. <style>
  11. *{margin:0;padding:0;}
  12. /*设置主体宽度,并居中*/
  13. .mainbox
  14. {
  15. margin: 0 auto;
  16. width: 1200px;
  17. font-size: 13;
  18. color: #555555;
  19. }
  20. a
  21. {
  22. text-decoration: none;
  23. color:#666666;
  24. }
  25. /*设置搜索区块的定位类型,为子元素定位提供支持*/
  26. .tbsearch
  27. {
  28. position: relative;
  29. }
  30. /*设置搜索栏输入框的样式*/
  31. .tbsearch input
  32. {
  33. width: 333px;
  34. height: 36px;
  35. border: 1px solid #cccccc;
  36. border-radius: 10px;
  37. /*去掉轮廓线,获取焦点时不会出现蓝色边框*/
  38. outline: none;
  39. padding: 6px;
  40. position: relative;
  41. }
  42. .tbsearch input:hover
  43. {
  44. box-shadow: 0 0 5px #888888;
  45. }
  46. /*设置搜索栏图标的样式*/
  47. .tbsearch label
  48. {
  49. position: absolute;
  50. top: 5px;
  51. left: 370px;
  52. font-size: 28px;
  53. }
  54. /*设置快速入口链接的样式*/
  55. .tbquickentry a
  56. {
  57. font-size:33px;
  58. margin-left:12px;
  59. }
  60. /*设置鼠标滑过快速入口链接时的样式*/
  61. .tbquickentry a:hover
  62. {
  63. color:red;
  64. }
  65. /*设置导航栏四个图片的样式*/
  66. .navtablebox span
  67. {
  68. font-size: 39px;
  69. color: red;
  70. }
  71. /*设置导航区上下外边距*/
  72. .navtablebox{margin-bottom: 20px;margin-top: 20px;}
  73. </style>
  74. </head>
  75. <body>
  76. <div class="mainbox">
  77. <!-- 设置bannar区-->
  78. <table class="bannertablebox" width="1200px" >
  79. <tr>
  80. <td align="left" width="470px">
  81. <a href="www.php.cn"><img src="../images/logo.png" alt="log图片"></a>
  82. </td>
  83. <td align="right" width="410px">
  84. <div class="tbsearch" >
  85. <input type="search" name="search" id="search">
  86. <label for="search" class="iconfont icon-jinduchaxun"></label>
  87. </div>
  88. </td>
  89. <td width="300px" height="36px" align="right">
  90. <div class="tbquickentry">
  91. <a href="" class="iconfont icon-huiyuan1"></a>
  92. <a href="" class="iconfont icon-danmu1"></a>
  93. <a href="" class="iconfont icon-fabu"></a>
  94. <a href="" class="iconfont icon-fangda"></a>
  95. <a href="" class="iconfont icon-huiyuan2"></a>
  96. <a href="" class="iconfont icon-dianzan"></a>
  97. </div>
  98. </td>
  99. </tr>
  100. </table>
  101. <!-- 设置导航区-->
  102. <table class="navtablebox" width="1200px" cellspacing="0">
  103. <tr>
  104. <!-- 设置导航小图标-->
  105. <td rowspan="2" align="center" ><span class="iconfont icon-gongdan" ></span></td>
  106. <td width="40px">咨询</td>
  107. <!--设置间隔小竖线-->
  108. <td rowspan="2" width="6px" style="border-left: 1px solid gray"></td>
  109. <td><a href="">器材</a></td>
  110. <td><a href="">大师</a></td>
  111. <td><a href="">学院</a></td>
  112. <td><a href="">实战</a></td>
  113. <!--设置导航小图标前留白区域-->
  114. <td rowspan="2" width="10px"></td>
  115. <!-- 设置导航小图标-->
  116. <td rowspan="2" align="center"><span class="iconfont icon-renwujincheng"></span></td>
  117. <td width="40px">爱好</td>
  118. <!--置间隔小竖线-->
  119. <td rowspan="2" width="6px" style="border-left: 1px solid gray"></td>
  120. <td><a href="">有品</a></td>
  121. <td><a href="">图片</a></td>
  122. <td><a href="">喝水</a></td>
  123. <td><a href="">飞机</a></td>
  124. <!--设置导航小图标前留白区域-->
  125. <td rowspan="2" width="10px"></td>
  126. <!-- 设置导航小图标-->
  127. <td rowspan="2" align="center"><span class="iconfont icon-gongdan"></span></td>
  128. <td width="40px">软件</td>
  129. <!--置间隔小竖线-->
  130. <td rowspan="2" width="6px" style="border-left: 1px solid gray"></td>
  131. <td><a href="">学习</a></td>
  132. <td><a href="">爱国</a></td>
  133. <td><a href="">敬业</a></td>
  134. <td><a href="">友善</a></td>
  135. <!--设置导航小图标前留白区域-->
  136. <td rowspan="2" width="10px"></td>
  137. <!-- 设置导航小图标-->
  138. <td rowspan="2" align="center"><span class="iconfont icon-DOC" ></span></td>
  139. <td width="40px">编程</td>
  140. <!--置间隔小竖线-->
  141. <td rowspan="2" width="6px" style="border-left: 1px solid gray"></td>
  142. <td><a href="">吃饭</a></td>
  143. <td><a href="">周易</a></td>
  144. <td><a href="">黄山</a></td>
  145. <td><a href="">合肥</a></td>
  146. </tr>
  147. <tr>
  148. <td>学习</td>
  149. <td><a href="">大赛</a></td>
  150. <td><a href="">裤子</a></td>
  151. <td><a href="">影视</a></td>
  152. <td><a href="">其它</a></td>
  153. <td>姐妹</td>
  154. <td><a href="">坦克</a></td>
  155. <td><a href="">气球</a></td>
  156. <td><a href="">毛线</a></td>
  157. <td><a href="">其它</a></td>
  158. <td>技能</td>
  159. <td><a href="">富强</a></td>
  160. <td><a href="">互助</a></td>
  161. <td><a href="">仁义</a></td>
  162. <td><a href="">其它</a></td>
  163. <td>美女</td>
  164. <td><a href="">上海</a></td>
  165. <td><a href="">杭州</a></td>
  166. <td><a href="">北京</a></td>
  167. <td><a href="">其它</a></td>
  168. </tr>
  169. </table>
  170. <!-- 设置轮播图区块-->
  171. <table class="pictablebox" width="1200px">
  172. <tr >
  173. <td > <a href=""><img src="../images/2.jpg" alt=""></a>
  174. </td>
  175. <td ><a href=""><img src="../images/banner-right.jpg" alt=""></a>
  176. </td>
  177. </tr>
  178. </table>
  179. </div>
  180. </body>
  181. </html>

预览图:

2.用float+position实现网页布局

代码:

  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport"
  6. content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  7. <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8. <title>全站首页导航与轮播图1220作业(flaot+position布局++)</title>
  9. <link rel="stylesheet" href="../static/font/iconfont.css">
  10. <style>
  11. *{margin: 0; padding: 0;}
  12. .mainbox
  13. {
  14. margin: 0 auto;
  15. width: 1200px;
  16. }
  17. a
  18. {
  19. text-decoration: none;
  20. color:#666666;
  21. }
  22. .logbox
  23. {
  24. position: relative;
  25. width: 1200px;
  26. }
  27. .log
  28. {
  29. float: left;
  30. }
  31. .searchbox
  32. {
  33. float: left;
  34. width: 430px;
  35. position: relative;
  36. left:370px;
  37. top: 19px;
  38. }
  39. .search
  40. {
  41. width: 330px;
  42. height: 33px;
  43. border-radius: 10px;
  44. /*去掉轮廓线,获取焦点时不会出现蓝色边框*/
  45. outline: none;
  46. padding: 6px;
  47. }
  48. .search:hover
  49. {
  50. box-shadow: 0 0 15px #888888;
  51. }
  52. .searchbox label
  53. {
  54. font-size: 28px;
  55. position: relative;
  56. left: -40px;
  57. top: 5px;
  58. }
  59. .quick-entry
  60. {
  61. float: right;
  62. position: relative;
  63. top: 19px;
  64. }
  65. .quick-entry a
  66. {
  67. font-size:33px;
  68. margin-left: 17px;
  69. }
  70. .quick-entry a:hover
  71. {
  72. color: red;
  73. }
  74. .navbox
  75. {
  76. float: left;
  77. width: 1200px;
  78. position: relative;
  79. margin-bottom: 10px;
  80. }
  81. .nav
  82. {
  83. display: inline-block;
  84. width: 295px;
  85. }
  86. .pic
  87. {
  88. display: inline;
  89. width: 101px;
  90. }
  91. .pic>span
  92. {
  93. display: inline-block;
  94. font-size: 40px;
  95. color: red;
  96. }
  97. .pic div
  98. {
  99. display: inline-block;
  100. width: 40px;
  101. text-align: center;
  102. margin-right:5px;
  103. border-right:1px solid #cccccc;
  104. }
  105. .pic div span
  106. {
  107. display: inline-block;
  108. font-size: 16px;
  109. margin-right: 5px;
  110. }
  111. .links
  112. {
  113. display: inline-block;
  114. width: 190px;
  115. }
  116. .links a
  117. {
  118. margin-left: 10px;
  119. }
  120. </style>
  121. </head>
  122. <body>
  123. <div class="mainbox">
  124. <div class="logbox">
  125. <div class="log"><a href=""><img src="../images/logo.png" alt="log图片"></a></div>
  126. <div class="searchbox">
  127. <input type="search" class="search" id="search">
  128. <label for="search" class="iconfont icon-jinduchaxun"></label>
  129. </div>
  130. <div class="quick-entry">
  131. <a href="" class="iconfont icon-huiyuan1"></a>
  132. <a href="" class="iconfont icon-danmu1"></a>
  133. <a href="" class="iconfont icon-fabu"></a>
  134. <a href="" class="iconfont icon-fangda"></a>
  135. <a href="" class="iconfont icon-huiyuan2"></a>
  136. <a href="" class="iconfont icon-dianzan"></a>
  137. </div>
  138. </div>
  139. <div class="navbox">
  140. <div class="nav">
  141. <div class="pic">
  142. <span class="iconfont icon-gongdan"></span>
  143. <div>
  144. <span>资讯</span>
  145. <span>学习</span>
  146. </div>
  147. </div>
  148. <!--右侧导航链接-->
  149. <div class="links">
  150. <a href="">器材</a>
  151. <a href="">大师</a>
  152. <a href="">学院</a>
  153. <a href="">实战</a>
  154. <a href="">大赛</a>
  155. <a href="">裤子</a>
  156. <a href="">影视</a>
  157. <a href="">其它</a>
  158. </div>
  159. </div>
  160. <div class="nav">
  161. <div class="pic">
  162. <span class="iconfont icon-renwujincheng"></span>
  163. <div>
  164. <span>爱好</span>
  165. <span>姐妹</span>
  166. </div>
  167. </div>
  168. <!--右侧导航链接-->
  169. <div class="links">
  170. <a href="">有品</a>
  171. <a href="">图片</a>
  172. <a href="">喝水</a>
  173. <a href="">飞机</a>
  174. <a href="">坦克</a>
  175. <a href="">气球</a>
  176. <a href="">毛线</a>
  177. <a href="">其它</a>
  178. </div>
  179. </div>
  180. <div class="nav">
  181. <div class="pic">
  182. <span class="iconfont icon-gongdan"></span>
  183. <div>
  184. <span>软件</span>
  185. <span>技能</span>
  186. </div>
  187. </div>
  188. <!--右侧导航链接-->
  189. <div class="links">
  190. <a href="">学习</a>
  191. <a href="">爱国</a>
  192. <a href="">敬业</a>
  193. <a href="">友善</a>
  194. <a href="">富强</a>
  195. <a href="">互助</a>
  196. <a href="">仁义</a>
  197. <a href="">其它</a>
  198. </div>
  199. </div>
  200. <div class="nav">
  201. <div class="pic">
  202. <span class="iconfont icon-DOC"></span>
  203. <div>
  204. <span>编程</span>
  205. <span>美女</span>
  206. </div>
  207. </div>
  208. <!--右侧导航链接-->
  209. <div class="links">
  210. <a href="">吃饭</a>
  211. <a href="">周易</a>
  212. <a href="">黄山</a>
  213. <a href="">合肥</a>
  214. <a href="">上海</a>
  215. <a href="">杭州</a>
  216. <a href="">北京</a>
  217. <a href="">其它</a>
  218. </div>
  219. </div>
  220. </div>
  221. <div class="picbox">
  222. <div>
  223. <a href=""><img src="../images/2.jpg" alt=""></a>
  224. <a href=""><img src="../images/banner-right.jpg" alt=""></a>
  225. </div>
  226. </div>
  227. </div>
  228. </body>
  229. </html>

预览图:

3.完成作业的几点总结

3.1仔细计算盒子的尺寸

它包括内容尺寸、内边距尺寸、边框尺寸、外边距尺寸,其中witdh和height设置的只是边框以内的尺寸,如果计算不对,在浮动布局中会出现问题。

3.2

可以灵活运用margin或者padding来调整元素之间的间隔

3.3

运用图标库时,要先将其CSS样式引入,然后再用。

3.4

利用浮动加定位布局的关键点是父元素需要有一个定位属性,通常用relative,这样在子元素中可以利用absolute属性来进行相对于父元素的绝对定位。

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