CSS第二天

最新推荐文章于 2024-08-09 10:42:44 发布
最新推荐文章于 2024-08-09 10:42:44 发布
阅读量69 收藏
点赞数
文章标签： 前端 html css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_71408630/article/details/130029431
版权

目录

前言

一、Emmet语法

         1.1 快速生成HTML结构语法

1.2 快速生成CSS样式

1.3 格式化设置（使代码格式更为规范）

二、CSS复合选择器

2.1 后代选择器

2.2 子代选择器

2.3 并集选择器

2.4 伪类选择器

2.4.1 链接伪类

2.3 小总结

三、CSS元素显示模式

3.1 显示模式转换

3.2 截图工具snispaste

3.3 单行文字垂直居中

四、CSS背景

4.1 背景颜色background-color

4.2  背景图片background-image

4.3  背景平铺background-repeat

4.4 背景图片位置background-position

4.5 背景图像固定（图像附着）background-attachment

4.6 背景复合写法background

4.7 综合案例：五彩导航

五、CSS三大特性

5.1 层叠性

5.2 继承性

5.3 优先级

总结

前言

在CSS的第二天学习里，主要进行了CSS中的Emmet语法、复合选择器、元素显示模式、背景、三大特性等内容的了解。

一、Emmet语法
1.1 快速生成HTML结构语法

快速生成需求具体操作+tab键输入输出
单个标签标签名div<div></div>
多个相同标签标签名*生成个数div*3

<div></div>

<div></div>

<div></div>

父子级关系标签父标签>子标签ul>li<ul>
    <li></li>
</ul>
兄弟关系标签兄弟+兄弟div+p<div></div>
<p></p>
带有类名或id名的标签.类名或#id名.类名

<div class="类名"></div>

p.类名<p class="first"></p>
p#id名<p id="second"></p>
有顺序的标签名标签名$div$

<div1></div1>

div$*3

<div1></div1>
<div2></div2>
<div3></div3>
标签内写内容标签名{}div{一个人}

<div>一个人</div>

1.2 快速生成CSS样式

具体操作+tab键输入输出
简写的属性名（可加属性值）w200width:200px;

1.3 格式化设置（使代码格式更为规范）

  • 实现方式：管理--设置--文本编辑器--格式化--保存时格式化

二、CSS复合选择器

  • 功能：更准确、高效地选择目标元素（标签）。

2.1 后代选择器

  • 功能：可以选择父元素里面的子元素。
  • 基本语法

元素1  元素2  {

        样式声明

} 

  • 代码展示
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>后代选择器</title>
    <style>
        ol li a {
            color: red;
        }
    </style>
</head>

<body>
    <ol>
        <li>
            <a href="#">我是红色</a>
        </li>
        <li>
            <p>我是黑色</p>
        </li>
    </ol>
</body>

</html>

2.2 子代选择器

  • 功能：只能选择作为某元素的最近一级子元素（选择子元素）
  • 基本语法

元素1  >  元素2  {

      样式声明

}

  • 代码展示
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>子代选择器</title>
    <style>
        ol>li {
            color: red;
        }
    </style>
</head>

<body>
    <ol>
        <li>
            <span>我是红色1</span>
        </li>
        <li>
            <p>我是红色2</p>
        </li>
    </ol>
</body>

</html>

2.3 并集选择器

  • 功能：可选择多组标签，同时为他们定义相同的样式。
  • 基本语法

元素1，元素2  {

       样式声明

}

  • 代码展示
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>并集选择器</title>
    <style>
        div,
        p,
        span {
            color: red;
        }
    </style>
</head>

<body>
    <div>我爱吃美味的食物</div>
    <p>小水果</p>
    <span>苹果</span>
    <span>水蜜桃</span>
    <ol>
        <li>不喜欢吃内脏</li>
        <li>不喜欢吃果干</li>
    </ol>


</body>

</html>

2.4 伪类选择器

  • 功能：用于向某些选择器添加特殊效果，如给链接添加特殊效果。

2.4.1 链接伪类

类型说明
a：link未访问过的链接，把没点击过（访问过）的；链接选出来
a：visited选择点击过（访问过）的链接标签
a：hover选择鼠标经过的那个链接标签
a：active选择鼠标正在按下，还没有弹起鼠标的那个链接
  • 代码展示
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>链接伪类选择器</title>
    <style>
        /* 未访问过的链接 */
        a:link {
            color: black;
        }

        /* 选择点击过的链接 */
        a:visited {
            color: red;
        }

        /* 选择鼠标经过的那个链接标签 */
        a:hover {
            color: purple;
        }

        /* 选择鼠标正在按下，还没有弹起鼠标的那个链接 */
        a:active {
            color: green;
        }
    </style>
</head>

<body>
    <a href="#">小猪佩奇一家</a>
    <a href="#">猪妈妈</a>
    <a href="#">猪爸爸</a>
</body>

</html>

未访问过的链接：

 鼠标经过：

 鼠标正在按下+已经点击过

2.4.2 focus伪类选择器

  • 功能：用于选取焦点的表单元素。
  • 代码展示
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>focus伪类选择器</title>
    <style>
        input:focus {
            color: red;
        }
    </style>
</head>

<body>
    <input type="text" />
    <input type="text" />
</body>

</html>

2.3 小总结

复合选择器选取元素相关情况使用情况元素连接符号
后代选择器选后代元素可为子孙后代使用较多空格
子代选择器选最近一级元素只选亲儿子使用较少

大于符号

并集选择器选某些元素用于集体声明使用较多英文逗号
链接伪类选择器选不同状态的链接与链接相关使用较多一般使用a{}和a：hover{}
focus伪类选择器选取获得光标的表单与表单相关与表单相关一般使用input：focus{}

三、CSS元素显示模式

  • 功能：更好地布局页面。
  • 含义：元素（标签）以什么方式进行显示，如div标签独占一行，span标签可一行占多个。
  • 分类
类型特点注意点
块级元素

（1）独占一行

（2）宽度等属性可以控制

（3）默认宽度是容器（父级元素）的100%

（4）可包含任何标签

（1）文字类元素内不能使用块级元素

（2）<p>标签主要存储文字，不能存放块级元素，特别是不能存放<div标签

（3）<h1>等文字类块级元素，不能放其他块级元素

行内元素（内联合元素）

（1）相邻行内元素在一行上，一行上显示多个

（2）行高、宽度设置无效

（3）默认宽度：本身内容的宽度

（4）行内元素只能容纳文本或其他行内元素

（1）链接里不能再放链接，如<a <a是错误的

（2）特别的，<a>标签内可放块级元素，但给<a转块级元素更安全

行内块元素

（1）一行多行内块元素

（2）宽度等可控制

（3）默认宽度为本身内容宽度

3.1 显示模式转换

  • 转换关系
转换关系属性及属性值
行内元素→块级元素display：block；
块级元素→行内元素display：inline；
行内元素→行内块元素display:inline-block;
  • 代码展示
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>简约版小米侧边栏</title>
    <style>
        /* 1.将a转换成块级元素，并设置相关样式。 */
        a {
            width: 230px;
            height: 40px;
            text-indent: 2em;
            text-decoration: none;
            color: white;
            background-color: black;
            display: block;
            /* 若想实现文字垂直居中，可使用行高=盒子高度，即
            height:40px;
            line-height:40px; */
        }

        /* 2.设置鼠标经过时的样式 */
        a:hover {
            background-color: coral;
        }
    </style>

</head>

<body>
    <a href="#">手机 电话卡</a>
    <a href="#">电视 盒子</a>
    <a href="#">笔记本 平板</a>
    <a href="#">出行 穿搭</a>
    <a href="#">智能 路由器</a>
    <a href="#">健康 儿童</a>
    <a href="#">耳机 音响</a>
</body>

</html>

 

3.2 截图工具snispaste

  • 快捷键 
快捷键功能
F1截图
F3使截图置顶于桌面
alt（shift切换取色模式）取色
ESC取消图像显示

3.3 单行文字垂直居中

行高与盒子高度的关系文字位置
行高=盒子高度文字垂直居中
行高<盒子高度文字偏上
行高>盒子高度文字偏下

四、CSS背景

4.1 背景颜色background-color

  • 基本语法

background-color：预定义参数/十六进制/RGB；

  • 代码展示
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>背景颜色</title>
    <style>
        div {
            width: 150px;
            height: 100px;
            background-color: rgb(52, 151, 65);
        }
    </style>
</head>

<body>
    <div>
        <p>我的背景颜色是绿色</p>
    </div>
</body>

</html>

4.2  背景图片background-image

  • 基本语法

background-image：描述元素的背景图像；

  • 参数
参数说明
url使用绝对、相对地址指定背景图像
none无背景图（默认的）
  • 代码展示
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>背景图片</title>
    <style>
        div {
            width: 400px;
            height: 99px;
            background-image: url(image.png);
        }
    </style>
</head>

<body>
    <div>
        <p>图片一</p>
    </div>
</body>

</html>

4.3  背景平铺background-repeat

  • 基本语法

background-repeat：选择平铺方式；

  • 参数
参数说明
repeat背景图像在纵向和横向上平铺（默认的）
no-repeat背景图像不平铺
repeat-x背景图像横向平铺
repeat-y

背景图像纵向平铺

  • 注意点：特别的，页面元素既可添加背景颜色，也可添加背景图片，但背景图片会覆盖背景颜色。
  • 代码展示
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>背景平铺</title>
    <style>
        div {
            width: 300px;
            height: 200px;
        }

        #repeat {
            background-image: url(image.png);
            background-repeat: repeat;
        }

        #norepeat {
            background-image: url(image.png);
            background-repeat: no-repeat;
        }

        #repeatx {
            background-image: url(image.png);
            background-repeat: repeat-x;
        }

        #repeaty {
            background-image: url(image.png);
            background-repeat: repeat-y;
        }
    </style>
</head>

<body>
    <div id="repeat">背景横向纵向重复</div>
    <div id="norepeat">背景横不重复</div>
    <div id="repeatx">背景横向重复</div>
    <div id="repeaty">背景纵向重复</div>
</body>

</html>

4.4 背景图片位置background-position

  • 基本语法

background-position：x   y;

  • 参数
参数说明
length精确单位：百分值/由浮点数字和单位标识符组成的单位值
position方位名词：top/center/bottom/left/right
  • 注意点
参数参数设置输出
方位名词两个参数都是方位名词两个参数的前后顺序无影响
第一个参数为方位名词，后一参数省略默认后一参数为居中对齐
精确单位两个参数都是精确单位第一个参数为x坐标，第二个参数为y坐标
仅有一个参数该参数为x坐标，y坐标默认为垂直居中对齐
混合单位精确单位+方位名词第一个参数为x坐标，第二个参数为y坐标
  • 代码展示
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>背景图片位置</title>
    <style>
        div {
            width: 500px;
            height: 100px;
            background-repeat: no-repeat;
        }

        /* 参数是方位名词 */
        #first-1 {
            background-image: url(image.png);
            background-position: top center;
        }

        #first-2 {
            background-image: url(image.png);
            background-position: center top;
        }

        #first-3 {
            background-image: url(image.png);
            background-position: right;
        }

        /* 参数是混合单位 */
        #third {
            background-image: url(image.png);
            background-position: 30px bottom;
        }

        /* 参数是精确单位 */
        #second-1 {
            background-image: url(image.png);
            background-position: 30px 60px;
        }

        #second-2 {
            background-image: url(image.png);
            background-position: 30px;
        }
    </style>
</head>

<body>
    <div id="first-1">我在上方居中位置</div>
    <br />
    <div id="first-2">我在上方居中位置</div>
    <br />
    <div id="first-3">我在右侧居中位置</div>
    <br />
    <div id="third">我在x=30px,底部位置</div>
    <br />
    <div id="second-2">我在x=30px,垂直居中位置</div>
    <br />
    <div id="second-1">我在x=30px,y=60px的位置</div>
</body>

</html>

4.5 背景图像固定（图像附着）background-attachment

  • 基本语法

background-attachment：背景图像固定方式；

  • 参数
参数说明
scroll随内容滚动（默认的）
fixed固定
  • 代码展示
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>背景图像固定</title>
    <style>
        div {
            width: 1322px;
            height: 1080px;
            background-repeat: no-repeat;
        }

        #scroll {
            background-image: url(image.png);
            background-attachment: scroll;
        }

        #fixed {
            background-image: url(image.png);
            background-attachment: fixed;
        }
    </style>
</head>

<body>
    <div id="scroll">滚动屏幕</div>
    <div id="fixed">固定屏幕</div>
</body>

</html>

4.6 背景复合写法background

  • 推荐写法（无特殊规定）

background：color || image || repeat || attachment || position；

4.7 综合案例：五彩导航

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>案例-五彩导航</title>
    <style>
        div {
            width: 500px;
            height: 100px;

        }

        .nav a {
            display: inline-block;
            width: 100px;
            height: 99px;
            line-height: 80px;
            text-decoration: none;
            text-indent: 1em;
            background-color: red;
        }

        .bg1 {
            background-image: url(image1.png);
            background-repeat: no-repeat;
        }

        .nav .bg1:hover {
            background-image: url(image2.png);
        }
    </style>

</head>

<body>
    <div class="nav">
        <a href="#" class="bg1">五彩导航</a>
        <a href="#">五彩导航</a>
        <a href="#">五彩导航</a>
    </div>
</body>

</html>

 

五、CSS三大特性

5.1 层叠性

  • 功能：解决样式冲突。
  • 口诀：长江后浪推前浪。
  • 原则：

     （a）样式冲突，采取就近原则（样式离结构近的），等于实施覆盖；

     （b）样式不冲突，不层叠。

  • 代码展示
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>层叠性</title>
    <style>
        div {
            color: red;
        }

        div {
            color: blue;
        }
    </style>
</head>

<body>
    <div>
        我是蓝色的小猪佩奇
    </div>
</body>

</html>

5.2 继承性

  • 功能：子标签继承父标签某些样式。
  • 口诀：子承父业。
  • 注意点：

     （a）恰当地使用继承性，能够降低CSS样式的复杂性；

     （b）子承父业，以text-、font-、line-、color开头。

  • 行高的继承

    （1）基本语法

选择器  {  

       font:12px/1.5   Microsoft YaHei;

 }

   （2）注意点：

          （a）行高可跟单位，也可不跟单位；

          （b）若子元素没有设置行高，则会继承父元素的行高；

          （c）此时子元素的行高是：当前子元素文字大小*1.5；

          （d）选择器行高1.5，这样的写法最大的优势：里面子元素可根据自己文字大小自动调整行高。

   （3）代码展示

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>继承性</title>
    <style>
        div {
            height: 80px;
            width: 80px;
            color: red;
            line-height: 80px;
        }

        p {
            font: 12px/1.5 Microsoft YaHei;
        }
    </style>
</head>

<body>
    <div>
        <p>第二行</p>
        <p>第二行</p>
        <p>第二行</p>
        <p>第二行</p>
        <p>第二行</p>
    </div>
</body>

</html>

5.3 优先级

  • 产生条件：当同一元素指定多个选择器，有优先级产生。
  • 原则：

      （a）选择器相同，执行层叠性；

      （b）选择器不同，根据选择器权重执行。

  • 选择器及其权重
选择器权重
继承 或者 *0,0,0,0
元素选择器0,0,0,1
类选择器，伪类选择器0,0,1,0
ID选择器0,1,0,0
行内样式 style=""1,0,0,0
!important 重要的无穷大
  • 注意点：

    （a）权重是有四组数字组成，但是不会有进位；

    （b）可以理解为类选择器永远大于元素选择器，id选择器永远大于类选择器，以此类推；

    （c）等级判断从左向右，如果某一位数值相同，则判断下一位数值；

    （d）可以简单记忆法：通配符和继承权重为0，标签选择器为1，类（伪类）选择器为10，id选择器100，行内样式表为1000，！important无穷大；

    （e）继承的权重是0，如果该元素没有直接选中，不够父元素权重多高，子元素得到的权重都是0；

  • 权重叠加：如果是复合选择器，计算权重时，会有权重的叠加。
  • 代码展示

练习一

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>权重练习1</title>
    <style>
        .nav {
            color: red;
        }

        /* 继承的权重是0 */
        li {
            color: pink;
        }
    </style>
</head>

<body>
    <ul class="nav">
        <li>人生四大悲</li>
        <li>家里没宽带</li>
        <li>网速不够快</li>
        <li>手机没流量</li>
        <li>学校没WiFi</li>
    </ul>
</body>

</html>

 练习二

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>权重练习2</title>
    <style>
        .nav li {
            color: red;
        }

        .nav .pink {
            color: pink;
            font-weight: 700;
        }
    </style>
</head>

<body>
    <ul class="nav">
        <li class="pink">人生四大悲</li>
        <li>家里没宽带</li>
        <li>网速不够快</li>
        <li>手机没流量</li>
        <li>学校没WiFi</li>
    </ul>
</body>

</html>

总结

逐渐掌握了CSS中快捷编码的方法、截图工具使用、有关链接的显示模式、背景内容的设置、三大特性的合理利用。

被头皮屑逼疯的秃头少女
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
十天学会DIV+CSS第二天笔记
青春华航的专栏
02-04 1024
一列布局 1. 一列宽度固定： #div1{ Width:500px; Height:300px; Background-color:pink; } 2. 一列宽度固定居中： #div1{ Width:500px; Height:300px; Background-color:pink; Margin:0 auto; } 3. 一列自适应宽度 #div1{ Widt
CSS3学习第七天
qq_46563235的博客
10-24 1243
学习笔记来源于哔哩哔哩千锋教育前端学习笔记
100DaysCss第二天教程
qq_55100815的博客
05-14 774
第二天是一个菜单按钮的动画效果。
css-doodle 学习第二天，css-doodle能怎么使用
qq_36418362的博客
05-03 1639
1、我们能怎么来使用css-doodle css-doodle的使用有如下几种 1.1、Grid（表格形式） 1.2、Selectors（选择器形式） 1.3、Properties（属性形式） 1.4、Functions（功能（函数）形式） 1.5、JS API（应该是引用其它API形式） 2、Grid 2.1、先看一段使用Grid的代码（官网代码，size属性是我自己加的，这些属...
CSS入门二、美化页面元素
李宥的博客
01-11 1936
- CSS 是`层叠样式表` ( Cascading Style Sheets ) 的简称，有时我们也会称之为 CSS 样式表或级联样式表。CSS 也是一种标记语言。 - CSS 主要用于设置 HTML 页面中的`文本内容`（字体、大小、对齐方式等）、`图片的外形`（宽高、边框样式、边距等）以及`版面的布局和外观显示样式`。 - CSS 让我们的网页更加丰富多彩，布局更加灵活自如。简单理解：`CSS 可以美化 HTML , 让 HTML 更漂亮，让页面布局更简单。`
纯HTML+CSS网页设计期末作业（个人网站）
热门推荐
weixin_47138646的博客
11-14 31万+
目录纯HTML+CSS网页设计期末作业（个人网站）效果展示源码index.htmlindex.cssabout.htmlhobbies.htmlhobbies.cssme.htmlme.cssbook1.htmlbook.csssongci.htmlsongci.css缺陷 纯HTML+CSS网页设计期末作业（个人网站） 效果展示 index 页面 about 页面 hobbies 页面 书籍介绍页面 元曲介绍页面 源码 index.html <!DOCTYPE html> <h
HTML+CSS+JS网页设计
m0_73738929的博客
04-15 4万+
HTML页面主要由：登录、注册跳转页面，轮播图，家乡简介，热门景点，特色美食等组成。通过Div+CSS、鼠标滑过特效、获取当前时间，跳转页面、基本所需的知识点全覆盖。提示：以下是本篇文章正文内容，下面案例可供参考。
DIV+CSS 二级菜单实现
qq_42758330的博客
05-01 5691
DIV+CSS实现二级菜单 在网页制作中我们经常会用到的这样的导航栏+二级菜单布局 实现效果如下： 设计思路就是通过 ul li 的双重嵌套来实现二级菜单，l利用display:none将二级菜单默认隐藏，li:hover鼠标悬浮时再将其显示出来。 需要注意的是： 1.需要清除掉网页的原始属性 以防止二级菜单错位*{margin:0;padding:0;} 2.在一级菜单中使用display: block; float:left 使其横向显示 3.使用绝对对位 然后使二级菜单默认隐藏position:a
安全基础第六天:css注入
weixin_62870380的博客
03-27 1590
我是垃圾，没做出来，别看
CSS第二天笔记
04-23
css复习用的资料，主要介绍Css3常用的一些属性： 1.1 边框 2 1.1.1 边框圆角 2 1.1.2 边框阴影 4 1.1.3 边框图片 4 1.1.4案例 用css 实现 8 1.2 渐变 10 1.2.1 线性渐变 （gradient 变化） 10 1.2.2 径向渐变 ...
CSS第二天.md
05-03
CSS第二天.md
css第二天高级技巧.md
07-14
css第二天高级技巧.md
css第二天定位笔记.md
07-14
css第二天定位笔记.md
HTML5+CSS3第二天.xmind
08-02
第二天HTML5+CSS3：新增选择器，CSS新属性样式等更详细的笔记总结，包含源代码图片实例。
ASP.NET Core Web API 使用Autofac框架
鲤籽鲲的博客
08-08 366
ASP.NET Core Web API 使用Autofac框架
略记一次抓取内容后解密及登录的经历
最新发布
深蓝浅蓝的天
08-09 738
从我这个不专业的爬虫工程师来看，爬虫工作是比较看耐心的，尤其是登录和其他的破解环节，一定要相信，从理论上来破的东西，它确实就能破，但确实太考验耐心了。最后再拿下登录返回的token，准备一台手机，自动接收验证码，然后启一个接受短信的服务存到redis，至此登录、请求接口、解密数据全部完成。，key是接口有返回的，但iv对方网站就隐藏的很好，除了这个iv，其他的问题都解决了，加密字符串也成功解密。尤其是解密的代码，调用栈太长了，我水平不够，整整看了2天，才从这种代码中找出了它主要的解密方式，
前端面试宝典【CSS篇】【4】
BDawn的专栏
08-06 482
盒子模型是 CSS 中用于描述 HTML 元素布局方式的一个概念。在 CSS 中，每个元素都被视为一个矩形盒子，这个盒子由几个不同的部分组成：内容区（content）、内边距（padding）、边框（border）和外边距（margin）。 box-sizing 属性是 CSS 中的一个重要属性，它用于定义元素的盒模型是如何工作的。 CSS Sprites（也称为 CSS 精灵或 CSS 雪碧图）是一种优化网页性能的技术，它将多个小图像合并成一个单一的大图像文件
vue实现PC端图片放大缩小可鼠标拖动，鼠标滚轮控制放大缩小完整代码付效果图
a_靖的博客
08-07 258
vue实现放大缩小，拖动盒子完整代码付效果图
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值