css的基礎用法（下）

infinite001發表於2018-06-25
CSS

定位：

 

 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;}

 

相關文章