您的位置: 首页  >  IT文章  >  python 46 边界圆角 、a_img_list标签 、伪类选择器

python 46 边界圆角 、a_img_list标签 、伪类选择器

分类: IT文章 • 2022-03-28 19:03:54

python 46 边界圆角 、a_img_list标签 、伪类选择器

一：边界圆角　python 46 边界圆角 、a_img_list标签 、伪类选择器

python 46 边界圆角 、a_img_list标签 、伪类选择器

python 46 边界圆角 、a_img_list标签 、伪类选择器

python 46 边界圆角 、a_img_list标签 、伪类选择器

<!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标签

 　　1、基本使用

　　 2、属性

　　 3、其他应用场景

　　 4、锚点

 　　5、img 使用

　　 6、list 列表　　

<!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="#锚点名" -- >-->
    <a href="#tag">前往底部</a>
    <!-- 测试锚点请tab -->
    br * 100
    <!-- 设置一个锚点 -->
    <!-- .bottom做底部布局的区域 -->
    <div class="bottom">
        <a name="tag"></a>
        <!-- <i >-->
        <!-- <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>
六个标签的用法

三：伪类选择器

     伪类可以单独出现，

　　　位置伪类分为两种：

　　　　　1、先匹配位置，再匹配类型

　　　　　2、先确定类型，再匹配位置

　　　a标签的三大伪类：

　　　　　1、内容伪类

　　　　　2、位置伪类

　　　　   3、取反伪类

<!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>
伪类的分类

　　　　　

相关推荐