前端之基礎css
一、anchor偽類，用於閱讀文章。
a:link(沒有接觸過的鏈接),用於鏈接常規狀態 （末訪問的鏈接）
a:hover(鼠標放在鏈接上的狀態) 用於產生視覺效果（已訪問的鏈接）
a:visited(訪問過的鏈接)能清楚判斷已經訪問的鏈接（鼠標移動的鏈接）
a:active(在連接上按下鼠標是的狀態)，用於表現鼠標按下是的鏈接狀態（選定的鏈接）
二、before after偽類
：before p:before 在每個<p>元素之前插入的內容
：after p:after 在每個<p>元素之後插入的內容
三、css的優先級
如果有 !import那麽它的優先級最大
1、style="-----------1000"; 內斂樣式表的權值最高
2、#id---------------100; 統計選擇符中ID的屬性個數
3、.class------------10; 統計選擇符中的class屬性個數
4、p------------------1; 統計選擇附中的HTML標簽個數
四、水平對齊方式
text-align屬性規定元素中的文本的水平對齊方式
left 把文本排列左邊
right 把文本排列右邊
center 把文本排列中間
justify 實現兩端對齊文本的效果
line-height:200px; 文本行高
vertical-align :-4px; 元素內容垂直對齊方式，只對行內的元素有效，對塊級元素無效
text-decoration:none 去掉拆鏈接的下劃線
text-decoration:underline 設置超鏈接下劃線
letter-spacing:10px; 字母間距
word-spacing:20px; 單詞間距
五、外邊距和內邊距
margin：控制元素與元素之間的間距
padding： 用於控制內容與邊框之間的距離
border： 圍繞在內邊距和內容外的邊框
content: 盒子內容，顯示文本和圖像
margin：外邊距屬性
margin-top: 上邊距
margin-bottom: 下邊距
margin-right: 右邊距
margin-left: 左邊距
居中應用：
margin：0 auto:
六、背景屬性
屬性介紹：
backgroud-color 背景顏色
backgroud-image：url(圖片位置) 背景圖片
backgroud-position 背景定位
七、邊框屬性
border-width:20px;
border-style(required):solid;
border-color:chartreuse;
border-right:solid red 2px; 向右設置邊框
簡寫：border:30px red solid;
邊框-單獨設置各邊
border-top-style:dotted;
border-right-style:solid;
border-bottom-style:dotted;
border-left-style:none;
八、列表屬性
list-style-type 設置列表項標誌的類型
list-style-image 將圖像設置為列表項的標誌
list-style-position 設置列表中列表項標誌的位置
九、diaplay屬性
diaplay:inline; 轉換內斂標簽
diaplay:block; 轉換塊級標簽
diaplay:inline-block;
diaplay:none;
visibility: hidden; 隱藏
邊距的塌陷問題
float浮動
十、清除浮動
clear： 清除浮動只對自身起作用
clear：none 默認值，允許兩邊可以有浮動現象
clear：left 不允許左邊有浮動（對自身起作用）
clear：right 不允許右邊有浮動
clear：both 兩邊都沒有浮動
十一、float; 半脫離文檔流
position：fixed; 固定定位，完全脫離文檔流
position:relative; 以自己原位置作為參照物，可以使用top,left ，相對定位,沒有脫離文檔流
position:absolute 完全脫離文檔流，已經定位的父級作為參照物
十二、補充
常見的塊級元素有：div,form,table,p,pre,h1--h5,dl,ol,ul
常見的內斂元有:span,a,strong,em,label,input,select,img,br
list-style:none; 去掉列表默認樣式
no-repeat 0px,4px; 不重復
transition-duration:0.5s; 設置過渡時間
border-radius: 50%; 設置邊框圓角
overflow：hidden 超出的部分要裁剪隱藏
opacity: 設置透明
disc 圓心 ， circle 空心圓， square 實心塊   空格
solid 實線， dashed 虛線
<title>登錄頁面</title> <style> .top{ } .outer{ border:1px solid lightslategray; height: 400px; width: 1350px; background-color: red; } .outer .left{ height: 400px; width: 800px; float: left } .outer .right{ margin:0px; padding-top: 30px; padding-left:50px; line-height: 40px; height: 400px; width: 500px; float: left; } .boutn{ text-align: center; /*align-content: center;*/ color: black; /*background-color: red;*/ } </style> </head> <body> <div class="top"> <img src="logo.png" > </div> <div class="outer"> <div class="left"> <img src="meilele.png" width="700" height="400"> </div> <div class="right"> <from action="" method="post"> <p>*用戶名：<input type="text" name="username" value=""></p> <p>*密  碼：<input type="password" name="password" value=""></p> <p>*驗證碼：<input type=" Code" name=" Code" value="" ></p> <p> <input type="checkbox" name="loge" value="loge" checked="checkbox">自動登錄 <a href="">忘記密碼?</a></p> </from> <p><a href="" style="height:20px;text-align: center; line-height: 5px;">登錄</a></p> <p><a href="註冊頁面.html" style="padding-left: 410px">免費註冊>></a></p> </div> </div> <div class="boutn"> <span>2014-2015|www.autohome.com.cn |All Right Roserved.xxxxx|@版權所有</span> </div> </body> </html>登錄作業
<title>註冊頁面</title> <style> *{ margin: 0px; padding: 0px; } .top{ width:100%; height:40px; background-color: gray; } .top .top_shoucang{ padding-left:200px; padding-top: 15px; float: left; } .top .top_loge{ word-spacing: 15px; padding-right: 200px; padding-top: 15px; float: right; } .head{ width: 950px; height:60px; margin: 8px auto; /*padding-left:200px;*/ /*float: left;*/ } .bod{ margin: 8px auto; background-color: red; border: 5px solid gray; /*width: 1350px;*/ width: 950px; height:460px; } .bod .left{ /*background-color: black;*/ padding-top: 20px; /*width: 500px;*/ width: 400px; height:500px; line-height:50px; /*padding-left:200px;*/ padding-left:200px; float: left; } .bod .left_top{ color: blue; } .bod .right{ width: 200px; height:400px; padding-top: 60px; /*padding-right:200px;*/ padding-left:100px; /*float: left;*/ float: left; line-height:80px; } .boutn{ padding-left:70px; } </style> </head> <div> <div class="top"> <div class="top_shoucang"> <p><a href="">*收藏本站</a></p> </div> <div class="top_loge"> <a href="">登錄</a> <a href="">免費註冊</a> <a href="">我的訂單</a> <a href="">vip會員俱樂部</a> <a href="">客戶服務</a> </div> </div> <div class="head"> <img src="logo.png" > </div> <div class="bod"> <div class="left"> <caption><b>註冊新用戶</b></caption> <from action="" method="post"> <p>*  用戶名：<input type="text" name="username" value=""></p> <p>*  手機號：<input type="phone" name="phone" value=""></p> <p>*登錄密碼：<input type="password" name="password" value=""></p> <p>*驗證密碼：<input type="password" name="password" value=""></p> <p>*  驗證碼：<input type=" Code" name=" Code" value="" ></p> <p> <input type="checkbox" name="loge" value="loge" checked="checkbox">現已閱讀並同意 <a href="">(用戶註冊協議)</a></p> </from> <div class="left_top" > <p><input type="submit" value="同 意 以 上 協 議 並 註 冊"></p> </div> </div> <div class="right"> <p> <input type="checkbox" name="loge" value="loge" checked="checkbox">我已註冊，現在就 <a href="登錄頁面.html">登錄</a></p> <img src="youhui.gif" > </div> </div> </div> <div class="boutn" style="text-align: center;margin-left: -500px;float: left"> <a href="">2014-2015|www.autohome.com.cn |All Right Roserved.xxxxx|@汽車之家|版權所有</a></div> </body> </html>註冊作業
前端之基礎css