css的基礎(chǔ)用法（下）

番茄西紅柿發(fā)布于2019-04-23 13:35 / 1992人閱讀

摘要：定位定位相對(duì)定位，不改變?cè)氐念愋蛥⒄瘴锸撬约罕旧碜饔檬墙o絕對(duì)定位當(dāng)父級(jí)用。固定定位參照物是屏幕可視區(qū)元素變成塊注意加了定位就要寫，，，。

定位：

 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：

　　相對(duì)定位：relative，1、不改變?cè)氐念愋停?、參照物是他自己本身；作用：是給絕對(duì)定位當(dāng)父級(jí)用。

　　絕對(duì)定位：absolute，1、元素變成塊；默認(rèn)的參照物是body；如果父級(jí)給了相對(duì)定位，他的參照物是父級(jí)。　　

　　固定定位：position：fixed；1、參照物是屏幕可視區(qū)；2、元素變成塊；

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

京東頁(yè)面導(dǎo)航欄：

 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>你好，請(qǐng)先登錄 免費(fèi)注冊(cè)li>
27                                        <li>我的訂單li>
28                                        <li>我的京東li>
29                                        <li>京東會(huì)員li>
30                                        <li>企業(yè)采購(gòu)li>
31                                        <li>客戶服務(wù)li>
32                                        <li>網(wǎng)站導(dǎo)航li>
33                                        <li>手機(jī)京東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;}