前端之基礎css

時間 2019-12-08

標籤前端基礎 css 欄目 CSS 简体版

原文原文鏈接

1、anchor僞類，用於閱讀文章。css

a:link(沒有接觸過的連接),用於連接常規狀態（末訪問的連接）
a:hover(鼠標放在連接上的狀態) 用於產生視覺效果（已訪問的連接）
a:visited(訪問過的連接)能清楚判斷已經訪問的連接（鼠標移動的連接）
a:active(在鏈接上按下鼠標是的狀態)，用於表現鼠標按下是的連接狀態（選定的連接）html

2、before after僞類
：before p:before 在每一個<p>元素以前插入的內容
：after p:after 在每一個<p>元素以後插入的內容ide

3、css的優先級post

若是有 !import那麼它的優先級最大
一、style="-----------1000"; 內斂樣式表的權值最高
二、#id---------------100; 統計選擇符中ID的屬性個數
三、.class------------10; 統計選擇符中的class屬性個數
四、p------------------1; 統計選擇附中的HTML標籤個數ui

4、水平對齊方式
text-align屬性規定元素中的文本的水平對齊方式url

left 把文本排列左邊spa

right 把文本排列右邊code

center 把文本排列中間orm

justify 實現兩端對齊文本的效果htm

line-height:200px; 文本行高

vertical-align :-4px; 元素內容垂直對齊方式，只對行內的元素有效，對塊級元素無效

text-decoration:none 去掉拆連接的下劃線

text-decoration:underline 設置超連接下劃線

letter-spacing:10px; 字母間距

word-spacing:20px; 單詞間距

5、外邊距和內邊距

margin：控制元素與元素之間的間距

padding：用於控制內容與邊框之間的距離

border：圍繞在內邊距和內容外的邊框

content: 盒子內容，顯示文本和圖像

margin：外邊距屬性
margin-top: 上邊距
margin-bottom: 下邊距
margin-right: 右邊距
margin-left: 左邊距

居中應用：
margin：0 auto:

6、背景屬性
屬性介紹：
backgroud-color 背景顏色
backgroud-image：url(圖片位置) 背景圖片
backgroud-position 背景定位

7、邊框屬性
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;

8、列表屬性
list-style-type 設置列表項標誌的類型
list-style-image 將圖像設置爲列表項的標誌
list-style-position 設置列表中列表項標誌的位置

9、diaplay屬性
diaplay:inline; 轉換內斂標籤
diaplay:block; 轉換塊級標籤
diaplay:inline-block;
diaplay:none;

visibility: hidden; 隱藏

邊距的塌陷問題

float浮動

10、清除浮動
clear：清除浮動只對自身起做用

clear：none 默認值，容許兩邊能夠有浮動現象

clear：left 不容許左邊有浮動（對自身起做用）

clear：right 不容許右邊有浮動

clear：both 兩邊都沒有浮動

11、float; 半脫離文檔流
position：fixed; 固定定位，徹底脫離文檔流
position:relative; 以本身原位置做爲參照物，可使用top,left ，相對定位,沒有脫離文檔流
position:absolute 徹底脫離文檔流，已經定位的父級做爲參照物

12、補充

常見的塊級元素有：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 實心塊 &nbsp 空格

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>*密&nbsp;&nbsp;&nbsp碼：<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>*&nbsp;&nbsp;&nbsp用戶名：<input type="text" name="username" value=""></p>
         <p>*&nbsp;&nbsp;&nbsp手機號：<input type="phone" name="phone" value=""></p>
        <p>*登陸密碼：<input type="password" name="password" value=""></p>
        <p>*驗證密碼：<input type="password" name="password" value=""></p>
        <p>*&nbsp;&nbsp;&nbsp驗證碼：<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>

註冊做業

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。