中文字幕av专区_日韩电影在线播放_精品国产精品久久一区免费式_av在线免费观看网站

溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

2）前端的css排版布局

發布時間：2020-06-15 15:18:29 來源：網絡 閱讀：7038 作者：tty之星 欄目：web開發

回顧重點：

 

 2）前端的css排版布局

偽元素選擇器：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        p:first-letter{
            color: red;
        }
    </style>
</head>
<body>
<p>李曉峰</p>
</body>
</html>

 2）前端的css排版布局

 

在名字前面加字段博客作者：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        p:first-letter{
            color: red;
        }
        p:before{
            content: '博客作者'
        }
    </style>
</head>
<body>
<p>李曉峰</p>
</body>
</html>

 

 2）前端的css排版布局

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        p::first-letter{
            color: red;
        }
        p::before{
            content: '博客作者';
        }
        p::after{
            content: '.';
        }
    </style>
</head>
<body>
<p>李曉峰</p>
</body>
</html>

 2）前端的css排版布局

 

p::after{
    content: '.';
    /*設置成塊標簽*/
    display: block;
    width: 100px;
    height: 100px;
    background-color: green;
}

 2）前端的css排版布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        p::first-letter{
            color: red;
        }
        p::before{
            content: '博客作者';
        }
        p::after{
            content: '.';
            /*設置成塊標簽*/
            display: block;
            /*width: 100px;*/
            /*height: 100px;*/
            /*background-color: green;*/
            /*visibility: hidden;*/
        }
    </style>
</head>
<body>
<p>李曉峰</p>
<div>nginx</div>
</body>
</html>

 

2）前端的css排版布局

 

解決浮動帶來的問題：

p::after{
    content: '.';
    /*設置成塊標簽*/
    display: block;
    /*width: 100px;*/
    /*height: 100px;*/
    /*background-color: green;*/
    visibility: hidden;
    height:0;
}

 

 2）前端的css排版布局

文字在中間顯示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css" media="screen">
        div p{
            color: red;
            text-align: center;
        }
    </style>
</head>
<body>
<div>
    <p>
        德國
    </p>
</div>
<p>sss</p>
</body>
</html>

 2）前端的css排版布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css" media="screen">
        div p{
            color: red;
            width: 100px;
            font-size: 20px;
            background-color: green;
            text-align: center;
            line-height: 100px;
        }
    </style>
</head>
<body>
<div>
    <p>
        德國
    </p>
</div>
</body>
</html>

 2）前端的css排版布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css" media="screen">
        div {
            color: red;
            width: 200px;
            background-color: green;
            text-align: center;
            line-height: 100px;
        }
        p{
            background-color: yellow;
        }
    </style>
</head>
<body>
<div>
    <p>
        德國
    </p>
</div>
</body>
</html>

2）前端的css排版布局 

（1）css的繼承性：

繼承來的屬性權重為0，如果權重都為0，誰描述的近誰優先

#tt{}

.active{}


繼承和權重


記住：有一些屬性是可以繼承下來 ： color 、 font-*、 text-*、line-* 。主要是文本級的標簽元素。

 

但是像一些盒子元素屬性，定位的元素（浮動，絕對定位，固定定位）不能繼承。

盒模型：

 2）前端的css排版布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        div{
            width: 200px;
            height: 200px;
            background-color: red;
            padding: 50px;
            border: 10px solid green;
        }
    </style>
</head>
<body>
<div>

</div>
</body>
</html>

 2）前端的css排版布局

border-top: 10px solid red;

border-right: 10px solid red;

border-bottom: 10px solid red;

border-left: 10pxb solid red;

舉例：

<style type="text/css">
    div{
        width: 200px;
        height: 200px;
        background-color: red;
        padding: 50px;
        border-top: 10px solid grey;

</style>

 2）前端的css排版布局

 

Margin:(填坑)：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        .box{
            width: 100px;
            height: 100px;
            background-color: red;
            margin-bottom: 50px;
        }
        .box2{
            width: 100px;
            height: 100px;
            background-color: yellow;
        }
    </style>
</head>
<body>
<div class="box">

</div>
<div class="box2"></div>
</body>
</html>

 2）前端的css排版布局

 

Margin 塌陷：

    .box{
        width: 100px;
        height: 100px;
        background-color: red;
        margin-bottom: 50px;
    }
    .box2{
        width: 100px;
        height: 100px;
        background-color: yellow;
        margin-top: 100px;
    }
</style>

 2）前端的css排版布局

span{
    background-color: #0000CC        }
.t{
    margin-right: 50px;
}
.f{
    margin-left: 30px;
}

 2）前端的css排版布局

注：：要寫垂直距離在一個上面寫不要寫兩個，水平的沒問題

 

 

 

標準文檔流：

（1）空白折疊現象

（2）高矮不齊，底邊對齊

（3）自動換行，一行寫不滿，換行寫

 

2）前端的css排版布局 

實例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        *{
            padding: 0;
            margin: 0px;
        }
        div{
            width: 200px;
            height: 200px;
        }
        .box1{
            background-color: red;
        }
        .box2{
            background-color: green;
        }
        .box3{
            background-color: yellow;
        }
    </style>
</head>
<body>
<div class="box1">

</div>
<div class="box2">

</div>
<div class="box3">

</div>
</body>
</html>

 2）前端的css排版布局

 

    *{
        padding: 0;
        margin: 0px;
    }
    div{
        width: 200px;
        height: 200px;
    }
    .box1{
        background-color: red;
        float: left;
    }
    .box2{
        background-color: green;
        width: 230px;
    }
    .box3{
        background-color: yellow;
    }
</style>

 

 2）前端的css排版布局

 

<style type="text/css">
    *{
        padding: 0;
        margin: 0px;
    }
    div{
        width: 200px;
        height: 200px;
    }
    .box1{
        background-color: red;
        float: left;
    }
    .box2{
        background-color: green;
        width: 230px;
        float: left;
    }
    .box3{
        background-color: yellow;
        height: 230px;
    }
</style>

 

 2）前端的css排版布局

貼邊現象：

<style type="text/css">
    *{
        padding: 0;
        margin: 0px;
    }
    div{
        width: 200px;
        height: 200px;
    }
    .box1{
        background-color: red;
        float: left;
        height: 300px;
    }
    .box2{
        background-color: green;
        width: 230px;
        float: left;
    }
    .box3{
        background-color: yellow;
        height: 230px;
        float: left;
    }
</style>

 

2）前端的css排版布局

2）前端的css排版布局2）前端的css排版布局

浮動的好處：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        *{
            padding: 0px;
            margin: 0;
        }
        .father{
            width: 1210px;
            height: 300px;
            margin: 0 auto;
            background-color: black;
        }
        .box1{
            background-color: red;
            height: 300px;
            width: 200px;
            float: left;
        }
        .box2{
            background-color: yellow;
            height: 230px;
            width: 200px;
            float: right;
        }
        .box3{
            background-color: green;
            height: 200px;
            width: 200px;
            margin: 0 auto;

        }
        .active{
            width: 1210px;
            height: 300px;
            background-color: purple;
            margin: 0 auto;
        }
    </style>
</head>
<body>
<div class="father">
    <div class="box1">
    1
</div>
<div class="box2">
    2
</div>
<div class="box3">
    3
</div>

</div>
<div class="active"></div>
</body>
</html>

 

 2）前端的css排版布局

Overflow：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        div{
            width: 100px;
            height: 100px;
            border: 1px solid red;
            overflow:scroll;
        }
    </style>
</head>
<body>
<div>文字文字文字文字文字文字文字文字文字文字文
    字文字文字文字文字文字文字文字文字文字文字文字
    字文字文字文字文字文字文字文字文字文字文字文字
    字文字文字文字文字文字文字文字文字文字文字文字
    文字文字文字文字文字文字文字文字文字文字文字</div>
</body>
</html>

 

2）前端的css排版布局 

2）前端的css排版布局

 

Margin:

 

 

如果漂浮的盒子不存在margin的塌陷

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
*{
    padding:0;
    margin: 0px;
}
        .head{
            width: 100%;
            height: 80px;
            background-color:black;
            padding-top: 20px;
        }
        .container{
            width: 1210px;
            margin: 0 auto;
            background-color: deeppink;

        }
        .head .logo{
            width: 50px;
            height: 50px;
            background-color:#ff6700;

        }
    </style>
</head>
<body>
<div class="head">
    <div class="container">
        <div class="logo">

        </div>
    </div>
</div>

</body>
</html>

 

 2）前端的css排版布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
*{
    padding:0;
    margin: 0px;
}
        .head{
            width: 100%;
            height: 100px;
            background-color:black;
            /*padding-top: 20px;*/
        }
        .container{
            width: 1210px;
            margin: 0 auto;
            background-color:lawngreen;

        }
        .head .logo{
            width: 50px;
            height: 50px;
            background-color:#ff6700;
            float: left;
            margin-top: 20px;

        }
    </style>
</head>
<body>
<div class="head">
    <div class="container">
        <div class="logo">

        </div>
    </div>
</div>

</body>
</html>

 2）前端的css排版布局

總結漂浮的盒子是不能夠margin 0 auto居中的

 

添加：

font-size: 30px;

調整字體大小

list-style: none;

去除圓點的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        div{
            font-size: 30px;
            /*開頭空兩個字符*/
            text-indent: 2em;
            /*加下滑線*/
            text-decoration: underline;
            /*變成小手*/
            cursor: pointer;
            /*高度居中*/
            line-height: 40px;
            /*文本居中*/
            text-align: center;
        }
    </style>
</head>
<body>
<div>
    aaaddddf fdsfdsafsa efadsafasdf
</div>
</body>
</html>

 

border-radius: 50px;

這個是用來切園的  可以100% 或者50%

2）前端的css排版布局

Background 顏色：

 

Rgb表示法、十六進制表示法

 

Rgb：紅色、藍色、綠色 三種原色組成

color: rgb(220,0,110);

 

2）前端的css排版布局

2）前端的css排版布局

圖片平鋪：

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        .jieyi{
            width: 1200px;
            height: 1000px;
            background-image: url("./jieyi.jpg");
        }
    </style>
</head>
<body>
<div class="jieyi">
    
</div>
</body>
</html>

2）前端的css排版布局 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        .jieyi{
            width: 1200px;
            height: 1000px;
            background-image: url("./jieyi.jpg");
            /*不平埔 */
            background-repeat: no-repeat;
        }
    </style>
</head>
<body>
<div class="jieyi">
    
</div>
</body>
</html>

 2）前端的css排版布局

這個就是精靈圖技術：

 

接下來切割圓形頭像：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        .jieyi{
            border: 1px solid red;
            /*想左和上面移動剩下的數值*/
            width: 200px;
            height: 200px;
            background-image: url("./jieyi.jpg");
            /*不平埔 */
            background-repeat: no-repeat;
            /*想左和上面移動的px*/
            background-position: -180px -100px;
            border-radius: 50%;
        }
    </style>
</head>
<body>
<div class="jieyi">
    
</div>
</body>
</html>

 2）前端的css排版布局

可以動態的去調整：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        .jieyi{
            border: 1px solid red;
            /*想左和上面移動剩下的數值*/
            width: 200px;
            height: 200px;
            background-image: url("./jieyi.jpg");
            /*不平埔 */
            background-repeat: no-repeat;
            /*想左和上面移動的px*/
            /*background-position: -180px -100px;*/
            border-radius: 50%;
            background-attachment: fixed;
            margin-left: 150px;
            margin-top: 150px;
        }
    </style>
</head>
<body style="height: 2000px; width: 2000px">
<div class="jieyi">
    
</div>
</body>
</html>

 

 2）前端的css排版布局

 

www.iconfont.cn 阿里巴巴圖標庫中選擇圖標

 

 2）前端的css排版布局

選擇要使用的圖標：

 2）前端的css排版布局

然后在購物車中選擇：

 2）前端的css排版布局

然后會出現：

 2）前端的css排版布局

編寫項目名稱：

 2）前端的css排版布局

再到代碼應用中去：

2）前端的css排版布局 

Unicode的引用：

 

 2）前端的css排版布局2）前端的css排版布局

將圖片下載到本地：

2）前端的css排版布局 

下載之后 解壓到使用連接的目錄下面：

 2）前端的css排版布局

上面的散步，不過要修改一下啊在前面加上./font目錄去連接圖片

 2）前端的css排版布局

 

 2）前端的css排版布局

查看一下：

 2）前端的css排版布局

優化一下：

 

 2）前端的css排版布局

2）前端的css排版布局

 

在一次優化

 

 2）前端的css排版布局


 2）前端的css排版布局

另外這里有在線連接，但是每次如果加了圖片或者減少圖片需要更新在線連接：

 

 2）前端的css排版布局

 2）前端的css排版布局

 2）前端的css排版布局

 


向AI問一下細節

免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。

AI
助
手
黎平县| 昭苏县| 攀枝花市| 延吉市| 昌吉市| 栖霞市| 西乌珠穆沁旗| 石台县| 孟州市| 深泽县| 保康县| 汉中市| 文安县| 赣榆县| 漳州市| 会昌县| 义马市| 诸城市| 巴东县| 广昌县| 东海县| 安国市| 房产| 泸定县| 冕宁县| 胶南市| 北川| 天全县| 柳河县| 大名县| 余庆县| 交城县| 上饶市| 嘉峪关市| 利津县| 沽源县| 惠安县| 新竹县| 云霄县| 资兴市| 米脂县|