首页 > > 网页制作 > css >

css的基础用法（下）

2018-06-27 09:03:35来源：博客园阅读 ()

定位：

 1 <html>
 2          <head>
 3                   <meta charset="utf-8" />
 4                   <title>定位</title>
 5                   <style>
 6                            div{width:500px;height:500px;background:red;
 7                            position:relative;left:20px;top:20px;}
 8                            i{position:absolute;left:15px;bottom:15px;
 9                            width:30px;height:30px;background:blue;}
10                            b{width:60px;height50px;background:yellow;
11                            position:fixed;right:10px;top:10px;}
12 
13                   </style>
14          </head>
15          <body>
16                    <div>
17                           <i></i>
18                    </div>
19                    <b></b>
20          </body>
21 </html>

position：

　　相对定位：relative，1、不改变元素的类型；2、参照物是他自己本身；作用：是给绝对定位当父级用。

　　绝对定位：absolute，1、元素变成块；默认的参照物是body；如果父级给了相对定位，他的参照物是父级。　　

　　固定定位：position：fixed；1、参照物是屏幕可视区；2、元素变成块；

注意：加了定位就要写top，bottom，left，right。

京东页面导航栏：

 1 <html>
 2          <head>
 3                    <meta charset="utf-8" />
 4                    <title>京东</title>
 5                    <link rel="stylesheet" href="css/base.css" />
 6                    <style>                    
 7                             header_top{width:100%;
 8                             height:30px;background:#e3e4e5;
 9                             border-bottom:1px solid #dfdfe0;}
10                             header_nav{width:989px;height:30px;
11                             position:absolution;right:30px;}
12                             .header_top .header_nav .fl li{float:right;color:#999999;
13                             line-height:30px;}
14                             .header_top .header_nav .fr li{float:left;color:999999;
15                             line-height:30px;}
16 
17                    </style>
18          </head>
19          <body>
20                   <div class="header_top">
21                           <div class="header_nav">
22                                   <ul class="fl">
23                                        <li>位置</li>
24                                   </ul>
25                                   <ul class="fr">
26                                        <li>你好，请先登录 免费注册</li>
27                                        <li>我的订单</li>
28                                        <li>我的京东</li>
29                                        <li>京东会员</li>
30                                        <li>企业采购</li>
31                                        <li>客户服务</li>
32                                        <li>网站导航</li>
33                                        <li>手机京东</li>
34                                   </ul>
35                           </div>
36                   </div>
37          </body>
38 </html>

 1 *{margin:0;padding:0;}
 2 body,h1,h2,h3,h4,h5,h6,p,div,ul,ol,dl,i,em,strong,background,form{font-size:12px,font-family:'Microsoft Yahei';}
 3 ui,ol,dl{list-style:none;}
 4 a{text-decoration:none;color:#000;}
 5 i,em{font-style:normal;}
 6 b,strong{font-weight:normal;}
 7 input,textarea{outline:none;resize:none;}
 8 .fl{float:left;}
 9 .fr{float:right;}
10 .clearFix:after{display:block;content:'';clear:both;zoom:1;}