第八十五節，css佈局補充一

時間 2019-11-12

標籤第八十五 css 佈局補充欄目 CSS 简体版

原文原文鏈接

css佈局補充一css

圖片邊框問題html

注意css佈局時img圖片標籤默認有的瀏覽器有邊框，因此大多時候須要去除圖片的邊框瀏覽器

CSS各類居中方法佈局

水平居中的text-align:center 和 margin:0 auto

這兩種方法都是用來水平居中的，前者是針對父元素進行設置然後者則是對子元素。他們起做用的首要條件是子元素必須沒有被float影響，不然一切都是無用功。margin:0 auto
也能夠被寫成margin:0 auto 0 auto。不能理解的童鞋們能夠本身去找找關於css縮寫的內容。spa

垂直居中的line-height

什麼？！margin在垂直居中裏不起做用了？顯然事情確實如此，咱們僅有margin:0 auto的用法而沒有auto 0的狀況。至於line-height，他也是做用在父元素上，當他的值等於父元素的height值時
，內部的文字就會自動的垂直居中了。此處好像僅僅只能是文字而已，遺憾。
3d

利用position定位來實現元素的水平和垂直居中code

html代碼htm

<div class="a">
    <div class="b">
        <p>這是一段文本</p>
    </div>
</div>

css代碼blog

@charset "utf-8";
*{
    margin: 0;
    padding: 0;
}
.a{
    width: 400px;
    height: 300px;
    background-color: #ff3820;
    /*將父元素絕對定位*/
    position: relative;
}
.b{
    width: 100px;
    height: 50px;
    background-color: #3437ff;
    /*將子元素相對定位*/
    position: absolute;
    /*定位上面百分之五十*/
    top: 50%;
    /*定位左邊百分之五十*/
    left: 50%;
    /*外邊距左邊負元素寬度的一半*/
    margin-left: -50px;
    /*外邊距上負元素高度的一半*/
    margin-top: -25px;
}

css佈局邊距問題圖片

有的標籤有默認邊距，佈局起來不方便，咱們通常在佈局的時候，會先用*將因此內外邊距去除

*{
    margin:0;
    padding:0;
}

利用position: absolute;相對定位來佈局管理後臺

css代碼

@charset "utf-8";
*{
    margin:0;
    padding:0;
    overflow: hidden;
}
body{
    background-color: #00C5CE;
    color: #FFFFFF;
}
/*頭部區域*/
.tou{
    width: auto;
    height: 100px;
    background-color: #00C5CE;
    text-align:center;
    border-bottom: 4px solid #fef6ff;
}
.tou h1{
    font-size: 30px;
    font-weight: bold;
    line-height: 100px;
}
/*左邊導航區域*/
div .dh{
    background-color: #5DA7AA;
    width: 180px;
    height: 572px;
    border: 4px solid #3B5521;
    border-radius: 6px;
    /*將導航區域相對定位*/
    position: absolute;
    left: 0;
}
div .dh h3{
    width: 182px;
    height: 25px;
    background-color: #2E5FC4;
    font-size: 15px;
    text-align: center;
    line-height: 25px;
}
div .dh ul li{
    background-color: #A2D3D3;
    margin-top: 2px;
    margin-bottom: 2px;
    text-align: center;
    color: #1618ff;
    border: 2px solid #A2D3D3;
    border-radius: 6px;
}
/*內容區域*/
div .lr{
    height: 572px;
    /*內容區域相對定位*/
    position: absolute;
    left: 190px;
    right: 0;
    bottom: 50px;
    top: 104px;
    color: #1618ff;
    background-color: #D3EAEF;
    border: 4px solid #3B5521;
    border-radius: 6px;
    overflow: scroll;
}
/*底部區域*/
div .db{
    width: auto;
    height: 42px;
    background-color: #5DA7AA;
    /*底部相對定位*/
    position: absolute;
    top: 687px;
    left: 0;
    right: 0;
    bottom: 0;
    text-align: center;
    line-height: 42px;
}

html代碼

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8">
    <title>後臺管理系統</title>
    <link rel="stylesheet" type="text/css" href="1.css"/>
</head>
<body>
<!--頭部-->
<div class="tou">
    <h1>歡迎登錄後臺管理系統</h1>
</div>
<!--主體-->
<div class="zht">
    <div class="dh">
        <h3>導航中心</h3>
        <ul>
            <li>列表1</li>
            <li>列表2</li>
            <li>列表3</li>
            <li>列表4</li>
            <li>列表5</li>
        </ul>
    </div>

    <div class="lr">
         <h1>這是內容</h1>
         <h1>這是內容</h1>
         <h1>這是內容</h1>
         <h1>這是內容</h1>
         <h1>這是內容</h1>
         <h1>這是內容</h1>
         <h1>這是內容</h1>
         <h1>這是內容</h1>
         <h1>這是內容</h1>
         <h1>這是內容</h1>
         <h1>這是內容</h1>
         <h1>這是內容</h1>
         <h1>這是內容</h1>
         <h1>這是內容</h1>
    </div>

    <div class="db">
    玉秀文化傳播版權全部&#169;
    </div>
</div>
</body>
</html>

效果圖：

利用font-awesome圖片和position定位來實現文本框圖標

css代碼

@charset "utf-8";
.shrk{
    width: 190px;
    height: auto;
    background-color: #194aff;
    position: relative;
}
.shrk input{
    width: 170px;
    height: 25px;
    padding-right: 25px;
    border: 2px solid #2758ff;
    border-radius: 6px;
}
.shrk span{
    /*定位圖片*/
    position: absolute;
    right: 0px;
    top: 8px;
    opacity: 0.7;
    color: #2758ff;
}

html代碼

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8">
    <title>輸入框</title>
    <link rel="stylesheet" type="text/css" href="font-awesome-4.6.3/css/font-awesome.css"/>
    <link rel="stylesheet" type="text/css" href="1.css"/>
</head>
<body>
<div class="shrk">
    <input type="text"/>
    <span class="fa fa-user"></span>
</div>
</body>
</html>

利用position定位來設置模態對話框

html代碼

<!--網頁層-->
<div class="wy">
    <p>這是網頁層</p>
</div>

<!--遮罩層-->
<div class="mt">
</div>

<!--提示層-->
<div class="tshk">
    <h2>提示框</h2>
</div>

css代碼

@charset "utf-8";
*{
    margin: 0;
    padding: 0;
}
/*網頁層*/
.wy{
    width: auto;
    height: 2000px;
    background-color: #ffd41e;
}
/*遮罩層*/
.mt{
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
    background-color:black;
    opacity: 0.8;
}
/*提示層*/
.tshk{
    width: 400px;
    height: 300px;
    background-color:aliceblue;
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 2;
    margin-left: -200px;
    margin-top: -150px;
}

佈局購物商城的購買數量加減框

html代碼

<div class="a">
    <div class="b">-</div>
    <div class="c">
        <input type="text" value="1"/>
    </div>
    <div class="d">+</div>
</div>

css代碼

@charset "utf-8";
*{
    margin: 0;
    padding: 0;
}
.a{
    width: 150px;
    height: 30px;
    margin-top: 10px;
    margin-left: 10px;
    border: 1px solid #C6C6C6;
    cursor: pointer;
}
.b{
    width: 30px;
    height: 30px;
    background-color: #C6C6C6;
    border-right: 1px solid #9B9898;
    text-align: center;
    line-height: 30px;
    font-size: 20px;
    float: left;
}
.c{
    width: 88px;
    height: 30px;
    float: left;
}
.c input{
    width: 88px;
    height: 30px;
    border: 0;
    text-align: center;
    line-height: 30px;
}
.d{
    width: 30px;
    height: 30px;
    background-color: #C6C6C6;
    border-left: 1px solid #9B9898;
    text-align: center;
    line-height: 30px;
    font-size: 20px;
    float: right;
}

相關標籤/搜索

每日一句

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