1,首先是横向排列的代码,使用absolute
1 2 3 4 5 6 7 8 9 10 11 | <html> <body> <div style="position:absolute;top:50px;left:50px;width:100px;height:100px;background-color:red;color:#ffffff;" align=center>red</div> <div style="position:absolute;top:50px;left:200px;width:100px;height:100px;background-color:blue;color:#ffffff;" align=center>blue</div> <div style="position:absolute;top:50px;left:350px;width:100px;height:100px;background-color:yellow;color:#000000;" align=center>yellow</div> </body> </html> |
上面代码实现的功能是让宽为100像素的红黄蓝三个正方形横向排列,并且间距为50px。在上面的案例中,还使用了css进行控制,其中的知识点有:
1)三个方块是兄弟并列关系,在没有父div的情况下,浏览器就是父。为了方便横向排列,所以使用了absolute的position属性。
2)方块的高度和宽度控制是使用width属性和height属性,需要注意的是,必须在长度100后面加上px,才能宽度100,否则是背景色只会填充字体,不会填充100px。
3)同样的,对于间距的控制,是left属性里面写距离50px。这里有两点,其一是必须加px,否则无效。其二是三个方块之间的间距控制为50px必须要计算间距的宽度和方块的宽度。所以第二个方块距离左边的距离为:
blue方块left值(200px)=blue和red间距(50px)+red方块宽(100px)+red间距(50px)
4)对于字体居中的控制,却没法使用css,只能写标签的属性align=center。
5)css可以写在三个地方,其一是写在style的双引号“”里面;
6)css的属性是用冒号:,不是用等号=,属性之间用分号;隔开。对背景颜色是用background-color属性,不是用bgcolor属性。
如果将css的内容写在head的style里面,则代码如下:
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 | <html> <head> <style> #red{ position:absolute; top:50px; left:50px; width:100px; height:100px; background-color:red; color:#ffffff; } #blue{ position:absolute; top:50px; left:200px; width:100px; height:100px; background-color:blue; color:#ffffff; } #yellow{ position:absolute; top:50px; left:350px; width:100px; height:100px; background-color:yellow; align:center; } </style> </head> <body> <div id="red" align=center>red</div> <div id="blue" align=center>blue</div> <div id="yellow" color=#000000;>yellow</div> </body> </html> |
上述写法中,#后面的名字必须和div中id后面的名字严格一一对应,才能实现两个部分之间的通信。
还有第三种写法,就是将上面head的style里面的内容剪切到一个独立的css文件里面,然后在网页中对这个文件进行调用,调用的代码是:
<link rel="stylesheet" href="xxx.css">
2,纵向排列的代码,使用relative。
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 | <html> <head> <style> #red{ position:relative; top:50px; width:100px; height:100px; background-color:red; color:#ffffff; } #blue{ position:relative; top:100px; width:100px; height:100px; background-color:blue; color:#ffffff; } #yellow{ position:relative; top:150px; width:100px; height:100px; background-color:yellow; align:center; } </style> </head> <body> <div align=center> <div id="red" align=center>red</div> <div id="blue" align=center>blue</div> <div id="yellow" color=#000000;>yellow</div> </div> </body> </html> |
上述代码实现的效果是红黄蓝三个色块居中上下排列,间距50px。主要知识点有:
1)必须加一个父的div,才能实现三个色块居中。父div中写上align=center属性。从上面的字体居中可以看出,这个标签中写align属性其功能是实现对内容的居中。
2)同时,加了一个父之后,子的top值就不再是相对于浏览器,而是相对于父div。在本例中,由于是居中,所以就不再有left值的设置。
3)上下间距是50px,不再需要考虑色块的高度,只需要在前面的div的top值上面加上间距值就可以了。计算公式如下:
blue方块top值(100px)=blue和red间距(50px)+red顶间距(50px)
3,综合运用上面两种div布局方式实现搜狗搜索引擎界面的模拟编写。代码如下:
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 | <html> <body > <div style="position:absolute;top:20;"> <div style="position:absolute;left:20;width:50;" >网页</div> <div style="position:absolute;left:70;width:50;">微信</div> <div style="position:absolute;left:120;width:50;">知乎</div> <div style="position:absolute;left:170;width:50;">图片</div> <div style="position:absolute;left:220;width:50;">视频</div> <div style="position:absolute;left:270;width:50;"> <!--------------------------------------------------------------下拉菜单------------------------------------------------------------------------> <select onchange="window.open(this.value)"> <option value="https://news.sogou.com/">新闻</option> <option value="http://map.sogou.com/?p=40031000#c=11590585.147627011,3560345.413968106,14">地图</option> <option value='https://gouwu.sogou.com/?p=40031500'>购物</option> </select> </div> </div> <div align=center style="position:relative;top:200;"> <img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" width="400"> </div> <!--------------------------------------------------------------搜索框------------------------------------------------------------------------> <div align=center style="position:relative;top:250;"> <input type="txt" style="width:600;height:40;"> <input type="button" style="width:100;height:40;" value="250so"> </div> <!--------------------------------------------------------------二维码------------------------------------------------------------------------> <div align=center style="position:relative;top:450;"> <img src="https://www.sogou.com/web/index/images/erweima2.png" width=110> <br> <font face=黑体 size=2 font-weigth=bold><B>下载搜狗搜索APP</B> <br> <br> <br> <a href="https://pinyin.sogou.com/" style ="text-decoration:none"><font color=grey face=微软雅黑 size=1>搜狗输入法</a>      <a href="https://ie.sogou.com/" style ="text-decoration:none"><font color=grey face=微软雅黑 size=1>浏览器</a>      <a href="https://123.sogou.com/" style ="text-decoration:none"><font color=grey face=微软雅黑 size=1>网址导航</a>      </p> <font face=黑体 size=2 font-weigth=bold>关于搜狗 - About Sogou - 企业推广 - 免责声明 - 意见反馈及投诉 - 隐私政策 <br>© 2004-2020 Sogou.com / 京网文 (2016) 6432-852号 / (京)-经营性-2016-0019 <br>网上有害信息举报专区 / 京ICP证050897号 / 京ICP备11001839号-1 / 京公网安备11000002000025号 </div> </body > </html> |