web前端3

最新推荐文章于 2024-07-10 14:40:18 发布

阳阳真的很菜

最新推荐文章于 2024-07-10 14:40:18 发布

阅读量41

点赞数

文章标签：前端

本文链接：https://blog.csdn.net/qq_73971624/article/details/131615669

版权

DAY3

伪类选择器

a:hover(鼠标悬停)
- 鼠标样式 cursor

a:hover+div {
            /* background-color: greenyellow; */
            display: none;
        }

结构伪类选择器

父元素子元素：

<style>
    ul li:first-child{
       
    }
    
    ul li:forth-child{
        
    }
    
    ul li:nth-child(2n/2n-1/n){
        
    }
    
    ul li:nth-of-type(n){
        
    }
</style>

<body>
    <ul>
        <p>123</p>
        <li>1</li>
        <li>1</li>
        <li>1</li>
    </ul>
</body>

在这里插入图片描述

伪元素选择器

<style>
    ul li::before{
        content:"伪元素内容"
    }
    ul li::after{
        content:"伪元素内容"
    }
    input::placeholder(表单提示词){
        color：
    }    
    ul li:nth-child(3)::selection(选中时){
        background-color：
    }
<style>
<body>
    <input type="text" name="" id="" placeholder="">
    <ul>
        <p>123</p>
        <li>1</li>
        <li>1</li>
        <li>1</li>
    </ul>
</body>

文本相关样式

<style>
    div{
    	width:
    	height:200px
    	background-color:
    	text-indent:2em；
    	text-align(水平对齐方式)：center；
        overflow:auto;
        line-height:200px;
        /*行高等于文本高度，显示文字水平居中*/
    }
    a{
        color:
       	text-decoration（文本装饰）:none/line-through(删除线)...
    }
</style>
<head>
    <div>    </div>
    <a href="#">AAA</a>
</head>

商品案例

list

<style>
    /*css具有层叠性，后面的会覆盖前面的*/
    ul li{
        list-style:none;
        list-style:circle;
    }
</style>
<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>
</body>

元素显示模式转换

<style>
    .box{
        display:none;/*隐藏元素 脱离文档流*/
        width:300p;
        height:300px;
        background-color:pink; 
    }
    sapn,
    a{
        display:inline-block;
        width:300px;
        height:300px;
        background-color:pink;
    }
</style>

背景

<style>
	body {
            /* width: 4000px; */
            height: 4000px;
            /* background-color: aqua; */
            /* background-image: url(../米莱迪.jpg); */
            /* background-repeat: no-repeat; */
            /* background-attachment: fixed; */
            /* background-position: top left; */
            background: fixed url(../米莱迪.jpg) no-repeat;
        }
</style>

边框

<style>
        div {
            width: 300px;
            height: 300px;
            background-color: pink;
            /* border-radius: 10px; */
            /* border-width 边框宽度 */
            /* border-width: 20px;
            border-style: solid;
            border-color: rgb(35, 223, 18); */
            border: 4px solid black;
            /* border-radius: 50%;    边框弧度*/
            border-top-left-radius: 40%;
        }
    </style>
<div>
        我是一个盒子
    </div>

合并相邻边框

<style>
        table {
            /* 合并相邻边框 */
            border-collapse: collapse;
        }
        td {
            border: 5px solid red;
        }
    </style>
<body>
    <table cellspacing="0">
        <tr>
            <td>dsnkd</td>
            <td>cdcdzc</td>
            <td>cdcd</td>
        </tr>
    </table>
</body>

阴影

 <style>
        div {
            width: 300px;
            height: 300px;
            background-color: pink;
            /* box-shadow: 20px 20px 10px 10px black; */
        }
        p {
            text-shadow: red 5px 5px;
        }
    </style>
</head>
<body>
    <div>我是文字</div>
    <p>我是文字</p>
</body>

轮廓线

 <style>
        input[type="text"] {
            outline: none;
            outline-style: groove;
        }
    </style>
<body>
    <input type="text" name="aaaa" id="">
    <input type="password" name="aaaa" id="">
</body>

防拖拽

<style>
        textarea {
            /* 防止文本拖拽 */
            resize: none;
            /* vertical-align改变与文字的对齐方式 */
            vertical-align: top;
            vertical-align: middle;
            vertical-align: bottom;
        }
    </style>

隐藏元素

/* display: none;   脱离文档流，原来的位置不再保留 */
display: none;
/*visibility: hidden;  元素隐藏，位置保留  */
visibility: hidden;

绝对定位

 <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>
<body>
    <div>
        小妲己
    </div>
</body>

粘性定位

<style>
        body {
            height: 4000px;
        }

        .one {
            position: sticky;
            top: 0;
            background-color: pink;
        }
    </style>
<p class="one">内容</p>

阳阳真的很菜

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
web前端3

绝对定位：不保留原来位置子绝父相父亲没有相对定位，继续向上找，谁有相对定位，以谁作为参考移动如果都没找到，则相对于浏览器进行定位*//* border-radius: 50%;/* vertical-align改变与文字的对齐方式 *//* border-width 边框宽度 *//*css具有层叠性，后面的会覆盖前面的*//* 固定定位:相对于可视区域进行定位 *//*行高等于文本高度，显示文字水平居中*//*隐藏元素脱离文档流*//* 合并相邻边框 *//* 防止文本拖拽 */
复制链接

扫一扫