search

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

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

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

用传统方式完成网页布局（大作业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.         }
  21.         a
  22.         {
  23.             text-decoration: none;
  24.             color:#666666;
  25.         }
  27.         /*设置搜索区块的定位类型，为子元素定位提供支持*/
  28.         .tbsearch
  29.         {
  30.             position: relative;
  31.         }
  32.         /*设置搜索栏输入框的样式*/
  33.         .tbsearch input
  34.         {
  35.             width: 333px;
  36.             height: 36px;
  37.             border: 1px solid #cccccc;
  38.             border-radius: 10px;
  39.             /*去掉轮廓线,获取焦点时不会出现蓝色边框*/
  40.             outline: none;
  41.             padding: 6px;
  42.             position: relative;
  44.         }
  45.         .tbsearch input:hover
  46.         {
  47.             box-shadow: 0 0 5px #888888;
  48.         }
  49.         /*设置搜索栏图标的样式*/
  50.         .tbsearch label
  51.         {
  52.             position: absolute;
  53.             top: 5px;
  54.             left: 370px;
  55.             font-size: 28px;
  56.         }
  57.         /*设置快速入口链接的样式*/
  58.         .tbquickentry a
  59.         {
  60.             font-size:33px;
  61.             margin-left:12px;
  62.         }
  64.         /*设置鼠标滑过快速入口链接时的样式*/
  65.         .tbquickentry a:hover
  66.         {
  67.             color:red;
  68.         }
  70.         /*设置导航栏四个图片的样式*/
  71.         .navtablebox span
  72.         {
  73.             font-size: 39px;
  74.             color: red;
  75.         }
  77.         /*设置导航区上下外边距*/
  78.         .navtablebox{margin-bottom: 20px;margin-top: 20px;}
  79.     </style>
  81. </head>
  82. <body>
  83.     <div class="mainbox">
  84. <!--        设置bannar区-->
  85.         <table class="bannertablebox"  width="1200px"  >
  86.             <tr>
  87.                 <td  align="left" width="470px">
  88.                     <a href="www.php.cn"><img src="../images/logo.png" alt="log图片"></a>
  89.                 </td>
  90.                 <td  align="right" width="410px">
  91.                     <div class="tbsearch" >
  92.                     <input type="search" name="search" id="search">
  93.                     <label for="search" class="iconfont icon-jinduchaxun"></label>
  94.                     </div>
  95.                 </td>
  96.                 <td  width="300px" height="36px" align="right">
  97.                     <div class="tbquickentry">
  98.                         <a href="" class="iconfont icon-huiyuan1"></a>
  99.                         <a href="" class="iconfont icon-danmu1"></a>
  100.                         <a href="" class="iconfont icon-fabu"></a>
  101.                         <a href="" class="iconfont icon-fangda"></a>
  102.                         <a href="" class="iconfont icon-huiyuan2"></a>
  103.                         <a href="" class="iconfont icon-dianzan"></a>
  104.                     </div>
  105.                 </td>
  106.             </tr>
  107.         </table>
  108. <!--        设置导航区-->
  109.         <table class="navtablebox" width="1200px" cellspacing="0">
  110.             <tr>
  111.                 <!-- 设置导航小图标-->
  112.                 <td rowspan="2"  align="center" ><span class="iconfont icon-gongdan" ></span></td>
  113.                 <td width="40px">咨询</td>
  114.                 <!--设置间隔小竖线-->
  115.                 <td rowspan="2"  width="6px" style="border-left: 1px solid gray"></td>
  116.                 <td><a href="">器材</a></td>
  117.                 <td><a href="">大师</a></td>
  118.                 <td><a href="">学院</a></td>
  119.                 <td><a href="">实战</a></td>
  120.                 <!--设置导航小图标前留白区域-->
  121.                 <td rowspan="2" width="10px"></td>
  122.                 <!-- 设置导航小图标-->
  123.                 <td rowspan="2" align="center"><span class="iconfont icon-renwujincheng"></span></td>
  124.                 <td width="40px">爱好</td>
  125.                 <!--置间隔小竖线-->
  126.                 <td rowspan="2"  width="6px" style="border-left: 1px solid gray"></td>
  127.                 <td><a href="">有品</a></td>
  128.                 <td><a href="">图片</a></td>
  129.                 <td><a href="">喝水</a></td>
  130.                 <td><a href="">飞机</a></td>
  131.                 <!--设置导航小图标前留白区域-->
  132.                 <td rowspan="2" width="10px"></td>
  133.                 <!-- 设置导航小图标-->
  134.                 <td rowspan="2" align="center"><span class="iconfont icon-gongdan"></span></td>
  135.                 <td width="40px">软件</td>
  136.                 <!--置间隔小竖线-->
  137.                 <td rowspan="2"  width="6px" style="border-left: 1px solid gray"></td>
  138.                 <td><a href="">学习</a></td>
  139.                 <td><a href="">爱国</a></td>
  140.                 <td><a href="">敬业</a></td>
  141.                 <td><a href="">友善</a></td>
  142.                 <!--设置导航小图标前留白区域-->
  143.                 <td rowspan="2" width="10px"></td>
  144.                 <!-- 设置导航小图标-->
  145.                 <td rowspan="2" align="center"><span class="iconfont icon-DOC" ></span></td>
  146.                 <td width="40px">编程</td>
  147.                 <!--置间隔小竖线-->
  148.                 <td rowspan="2"  width="6px" style="border-left: 1px solid gray"></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.             </tr>
  154.             <tr>
  155.                 <td>学习</td>
  156.                 <td><a href="">大赛</a></td>
  157.                 <td><a href="">裤子</a></td>
  158.                 <td><a href="">影视</a></td>
  159.                 <td><a href="">其它</a></td>
  160.                 <td>姐妹</td>
  161.                 <td><a href="">坦克</a></td>
  162.                 <td><a href="">气球</a></td>
  163.                 <td><a href="">毛线</a></td>
  164.                 <td><a href="">其它</a></td>
  165.                 <td>技能</td>
  166.                 <td><a href="">富强</a></td>
  167.                 <td><a href="">互助</a></td>
  168.                 <td><a href="">仁义</a></td>
  169.                 <td><a href="">其它</a></td>
  170.                 <td>美女</td>
  171.                 <td><a href="">上海</a></td>
  172.                 <td><a href="">杭州</a></td>
  173.                 <td><a href="">北京</a></td>
  174.                 <td><a href="">其它</a></td>
  175.             </tr>
  176.         </table>
  177. <!--        设置轮播图区块-->
  178.         <table class="pictablebox" width="1200px">
  179.             <tr >
  180.                 <td > <a href=""><img src="../images/2.jpg" alt=""></a>
  181.                 </td>
  182.                 <td ><a href=""><img src="../images/banner-right.jpg" alt=""></a>
  183.                 </td>
  184.             </tr>
  185.         </table>
  186.     </div>
  187. </body>
  188. </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>
  10.         <link rel="stylesheet" href="../static/font/iconfont.css">
  11.     <style>
  12.         *{margin: 0; padding: 0;}
  13.         .mainbox
  14.         {
  15.             margin: 0 auto;
  16.             width: 1200px;
  17.         }
  18.         a
  19.         {
  20.             text-decoration: none;
  21.             color:#666666;
  22.         }
  23.         .logbox
  24.         {
  25.             position: relative;
  26.             width: 1200px;
  27.         }
  28.         .log
  29.         {
  30.             float: left;
  31.         }
  32.         .searchbox
  33.         {
  34.             float: left;
  35.             width: 430px;
  36.             position: relative;
  37.             left:370px;
  38.             top: 19px;
  39.         }
  40.         .search
  41.         {
  42.             width: 330px;
  43.             height: 33px;
  44.             border-radius: 10px;
  45.             /*去掉轮廓线,获取焦点时不会出现蓝色边框*/
  46.             outline: none;
  47.             padding: 6px;
  48.         }
  49.         .search:hover
  50.         {
  51.             box-shadow: 0 0 15px #888888;
  52.         }
  53.         .searchbox label
  54.         {
  55.             font-size: 28px;
  56.             position: relative;
  57.             left: -40px;
  58.             top: 5px;
  59.         }
  60.         .quick-entry
  61.         {
  62.             float: right;
  63.             position: relative;
  64.             top: 19px;
  65.         }
  66.         .quick-entry a
  67.         {
  68.             font-size:33px;
  69.             margin-left: 17px;
  70.         }
  71.         .quick-entry a:hover
  72.         {
  73.             color: red;
  74.         }
  75.         .navbox
  76.         {
  77.             float: left;
  78.             width: 1200px;
  79.             position: relative;
  80.             margin-bottom: 10px;
  81.         }
  82.         .nav
  83.         {
  84.             display: inline-block;
  85.             width: 295px;
  86.         }
  87.         .pic
  88.         {
  89.             display: inline;
  90.             width: 101px;
  92.         }
  93.         .pic>span
  94.         {
  95.             display: inline-block;
  96.             font-size: 40px;
  97.             color: red;
  98.         }
  99.         .pic div
  100.         {
  101.             display: inline-block;
  102.             width: 40px;
  103.             text-align: center;
  104.             margin-right:5px;
  105.             border-right:1px solid #cccccc;
  106.         }
  107.         .pic div span
  108.         {
  109.             display: inline-block;
  110.             font-size: 16px;
  111.             margin-right: 5px;
  112.         }
  113.          .links
  114.         {
  115.              display: inline-block;
  116.              width: 190px;
  117.         }
  118.         .links a
  119.         {
  120.             margin-left: 10px;
  121.         }
  122.     </style>
  123. </head>
  124. <body>
  125.     <div class="mainbox">
  126.         <div class="logbox">
  127.             <div class="log"><a href=""><img src="../images/logo.png" alt="log图片"></a></div>
  128.             <div class="searchbox">
  129.                 <input type="search" class="search" id="search">
  130.                 <label for="search" class="iconfont icon-jinduchaxun"></label>
  131.             </div>
  132.             <div class="quick-entry">
  133.                 <a href="" class="iconfont icon-huiyuan1"></a>
  134.                 <a href="" class="iconfont icon-danmu1"></a>
  135.                 <a href="" class="iconfont icon-fabu"></a>
  136.                 <a href="" class="iconfont icon-fangda"></a>
  137.                 <a href="" class="iconfont icon-huiyuan2"></a>
  138.                 <a href="" class="iconfont icon-dianzan"></a>
  139.             </div>
  140.         </div>
  141.         <div class="navbox">
  142.             <div class="nav">
  143.                 <div class="pic">
  144.                     <span class="iconfont icon-gongdan"></span>
  145.                     <div>
  146.                         <span>资讯</span>
  147.                         <span>学习</span>
  148.                     </div>
  149.                 </div>
  150.                 <!--右侧导航链接-->
  151.                 <div class="links">
  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.                     <a href="">影视</a>
  159.                     <a href="">其它</a>
  160.                 </div>
  161.             </div>
  162.             <div class="nav">
  163.                 <div class="pic">
  164.                     <span class="iconfont icon-renwujincheng"></span>
  165.                     <div>
  166.                         <span>爱好</span>
  167.                         <span>姐妹</span>
  168.                     </div>
  169.                 </div>
  170.                 <!--右侧导航链接-->
  171.                 <div class="links">
  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.                     <a href="">毛线</a>
  179.                     <a href="">其它</a>
  180.                 </div>
  181.             </div>
  182.             <div class="nav">
  183.                 <div class="pic">
  184.                     <span class="iconfont icon-gongdan"></span>
  185.                     <div>
  186.                         <span>软件</span>
  187.                         <span>技能</span>
  188.                     </div>
  189.                 </div>
  190.                 <!--右侧导航链接-->
  191.                 <div class="links">
  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.                     <a href="">仁义</a>
  199.                     <a href="">其它</a>
  200.                 </div>
  201.             </div>
  202.             <div class="nav">
  203.                 <div class="pic">
  204.                     <span class="iconfont icon-DOC"></span>
  205.                     <div>
  206.                         <span>编程</span>
  207.                         <span>美女</span>
  208.                     </div>
  209.                 </div>
  210.                 <!--右侧导航链接-->
  211.                 <div class="links">
  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.                     <a href="">北京</a>
  219.                     <a href="">其它</a>
  220.                 </div>
  221.             </div>
  222.         </div>
  223.         <div class="picbox">
  224.             <div>
  225.                 <a href=""><img src="../images/2.jpg" alt=""></a>
  226.                 <a href=""><img src="../images/banner-right.jpg" alt=""></a>
  227.             </div>
  228.         </div>
  229.     </div>
  230. </body>
  231. </html>

预览图：

3.完成作业的几点总结

3.1仔细计算盒子的尺寸

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

3.2

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

3.3

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

3.4

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

上一条：前端HTML基础知识复习（html常用标签及表单元素的类型及属性介绍）-PHP培训十期线上班下一条：12月20日 学号：478291 表单+CSS基础
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多