【web前端】第四天-CSS第二天

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

目录

目标

一、emmet语法

二、CSS的复合选择器

三、CSS的显示模式

四、CSS的背景

 

目标

  • 使用emmet语法
  • 使用CSS复合选择器
  • 写出伪类选择器的使用规范
  • 说出元素有几种显示模式
  • 写出元素显示模式的相互转换代码
  • 写出背景图片的设置方式
  • 计算CSS的权重

一、emmet语法

  • 简介

Emmet语法的前身是Zen coding,它使用缩写,来提高html/css的编写速度, Vscode内部已经集成该语法。

  • 快速生成HTML结构语法
  • 快速生成CSS样式语法

  • 快速生成HTML结构语法
    • 生成标签 直接输入标签名 按tab键即可   比如  div   然后tab 键， 就可以生成 <div></div>
    • 如果想要生成多个相同标签  加上 * 就可以了 比如   div*3  就可以快速生成3个div
    • 如果有父子级关系的标签，可以用 >  比如   ul > li就可以了
    • 如果有兄弟关系的标签，用  +  就可以了 比如 div+p  
    • 如果生成带有类名或者id名字的，  直接写  .demo  或者  #two   tab 键就可以了
    • 如果生成的div 类名是有顺序的， 可以用 自增符号  $
    • 如果想要在生成的标签内部写内容可以用  { }  表示

  • 快速生成CSS样式语法

CSS 基本采取简写形式即可

​       比如 w200   按tab  可以 生成  width: 200px;

​       比如 lh26px   按tab  可以生成  line-height: 26px;

  • 快速格式化代码

Vscode  快速格式化代码:   shift+alt+f

也可以设置 当我们 保存页面的时候自动格式化代码:

1）文件 ------.>【首选项】---------->【设置】；

2）搜索emmet.include;

3）在settings.json下的【工作区设置】中添加以下语句：

​       "editor.formatOnType": true,

​       "editor.formatOnSave": true

<!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>emmet语法使用</title>
    <style>
        .one {
            /* tac */
            text-align: center;
            /* w100 */
            width: 100px;
            /* tdn */
            text-decoration: none;
        }
    </style>
</head>
<body>
    <!-- 输入（标签名*数字）然后按tab键就可以生成n个标签 -->
    <!-- div*5 -->
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <!-- 如果有父子级关系，则用>号 -->
    <!-- (div>span)*2 -->
    <div><span></span></div>
    <div><span></span></div>
    <!-- 如果是兄弟级则用+号 -->
    <!-- (div+p)*2 -->
    <div></div>
    <p></p>
    <div></div>
    <p></p>
    <!-- 如果带类名的则用(属性名.类名)再加tab键 -->
    <!-- (div.demo>span#demo)*2 -->
    <div class="demo"><span id="demo2"></span></div>
    <div class="demo"><span id="demo2"></span></div>
    <!-- 如果生成的类名有顺序，则用自增符号$ -->
    <!-- div.demo$*3 -->
    <div class="demo1"></div>
    <div class="demo2"></div>
    <div class="demo3"></div>
    <!-- 如果要生成自带文字的标签，则用{} -->
    <!-- div{我是带文字的div} -->
    <div>我是带文字的div</div>
</body>
</html>

二、CSS的复合选择器

  • 什么是复合选择器

在 CSS 中，可以根据选择器的类型把选择器分为基础选择器和复合选择器，复合选择器是建立在基础选择器之上，对基本选择器进行组合形成的。

​       复合选择器是由两个或多个基础选择器，通过不同的方式组合而成的，可以更准确、更高效的选择目标元素（标签）

​       常用的复合选择器包括：后代选择器、子选择器、并集选择器、伪类选择器等等

  • 后代选择器
<!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>
    <!-- 若只选择ol里的li -->
    <style>
        ol li {
            color: purple;
        }
        /* 可以找子代的子代 */
        ol li a {
            text-decoration: none;
            color: red;
        }
        /* 存在另一个ol标签则定义一个新的类名 */
        .two li {
            color: red;
        }
    </style>
</head>
<body>
    <ol>我是ol父代
        <li>我是ol子代</li>
        <li>我是ol子代</li>
        <li>我是ol子代</li>
        <li><a href="#">我是li子代</a></li>
    </ol>
    <ol class="two">我是ol父代
        <li>我是ol子代</li>
        <li>我是ol子代</li>
        <li>我是ol子代</li>
    </ol>
    <ul>我是ul父代
        <li>我是ul子代</li>
        <li>我是ul子代</li>
        <li>我是ul子代</li>
    </ul>
</body>
</html>

后代选择器又称为包含选择器，可以选择父元素里面子元素。其写法就是把外层标签写在前面，内层标签写在后面，中间用空格分隔。当标签发生嵌套时，内层标签就成为外层标签的后代。

元素1 和 元素2 中间用空格隔开

元素1 是父级，元素2 是子级，最终选择的是元素2

元素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>
        /* 后代选择器和子选择器比较 */
        /* 后代选择器 */
        .one a {
            text-decoration: none;
            color: purple;
        }
        /* 子选择器 */
        .two>a {
            text-decoration: none;
            color: purple;
        }
    </style>
</head>
<body>
    <div class="one">我是父代
        <a href="#">我是子代</a>
            <p>
                <a href="#">我是子代的子代</a>
            </p>
    </div>
    <div class="two">我是父代
        <a href="#">我是子代</a>
            <p>
                <a href="#">我是子代的子代</a>
            </p>
    </div>
</body>
</html>

子元素选择器（子选择器）只能选择作为某元素的最近一级子元素。

​       （简单理解就是选亲儿子元素）

元素1 和 元素2 中间用 大于号 隔开

元素1 是父级，元素2 是子级，最终选择的是元素2

元素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 {
            color: purple;
        }
    </style>
</head>
<body>
    <div>
        我是div
    </div>
    <p>
        我是p
    </p>
</body>
</html>

并集选择器可以选择多组标签, 同时为他们定义相同的样式，通常用于集体声明。并集选择器是各选择器通过英文逗号（,）连接而成，任何形式的选择器都可以作为并集选择器的一部分。

元素1 和 元素2 中间用逗号隔开

逗号可以理解为和的意思

并集选择器通常用于集体声明

  • 伪类选择器

伪类选择器用于向某些选择器添加特殊的效果，比如给链接添加特殊效果，或选择第1个，第n个元素。

伪类选择器书写最大的特点是用冒号（:）表示，比如 :hover 、 :first-child 。

  • 链接伪类选择器
<!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: #333;
            text-decoration: none;
        }
        /* 点击过的链接 */
        a:visited {
            color: purple;
        }
        /* 鼠标经过的链接 */
        a:hover {
            color: blue;
            text-decoration: underline;
        }
        /* 鼠标正在按下的链接 */
        a:active {
            color: red;
        }
    </style>
</head>
<body>
    <a href="http://www.baidu.com">030</a>
</body>
</html>

伪类选择器用于向某些选择器添加特殊的效果，比如给链接添加特殊效果，或选择第1个，第n个元素。

伪类选择器书写最大的特点是用冒号（:）表示，比如 :hover 、 :first-child 。

​       a:link  没有点击过的(访问过的)链接

​       a:visited   点击过的(访问过的)链接

​       a:hover 鼠标经过的那个链接

​       a:active    鼠标正在按下还没有弹起鼠标的那个链接

为了确保生效，请按照 LVHA 的循顺序声明 :link－:visited－:hover－:active。

因为 a 链接在浏览器中具有默认样式，所以我们实际工作中都需要给链接单独指定样式。

 

  • :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 {
            background-color: rgb(211, 155, 211);
        }
    </style>
</head>
<body>
    <input type="text"><input type="text"><input type="text">
</body>
</html>

:focus 伪类选择器用于选取获得焦点的表单元素。

​焦点就是光标，一般情况 <input> 类表单元素才能获取

  • 总结

三、CSS的显示模式

  • 什么是元素的显示模式

元素显示模式就是元素（标签）以什么方式进行显示，比如<div>自己占一行，比如一行可以放多个<span>。

网页的标签非常多，在不同地方会用到不同类型的标签，了解他们的特点可以更好的布局我们的网页。

  • 元素显示模式的分类
    • 块元素

<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>

<div> 标签是最典型的块元素。

  • 块元素的特点

  • 比较霸道，自己独占一行。
  • 高度，宽度、外边距以及内边距都可以控制。
  • 宽度默认是容器（父级宽度）的100%。
  • 是一个容器及盒子，里面可以放行内或者块级元素。

  • 注意
    • 文字类的元素内不能放块级元素
    • <p> 标签主要用于存放文字，因此 <p> 里面不能放块级元素，特别是不能放<div>
    • 同理， <h1>~<h6>等都是文字类块级标签，里面也不能放其他块级元素

 

  • 行内元素

<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>

<span> 标签是最典型的行内元素。有的地方也将行内元素称为内联元素。

 

  • 行内元素的特点

  • 相邻行内元素在一行上，一行可以显示多个。
  • 高、宽直接设置是无效的。
  • 默认宽度就是它本身内容的宽度。
  • 行内元素只能容纳文本或其他行内元素。

 

  • 注意

  • 链接里面不能再放链接
  • 特殊情况链接 <a> 里面可以放块级元素，但是给 <a> 转换一下块级模式最安全

  • 行内块元素

<img />、<input />、<td>

它们同时具有块元素和行内元素的特点。有些资料称它们为行内块元素。

  • 行内块元素的特点

  • 和相邻行内元素（行内块）在一行上，但是他们之间会有空白缝隙。
  • 一行可以显示多个（行内元素特点）。
  • 默认宽度就是它本身内容的宽度（行内元素特点）。
  • 高度，行高、外边距以及内边距都可以控制（块级元素特点）。

  • 总结

<!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: 100px;
            background-color: purple;
        }
        span,strong {
            height: 100px;
            background-color: red;
        }
        input {
            height: 100px;
            background-color: yellow;
        }
    </style>
</head>
<body>
    <div>我是块元素div独占一行</div>
    <span>我是行内元素span</span> <strong>我是行内元素strong</strong>
    <br/>
    <!-- 行内块元素 -->
    <input type="text"><input type="text">
</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>元素显示模式转换</title>
    <style>
        a {
            /* 高度判断是行内元素还是块元素 */
            height: 100px;  
            background-color: purple;
            /* 把行内元素转换为块元素 */
            display : block;
        }
        div {
            /* 高度判断是行内元素还是块元素 */
            height: 100px;
            background-color: red;
            /* 块元素改为行内元素 */
            display: inline;
        }
        span {
            /* 高度判断是行内元素还是块元素 */
            height: 100px;
            background-color: yellow;
            /* 转换成行内块元素 */
            display: inline-block;
        }
    </style>
</head>
<body>
        <a href="#">我是从行内元素转换成块元素的a</a>
        <div>我是从块元素转换成行内元素的div</div>
        <span>我是从行内元素转换成行内块元素的span</span>
</body>
</html>

一个模式的元素需要另外一种模式的特性

​       比如想要增加链接 <a> 的触发范围。

  • 转换方式

  • 转换为块元素：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>
        a {
            display : block;
            width: 230px;
            height: 40px;
            background-color: #55585a;
            font-size: 14px;
            color: #fff;
            text-decoration: none;
            text-indent: 2em;
            /* 行高居中 */
            line-height: 40px;
        }
        a:hover {
            background-color: #ff6700;
        }
    </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>

四、CSS的背景

通过 CSS 背景属性，可以给页面元素添加背景样式。

背景属性可以设置背景颜色、背景图片、背景平铺、背景图片位置、背景图像固定等。

  • 背景颜色

background-color 定义元素的背景颜色

元素背景颜色默认值是 transparent（透明）

  • 背景图片

background-image  定义元素的背景图片

  • 背景平铺

background-repeat 设置元素背景图像的平铺

  • 背景图片位置

background-position 属性可以改变图片在背景中的位置

参数代表的意思是：x 坐标和 y 坐标。 可以使用 方位名词 或者 精确单位

  • 其它说明

1、参数是方位名词

​       如果指定的两个值都是方位名词，则两个值前后顺序无关，比如 left  top 和 top  left 效果一致

​       如果只指定了一个方位名词，另一个值省略，则第二个值默认居中对齐

2、参数是精确单位

​       如果参数值是精确坐标，那么第一个肯定是 x 坐标，第二个一定是 y 坐标

​       如果只指定一个数值，那该数值一定是 x 坐标，另一个默认垂直居中

3、参数是混合单位

​       如果指定的两个值是精确单位和方位名词混合使用，则第一个值是 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>
        /* 背景颜色 */
        .div1 {
            height: 100px;
            width: 100px;
            background-color: rgb(218, 161, 218);
        }
        /* 背景图片 */
        .div2 {
            width: 300px;
            height: 300px;
            background-color: rgb(237, 250, 49);
            background-image: url(images/logo.png);
            /* 画面平铺 */
            background-repeat: no-repeat;
            /* 背景图片位置 */
            background-position: center center;
        }
    </style>
</head>
<body>
    <div class="div1">我是背景1</div>
    <div class="div2"></div>
</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>背景位置案例一</title>
    <style>
        h3  {
            width: 118px;
            height: 40px;
            font-size: 14px;
            font-weight: 400;
            line-height: 40px;
            background-image: url(images/icon.png);
            background-repeat: no-repeat;
            background-position: left center;
            text-indent: 1.5em;
        }
        body {
            background-image: url(images/bg.jpg);
            background-position: -194px 42px;
            background-repeat: no-repeat;
        }
    </style>
</head>
<body>
    <h3>
        成长守护平台
    </h3>
</body>
</html>
  • 背景图片固定

background-attachment 属性设置背景图像是否固定或者随着页面的其余部分滚动。

background-attachment 后期可以制作视差滚动的效果。

  • 背景样式合写

background: 背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置;

  • 背景色半透明

CSS3 提供了背景颜色半透明的效果。

  • 最后一个参数是 alpha 透明度，取值范围在 0~1之间
  • 我们习惯把 0.3 的 0 省略掉，写为 background: rgba(0, 0, 0, .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>
        body {
            background-image: url(images/bg.jpg);
            background-position: center top;
            background-repeat: no-repeat;
            /* 背景图像是否滚动 */
            background-attachment: scroll;
        }
        /* 背景样式复合写法 */
        body {
            /* rgba(172, 86, 86, 0.5)最后的值为透明度 */
            background: rgba(172, 86, 86, 0.5) url(images/bg.jpg) no-repeat scroll center top;
        }
    </style>
</head>
<body>
    <p>让我翻滚</p>
    <p>让我翻滚</p>
    <p>让我翻滚</p>
    <p>让我翻滚</p>
    <p>让我翻滚</p>
    <p>让我翻滚</p>
    <p>让我翻滚</p>
    <p>让我翻滚</p>
    <p>让我翻滚</p>
    <p>让我翻滚</p>
    <p>让我翻滚</p>
    <p>让我翻滚</p>
    <p>让我翻滚</p>
    <p>让我翻滚</p>
    <p>让我翻滚</p>
    <p>让我翻滚</p>
    <p>让我翻滚</p>
    <p>让我翻滚</p>
    <p>让我翻滚</p>
    <p>让我翻滚</p>
    <p>让我翻滚</p>
    <p>让我翻滚</p>
    <p>让我翻滚</p>
    <p>让我翻滚</p>
    <p>让我翻滚</p>
    <p>让我翻滚</p>
    <p>让我翻滚</p>
    <p>让我翻滚</p>
    <p>让我翻滚</p>
    <p>让我翻滚</p>
</body>
</html>
  • 总结

Zero_Fiend
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
web前端开发之CSS
hu0708的博客
06-30 2610
css
Web前端开发技术 第13-17章
崚嶒
06-24 1256
语义特性离线与存储特性设备访问特性多媒体特性三维、图形与特效特性性能与集成特性连接特性CSS3特性JavaScript由Netscape公司的Brendan Eich（布兰登·艾奇）于1995年开发设计。JavaScript是一种脚本编程语言，主要运行在客户端，用户访问带有js的网页，网页里的js程序就传给浏览器，由浏览器解释和处理。JavaScript的特点：简单性、安全性、动态性、跨平台性事件是一些可以通过脚本响应的页面动作。
【web前端】第四天-CSS第二天 案例
Zero_Fiend的博客
01-15 111
CSS学习第二天案例
Web前端105天-day11-CSS
qq_52810836的博客
11-13 425
Web前端105天-day11
学习web前端第一天-图片路径
qq_39449982的博客
11-25 352
目标： 1.能够说出网页的基本组成 2.能够说出什么是HTML 3.能够说出常用的浏览器 4.能够说出web标准的三大组成部分 src 图片路径 art 文本 替换文本，图像不能显示的文字 title 文本 提示文本，鼠标放到图像上，显示的文字 width 像素 设置图像的宽度 height 像素 设置图像的高度 border 像素 设置图像的边框粗细 一般通过css属性设置--> 相对路径 同一级路径 <img
【web前端】CSS第二天
qq_61768389的博客
06-22 240
CSS的第二天，这次之后大概又要过个好几天才能完成下一个知识的学习了，要准备考试了，好了，使用课程是黑马程序员pink老师前端入门教程，零基础必看的h5(html5)+css3+移动端前端视频教程_哔哩哔哩_bilibili目录框架一、Emmet语法1、快速生存HTML结构语法2、快速生成CSS样式语法3、快速格式化代码 二、CSS的复合选择器1、什么是复合选择器2、后代选择器​3、子选择器（子元素选择器）4、并集选择器5、伪类选择器6、总结​ 二、CSS的元素显示模式1、什么是元素显示模式​2、块元素 ​
web前端学习-第四天
qq_45654474的博客
08-25 290
CSS笔记目录CSS的基本概念选择器三种连接样式字体相关属性 目录 CSS的基本概念 Cascading Style Sheet 层叠样式表 选择器 标签：**<p><div>** 之类的标签 使用方式：直接输入标签名 类（class）：class名字 使用方式：输入点+class名 ID：ID名 使用方式：输入#+id名 一般来说我们写CSS文件的时候用的都是第二种选择器，class名 这是因为ID名一般被用作JS的选择器 给class命名也是有规范的，像xxx
web前端-css中最直观的反馈-伪类及伪元素选择器的使用
苏凉.py的博客
05-26 1238
🐚作者简介：苏凉（专注于网络爬虫，数据分析） 🐳博客主页：苏凉.py的博客 🌐系列专栏：web前端基础教程 👑名言警句：海阔凭鱼跃，天高任鸟飞。 📰要是觉得博主文章写的不错的话，还望大家三连支持一下呀！！！ 👉关注✨点赞👍收藏📂 文章目录前言css伪类选择器:active:link和:visited:hover伪类选择器合集css伪元素选择器伪元素合集::after和::before::first-letter::first-line::selection小结 前言 上期给大家讲了css的一些选择器的..
Pink老师前端笔记-CSS第五天
w1404273025的博客
04-16 867
Pink老师前端笔记-CSS第五天 # day07-前端基础CSS第五天 学习目标： ​ 了解 PS切图 ​ 掌握 CSS属性书写顺序 ​ 掌握 学成在线案例 1. PS 切图 1.1. 常见的图片格式 序号 格式 特点和常用的用途 1 jpg JPEG（.JPG）对色彩的信息保留较好，高清，颜色较多，我们产品类的图片 经常用jpg格式的 2 gif GIF格式最多只能储存256色，所以通常用来显示简单图形及字体，但是可以保存透明背景和动画效果, 实际 经常用于一些图片小动画效
web自动化selenium第二章-3. CSS定位
oDianZi1234567的博客
05-14 1077
CSS定位 1. id选择器 2. class选择器 3. 元素选择器 4. 属性选择器 5. 层级选择器
斑码教育大前端课堂笔记-css第一天
11-24
【CSS第一天】——斑码教育大前端课堂笔记详解 斑码教育是专注于IT技术培训的机构，其在前端开发领域的教学资源备受关注。本篇笔记是斑码教育sy101课程的第一天内容，主要围绕CSS（Cascading Style Sheets）展开，...
斑码教育大前端课堂笔记-html第三天
10-10
4. CSS3新特性： - 选择器扩展：如伪类（`:hover`, `:active`, `:focus`）和伪元素（`::before`, `::after`），增强选择器的灵活性。 - 动画与过渡：`transition`和`animation`属性实现平滑的动画效果。 - 弹性...
前端移动Web第二天：Flex伸缩布局-携程首页案例.zip
04-16
在前端开发领域，移动Web设计是一项至关重要的技能。在当今多设备、多屏幕尺寸的环境中，灵活的布局设计是确保网站在不同设备上都能呈现良好用户体验的关键。本篇将深入探讨"Flex伸缩布局"这一主题，以携程首页为例...
前端移动Web第二天知识点：Flex伸缩布局.zip
04-16
在前端开发领域，移动Web设计是一项至关重要的技能。在当今多设备、多屏幕尺寸的环境中，灵活的布局设计显得尤为重要。本知识点聚焦于"Flex伸缩布局"，这是现代Web开发中实现响应式布局的一种强大工具。让我们深入...
icon字体-对应练习第二天的font资源
02-26
在“icon字体——对应练习第二天的font资源”这个主题中，可能涉及到的练习包括学习如何导入和使用icon字体库，理解Unicode码点，以及通过CSS自定义图标样式。提供的"font"文件可能包含了练习所需的各种字体资源，...
网站基本布局CSS
m0_46608027的博客
07-24 761
* 滚动条轨道样式 *//* 滚动条样式 *//* 滑块样式 */
css 作业 2
最新发布
没有 bug 的代码是不完美的！
07-25 637
写完了
【css】flex布局父元素宽度或高度无法被子元素撑开-bug记录
qq_2511276124的博客
07-24 262
flex布局父元素宽度或高度无法被子元素撑开问题。 解决方案： ==**手动计算子元素内容所占宽高，手动赋值给父元素即可。**==
【前端 02】新浪新闻项目-初步使用CSS来排版
delepaste的博客
07-23 1282
在CSS中，页面上的每个元素都可以被看作是一个盒子，这个盒子由四个部分组成：内容区域（content）、内边距区域（padding）、边框区域（border）和外边距区域（margin）。这四个部分共同构成了元素的盒模型，决定了元素在页面上的位置和大小。内容区域（Content）：元素的实际内容区域，如文本、图片等。内边距区域（Padding）：内容区域与边框之间的空白区域，用于控制内容与边框的距离。边框区域（Border）：围绕内边距和内容区域的边界，可以设置颜色、宽度和样式。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值