Web笔记二

于 2023-07-10 17:04:21 发布
阅读量42 收藏
点赞数
文章标签： 前端 笔记 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/nuli_student/article/details/131643199
版权

伪类选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
</head>
<body>
    <h1>超级飞侠每时每刻准时送达</h1><br />
<a href="./images/乐迪.jpg" target="aa">我是乐迪</a>&nbsp;
<a href="./images/小爱.jpg" target="aa">我是小爱</a>&nbsp;
<a href="./images/小青.jpg" target="aa">我是小青</a>&nbsp;
<a href="./images/金宝.jpg" target="aa">我是金宝</a><br />
<iframe name="aa" frameboeder="0" width="1000px" height="800px"></iframe>
</body>
</html>

结构伪类选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=, initial-scale=1.0">
    <title>Document</title>
    <style>
        ul li:first-child{
            background-color: aqua;
        }
        /* 找ul中li第一个孩子*/
 
        ul li:last-child{
            background-color: aquamarine;
        }
        /* 最后一个 */
 
        ul li:nth-child(4){
            background-color: blue;
        }
        /* 第4个 ，全部编码再找*/
        
        ul li:nth-child(2n){
            background-color: aqua;
        }
        /* 偶数/even */
 
        ul li:nth-child(2n-1){
            background-color: aqua;
        }
        /* 奇数/odd */
 
        ul li :nth-of-type(n){
            background-color: blue;
        }
        /* 先找li，再编码再找 */
 
 
    </style>
</head>
<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
    </ul>
</body>
</html>

伪元素选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=, initial-scale=1.0">
    <title>Document</title>
    <style>
        ul li::before{
            content: "******"";
        }
        /*在li所有行前加******  */
 
        ul li::after{
            content: ">";
        }
        /* 末尾加> */
 
        ul li:nth-child(4)::selection{
            color: pink;
        }
        /* selection选中时 */
        /* placeholder 表单提示词 */
 
        
 
 
 
    </style>
</head>
<body>
    <ul>
        <li>1111</li>
        <li>2222</li>
        <li>3333</li>
        <li>4444</li>
    </ul>
</body>
</html>

文本相关样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 50px;
            height: 50px;
            background-color: pink;
            text-indent: 2em;
            text-align: center;
            /* 水平对齐 */
            line-height: 60px;
            /* 行高，上一段文字离下一段文字的距离 ，单行文字时设置与文本高度相同时及单行文字居中*/
            
 
 
            
        }
 
        a{
                color: pink;
                text-decoration: none;
                /* 去掉a链接默认下划线 */
            }
            /* 文本装饰 */
    </style>
</head>
<body>
    <div> 与局部可见不和你吖好看你看你来拿看心里可能</div>
     <a href="#">qubaidu</a>
</body>
</html>

list


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=, initial-scale=1.0">
    <title>Document</title>
    <style>
        ul li{
            list-style: none;
            /* 取消列表前的默认序号 */
            list-style: circle;
            /* 空心圆， 后面可以顶替前面*/
        }
    </style>
</head>
<body>
    <ul>
        <li>我是第1个li</li>
        <li>我是第2个li</li>
        <li>我是第3个li</li>
        <li>我是第4个li</li>
        <li>我是第5个li</li>
        <li>我是第6个li</li>
        <li>我是第7个li</li>
    </ul>
</body>
</html>

元素显示模式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box,
        {
 
        }
        span{
            display: inline-block;
            /* 行内元素转换成行内块元素 */
            display: block;
            /* 转换成块元素 */
            display: inline;
            /* 转换成行内元素 */
            display: none;
            /* 隐藏元素 ，元素原来站的位置不在，脱离文档流*/
        }
 
    </style>
</head>
<body>
    <span>
        123456
    </span>
    <div class="box">
        2222222
    </div>
    
</body>
</html>

背景

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            height: 4000px;
            background-color: aqua;
            background-image: url(../images/dog);
            background-repeat: no-repeat;
            background-attachment: fixed;
            /* 固定背景图 */
            background-position: top;
            /* 图片定位 */
            background: fixed url() no-repeat;
            background-size: cover;
            /* 一个值默认给宽，需要输入两个值 */
        }
    </style>
</head>
<body>
    
</body>
</html>

边框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 300px;
            height: 300px;
            background-color: pink;
            border-width: 2px;
            /* 边框宽度 */
            border-style: double;
            /* 边框样式 */
            border-color: black;
            /* 边框颜色 */
            border: 2px solid black;
            border-radius: 10px;(50%)
            /* 百分数是弧度 */
            border-top-right-radius: 40%;
 
            
 
          }
    </style>
</head>
<body>
    <DIV>
        我是一个盒子
    </DIV>
</body>
</html>

合并相邻边框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        table{
            border: 5px solid black;
            border-collapse: collapse;
            /* 合并相邻边框 */
            
 
            
        }
 
 
    </style>
</head>
<body>
    <table cellsapcing="0">
        <tr>
            <td>111</td>
            <td>222</td>
            <td>333</td>
        </tr>
    </table>
    
</body>
</html>

阴影

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 100px;
            height: 100px;
            background-color: pink;
            box-shadow: 10px 10px 10px 10px black;
            /* 数字：x y（偏移）xy（大小） */
            text-shadow: red 0 -2px;
            
        }
 
    </style>
</head>
<body>
    <div></div>
</body>
</html>

轮廓线

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        input[type="text"]{
            outline: none;
        }
 
    </style>
</head>
<body>
    <input type="text" name=" " id="">
    <input type="password" name="" id="">
    
</body>
</html>

防拖拽

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=<>, initial-scale=1.0">
    <title>Document</title>
    <style>
        textarea{
            resize: none;
            /* 防止文本拖拽 */
            vertical-align: top;
            vertical-align: middle;
            vertical-align: bottom;
            /* 改变与文字对齐方式 */
        }
    </style>
</head>
<body><span>输入</span>
    <textarea name="aquamarine" id=" " cols="10" rows="20"></textarea>
</body>
</html>

隐藏元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 100px;
            height: 100px;
        }
        .box1{
            background-color: aqua;
            display: none;
            /* 脱离文档，不保留原来位置 */
            visibility: hidden;
            /* 元素隐藏位置保留 */
            opacity: 0;
            /* 透明度 */
        }
    </style>
</head>
<body>
    <div class="box1">111</div>
    <div class="box2">222</div>
</body>
</html>

绝对定位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .gf{
            width: 1000px;
            height: 1000px;
            background-color: bisque;
        }
        .f {
            position: relative;
            /* 相对定位 */
 
            width: 600px;
            height: 600px;
            background-color: aquamarine;
            margin: 400px;
 
        }
        .s{
 
            position: absolute;
            /*绝对定位：不保留原来位置 ，子绝父相，父亲没有相对定位，继续向上找，谁有相对定位，以谁为参考移动
            如果没有找到，参考浏览器*/
            top: 300px;
            left: 100px;
            /* 距离左边 */
            width: 100px;
            height: 100px;
            background-color: rgb(255, 127, 127);
 
        }
    .s1{
        width: 100px;
        height: 100px;
 
 
    }
 
 
    </style>
</head>
<body><div class="gf">
    <div class="f">
        <div class="s">1</div>
        <div class="s1">2</div>
    </div></div>
</body>
</html>

固定定位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            height: 4000px;
        }
        div{
            position: fixed;
            /* 固定定位，相对于可视区域 */
            right: 40px;
            top: 50%;
            width: 100px;
            height: 100px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div>
        小妲己
    </div>
</body>
</html>

粘性定位


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            height: 4000px;
        }
        .one{
            position: sticky
            /* 粘性定位 */
            top: 10px;
            
 
        }
 
 
    </style>
</head>
<body>
    <p></p>
    <p class="one"></p>
    <p></p>
    
</body>
</html>

nuli_student
关注
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值