html练习01-模仿百度首页的代码-div布局01

代码比较长，如下：

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>有事搜一搜&nbsp&nbsp没事看一看
            </td>
        </tr>
     </table>
     <table style="color:black;position:relative;top:280px;font-size:13px" align="center">        
           <tr >
                <td>
                     <a href="#" >把百度设为首页</a>&nbsp&nbsp
                     <a href="#">关于百度&nbsp&nbsp</a>
                     <a href="#">about baidu&nbsp&nbsp</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号&nbsp&nbsp
                    <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布局，拟专门开一栏目。这里不再细说。

发表评论

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