css的基礎用法（下）

番茄西紅柿發布于2019-04-23 13:35 / 2003人閱讀

摘要：定位定位相對定位，不改變元素的類型參照物是他自己本身作用是給絕對定位當父級用。固定定位參照物是屏幕可視區元素變成塊注意加了定位就要寫，，，。

定位：

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

GPU云服務器云服務器 php中css的用法 css基礎基礎css css基礎教程

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/2071.html

補習前端（css+html）基礎-1：

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

marek 2019-08-29 15:24 評論0 收藏0
補習前端（css+html）基礎-1：

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

douzifly 2019-08-02 10:26 評論0 收藏0
CSS基礎篇-- :before && :after的用法，偽類和偽元素的區別

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

X_AirDu 2019-08-28 18:15 評論0 收藏0
css的基礎用法（上）

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

番茄西紅柿 2019-04-23 13:35 評論0 收藏0
gulp基礎和常用插件介紹

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

Lsnsh 2019-08-21 17:12 評論0 收藏0