成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

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

番茄西紅柿 / 2000人閱讀

摘要：定位定位相對定位，不改變元素的類型參照物是他自己本身作用是給絕對定位當(dāng)父級用。固定定位參照物是屏幕可視區(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：

　　相對定位：relative，1、不改變元素的類型；2、參照物是他自己本身；作用：是給絕對定位當(dāng)父級用。

　　絕對定位：absolute，1、元素變成塊；默認的參照物是body；如果父級給了相對定位，他的參照物是父級。　　

 

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

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

 

京東頁面導(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>你好，請先登錄 免費注冊li>
27                                        <li>我的訂單li>
28                                        <li>我的京東li>
29                                        <li>京東會員li>
30                                        <li>企業(yè)采購li>
31                                        <li>客戶服務(wù)li>
32                                        <li>網(wǎng)站導(dǎo)航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;}

 

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/2071.html

相關(guān)文章

  • 補習(xí)前端（css+html）基礎(chǔ)-1：

    摘要：標簽將表單內(nèi)容的一部分打包，生成一組相關(guān)表單的字段。提示和注釋注釋元素是空元素，它僅包含屬性。注釋此元素只能存在于部分，不過它可出現(xiàn)任何次數(shù)。屬性屬性規(guī)定當(dāng)前文檔與被鏈接文檔之間的關(guān)系。該標簽用于組合表格的主體內(nèi)容。 1.HTML 標簽: 實例 組合表單中的相關(guān)元素： health information height: weight: 定義和用法 fieldset 元素...

    marek 評論0 收藏0

  • 補習(xí)前端（css+html）基礎(chǔ)-1：

    摘要：標簽將表單內(nèi)容的一部分打包，生成一組相關(guān)表單的字段。提示和注釋注釋元素是空元素，它僅包含屬性。注釋此元素只能存在于部分，不過它可出現(xiàn)任何次數(shù)。屬性屬性規(guī)定當(dāng)前文檔與被鏈接文檔之間的關(guān)系。該標簽用于組合表格的主體內(nèi)容。 1.HTML 標簽: 實例 組合表單中的相關(guān)元素： health information height: weight: 定義和用法 fieldset 元素...

    douzifly 評論0 收藏0

  • CSS基礎(chǔ)篇-- :before && :after的用法，偽類和偽元素的區(qū)別

    摘要：一的用法如同對偽元素的名稱一樣，是用來給指定的元素的內(nèi)容前面插入新的內(nèi)容。二偽類和偽元素的區(qū)別偽類種類偽元素種類偽類作用對象是整個元素例如盡管這些條件不是基于的，但結(jié)果每一個都是作用于一個完整的元素，比如整個鏈接，段落，等等。 一：:before && :after的用法 :before 如同對偽元素的名稱一樣，:before 是用來給指定的元素的內(nèi)容前面插入新的內(nèi)容。舉例說明： .b...

    X_AirDu 評論0 收藏0

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

    摘要：選擇器可以可以標簽選擇器直接在標簽里面，標簽名字就可以選擇到。內(nèi)容會被修剪，并且其余內(nèi)容是不可見的。規(guī)定應(yīng)該從父元素繼承屬性的值。起到給加圓角的作用。代表的是上下，左右。代表的是上，右，下，左。css定義： 　　CSS層疊式樣表（Cascading Style Sheets）是一種用來表現(xiàn)html或xml等文件樣式的計算機語言。CSS不僅可以靜態(tài)的修飾網(wǎng)頁，還可以配合各種腳本語言動態(tài)地對網(wǎng)頁...

    番茄西紅柿 評論0 收藏0

  • gulp基礎(chǔ)和常用插件介紹

    摘要：前提前端工程化是如今前端團隊規(guī)范化管理項目和代碼的概念，而前端工程化中往往是離不開前端自動化或打包工具這兩種工具。參數(shù)介紹可以理解成一種類似于正則表達式的匹配模式，其值可以為匹配形式，文件路徑，或者文件路徑數(shù)組。 前提：前端工程化是如今前端團隊規(guī)范化管理項目和代碼的概念，而前端工程化中往往是離不開前端自動化或打包工具這兩種工具。本文將詳細介紹其中一種常用的前端自動化工具---gulp....

    Lsnsh 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<