CSS基礎知識之背景圖片樣式屬性、雪碧圖、列表導航欄、超連接的僞類樣式、盒子模型、overflow、圓角弧度

時間 2019-11-30

標籤 css 基礎知識背景圖片樣式屬性雪碧列表導航連接盒子模型 overflow 圓角弧度欄目 CSS 简体版

原文原文鏈接

目錄：html

背景圖片樣式屬性url

雪碧圖spa

列表導航欄指針

超連接的僞類樣式code

盒子模型、htm

overflow、blog

圓角弧度圖片

背景圖片樣式屬性：ip

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        #imgContainer {
            border: 20px dotted yellow;
            padding: 50px;
            height: 400px;
            /*背景顏色*/
            background-color: #FF0000;
            /*背景圖片*/
            background-image: url("../../img/qiuqian.jpg");
            /*背景填充 repeat-x    repeat-y    no-repeat*/
            background-repeat: no-repeat;

            /*背景圖片覆蓋
                        cover（覆蓋）: 圖片等比例縮放，直到最小部分填滿容器
                                有可能會出現圖片顯示不全的效果
                        contain（包含）: 圖片也是等比例縮放，直到最大部分填滿容器
                                有可能會出現圖片顯示不完整
                        100% 100%: 圖片拉伸後百分百填充容器*/
            /*background-size: contain;*/

            /*位置座標，偏移量：當指定x或y中的一個方向時，另外一個方向默認是居中效果；
                x或y也能夠是數字px*/
            background-position: right /*水平方向*/ bottom /*垂直方向*/;

           /* !*背景圖片的開始位置
                        border-box:從外邊框處開始顯示
                        padding-box：從內邊距處開始顯示（默認值）
                        content-box：從內容處開始顯示*!
            background-origin: border-box;
            !*背景圖片剪切位置*!
            background-clip: padding-box;*/
        }
    </style>
    <title>背景</title>
</head>
<body>

<div id="imgContainer">
    如月之恆，如日之升；如南山之壽，不騫不崩；如松柏之茂，無不爾或承。
</div>

</body>
</html>

運行圖it

背景的複合屬性：



雪碧圖：

icon的圖片：


代碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        div {
            height: 28px;
            width: 28px;
            background-repeat: no-repeat;
            background-image: url("../../img/icon.gif");
        }

        #div2 {
            background-position: -85px 0;
        }

        #div3 {
            background-position: -163px -30px;
        }
    </style>
    <title>雪碧圖</title>
</head>
<body>
<div></div>
<div id="div2"></div>
<div id="div3"></div>
</body>
</html>

運行圖：

列表導航欄：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        div {
            background-color: #F2AD0A;
            height: 50px;
        }

        ul {
            list-style: none;
            color: red;
            font-size: 30px;
        }

        li {
            float: left;
            width: 200px;
            line-height: 50px;
        }

        li:first-child {
            margin-left: 30px;
        }
    </style>
    <title>列表導航欄</title>
</head>
<body>
<div>
    <ul>
        <li>購物車</li>
        <li>幫助中心</li>
        <li>加入收藏</li>
        <li>設爲首頁</li>
        <li>登錄</li>
        <li>註冊</li>
    </ul>
</div>
</body>
</html>

運行圖：

一個小例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        #container {
            width: 199px;
            height: 180px;
            background-image: url("../../img/bg.gif");
            overflow: hidden;
            margin: 0 auto;
        }

        .title {
            margin-top: 33px;
            margin-left: 40px;
            color: #FF6600;
            font-weight: bold;
        }

        .menu ul {
            list-style: none;
            margin: 0 10px 0 18px;
        }

        .menu ul li {
            float: left;
            width: 56px;
            line-height: 40px;
            font-size: 12px;
        }
    </style>
    <title>商品信息</title>
</head>
<body>
<div id="container">
    <div class="title">
        家用電器
    </div>
    <div class="menu">
        <ul>
            <li>你們電</li>
            <li>洗衣機</li>
            <li>電冰箱</li>
            <li>相機</li>
            <li>電視</li>
            <li>DVD</li>
            <li>相機</li>
            <li>電視</li>
            <li>DVD</li>
        </ul>
    </div>
</div>
</body>
</html>

運行圖：

超連接的僞類樣式：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        /*必須lvha順序寫*/
        /*未訪問狀態*/
        a：link {
            color: blue;
        }

        /*已訪問狀態*/
        a:visited {
            color: darkgrey;
        }

        /*鼠標懸浮狀態*/
        a:hover {
            color: red;
        }

        /*鼠標激活選定狀態*/
        a:active {
            color: yellow;
        }
    </style>
    <title>超連接的僞類樣式</title>
</head>
<body>

<a href="http://www.jredu100.com/">傑瑞教育</a>

</body>
</html>

運行圖：

本身想象，四種狀態有點難以展示。

附加一個小例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        td {
            background-color: #878787;
            /*width: 50px;
            height: 50px;*/
            text-align: center;
        }

        td:hover {
            background-color: #F2AD0A;
            color: red;
        }

    </style>
    <title>九宮格</title>
</head>
<body>
<table border="1" width="300" height="300" align="center">
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>
    <tr>
        <td>4</td>
        <td>5</td>
        <td>6</td>
    </tr>
    <tr>
        <td>7</td>
        <td>8</td>
        <td>9</td>
    </tr>
</table>
</body>
</html>

運行圖：

運行效果是鼠標指針懸浮在哪一個單元格，那個單元格就會變成橙黃底紅字

盒子模型：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        #div1 {
            background-color: red;
            text-align: justify;
            margin: 50px;
            border: 10px solid yellow;
            padding: 20px;
        }
    </style>
    <title>盒子模型</title>
</head>
<body>

<!--任何標籤均可以當成盒子來看-->

<!--margin:外邊距 影響當前盒子和其餘盒子的距離 一個值：四個方向採用相同的值 2個值：上下距離採用第一個 左右距離採用第二個 3個值：上 左右 下依次取值 4個值：上右下左 （margin:0px auto :意思是上下0，左右居中對齊） border:邊框 padding:內邊距 內容和邊框之間的距離 4個值的問題和margin同樣 外邊距，邊框，和內邊距都會影響內容區的寬度！！！！！！ content:內容區 width和height都是內容區的屬性--> <div id="div1"> 盒子模型盒子模型盒子模型盒子模型盒子模型盒子模型 盒子模型盒子模型盒子模型盒子模型盒子模型盒子模型 盒子模型盒子模型盒子模型盒子模型盒子模型盒子模型 盒子模型盒子模型盒子模型盒子模型盒子模型盒子模型 盒子模型盒子模型盒子模型盒子模型盒子模型盒子模型 </div> </body> </html>

運行圖：

一個小例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        #div1 {
            width: 200px;
            height: 200px;
            background-color: #878787;
            margin: 0 auto;
            overflow: hidden;
        }

        #div2 {
            width: 100px;
            height: 100px;
            background-color: #FF0000;
            margin: 0 auto;
            margin-top: 50px;
        }
    </style>
    <title>練習</title>
</head>
<body>

<div id="div1">
    <div id="div2">

    </div>
</div>

</body>
</html>

運行圖：

overflow屬性：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        #div1 {
            width: 100px;
            height: 100px;
            background-color: red;
            margin: 0 auto;
            /*visible:默認值   超出的文本默認顯示
            auto：當文本超出的時候顯示滾動條，不然不顯示
            scroll：無論文本超不超出範圍，都加滾動條
            hidden：超出部分隱藏*/
            overflow: hidden;
        }
    </style>
    <title>overflow</title>
</head>
<body>

<div id="div1">
    傑瑞教育傑瑞教育傑瑞教育傑瑞教育傑瑞教育傑瑞教育傑瑞教育傑瑞教育
    傑瑞教育傑瑞教育傑瑞教育傑瑞教育傑瑞教育傑瑞教育傑瑞教育傑瑞教育
    傑瑞教育傑瑞教育傑瑞教育傑瑞教育傑瑞教育傑瑞教育傑瑞教育傑瑞教育
    傑瑞教育傑瑞教育傑瑞教育傑瑞教育傑瑞教育傑瑞教育傑瑞教育傑瑞教育
</div>

</body>
</html>

運行圖：

圓角弧度：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        #container{
            width: 300px;
            height: 300px;
            background-color: red;
            margin: 0 auto;
            border-radius: 50px 10px;/*類同於margin的4個屬性，這個是對角線的*/
        }
    </style>
    <title>圓角弧度</title>
</head>
<body>
<div id="container">

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