Day03 Web前端学习笔记

杨俊杰-YJ

已于 2023-07-13 21:48:30 修改

阅读量81

点赞数

文章标签：前端学习笔记

于 2023-07-08 23:16:10 首次发布

本文链接：https://blog.csdn.net/weixin_74227828/article/details/131617735

版权

31.伪类选择器

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>伪类选择器</title>
    <style>
        a:link {
            color: pink;---------------------字体颜色
        }
        a:visited {
            color: red;---------------------访问后字体颜色
        }
        -----------------------------------------/* :hover   鼠标悬停 */
        a:hover {
        ---------------------------------------------/* cursor  鼠标样式 */
            cursor: pointer;----------------------------鼠标在链接上面悬停是的样式
            font-size: 40px;
        }


        a:active {
            font-size: 70px;------------------------------鼠标按住不动时字体的大小
        }

        div {
            width: 300px;
            height: 300px;
            background-color: pink;
        }

        /* s a:hover+div {
            background-color: blue;
        } */
        a:hover+div {
            /* background-color: greenyellow; */
            display: none;--------------------------删除原有的样式
        }
    </style>
</head>

<body>
    <a href="#">关闭广告</a>
    <div></div>
    <div></div>
</body>

32.结构伪类选择器

<head>
    <style>
        ul li:first-child {
            background-color: pink;
        }
        ul li:last-child {
            background-color: green;
        }
        ul li:nth-child(3) {------------------------匹配父元素中的第几个
            background-color: blue;
        }
        ul li:nth-of-type(4) {----------------------指定类型E的第几个
            background-color: chartreuse;
        }
    </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>
    </ul>
</body>

33.结构伪类选择器

    <style>
        ul li:nth-child(2) {--------------------先看nth-child，再看li
            background-color: pink;
        }

        ul li:nth-of-type(2) {--------------------先找li,把指定元素的盒子排列序号
            background-color: rgb(215, 30, 61);
        }

        div span:nth-child(2) {
            background-color: aqua;
        }
    </style>
<body>
    <ul>
        <p>我是文字</p>
        <li>1</li>
        <li>2</li>
    </ul>

    <div>
        <span>1</span>
        <span>小黑子</span>
    </div>
</body>

34.伪元素选择器

<head>
    <style>
        ul li::before {
            content: ">";
        }

        ul li::after {
            content: url();
        }

        --------------------------------/* input::placeholder  表单提示词 */
        input::placeholder {
            color: rgb(62, 226, 56);
        }


        -----------------------------------/* ::selection 选中时 */
        ul li:nth-child(4)::selection {
            color: pink;
        }
    </style>
</head>
<body>
    <input type="text" name="" id="" placeholder="jdhcndsk">
    <ul>
        <li>1dcdscdscdcd</li>
        <li>2cdcdcdcdc</li>
        <li>3cdcdscdsc</li>
        <li>4cdcdcdcddcds</li>------------------------选中时变为粉色

    </ul>
</body>

35.文本相关样式

<head>
        div {
                        ---------------------------/* width: 300px; */
            height: 200px;
            background-color: pink;
                        ---------------------------/* text-indent: 2em; */
                        ---------------------------/* 文本水平对齐方式 */
            text-align: center;
                        ---------------------------/* overflow: auto; */
                        ---------------------------/* 行高  单行文本垂直居中   行高=元素高度*/
            line-height: 200px;
        }

        a {
            color: pink;
            text-decoration: none;
                        ---------------------------/* text-decoration: line-through; */
                        ---------------------------/* text-decoration: overline; */
        }
    </style>
</head>

<body>
    <div>我是一段文字的世界杯</div>
    <a href="https://www.baidu.com">去百度</a>
</body>

36.list

    <style>
        /* css具有层叠行，后面的会覆盖前面的 */
        ul li {
            height: 30px;
            list-style: none;
            list-style: circle;--------------------------此为最终格式
        }
    </style>
<body>
    <ul>
        <li>我是第1个li</li>
        <li>我是第2个li</li>
        <li>我是第3个li</li>
        <li>我是第4个li</li>
    </ul>
</body>

37.元素显示模式转换

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            /* 行内元素无法设置宽、高        转换为行内块元素 */
            display: none;-------/* display: none;隐藏元素，脱离文档流 display:block;显示隐藏元素
            /* display: inline-block;  将元素转换为行内块元素 */
            /* display: inline;  行内元素 */
            width: 300px;
            height: 300px;
            background-color: pink;
        }

        span {
            display: inline-block;--------------------转换为行内块元素
            /* display: block;  块元素 */--------------------转换为块元素
            width: 300px;
            height: 300px;
            background-color: rgb(15, 105, 66);
        }

        a {
            display: inline-block; 
            width: 200px;
            height: 200px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <a href="#">彻底</a> <a href="#">彻底</a> <a href="#">彻底</a> <a href="#">彻底</a>
    <div class="box">11111</div>
    <div class="box">22、222</div>
    <span>xjsasak</span>

38.背景

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <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>
</head>

39.案例导航栏

<head>
    <style>
        a {
            display: inline-block;-------------------------转换为行内块元素
            text-decoration: none;-------------------------去除默认样式
            width: 120px;----------------------------------设置宽高
            height: 58px;
            text-align: center;-----------------------垂直水平居中
            line-height: 54px;
            color:cyan;--------------------------------字体颜色
        }
-----------------------类选择器
        .one {
            background-image: url(../images/bg1.png);----------添加背景图片
        }

        .two {
            background-image: url(../images/bg2.png);
        }

        .three {
            position: relative;
            background-image: url(../images/bg3.png);
        }

        .four {
            background-image: url(../images/bg4.png);
        }

        .one:hover {
            background-image: url(../images/bg5.png);-----------鼠标悬停后的背景图片
            color: white;------------------------------------鼠标悬停后字体颜色
        }

        .two:hover {
            background-image: url(../images/bg6.png);
            color: white;
        }

        .three:hover {
            background-image: url(../images/bg7.png);
            color: white;
        }

        .four:hover {
            background-image: url(../images/bg8.png);
            color: white;
        }
    </style>

</head>

<body>
    <a href="#" class="one">五彩导航</a>
    <a href="#" class="two">五彩导航</a>
    <a href="#" class="three">
        五彩导航
        <img src="../code.jpg" alt="">
    </a>
    <a href="#" class="four">五彩导航</a>

</body>

列：在这里插入图片描述

40.边框

    <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>
<body>
    <div>
        我是一个盒子
    </div>
</body>

在这里插入图片描述

41.合并相邻边框

<head>
    <style>
        table {
            /* 合并相邻边框 */
            border-collapse: collapse;
        }
        td {
            border: 5px solid red;
        }
    </style>
<body>
    <table cellspacing="0">---------------边框空隙为0
        <tr>
            <td>123</td>
            <td>456</td>
            <td>123</td>
        </tr>
    </table>
</body>

在这里插入图片描述

42.阴影

<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;
            box-shadow: 20px 20px 10px 10px black; -------------盒子阴影
        }
        p {
            text-shadow: red 5px 5px;
        }
    </style>
<body>
    <div>
        蔡徐坤
    </div>
    <p>我是小黑子</p>
</body>

在这里插入图片描述

43.轮廓线

    <style>
        input[type="text"] {----------------------属性选择器
            outline: none;------------------------取消乱廓线
            outline-style: groove;----------------罗廓线样式
        }
    </style>
<body>
    <input type="text" name="aaaa" id="">
    <input type="password" name="aaaa" id="">
</body>

44.防（文本域）拖拽

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

45.隐藏元素

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

</body>

46.绝对定位

    <style>
        .father {
            /* position: relative; 相对定位*/

            width: 600px;
            height: 600px;
            background-color: pink;
            margin: 400px;
        }
        .son {
            /* position: absolute;  绝对定位：不保留原来位置  子绝父相   父亲没有相对定位，继续向上找，谁有相对定位，以谁作为参考移动。如果都没找到，则相对于浏览器进行定位
            */
            position: absolute;
            /* top: 100px; */--------------------距离顶端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>

在这里插入图片描述

47.固定定位

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

48.粘性定位

    <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>
    <p>5、不要过度消费
        历览前贤国与家，成由勤俭破由奢。何须琥珀方为枕，岂得真珠始是车。
        由俭入奢易，由奢返俭难。</p>
    <p>6、养成终生学习的习惯
        此刻打盹，你将做梦;此刻学习，你将圆梦。
        当你开始认为自己啥也不是的时候，说明你觉醒了；当你以空杯的心态开始读书、学习的时候，说明你要转运了。
        书中自有黄金屋，书中自有颜如玉。</p>
    <p>7、远离有毒的人和有毒的活动
        跟着蜜蜂，找到花朵；跟着苍蝇，找到厕所。
        想成为什么样的人，就要和什么样的人在一起，人生最重要的就是要远离有毒的人和有毒的活动。
        和酒鬼在一起，他只会劝你干杯；和吸毒的人在一起，他只会劝你吸毒；与赌徒在一起，他只会拉你赌博。</p>
    <p> 8、多做延迟满足的事情
        人生都是先苦后甜，要控制及时享乐的欲望，克服唾手可得的的快乐，才能获得非凡的人生。
        延迟满足指的是人们一种甘愿为更有价值的长远结果而放弃即时满足的选择取向，还包括在等待的时候展示的自我控制能力。</p>
    <p>9、认识自己降伏自己改变自己成就自己。
        感觉非常的接地，自己按照这四句话彻底改变了自己，确实一天比一天进步了。
        今天把它推荐给大家，一起进步。 </p>
    <p>10、不要过度消费
        历览前贤国与家，成由勤俭破由奢。何须琥珀方为枕，岂得真珠始是车。
        由俭入奢易，由奢返俭难。</p>
    <p>11、养成终生学习的习惯
        此刻打盹，你将做梦;此刻学习，你将圆梦。
        书中自有黄金屋，书中自有颜如玉。</p>
    <p>12、远离有毒的人和有毒的活动
        跟着蜜蜂，找到花朵；跟着苍蝇，找到厕所。</p>
    <p> 13、多做延迟满足的事情
        人生都是先苦后甜，要控制及时享乐的欲望，克服唾手可得的的快乐，才能获得非凡的人生。</p>
</body>

杨俊杰-YJ

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Day03 Web前端学习笔记

延迟满足指的是人们一种甘愿为更有价值的长远结果而放弃即时满足的选择取向，还包括在等待的时候展示的自我控制能力。人生都是先苦后甜，要控制及时享乐的欲望，克服唾手可得的的快乐，才能获得非凡的人生。人生都是先苦后甜，要控制及时享乐的欲望，克服唾手可得的的快乐，才能获得非凡的人生。感觉非常的接地，自己按照这四句话彻底改变了自己，确实一天比一天进步了。毒的人在一起，他只会劝你吸毒；与赌徒在一起，他只会拉你赌博。此刻学习，你将圆梦。9、认识自己降伏自己改变自己成就自己。12、远离有毒的人和有毒的活动。
复制链接

扫一扫