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

<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>&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>

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: