python 46 邊界圓角、a_img_list標籤、僞類選擇器

時間 2019-11-16

標籤 python 邊界圓角 img list 標籤選擇器欄目 Python 简体版

原文原文鏈接

一：邊界圓角　css

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>邊界圓角</title>
    <style type="text/css">
        .box {
            width: 200px;
            height: 200px;
            background-color: orange;
        }
        /*單角設置*/
        .box {
            /*一個固定值: 橫縱*/
            border-top-left-radius: 100px;
            /*兩個固定值:橫 縱*/
            border-top-left-radius: 100px 50px;
            /*百分比賦值*/
            border-top-left-radius: 100%;
        }

        /*總體賦值*/
        .box {
            /*不分方位(橫縱)*/
            /*左上爲第一個角,順時針,不足找對角*/
            /*border-radius: 10px 100px 50px;*/

            /*區分橫縱*/
            /*1./前控制橫向,後控制縱向*/
            /*2.橫向又能夠分爲1,2,3,4個值,縱向毅然*/
            border-radius: 10px 100px 50px / 50px;
            /*左上橫10 右上橫100 右下橫50 左下橫100 / 縱向全爲50*/
            /*全部最多能夠賦值8個值*/
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

單腳設置和總體賦值

二：a_img_list標籤html

　　一、基本使用網絡

　　二、屬性ide

　　三、其餘應用場景佈局

　　四、錨點測試

　　五、img 使用spa

　　六、list 列表　　code

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>a_img_list</title>
    <style type="text/css">
        /*reset操做: a標籤一些默認屬性的清除*/
        a {
            color: #333;
            text-decoration: none;
            outline: 0;
        }
    </style>
</head>
<body>
    <!-- 一.基本使用 -->
    <!-- 超連接標籤:a -->
    <!-- 雙/行/單一類型標籤 -->
    <a href="https://www.baidu.com">前往百度</a>
    <a href="./05_邊界圓角.html">前往邊界圓角頁面</a>
    <!-- ./或省略表明當前文件所在路徑,能夠訪問與該文件同路徑下的全部文件及文件夾 -->
    <a href="./temp/temp.html">前往temp頁面</a>

    <!-- 二.屬性 -->
    <!-- title:鼠標懸浮的文本提示 -->
    <!-- target:_blank,新開空白標籤位來打開目標頁面 -->
    <a href="http://sina.com.cn" title="新浪網" target="_blank">前往新浪</a>

    <!-- 三.其餘應用場景 -->
    <!-- mailto | sms | tel -->
    <a href="mailto:zero@163.com">信息給zero</a>
    

    <!-- 四.錨點 -->
    <!-- a與a href="#錨點名" -- name="錨點名" -->
    <!-- a與標籤 href="#錨點名" -- id="錨點名" -->
    <a href="#tag">前往底部</a>
    <!-- 測試錨點請tab -->
    br * 100
    <!-- 設置一個錨點 -->
    <!-- .bottom作底部佈局的區域 -->
    <div class="bottom">
        <a name="tag"></a>
        <!-- <i id="tag"></i> -->
        <!-- <div id="tag"></div> -->
        ...
    </div>

    <!-- 五.img使用 -->
    <!-- src能夠鏈接本地及網絡圖片 -->
    <!-- alt:資源加載失敗時的文本提示 -->
    <!-- title:圖片的文本信息(鼠標懸浮時展現) -->
    <!-- <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1537511739499&di=f5f2763fe54c8ea4d89b2fafe0569c84&imgtype=0&src=http%3A%2F%2Fimg.alicdn.com%2Fimgextra%2Fi1%2FTB2IZbxogmTBuNjy1XbXXaMrVXa_%2521%25212754890204.jpg_400x400.jpg" alt="雪納瑞" title="一覽雪納瑞風姿"> -->

    <!-- 六.list列表 -->
    <!-- reset操做 -->
    <style type="text/css">
        ol, ul {
            margin: 0;
            padding: 0;
            list-style: none;
        }
    </style>

    <!-- 有序列表 -->
    <ol>
        <li>列表項</li>
        <li>列表項</li>
        <li>列表項</li>
    </ol>
    <!-- 無需列表:經常使用 -->
    <ul>
        <li>列表項</li>
        <li>列表項</li>
        <li>列表項</li>
    </ul>
</body>
</html>

六個標籤的用法

三：僞類選擇器cdn

僞類能夠單獨出現，htm

　　　位置僞類分爲兩種：

　　　　　一、先匹配位置，再匹配類型

　　　　　二、先肯定類型，再匹配位置

　　　a標籤的三大僞類：

　　　　　一、內容僞類

　　　　　二、位置僞類

　　　　三、取反僞類

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>僞類選擇器</title>
    <style type="text/css">
        a {
            color: #333;
            text-decoration: none;
        }
        /*:link爲一個總體,表明超連接的初始狀態*/
        a:link {
            color: orange;
        }
        /*:hover鼠標懸浮*/
        a:hover {
            color: green;
            /*鼠標樣式*/
            cursor: pointer;
        }
        /*:active活動狀態中(被鼠標點擊中)*/
        a:active {
            color: red;
        }
        /*:visited訪問過的狀態*/
        a:visited {
            color: cyan;
        }
        /*普通標籤運用: :hover :active*/
        .box {
            width: 200px;
            height: 200px;
            background-color: red;
        }
        .box:hover {
            background-color: orange;
            cursor: pointer;
        }
        .box:active {
            width: 400px;
            border-radius: 50%;
        }


        /*內容僞類*/
        .txt:before {
            content: "我是前綴~~~"
        }
        .txt:after {
            content: ">>>我是後綴"
        }
        
        /*僞類能夠單獨出現*/
        /*:after {
            content: "呵呵"
        }*/


        /*位置僞類*/
        /*1.位置從1開始*/
        /*2.*/
        /*先匹配位置,再匹配類型: 找到全部結構下的第2個標籤,若是恰好是div,那麼匹配成功*/
        /*body a-baidu div01*/
        div:nth-child(2) {
            color: green;
        }
        
        /*先肯定類型,再匹配位置*/
        /*先將頁面中全部div找出,在匹配那些在本身結構層次下的第二個div*/
        div:nth-of-type(2) {
            color: cyan;
        }

        /*2n*/
        /*
            div ooo div
            ooo div ooo
            div ooo div
        */

        /*3n*/
        /*
            div div ooo
            div div ooo
            div div ooo
        */

        /*3n - 1*/
        /*
            div ooo div
            div ooo div
            div ooo div
        */

        /*取反僞類*/
        /*:not([d]) {
            color: red;
        }
        body.body {
            color: orange;
        }*/
        span:not([d]) {
            color: red;
        }
    </style>
</head>
<body class="body">
    <!-- 1.a標籤的四大僞類 -->
    <a href="./123.html">訪問頁面</a>
    <a href="https://www.baidu.com">訪問過頁面</a>
    <div class="box">box</div>

    <!-- 2.內容僞類 -->
    <div class="txt">原來的文本</div>

    <!-- 3.位置僞類 -->
    <div class="wrap">
        <span>span01</span>
        <div>div01</div>
        <div>div02</div>
    </div>
    
    <!-- 4.取反僞類 -->
    <span d>12345</span>
    <span dd>67890</span>
</body>
</html>