代码比较长,如下:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 | <html> <head> <style type="text/css"> #box{ width: 600px; margin: 40px auto; font-family: 'Microsoft YaHei'; font-size: 16px;} input{ width: 500px; border: 1px solid #B0C4DE; height: 40px; float: left; background-repeat: no-repeat; background-size: 25px; background-position:5px center;} #search{ width: 100px; height: 40px; float: right; background: #1E90FF; color: white; text-align: center; line-height: 40px; cursor: pointer; } #top{ top: 50px; position: absolute; right:35px; width:500; } </style> </head> <body bgcolor="white" > <font size=2.5 color="black"> <div style="" id="top"> <!--大div,控制所有菜单的顶边距--> <div style="right:435px; position: absolute;" > <a href="https://www.baidu.com/">新闻</a> </div> <div style="right:365px; position: absolute;" > <a href="https://www.hao123.com/">hao123</a> </div> <div style="right:320px; position: absolute;" > <a href="https://map.baidu.com/@11585280.82,3555907.48,12z">地图</a> </div> <div style="right:275px; position: absolute;" > <a href="http://v.baidu.com/">视频</a> </div> <div style="right:230px; position: absolute;" > <a href="https://tieba.baidu.com/index.html">帖吧</a> </div> <div style="right:185px; position: absolute;" > <a href="http://xueshu.baidu.com/">学术</a> </div> <div style="right:140px; position: absolute;" > <a href="https://www.baidu.com/">登录</a> </div> <div style="right:95px; position: absolute; " > <a href="https://www.baidu.com/">设置</a> </div> <div style="right:15px; position: absolute; " >更多产品 </div> </div> <div style="position:relative;top: 190px" align="center"> <img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" width="265" > </div> <div id="box" style="position:relative;top: 180px"> <input type="text"> <div id="search">百度一下</div> </div> <div style="position:relative;top: 230px" align="center"> <img src="baidu.gif" width="130" > </div> <table style="color:black;position:relative;top:230px;font-size:13px" align="center" > <tr align="center"> <td> <p style="font-size:16px">下载百度APP</p> <p>有事搜一搜  没事看一看 </td> </tr> </table> <table style="color:black;position:relative;top:280px;font-size:13px" align="center"> <tr > <td> <a href="#" >把百度设为首页</a>   <a href="#">关于百度  </a> <a href="#">about baidu  </a> <a href="#">百度推广</a> </td> </tr> </table> <table border=0 style="color:black;position:relative;top:280px;font-size:13px" align="center"> <tr > <td> @2019 Baidu <ahref="#" style="text-decoration-line:underline">使用百度前必读</a> <a href="#" style="text-decoration-line: underline">意见反馈</a>> 京ICP证030173号   <i class="marker icon"></i> 京公网安备11000002000001号 </td><td></td> </tr> </table> </body> </html> |
在上面的代码中,其实是很简单的,但是代码中使用了很多种不同的写法来实现相同的效果。有如下注意点:
1,一般我们对于相同标签div中不同部分进行控制采用的css写法是在head的style里写上div.n001{}这种方式。而这里采用的是#n001{}这种方式。对应的,在具体位置div中就不是写class=“n001”,而是写上id=“n001”。
2,对于顶部若干菜单右对齐这个方式,有多个方式实现:
1)可以在总div中设置右对齐属性;2)在每个div中设置到右边的边距(本例中的写法);3)挨着挨着写div,中间用间距隔开(本例中下边的写法)。
3,对于div布局控制距离,先看下图:

在CSS中,通过 position属性来对元素进行定位,可选的定位类型有 static | relative | absolute | fixed,默认值为 static,表示没有定位,元素保持在它原本应该在的位置上。
要对页面元素使用定位技术,必须 position属性设置为 static 之外的其它 3 个属性值,即相对定位、绝对定位、固定定位。
相对定位
当一个元素的 position属性设置为 relative,它将使用相对定位。简单的说,就是并列关系。会与最近的内容,产生一个相对的距离。
相对定位的元素,通过 left、right 属性来定义水平偏移量,top、bottom 属性来定义垂直偏移量。left 表示相对于原本位置的左外边界右移的距离,right 表示相对于原本位置的右外边界左移的距离,top 表示相对于原本位置的上外边界下移的距离,bottom 表示相对于原本位置的下外边界上移的距离。并且,偏移量可以是正值,也可以是负值,负值表示向相反的方向移动。
left、right、top、bottom 这 4 个属性的值,可以是长度值(可以是绝对单位或相对单位),也可以是百分比。使用百分比时,水平偏移量根据其父元素 width 属性的值计算得到,垂直偏移量根据其父元素 height 属性的值计算得到。需要注意的是,在设置偏移时,如果父元素没有显式定义 height 属性,就等同于 height 属性的值为 0。
当一个元素的 position属性设置为absolute,它将使用绝对定位。简单的说,就是重叠关系。不会与最近的内容,产生一个相对的距离。而是与父的边产生距离。那么如果父使用了这个属性,则是与浏览器产生距离。
关于div布局,拟专门开一栏目。这里不再细说。