亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

搜索
博主信息
博文 42
粉絲 2
評(píng)論 0
訪問量 63676
最新下載
更多>
網(wǎng)站特效
網(wǎng)站源碼
網(wǎng)站素材
前端模板
css及布局深入（css選擇器 背景css 內(nèi)外邊距 浮動(dòng) 定位 布局案例）2019年1月15日22時(shí)45分
小明的博客
原創(chuàng)
865人瀏覽過

css是在html搭建起結(jié)構(gòu)后進(jìn)行裝飾的，css選擇器就時(shí)要更準(zhǔn)確和省力的找到我們需要改變樣式的標(biāo)簽，css選擇器需要靈活方便準(zhǔn)確。背景css可以給出背景相應(yīng)的樣式，尤其在css3加入的background-size可以更加多變的改變背景。頁面布局需要通過內(nèi)外邊距、浮動(dòng)、定位作為基礎(chǔ)來進(jìn)行，通過圣杯布局  雙飛翼布局進(jìn)一步的加深印象，從而熟練頁面布局。

實(shí)例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css常用選擇器</title>
    <link rel="stylesheet" href="static/css/style01.css">
</head>
<body>
    <ul>
        <li id="bg-red">1</li>
        <li class="bg-green">2</li>
        <li class="bg-green">3</li>
        <li class="bg-green">4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
        <li>10</li>
    </ul>

    <!-- 演示偽類選擇器中的子元素與類型選擇器之間的區(qū)別與聯(lián)系 -->
    <div>
        <p>豬哥</p>
        <li>朱老師</li>
        <p>西門大官人</p>
    </div>

    <div>
        <p>滅絕師太</p>
        <li>韋小寶</li>
    </div>

     <!-- 演示表單選擇器 -->
     <form action="">
        <label for="email">郵箱:</label>
        <input type="email">
        <br>
        <label for="password">密碼:</label>
        <input type="password">
        <br>
        <input type="radio" id="week" name="save" value="7" checked><label for="week">保存一周</label>
        <input type="radio" id="month" name="save" value="30"><label for="month">保存一月</label>
        <br>
        <button>登錄</button>
    </form>

    
</body>
</html>
/* 標(biāo)簽選擇器 */
ul {
    margin-top: 0;
    margin-bottom: 0;
    padding-left: 0; 
    border: 1px solid firebrick;
    padding: 20px;
    overflow: hidden;
}

/* 層級(jí)選擇器 */
ul li {
    list-style-type: none;
    width: 40px;
    height: 40px;
    background-color: slategray;
    float: left;
    margin-left: 10px;
    border-radius: 50%;
    color: #fff;
    text-align: center;
    line-height: 40px;
    box-shadow: 2px 2px 1px darkblue;
}

/* id選擇器 */
#bg-red{
    background-color: red;
}
/* class選擇器 */
.bg-green{
    background-color: green;
}
/* 屬性選擇器 */
li[id="bg-red"]{
    width: 100px;
    height: 100px;
}
/* 群組選擇器 */
#bg-red, .bg-green {
    font-size: 28px;
}
/* 相鄰選擇器 */
#bg-red + * {
    width: 100px;
}
/* 兄弟選擇器 */
#bg-red ~ * {
    height: 100px;;
}

/* 偽類選擇器 */
ul :first-child {
    border: 10px solid khaki;
}
ul :last-child {
    width: 100px;
}
ul :nth-child(5) {
    width: 80px;
}
ul :nth-last-child(2) {
    background-color: blueviolet;
}

/* 類型選擇器 */
ul li:last-of-type {
    background-color: chartreuse;
}
ul li:first-of-type {
    color: darkturquoise;
}
ul li:nth-of-type(3) {
    color: aqua;
}
ul li:nth-last-of-type(4) {
    background-color: darkolivegreen;
}

/* 選中每個(gè)div下面的第二元素 */
div :nth-child(2) {
    background-color: gold;
}
/* 如果只想選擇西門大官人 */
/* 類型選擇器第二個(gè)div 下面的第三個(gè)元素 */
div:first-of-type :nth-child(3) {
    background-color: red;
}

/* 如果只想選擇西門大官人 另一種思路 */
div p:nth-of-type(2) {
    background-color: blue;
}

/* 表單選擇器 */
/* 表單下的控件選擇可用狀態(tài) */
form :enabled {
    background-color: blueviolet;
}
/* 表單下的控件選中狀態(tài) */
form :checked {
    width: 100px;
}
/* 表單下的控件獲取焦點(diǎn)狀態(tài) */
form :focus {
    background-color: cornflowerblue;
}
/* 鼠標(biāo)懸停狀態(tài) */
button:hover {
    background-color: bisque;
}
/* 控件下輸入無效控件時(shí) */
form :invalid {
    color: orange;
}

運(yùn)行實(shí)例 ?

點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例

實(shí)例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>遮罩登錄框</title>
    <link rel="stylesheet" href="static/css/style02.css">
</head>
<body>
    <div class="box">        
    </div>
    <img src="static/images/login.jpg" alt="login" class="login">
</body>
</html>


* {
    margin: 0;
    padding: 0;
}
body {
    background-image: url('../images/php.jpg');
    background-size: cover;
    background-repeat: no-repeat;
}
.box {
    width: 100%;
    height: 100%;
    background-color: black;
    /* 設(shè)置為絕對(duì)定位脫離文檔流 就可以讓他撐滿整個(gè)屏幕 */
    position: absolute;
    top: 0;
    left: 0;
    opacity: .7;
}
.login {
    width: 380px;
    height: 460px;
    /* 設(shè)置絕對(duì)定位 讓他在最中間 絕對(duì)定位后img成為塊元素*/
    position: absolute;
    top: 50%;
    left: 50%;
    /* 在進(jìn)行偏移 讓他的中心在頁面的中心 偏移這張圖片寬高的一半 */
    margin-left: -190px;
    margin-top: -230px;
}

運(yùn)行實(shí)例 ?

點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例

實(shí)例

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>固定廣告位</title>
    <link rel="stylesheet" href="static/css/style03.css">
</head>
<body>
    <div class="adv">
        <h3>固定廣告位</h3>
        <h2>電話：11111111</h2>
        <span onclick="this.parentNode.style.display = 'none'">關(guān)閉</span>
    </div>
</body>
</html>

body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 4000px;
    background-color: lightslategray;
}
.adv {
    width: 300px;
    height: 250px;
    background-color: brown;
    position: fixed;
    bottom: 5px;
    right: 5px;
}

.adv h2, .adv h3 {
    margin-top: 0;
    padding-top: 30px;
    text-align: center;
}
.adv span {
    background-color: aliceblue;
    position: absolute;
    padding: 3px;
    top: 0;
    right: 0;
}

運(yùn)行實(shí)例 ?

點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例


實(shí)例

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="static/css/style04.css">
    <title>雙飛翼布局</title>
</head>
<body>
    <!-- 頭部 -->
    <div class="header">
        <div class="content">
            <ul class="nav">
                <li class="item"><a href="">首頁</a></li>
                <li class="item"><a href="">公司新聞</a></li>
                <li class="item"><a href="">最新產(chǎn)品</a></li>
                <li class="item"><a href="">聯(lián)系我們</a></li>
            </ul>
        </div>
    </div>

    <!-- 中間內(nèi)容 -->
    <div class="container">
        <!-- 這里聯(lián)系到解決內(nèi)邊距增加盒子變大的案例 用寬高分離 外面套個(gè)盒子 -->
        <div class="wrap">
            <div class="main">主題內(nèi)容</div>
        </div>
        <div class="left">左邊</div>
        <div class="right">右邊</div>
    </div>



    <!-- 底部 -->
    <div class="footer">
        <div class="content">
            <p>
                <a href="">? PHP中文網(wǎng)版權(quán)所有</a>  | 
                <a href="">0551-88889999</a>  | 
                <a href="">皖I(lǐng)CP2016098801-1</a>
            </p>
            
        </div>
    </div>
</body>
</html>

.header {
    /* 通常寬度默認(rèn)為100% */
    width: 100%;

    /* 參考色塊,上線時(shí)應(yīng)該刪除或替換 */
    background-color: lightgray;
}

.header .content {
    /* 頭部內(nèi)容區(qū),應(yīng)該居中顯示,所有要有寬度 */
    width: 1000px;
    height: 60px;
    
    /* 上下外邊距為0,左右自動(dòng)居中 */
    margin: 0 auto;
    /* margin: 0 auto的等價(jià)語句,注意上右下左的順序 */
    margin-top: 0;
    margin-right: auto;
    margin-bottom: 0;
    margin-left: auto;
    /* 因?yàn)樯舷孪嗟?左右也相等,所以可以簡(jiǎn)寫為: margin: 0 auto; */
    
}

.header .content .nav {
    /* 清空導(dǎo)航UL元素的默認(rèn)樣式 */
    margin: 0;
    padding: 0;
}

.header .content .nav .item {
    list-style-type: none; 
}

.header .content .nav .item a {
    /* 一定要將浮動(dòng)設(shè)置到鏈接標(biāo)簽<a>上面,否則無法實(shí)現(xiàn)導(dǎo)航區(qū)的點(diǎn)擊與高亮 */
    float: left;
    /* 設(shè)置最小寬度與最小高寬,以適應(yīng)導(dǎo)航文本的變化 */
    min-width: 80px;
    min-height: 60px;
    /* 設(shè)置行高與頭部區(qū)塊等高,使導(dǎo)航文本可以垂直居中顯示 */
    line-height: 60px;
    color: #444;
    /* 將導(dǎo)航文本設(shè)置為系統(tǒng)根字體大小的1.2倍 */
    font-size: 1.2rem;
    /* 設(shè)置民航文本的左右內(nèi)邊距,使導(dǎo)航文本不要挨的太緊 */
    padding: 0 15px;
    /* 去掉鏈接標(biāo)簽?zāi)J(rèn)的下劃線 */
    text-decoration: none;
    /* 讓導(dǎo)航文本在每一個(gè)小區(qū)塊中居中顯示 */
    text-align: center;
}

.header .content .nav .item a:hover {
    /* 當(dāng)鼠標(biāo)移入到導(dǎo)航鏈接上時(shí)改變背景色與文本前景色,實(shí)現(xiàn)當(dāng)前導(dǎo)航高亮功能 */
    background-color: #444;
    color: white;  
}

/* 中間部分 */
.container {
    width: 1000px;
    min-height: 600px;
    background-color: lightgoldenrodyellow;
    margin: 10px auto;
}
/* main上面的div 用來將main擠在中間 */
.wrap {
    /* 寬高繼承父級(jí) */
    width: inherit; 
    min-height: inherit;
    background-color: aqua;
}
.left {
    width: 200px;
    height: 600px;
    background-color: brown;
    /* 負(fù)的外邊距移動(dòng)到位置 */
    margin-left: -100%;
}
.right {
    width: 200px;
    height: 600px;
    background-color: lawngreen;
    margin-left: -200px;
}
.wrap, .left, .right {
    float: left;
}
.main {
    padding-left: 200px;
    padding-right: 200px;
}
















/* 底部與頭部的基本樣式類似 */
.footer {
    width: 100%;
    background-color: lightgray;
}

.footer .content {
    width: 1000px;
    height: 60px;
 
    margin: 0 auto;
}
.footer .content p {
    text-align: center;
    line-height: 60px;
}

.footer .content  a {
    text-decoration: none;
    color: #777;
}

/* 鼠標(biāo)移入時(shí)顯示下劃線并加深字體前景色 */
.footer .content  a:hover {
    text-decoration: underline;
    color: #444;
}

運(yùn)行實(shí)例 ?

點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例

實(shí)例

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="static/css/style05.css">
    <title>圣杯布局</title>
</head>
<body>
    <!-- 頭部 -->
    <div class="header">
        <div class="content">
            <ul class="nav">
                <li class="item"><a href="">首頁</a></li>
                <li class="item"><a href="">公司新聞</a></li>
                <li class="item"><a href="">最新產(chǎn)品</a></li>
                <li class="item"><a href="">聯(lián)系我們</a></li>
            </ul>
        </div>
    </div>

    <!-- 中間內(nèi)容 -->
    <div class="container">
        <!-- 這里這里不需要 外面的那層嵌套 -->
      
            <div class="main">主題內(nèi)容</div>
    
        <div class="left">左邊</div>
        <div class="right">右邊</div>
    </div>



    <!-- 底部 -->
    <div class="footer">
        <div class="content">
            <p>
                <a href="">? PHP中文網(wǎng)版權(quán)所有</a>  | 
                <a href="">0551-88889999</a>  | 
                <a href="">皖I(lǐng)CP2016098801-1</a>
            </p>
            
        </div>
    </div>
</body>
</html>

.header {
    /* 通常寬度默認(rèn)為100% */
    width: 100%;

    /* 參考色塊,上線時(shí)應(yīng)該刪除或替換 */
    background-color: lightgray;
}

.header .content {
    /* 頭部內(nèi)容區(qū),應(yīng)該居中顯示,所有要有寬度 */
    width: 1000px;
    height: 60px;
    
    /* 上下外邊距為0,左右自動(dòng)居中 */
    margin: 0 auto;
    /* margin: 0 auto的等價(jià)語句,注意上右下左的順序 */
    margin-top: 0;
    margin-right: auto;
    margin-bottom: 0;
    margin-left: auto;
    /* 因?yàn)樯舷孪嗟?左右也相等,所以可以簡(jiǎn)寫為: margin: 0 auto; */
    
}

.header .content .nav {
    /* 清空導(dǎo)航UL元素的默認(rèn)樣式 */
    margin: 0;
    padding: 0;
}

.header .content .nav .item {
    list-style-type: none; 
}

.header .content .nav .item a {
    /* 一定要將浮動(dòng)設(shè)置到鏈接標(biāo)簽<a>上面,否則無法實(shí)現(xiàn)導(dǎo)航區(qū)的點(diǎn)擊與高亮 */
    float: left;
    /* 設(shè)置最小寬度與最小高寬,以適應(yīng)導(dǎo)航文本的變化 */
    min-width: 80px;
    min-height: 60px;
    /* 設(shè)置行高與頭部區(qū)塊等高,使導(dǎo)航文本可以垂直居中顯示 */
    line-height: 60px;
    color: #444;
    /* 將導(dǎo)航文本設(shè)置為系統(tǒng)根字體大小的1.2倍 */
    font-size: 1.2rem;
    /* 設(shè)置民航文本的左右內(nèi)邊距,使導(dǎo)航文本不要挨的太緊 */
    padding: 0 15px;
    /* 去掉鏈接標(biāo)簽?zāi)J(rèn)的下劃線 */
    text-decoration: none;
    /* 讓導(dǎo)航文本在每一個(gè)小區(qū)塊中居中顯示 */
    text-align: center;
}

.header .content .nav .item a:hover {
    /* 當(dāng)鼠標(biāo)移入到導(dǎo)航鏈接上時(shí)改變背景色與文本前景色,實(shí)現(xiàn)當(dāng)前導(dǎo)航高亮功能 */
    background-color: #444;
    color: white;  
}

/* 中間部分 */
.container {
    /* 這里把寬度相應(yīng)的減少 */
    width: 600px;
    min-height: 600px;
    background-color: lightgoldenrodyellow;
    margin: 10px auto;
    padding-left: 200px;
    padding-right: 200px;

}
/* main上面的div 用來將main擠在中間 */
.main {
    /* 寬高繼承父級(jí) */
    width: inherit; 
    min-height: inherit;
    background-color: aqua;
}
.left {
    width: 200px;
    height: 600px;
    background-color: brown;
    /* 負(fù)的外邊距移動(dòng)到位置 */
    margin-left: -100%;
    /* 通過絕對(duì)定位放到相應(yīng)的位置 */
    position: relative;
    left: -200px;
}
.right {
    width: 200px;
    height: 600px;
    background-color: lawngreen;
    margin-left: -200px;
    position: relative;
    left: -200px;
}
.main, .left, .right {
    float: left;
}
















/* 底部與頭部的基本樣式類似 */
.footer {
    width: 100%;
    background-color: lightgray;
}

.footer .content {
    width: 1000px;
    height: 60px;
 
    margin: 0 auto;
}
.footer .content p {
    text-align: center;
    line-height: 60px;
}

.footer .content  a {
    text-decoration: none;
    color: #777;
}

/* 鼠標(biāo)移入時(shí)顯示下劃線并加深字體前景色 */
.footer .content  a:hover {
    text-decoration: underline;
    color: #444;
}

運(yùn)行實(shí)例 ?

點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例



以上內(nèi)容總結(jié)：

1、css選擇器基本選擇器就可以適應(yīng)頁面需求，但是兄弟選擇器  相鄰選擇器 偽類  類型選擇器 還有專門的表單可以更加靈活的找到需要的標(biāo)簽；

2、內(nèi)邊距增加盒子的大小，可以通過改變盒子大小和寬高分離來解決

3、外邊距的特點(diǎn)：同級(jí)塌陷  嵌套傳遞  自動(dòng)擠壓

4、浮動(dòng) 絕對(duì)定位脫離文檔流，脫離文檔流才是布局的前提

5、圣杯布局  雙飛翼布局的思路區(qū)別就是：雙飛翼的main之外還嵌套一層然后浮動(dòng)后通過負(fù)的外邊距調(diào)整好左右區(qū)域的位置，這里需要注意到,main加左右內(nèi)邊距讓顯示區(qū)域呈現(xiàn)的前提就是main上面的那層嵌套div，否則格式會(huì)亂；圣杯就是cotaineri就加左右內(nèi)邊距然后改變寬高來達(dá)到預(yù)期的大小，通過負(fù)外邊距  相對(duì)定位來吧左右調(diào)整到位；

6、這倆布局我之前有疑問即使不加嵌套或者不位移也可實(shí)現(xiàn)，但是經(jīng)過思考，老師這樣布局可以方便以后調(diào)整，可以輕松的改變一行分幾欄，實(shí)現(xiàn)布局重用。

批改狀態(tài)：未批改

老師批語：
本博文版權(quán)歸博主所有，轉(zhuǎn)載請(qǐng)注明地址！如有侵權(quán)、違法，請(qǐng)聯(lián)系admin@php.cn舉報(bào)處理！
全部評(píng)論 文明上網(wǎng)理性發(fā)言，請(qǐng)遵守新聞評(píng)論服務(wù)協(xié)議
0條評(píng)論
關(guān)于我們 免責(zé)申明 意見反饋 講師合作 廣告合作 最新更新
php中文網(wǎng)：公益在線php培訓(xùn)，幫助PHP學(xué)習(xí)者快速成長！
關(guān)注服務(wù)號(hào) 技術(shù)交流群
PHP中文網(wǎng)訂閱號(hào)
每天精選資源文章推送
PHP中文網(wǎng)APP
隨時(shí)隨地碎片化學(xué)習(xí)
PHP中文網(wǎng)抖音號(hào)
發(fā)現(xiàn)有趣的

Copyright 2014-2025 http://ipnx.cn/ All Rights Reserved | php.cn | 湘ICP備2023035733號(hào)

    • 登錄PHP中文網(wǎng)，和優(yōu)秀的人一起學(xué)習(xí)！
    全站2000+教程免費(fèi)學(xué)