web第三天

最新推荐文章于 2024-10-16 11:23:07 发布

sjsyg

最新推荐文章于 2024-10-16 11:23:07 发布

阅读量40

点赞数

文章标签：前端

本文链接：https://blog.csdn.net/sjsyg/article/details/131636989

版权

伪类选择器

<head>
    <style>
        visited访问前
        a:link{
            color:pink;
        }
        visited访问后
        a:visited{
            color:red;
        }
        hover鼠标悬停时
        a:hover{
            font-siza:40px;
        }
        active点击时
        a:active{
            font-size:70px;
        }
    </style>
</head>
<body>
    <a href="#">aaa</a>
</body>

结构伪类选择器

<style>
    ul li:first-child{
        background-color:pink;
    }
    ul li:last-child{
        background-color:green;
    }
    ul li:nth-child(4){
        background-color:aqua;
    }
    2n为偶数
    ul li:nth-child(2n){
        background-color:aqua;
    }
    n为全选
    ul li:nth-child(n){
        background-color:aqua;
    }
</style>
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
</ul>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-euFJs7Uu-1688967802887)(C:\Users\86189\AppData\Roaming\Typora\typora-user-images\image-20230708092914132.png)]

exen:偶数
odd:奇数

<style>
	ul li:nth-of-type(2){
		background-color:rgb(215,35);
	}
</style>
<ul>
    <p>0</p>
    <li>1</li>
    <li>2</li>
</ul>

伪元素选择器

<style>
    在所有li前添加~
    ul li::before{
        content: "~";
    }
    ul li:after{
        content: "***";
    }
    placeholder表单提示词
    ul li:placeholder{
        color:red;
    }
    selection选中时
    ul li:nth-child(4)::selection{
        color:pink;
    }
</style>
<input type="text" name="" id="" placehoder="1"
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>

文本相关样式

<style>
    div{
        width:300px;
        /* height:50px; */
        background-color:pink;
        text-indent:2em;
        文本水平对齐方式
        text-align:center;
        行高(纵向对齐)
        line-height:200px;
    }
    a{
        color:pink;
        text-decoration:none;(去下划线)
        
    }
</style>
<div>
    123
</div>
<a href="#">阿巴巴</a>

list

<style>
    CSS具有层叠性，后面的覆盖前面的
    ul li{
        去除无序列表的装饰
        list-style:none;
        list-style:circle;
    }
</style>
<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

元素显示模式转换

<style>
    行内元素无法设置宽高，转换为行内块元素
    .box{
        width:300px;
        height:300px;
        background-color:pink;
    }
    inline行内元素 
    block块元素 
    inline-block行内块元素
    none隐藏元素，脱离文档流
    span{
        display:inline-block;
        width:300px;
        height:300px;
        background-color:pink;
    }
</style>
<body>
    <div class="box">
        111
    </div>
    <span>afwefaw</span>
</body>

背景

<style>
    body{
        /*
        height:4000px;
        background-color:aqua;
        background-image:url(../米莱迪.jpg);
        no-repeat不重复
        background-repeat:no-repeat;
        拖动不变
        background-attachment:fixed;
        置顶
        background-position:top left;
        */
        background：fixed url(../米莱迪) no-repeat；
        background-四阿泽：
    }
</style>

边框

<style>
    div{
        width:300px;
        height:300px;
        background-color:pink;
        border-radius:10px;
        边框宽度 20px
        border-width:dashed;
        border-color:black;
        border-radius:50%;
        弧度
        border-top-left-radius:40%
        }
</style>
<div>
    我是一个盒子
</div>

合并相邻边框

<style>
    table{
        合并相邻边框
        border-collapse:collapse;
    }
    td{
        border:5px solid red;
    }
</style>
<table>
    <tr cellspacing="0">
        <td>123456</td>
        <td>234567</td>
        <td>345678</td>
    </tr>
</table>

阴影

<style>
    盒子的阴影
    div{
        width:300px;
        height:300px;
        background-color:pink;
        box-shadow:20px 20px 10px 10px black
    }
    文字阴影
    p{
        text-shadow:red 0 5px;
    }
</style>
<div>
    <p>
        123123123
    </p>
</div>

轮廓线

<style>
    input[type="text"]{
        取消轮廓线
        outline:none;
    }
</style>
<body>
    <input type="text" name="" id="">
    <input type="password" name="" id="">
</body>

防拖拽

<style>
    textarea{
        防止文本拖拽
        resize:none;
        改变文字对齐方式
        vertical-align:top;
        vertical-align:middle;
        vertical-align:bottom;
    }
</style>
<body>
    <span>请输入个人介绍</span>
    <textarea name="xsnsmx" id="" cols="30" rows="10"></textarea>
</body>

隐藏元素

<style>
    div{
        width:300px;
        height:300px;
    }
    .box1{
        脱离文档流，原来的位置不再保留
        display:none;
        元素隐藏位置保留
        visibility:hidden;
        设置透明度
        opacity:0
        background-color;
    }
    .box2{
        background-color;
    }
</style>
<div class="box1">111</div>
<div class="box1">222</div>

绝对定位

<style>
        .grandfather {
            position: relative;
            width: 1200px;
            height: 1200px;
            background-color: aquamarine;
        }

        .father {
            /* position: relative; */

            width: 600px;
            height: 600px;
            background-color: pink;
            margin: 400px;
        }

        .son {
            /* position: absolute;  绝对定位：不保留原来位置  子绝父相   父亲没有相对定位，继续向上找，谁有相对定位，以谁作为参考移动
            如果都没找到，则相对于浏览器进行定位
            */

            position: absolute;
            /* top: -100px; */
            bottom: -100px;
            left: 500px;
            width: 100px;
            height: 100px;
            background-color: aqua;
        }

        .son2 {
            width: 100px;
            height: 100px;
            background-color: rgb(40, 65, 65);
        }
    </style>
    <body>
    <div class="grandfather">
        <div class="father">
            <div class="son">1</div>
            <div class="son2">2</div>

        </div>
    </div>
</body>
父亲没有相对定位，继续向上找，谁有相对定位，以谁作为参考移动。如果都没找到，则相对于浏览器进行定位。

固定定位

<style>
    body {
            height: 4000px;
        }

        div {
            /* 固定定位:相对于可视区域进行定位 */
            position: fixed;
            right: 40px;
            top: 50%;
            width: 100px;
            height: 100px;
            background-color: pink;
        }
</style>

<div>
    小妲己
</div>

粘性定位

<style>
        body {
            height: 4000px;
        }

        .one {
            position: sticky;
            top: 0;
            background-color: pink;
        }
</style>
<body>
    <p>认识自己，降伏自己，改变自己，成就自己。</p>
    <p>1、不要过度消费</p>
    <p class="one">2、养成终生学习的习惯</p>
    <p>3、远离有毒的人和有毒的活动</p>
    <p> 4、多做延迟满足的事情</p>
</body>