使用div与CSS进行横向排列和纵向排列以及搜狗搜索引擎的实例

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文件里面，然后在网页中对这个文件进行调用，调用的代码是：

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>&nbsp &nbsp &nbsp
<a href="https://ie.sogou.com/" style ="text-decoration:none"><font color=grey face=微软雅黑 size=1>浏览器</a>&nbsp &nbsp &nbsp
<a href="https://123.sogou.com/" style ="text-decoration:none"><font color=grey face=微软雅黑 size=1>网址导航</a>&nbsp &nbsp &nbsp
</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>

发表评论取消回复

微信