HTML初学第三周

最新推荐文章于 2024-05-22 15:12:28 发布
最新推荐文章于 2024-05-22 15:12:28 发布
阅读量415 收藏 1
点赞数 2
文章标签： html css css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_73331433/article/details/127602957
版权

四十六、CSS选择器（TAG选择器、元素选择器）

标签选择器：

\div{} <div></div>
标签选择器用法：
1.做一个通用的设置，或者给一些标签去掉一个默认行为的时候（div没有默认行为）,去掉某些标签的默认样式
2.用于更加复杂的选择器中，比如:标签+类、层次选择器（在层次选择器下，我们会再去选择一些标签：如：ul li{}、ol li{}）

群组选择器（分株选择器）：

css;div,p,span{]
用法：可以通过逗号的方式，给多个不同的选择器添加同意的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>Document</title>
    <style>
        div{background: red;}
        #text{background: red;}
        .title{background: red;}
    </style>
</head>
<body>
    <div>这是一个块</div>
    <p id="text">这是一个段落</p>
    <h2 class="title">这是一个标题</h2>
</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>Document</title>
    <style>
        /* div{background: red;}
        #text{background: red;}
        .title{background: red;} */
        div,#text,title{background: red ;}
    </style>
   
</head>
<body>（
    <div>这是一个块</div>
    <p id="text">这是一个段落</p>
    <h2 class="title">这是一个标题</h2>
</body>
</html>```

## 通配选择器：
*{}→div,ul,li,p,h1,h2,……{}
其实通配就是包含所有标签
注：尽量避免使用通配选择器，因为会给所有的标签添加样式，慎用。
使用的场景：去掉所有标签的默认样式时

代码：

```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>Document</title>
    <style>
        *{ border:1px red sold;}
    </style>
</head>
<body>
    <div>这是一个块</div>
</body>
</html>

四十七、CSS选择器

层次选择器

后代：M N { } 类似于筛选，在指定的条件下找到指定的集合
父子：M > N { }
兄弟：M ~ N{ } 当前M下面的所有兄弟N标签
相邻：M + N { } 当前M相邻的N标签
代码：

<!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>Document</title>
    <style>
       #list li{border: 2px red solid;}
    </style>
</head>
<body>
   <ul id="list">
    <li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</li>
<li></li>
<li></li>
<ol>
    <li></li>
    <li></li>
    <li></li>
</ol>
</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>Document</title>
    <style>
       div~h2{background: red;}
    </style>
</head>
<body>
   <div>aaa</div>
   <h1>aaa</h1>
   <h2>bbb</h2>
</body>
</html>

四十八、CSS选择器

属性选择器：

*M[attr]
=：完全匹配
= : 部分匹配
^=：起始匹配
$=：结束匹配
[ ][ ] [ ]:组合匹配
在这里插入图片描述
代码：

<!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>Document</title>
    <style>
       div[class]{background: red;}
    </style>
</head>
<body>
   <div>aaa</div>
   <div class="box">bbb</div>
   <div class="search">ccc</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>Document</title>
    <style>
       div[class*=search]{background: red;}
    </style>
</head>
<body>
   <div>aaa</div>
   <div class="box">bbb</div>
   <div class="search">ccc</div>
   <div class="search-button">ddd</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>Document</title>
    <style>
       div[class$=search]{background: red;}
    </style>
</head>
<body>
   <div>aaa</div>
   <div class="box">bbb</div>
   <div class="search">ccc</div>
   <div class="search-button">ddd</div>
   <div class="button-search">ddd</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>Document</title>
    <style>
       div[class][id]{background: red;}
    </style>
</head>
<body>
   <div>aaa</div>
   <div class="box" id="elem">bbb</div>
   <div class="search">ccc</div>
   <div class="search-button">ddd</div>
   <div class="button-search">ddd</div>
   
   
</body>
</html>

四十九、CSS选择器

伪类选择器

CSS伪类用于向某些元素添加特殊的效果。一般用于初始样式添加不上的时候，用伪类来添加。
:ink 访问前的样式（只能添加给a标签）
:visited 访问后的样式（只能添加给a标签）
:hover 鼠标移入时的样式（可以添加给所有的标签）
:active 鼠标按下时的样式（可以添加给所有的标签）

注：

  1. link visited只能给a标签加，hover和active可以给所有的标签加
  2. 如果时光伪类都生效，一定要注意顺序;L V H A
  3. 一般网站只这样去设置 :a{} a:hover{}。
    代码：
<!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>Document</title>
    <style>
        div{width:200px;height:200px;background: red;}
        div:hover{background: blue;}
        div:active{background: green;}
    </style>
</head>
<body>
    <div></div>
</body>
</html>```





```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>Document</title>
    <style>
        a:link{color: red;}
        a:visited{color: red;}
        a:hover{color: green;}
        a:active{color: yellow;}
    </style>
</head>
<body>
    <a href="#">这是一个链接</a>
</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>Document</title>
    <style>
        a{color:gray;}
        a:hover{color: red;}
    </style>
</head>
<body>
    <a href="#">这是一个链接</a>
</body>
</html>

五十、CSS选择器

伪类选择器

：after、：before 通过伪类
：checked、：disabled 都是针对表单元素的
：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>Document</title>
    <style>
        div:after{content:"world";color: red;}
    </style>
</head>
<body>
    <div>hello</div>
</body>
</html>

五十一、CSS选择器

伪类选择器

结构性伪类选择器：
nth-of-type（）nth-child（）
角标是从1开始的，1表示第一项，2表示第二项 | n值 表示从0到无穷大
first-of-type
last-of-type
only-of-type
nth-of-type（）和nth-child（）之间的区别
type:类型
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>Document</title>
    <style>
        li:nth-of-type(2n+1){background: red;}
        li:nth-of-type(2n){background: blue;}
    </style>
</head>
<body>
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</body>
</html>

五十二、CSS样式继承

1.文字相关的样式可以被继承（颜色、字体大小、行高等这些和文字相关的不一定是作用到当前元素上，也可以作用到子元素上，子元素是可以继承这个样式的）
2.布局相关的样式不可以被继承（默认是不能被继承的，但是可以设置继承属性 inherit 值）
代码：

<!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>Document</title>
    <style>
        div{width:300px;height:300px;border:1px red solid;color:red;font-size: 300px;}
    </style>
</head>
<body>
    <div>
        <p>这是一个段落</p>
    </div>
</body>
</html>```

代码：

```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>Document</title>
    <style>
        div{width:300px;height:300px;border:1px red solid;color:red;font-size: 300px;}
        p{border:inherit;}
    </style>
</head>
<body>
    <div>
        <p>这是一个段落</p>
    </div>
</body>
</html>

五十三、CSS优先级

1.相同样式优先级：
当设置相同样式是，后面的优先级较高，但不建议出现重复设置样式的情况
2.内部样式与外部样式：
内部样式与外部样式优先级相同，如果都设置了相同样式，那么后写入的映入方式优先级高
3.单一样式优先级：
style行间>id>class>tag>*>继承
注：style行间 权重1000
id 权重 100
class 权重 10
tag 权重 1
代码：

<!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>Document</title>
    <style>
        .box{color: blue;}
        div{color: red;}
    </style>
    <link rel="stylesheet"href="./base.css">
</head>
<body>
    <div id="elem" class="box">这是一个块</div>
</body>
</html>

五十四、CSS优先级

!important

提升样式优先级，非规范方式，不建议使用（除非一些特殊情况：如：一些样式比较复杂已经不能大量改动的情况下，或者这个样式不能挪动、改位置）（不能针对继承的属性进行优先级的提升）

标签+类与单位（标签+类>单位的优先级）

群组优先级

（相同选择器的情况下，）群组选择器与单一选择器的优先级相同，靠后写的优先级高。
代码：

<!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>Document</title>
    <style>
        div,p{color: red;}
        div{color: blue;}
    </style>
</head>
<body>
    <div class="box">这是一个块</div>
    <p>这是一个段落</p>
</body>
</html>

五十五、CSS优先级

层次优先级

1.权重比较
ul li .box p input{} 1+1+10+1+1
.hello span #elem{} 10+1+100
（谁的数值高谁的权重高）
2.约分比较
ul li .box p input{} → li p input{}
.hello span #elem{} →#elem{}
（建议写三层以内的选择器如：.hello span #elem{}）

五十六、CSS盒子模型

组成：content→padding→border→margin
物品 填充物 包装盒 盒子与盒子之间的间距
content：内容区域 width和height组成的
padding：内边距（内填充）
只写一个值：30px（上下左右）
**写两个值：**30px、40px（上下、左右）
写三个值：30px、40px、50px、60px（上、右、下、左）
单一样式只能写一个值：
padding-left
padding-right
padding-top
padding-bottom
单一样式只能写一个值：
margin-left
margin-right
margin-top
margin-bottom
注：

  1. 背景颜色会填充到margin以内的区域。（不包括margin区域）
  2. 文字会在content区域添加。
  3. padding不能出现负值，margin是可以出现负值。

在这里插入图片描述
代码：

<!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>Document</title>
    <style>
        #box{
            width: 200px;height: 200px;background: red;border: 10px blue solid;
            padding: 30px 50px;
            margin: 10px;
        }
        #box2{width: 200px;height: 200px;background: black;color: white;}

    </style>
</head>
<body>
   <div id="box">这是一个盒子</div> 
   <div id="box2">这又是一个盒子</div> 
</body>
</html>

五十七、CSS盒子模型

box-sizing

box-sizing属性允许你以特定的方式定义匹配某个区域的特定元素。取值为content-box（默认值）|border-box
box-sizing：盒尺寸，可以改变盒子模型的展示形态。
默认值：content→box：width、height→content
border→box：width、height→content、padding、border
使用场景：
1.不用去计算一些值
2.解决一些100%的问题
代码：

<!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>Document</title>
    <style>
        #box{
            width: 200px;height: 200px;background: red;border: 10px blue solid;
            padding: 30px 50px;
            box-sizing: border-box;
        }
       
    </style>
</head>
<body>
   <div id="box">这是一个盒子</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>Document</title>
    <style>
        #box{
            width: 200px;height: 200px;background: red;border: 10px blue solid;
            padding: 30px 50px;
            box-sizing: border-box;
        }
        input{width: 100%;padding: 30px;box-sizing: border-box;}
    </style>
</head>
<body>
   <div id="box">这是一个盒子</div> 
   <input type="text">
</body>
</html>

五十八、CSS盒子模型

margin叠加：

margin叠加：当给两个盒子同时添加上下外边距的时候，就会出现叠加问题。这个问题，只在上下有，左右是没有这个叠加问题的。
盒子模型的一些问题：
margin叠加问题：出现在上下margin同时存在的时候。会去上下中值较大的作为叠加的值（按谁的值大就按谁的来）
解决方案：
1.BFC规范
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>Document</title>
    <style>
        #box1{width: 200px;height: 200px;background: red;margin-bottom: 30px;}
        #box2{width: 200px;height: 200px;background: blue;margin: 40px;}
    </style>
</head>
<body>
    <div id="box1"></div>
    <div id="box2"></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>Document</title>
    <style>
        #box1{width: 200px;height: 200px;background: red;margin-bottom: 30px;}
        #box2{width: 200px;height: 200px;background: blue;}
    </style>
</head>
<body>
    <div id="box1"></div>
    <div id="box2"></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>Document</title>
    <style>
        #box1{width: 200px;height: 200px;background: red;margin-bottom: 0;}
        #box2{width: 200px;height: 200px;background: blue;margin-top: 70px;}
    </style>
</head>
<body>
    <div id="box1"></div>
    <div id="box2"></div>
</body>
</html>

五十九、CSS盒子模型

margin传递

margin传递的问题就只会出现在嵌套的结构中，且只有margin-top会有传递的问题，其它三个方向是没有传递问题的。
解决方案：
1.BFC规范
2.给父容器加边框。
3.margin换成padding。
盒子模型问题：margin传递问题，出现在嵌套的结构中，只有针对margin-top的问题。
代码：

<!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>Document</title>
    <style>
        #box1{width: 200px;height: 200px;background: red;}
        #box2{width: 100px;height: 100px;background: blue;}
    </style>
</head>
<body>
    <div id="box1">
    <div id="box2"></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>Document</title>
    <style>
        #box1{width: 200px;height: 200px;background: red;}
        #box2{width: 100px;height: 100px;background: blue;margin-top: 100px;}
    </style>
</head>
<body>
    <div id="box1">
    <div id="box2"></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>Document</title>
    <style>
        #box1{width: 200px;height: 200px;background: red;border: 1px black solid;}
        #box2{width: 100px;height: 100px;background: blue;margin-top: 100px;}
    </style>
</head>
<body>
    <div id="box1">
    <div id="box2"></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>Document</title>
    <style>
        #box1{width: 200px;height: 200px;background: red;padding-top: 100px;}
        #box2{width: 100px;height: 100px;background: blue;margin-top: 100px;}
    </style>
</head>
<body>
    <div id="box1">
    <div id="box2"></div>
</body>
</html>

六十、CSS盒子模型

margin自适应居中

auto（自适应）
扩展：
1.左右自适应是可以的，但是上下自适应是不行的。（如果想实现上下自适应的话，需要在第二大部分来进行学习。）
2.width、height不设置的时候，对盒子模型的影响，会自动去计算容器的大小，节省代码。

不设置content的现象

代码：

<!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>Document</title>
    <style>
        #box{width: 400px;height: 100px;background: red;
            margin:auto auto;}
    </style>
<body>
    <div id="box"></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>Document</title>
    <style>
        #box1{width: 200px;height: 200px;background: red;}
        #box2{width: 100%;height: 100px;background: blue;color: white;padding-left: 30px;border-left: 10px black 
            solid;}
    </style>
</head>
<body>
    <div id="box1">
    <div id="box2">这是一些内容</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>Document</title>
    <style>
        #box1{width: 300px;height: 300px;background: red;}
        #box2{height: 100px;background: blue;color: white;}
    </style>
</head>
<body>
    <div id="box1">
    <div id="box2">这是一些内容</div>
</body>
</html>```

![在这里插入图片描述](https://img-blog.csdnimg.cn/a1a12887b69a485aa3611afa279899a1.png)
代码：

```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>Document</title>
    <style>
        #box1{width: 300px;height: 300px;background: red;}
        #box2{height: 100px;background: blue;color: white;border-left:10px black solid;}
    </style>
</head>
<body>
    <div id="box1">
    <div id="box2">这是一些内容</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>Document</title>
    <style>
        #box1{width: 350px;height: 350px;border: 1px black dashed;padding: 27px;}
        #box2{border: 5px;color: #d7effe solid;padding:20px;}
        #box3{background: #ffa0df;padding: 41px;}
        #box4{border: 1px;color: white dashed;padding: 3px;}
        #box5{border: 1px;color: white dashed;padding: 49px;}
        #box6{width: 100px;height: 100px;background:#96ff38 ;border: #fcfff0 5px solid;} 
    </style>
</head>
<body>
    <div id="box1">
        <div id="box2">
            <div id="box3">
                <div id="box4">
                    <div id="box5">
                        <div id="box6"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
</body>
</html>

六十二、标签分类

按类型：

block：块（div、p、ul、li、h1……）
1.独占一行
2.支持所有样式
3.不写宽的时候，跟父元素的宽相同
4.所占区域是一个矩形

inline：内联（span、a、em、strong、img……）

1.挨在一起的
2.有些样式不支持，例如：width、height、margin、padding
3.不写宽的时候，宽度由内容决定
4.所占的区域不一定是矩形
5.内联标签之间会有空隙，原因：换行产生的
注：span是用来修饰文本的，不用它来做布局，布局一般用块标签，修饰文本一般用内联标签。（块默认是上下布局）
(实现左右布局的解决方案：找到这两个元素的富容器)

inline-block：内联块（input、select……）

1.挨在一起，但是支持宽高
2.内联标签之间会有空隙，原因：换行产生的
3.支持所有样式
4.所占区域是一个矩形
代码：

<!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>Document</title>
</head>
<body>
    <div></div>
    <span></span>
    <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>Document</title>
    <style>
        #box1,#box2{width: 100px;height: 100px;background: red;}
    </style>
</head>
<body>
    <div id="box1">块1</div>
    <div id="box2">块2</div>
</body>
</html>```

![在这里插入图片描述](https://img-blog.csdnimg.cn/2d1d09c8f8c149c48f16db1ac33bf396.png)
代码：

```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>Document</title>
    <style>
        #box1,#box2{height: 100px;background: red;}
    </style>
</head>
<body>
    <div id="box1">块1</div>
    <div id="box2">块2</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>Document</title>
    <style>
        body{font-size: 0;}
        #content1,#content2{width:100px;height: 100px;background: red;}
    </style>
</head>
<body>
    <!-- <div id="content1">内联1</div>
    <div id="content2">内联2</div> -->
    <span id="content1">内联1内联1内联1内联1内联1</span>
    <span id="content2">内联2</span>
</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>Document</title>
    <style>
        #content1,#content2{width:100px;height: 100px;background: red;}
    </style>
</head>
<body>
    <!-- <div id="content1">内联1</div>
    <div id="content2">内联2</div> -->
    <span id="content1">内联1内联1内联1内联1内联1</span><span id="content2">内联2</span>
</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>Document</title>
    <style>
        #content1,#content2{width:100px;height: 100px;background: red;}
    </style>
</head>
<body>
    <div id="content1">内联1</div>
    <div id="content2">内联2</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>Document</title>
    <style>
        body{font-size: 0;}
        #content1,#content2{width:100px;height: 100px;background: red;}
        input{width: 100px;height: 100px;}
    </style>
</head>
<body>
    <span id="content1">内联1内联1内联1内联1内联1</span>
    <span id="content2">内联2</span>
    <input type="text">
    <input type="text">
</body>
</html>

六十三、标签分类

按内容：

Flow：流内容（有一些内容是会叠加在一起的，表示网页中能够感知到的一些标签，如：标题、块和区域可以感知到，大部分标签都是Flow的特点）
Metadata：元数据（比如：设置网页中的一些编码，如：title、link、style……一部分是可以感知到的，还有一部分是感知不到的）
Sectioning：分区（表示划分区域，除了常见的div标签以外，还有很多划分区域的）
Heading：标题（h1~h6）
Phrasing：措辞（对文本的一个修饰，如:strong、em……基本上都是内联标签）
Embedded：嵌入的（如：通过src引入图片，还有一些添加视频、音频的标签）
Interactive：互动的（指用户和界面进行一些交互操作，比如：输入框、下拉菜单……）
(具体的可以通过W3C的官网进行学习)
（详情：具体详情）网址如下：
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

六十四、标签分类

按显示：

替换元素（又叫替换标签）：浏览器根据元素的标签和属性，来决定元素的具体显示内容。
img、input……
非替换元素：将内容直接告诉浏览器，将其显示处理。
div、h1、p……
代码：

<!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>Document</title>
</head>
<body>
    <input type="checkbox">
    <h1>标题</h1>
</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>Document</title>
    <style>
        img{width: 100px;height: 100px;}
    </style>
</head>
<body>
    <img src="./img/1.jpg" alt="">
</body>
</html>

六十五、显示框类型

display

显示框类型：
block、inline 、inline-block、none
注：display:none与visibility:hidden区别：
1.display:none→不占空间的隐藏
2.visibility:hidden→占空间的隐藏
代码：

<!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>Document</title>
    <style>
        div{width: 100px;height: 100px;background: red;}
    </style>
</head>
<body>
   <div>块1</div>
   <div>块2</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>Document</title>
    <style>
        div{width: 100px;height: 100px;background: red;display: inline;}
    </style>
</head>
<body>
   <div>块1</div>
   <div>块2</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>Document</title>
    <style>
        div{width: 100px;height: 100px;background: red;display: inline;}
        span{width: 100px;height: 100px;background: red;display: inline-block;}
    </style>
</head>
<body>
   <div>块1</div>
   <div>块2</div>
   <span>内联1</span>
   <span>内联2</span>
</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>Document</title>
    <style>
        #box1{width: 300px;height: 300px;background: red;}
        #box1{display: none;}
    </style>
</head>
<body>
    <div id="box1">块1</div>
    <div id="box2">块2</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>Document</title>
    <style>
        div{width: 100px;height: 100px;background: red;display: inline;}
        span{width: 100px;height: 100px;background: red;display: inline-block;}
        input{display: none;}
    </style>
</head>
<body>
   <div>块1</div>
   <div>块2</div>
   <span>内联1</span>
   <span>内联2</span>
   <input type="text">
</body>
</html>

六十六、标签嵌套规范

一些组合标签，可以嵌套使用的：
ul、li
dl、dt、dd
table、tr、td
1.块标签可以嵌套内联标签：
<div>
<span></span>
<a href=“#”></a>
</div>
2.块标签不一定能嵌套块标签
块嵌套块：
<div>
<div></div>
</div>
特殊：不允许,错误写法
<p>
<div></div>
</p>
3.内联标签不能嵌套块标签
a标签是一个例外（加a 的好处：可以给一个区域加链接，a里面可以加span，但是里面不可以加a，即a不可以嵌套a）
错误写法：
<span>
<div></div>
</span>
特殊：
正确的写法：
<a href=“#”>
<div></div>
</a>

六十七、溢出隐藏

overflow：溢出隐藏

visible:默认
hidden
scroll：出现滚动条
auto：当内容多的时候出现滚动条，少的时候没有滚动条
x轴、y轴→overflow-x、overflow-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>Document</title>
    <style>
        div{width: 300px;height: 200px;border: 1px black solid;overflow: hidden;}
        div{width: 300px;height: 200px;border: 1px black solid;overflow: scroll;}
        div{width: 300px;height: 200px;border: 1px black solid;overflow: auto;}
        div{width: 300px;height: 200px;border: 1px black solid;overflow-y: auto;overflow-x: scroll;}
    </style>
</head>
<body>
    <div>
        溢出隐藏 溢出隐藏 溢出隐藏 溢出隐藏
        溢出隐藏 溢出隐藏 溢出隐藏 溢出隐藏
        溢出隐藏 溢出隐藏 溢出隐藏 溢出隐藏
        溢出隐藏 溢出隐藏 溢出隐藏 溢出隐藏
        溢出隐藏 溢出隐藏 溢出隐藏 溢出隐藏
        溢出隐藏 溢出隐藏 溢出隐藏 溢出隐藏
        溢出隐藏 溢出隐藏 溢出隐藏 溢出隐藏
        溢出隐藏 溢出隐藏 溢出隐藏 溢出隐藏
        溢出隐藏 溢出隐藏 溢出隐藏 溢出隐藏
        溢出隐藏 溢出隐藏 溢出隐藏 溢出隐藏
        溢出隐藏 溢出隐藏 溢出隐藏 溢出隐藏
    </div>
</body>
</html>

六十八、透明度与手势

opacity（对整体进行透明操作）

opacity:0（透明）占空间~1（不透明）
0.5（半透明）
注：占空间、所有的子内容也会透明

rgba（对背景进行透明操作）

rgb : 0~1
注：可以让指定的样式透明，而不影响其他样式

cursor（手势）

default：默认箭头
move可移动的、pointer手型、help带问号
自定义鼠标样式
要实现自定义手势：准备图片：.cur、.ico
cursor：url（./img/cursor.ico）,auto
代码：

<!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>Document</title>
    <style>
        div{width: 100px;height: 100px;background: red;opacity: 0.5;}
    </style>
</head>
<body>
    <div>这是一个块</div>
    <p>这是一个段落</p>
</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>Document</title>
    <style>
        div1{width: 100px;height: 100px;background: red;opacity: 0.5;}
        div2{width: 100px;height: 100px;background: red;rgha(255,0,0,0);}
    </style>
</head>
<body>
    <div id="div1">这是一个块</div>
    <p>这是一个段落</p>
    <div id="div2">这又是一个块</div>
</body>
</html>

六十九、最大、最小宽高

min-width、max-width
min-height、max-height
注：强化对百分比单位的理解
百分比单位→换算：以父容器的大小进行换算
一个容器怎么适应屏幕的高：容器加height:100%; body:100%; html:100%
html,body{height:100%;}
.contrainer{height:100%;}能够自适应屏幕

代码：

<!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>Document</title>
    <style>
        /* div{width: 200px;max-height: 200px;border: 1px;color:  red solid;} */
        #box1{width: 200px;height: 200px;background: red;}
        #box2{width:100%;height: 80%;background: blue;}
    </style>
</head>
<body>
    <!-- <div>
        这是一段内容
        这是一段内容
        这是一段内容
        这是一段内容
        这是一段内容
        这是一段内容
        这是一段内容
        这是一段内容
        这是一段内容
        这是一段内容
        这是一段内容
        这是一段内容
        这是一段内容
        这是一段内容
    </div> -->
    <div id="box1">这是一个块</div>
    <div id="box2">这又是一个块</div>
</body>
</html>

七十、CSS默认样式

有些标签有默认样式，有些标签没有默认样式。
1.没有默认样式：
div、span……
2.有默认样式：
body、h1~h6、p、ul、……
body→margin：8px
h1→margin：上下 21.44px
h1→font-weight：bold（加粗）
p→margin：上下 16px
ul→margin：上下 16px padding：左 40px（默认点：list-style：disc）
a→text-decoration:underline;（下划线）

七十一、CSS reset（重置样式）

简单的CSSreset：
1.*{margin:0;padding:0;}
优点：不用考虑哪些标签有默认的margin和padding
缺点：稍微的影响性能
body,p,h1,ul{margin:0;padding:0;}
2.ul{list-style:none;}（没有点）
3.a{tex-decoration:none;color:#666;}
默认颜色是蓝色
4.img{disply:block;}
问题的现象：图片和容器底部有一些空隙。
内联元素是对齐方式是按照文字基线对齐的，而不是文字底线对齐
vertical-align:baseline;基线对齐方式，默认值
img{vertical-align:bottom;}解决方案是推荐的
写具体页面的时候或者写一个布局效果的时候：
1.写结构
2.CSS重置样式
3.写具体样式
链接：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>Document</title>
    <style>
        ul{list-style: none;}
        a{text-decoration: none;color: #999;}
        a:hover{text-decoration: underline;color: red;}
    </style>
</head>
<body>
    <div>这是一个块</div>
    <span></span>
    <h1></h1>
    <p></p>
    <ul>
        <li></li>
    </ul>
    <a href="#">这是一个链接</a>
</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>Document</title>
    <style>
        /* ul{list-style: none;}
        a{text-decoration: none;color: #999;}
        a:hover{text-decoration: underline;color: red;} */
        div{border: 1px;color:black solid}
        img{vertical-align: bottom;}
    </style>
</head>
<body>
    <!-- <div>这是一个块</div>
    <span></span>
    <h1></h1>
    <p></p>
    <ul>
        <li></li>
    </ul>
    <a href="#">这是一个链接</a> -->
    <div>
        <img src="./img/1.jpg" alt="">
    </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>Document</title>
    <style>
        div{border: 1px;color:black solid}
        img{display:block ;}
    </style>
</head>
<body>
    <div>
        <img src="./img/1.jpg" alt="">
    </div>
</body>
</html>

七十八、float浮动

文档流

文档流是文档中可显示对象在排列是所占用的位置。
标签是分为块和内联的，块标签在文档流中的默认的排列方式是从上到下，内联标签在文档流中的默认的排列方式是从左到右

float特性

加浮动的元素，会脱离文档流，会延着父容器靠左或靠右排列，如果之前已经有浮动的元素，会挨着浮动的元素进行排列。（不再按照默认的方式排列了）

float取值

left：向左浮动
right：向右浮动
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>Document</title>
    <style>
        body{border: 1px;color: black solid;}
        #box1{width: 100px;height: 100px;background: yellow;float: right;}
        #box2{width: 200px;height: 200px;background:red;}
    </style>
</head>
<body>
    <div id="box1"></div>
    <div id="box2"></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>Document</title>
    <style>
        body{border: 1px;color: black solid;}
        #box1{width: 100px;height: 100px;background: yellow;float: left;}
        #box2{width: 200px;height: 200px;background:red;float: left;}
    </style>
</head>
<body>
    <div id="box1"></div>
    <div id="box2"></div>
</body>
</html>

七十九、float浮动

float注意点

1.只会影响后面的元素。
2.内容默认提示半层。
3.默认宽根据内容决定。
4.换行排列。
5.主要给块元素添加，但也可以给内联元素添加。
代码：

<!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>Document</title>
    <style>
        body{border: 1px;color: black solid;}
        #box1{width: 100px;height: 100px;background: yellow;}
        #box2{width: 200px;height: 200px;background:red;float: left;}
        #box3{width: 200px;height: 200px;background:blue;}
        #box4{background:green;float: left;}
    </style>
</head>
<body>
    <div id="box1"></div>
    <div id="box2"></div>
    <div id="box3">文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字
        文字文字文字文字文字文字文字文字文字文字文字文字文字
    </div>
    <div id="box4">这是一个没有宽度的块元素</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>Document</title>
    <style>
        ul{margin: 0;padding: 0;list-style: none;width: 300px;height: 300px;border: 1px;color:black solid;}
        li{width: 100px;height: 100px;background: red;border: 1px;color:yellow solid;box-sizing: border-box;
        float: left;}
        li:nth-of-type(1){ height:12opx;}
        li:nth-of-type(2){ height:80opx;}
        span:last-of-type{float: right;}
    </style>
</head>
<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>
    <span>aaaa</span><span>bbb</span>
</body>
</html>

八十、float浮动

利用clear属性清除float浮动

（一）上下排列：clear属性，表示清除浮动的，left、right、both
（二）嵌套排列：（在同一个文档流下，子元素的大小决定了父元素的高度）
1.固定宽高：不推荐，不能把高度固定死，不适合做自适应的效果。
2.父元素浮动：不推荐，因为父容器浮动也会影响到后面的元素。
3.overflow:hidden（BFC规范），不推荐，父容器会影响到后面的元素。
4.display:inline-block（BFC规范），不推荐，父容器会影响到后面的元素。
5.设置空标签：不推荐，会多添加一个标签。
6.after伪类：推荐，是空标签的加强版，目前各大公司的做法。
代码：

<!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>Document</title>
    <style>
        #box2{width:100px;height: 200px;background: red;float: left;}
        #box2{width:100px;height: 200px;background: blue;clear: left;}
    </style>
</head>
<body>
    <div id="box1"></div>
    <div id="box2"></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>Document</title>
    <style>
        #box2{width:100px;border: 1px;color: black solid;}
        #box2{width:100px;height: 100px;background:red ;}
    </style>
</head>
<body>
    <div id="box1"></div>
    <div id="box2"></div>
</body>
</html>

八十一、float浮动（续上清除浮动）

after伪类：推荐，是空标签的加强版，目前各大公司的做法。
（clear属性只会操作块标签，对内联标签不起作用）
代码：

<!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>Document</title>
    <style>
       #box1{width:200px;border: 100px;border:1px black solid}
        #box2{width:100px;height: 200px;background: red;float: left;}
        .clear:after{content: "";clear: both;display: block;}
    </style>
</head>
<body>
    <div id="box1" class="clear">
          <div id="box2"></div>
    </div>
    aaaaaaa
</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>Document</title>
    <style>
        *{margin: 0;padding: 0;}
        ul{list-style: none;}
        img{display: block;}
        a{text-decoration: none;color: #666;}
        h1,h2,h3{font-size: 16px;}

        .l{float: left;}
        .r{float: right;}
        .clear::after{content:"";display: block;clear: both;}

        #main{width: 366px;margin: 20px auto;}
        #main .title{height: 23px;line-height: 23px;font-size: 12px;font-weight: bold;padding-left: 30px;
          background:url(./img2/bg_title.png) no-repeat 6px 4px,url(./img2/bg_line.png)repeat-x;
        }
        
        #main ul{overflow: hidden;margin-top: 13px;}
        #main li{margin-bottom: 22px;}
        #main .pic{width: 99px;border: 1px solid #c8c4d3;}
        #main .pic img{margin: 2px;}
        #main .content{margin: 24px;font-size: 12px;}
        #main .content h2{line-height: 24px;}
        #main .content p{line-height: 20px;}
    </style>
</head>
<body>
    <div id="main">
        <h2 class="title">外媒评论精选</h2>
        <ul>
            <li class="clear">
                <div class="1 pic">
                    <a href="">
                        <img src="./img2/bg_line.png" alt="">
                    </a>
                </div>
                <div class="1 content">
                    <h2>测试标题测试标题</h2>
                    <p>
                      测试段落测试段落测试段落测试段落测试段落测试段落测试段落测试段落测试段落……
                      <a href="#">[详细]</a>  
                    </p>
                </div>
            </li>
            <li class="clear">
                <div class="1 pic">
                    <a href="">
                        <img src="./img2/bg_line.png" alt="">
                    </a>
                </div>
                <div class="1 content">
                    <h2>测试标题测试标题</h2>
                    <p>
                      测试段落测试段落测试段落测试段落测试段落测试段落测试段落测试段落测试段落……
                      <a href="#">[详细]</a>  
                    </p>
                </div>
            </li>
            <li class="clear">
                <div class="1 pic">
                    <a href="">
                        <img src="./img2/bg_line.png" alt="">
                    </a>
                </div>
                <div class="1 content">
                    <h2>测试标题测试标题</h2>
                    <p>
                      测试段落测试段落测试段落测试段落测试段落测试段落测试段落测试段落测试段落……
                      <a href="#">[详细]</a>  
                    </p>
                </div>
            </li>
        </ul>
    </div>
</body>
</html>
ddj-sun
关注
  • 2
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
Html初学练习.zip
01-01
Html初学练习Html初学练习Html初学练习Html初学练习 Html初学练习Html初学练习Html初学练习Html初学练习 Html初学练习Html初学练习Html初学练习Html初学练习 Html初学练习Html初学练习Html初学练习Html初学练习 Html...
CSS知识点2
weixin_30354675的博客
08-05 94
伪类 　　在所有浏览器中，超链接的样式在鼠标点击不同时期的样式是不一样的。 　　(1)默认情况:字体为蓝色，带有下划线。 　　(2)鼠标点击时:字体为红色，带有下划线。 　　(3)鼠标点击后:字体为紫色，带有下划线。 　　我们可以使用text-decoration: none; 来去除超链接下划线。 　　<a href="#">默认超链接样式</a> 　　&l...
HTML初学第一周
羽墨的博客
10-28 4342
HTML初学第一周
HTML初学第二周
qq_74288625的博客
10-29 289
HTML初学第二周
HTML初学第一周（10-22）
yz20221022的博客
10-22 99
HTML学习小结
初学HTML（第十三周总结）
qq_43402500的博客
12-01 212
  初学一门语言，就像探索一个新的未知世界，而我就是一个不同世界的旅行者，总是对未知充满无限的好奇，不同的“世界”拥有不同的特点，对于一个准程序员的我来说，它们色彩缤纷。   虽然说不同的语言有不同的特点，但是万变不离其宗，它们也拥有一定的相似性，一门语言并不能区分优与缺。当我初步的观看一些关于HTML的视频后，突然发现一个问题，为什么有这么多的标签（哭笑）；瞬间我就产生了压力，其实我刚刚接触这门...
html初学者自我介绍网页.pdf
11-16
html初学者自我介绍网页.pdf
HTML CSS 初学的练习.zip
12-30
HTML CSS 初学的练习HTML CSS 初学的练习HTML CSS 初学的练习 HTML CSS 初学的练习HTML CSS 初学的练习HTML CSS 初学的练习 HTML CSS 初学的练习HTML CSS 初学的练习HTML CSS 初学的练习 HTML CSS 初学的练习HTML ...
html初学者入门教程
05-22
HTML5作为下一代网站开发技术，无论你是一个 Web 开发人员或者想探索新的平台的游戏开发者，都值得去研究。此教程为新手提供学习指导，有兴趣的可以了解一下。
初学HTML与CSS一
05-31
初学HTML与CSS一
前端基础入门三大核心之HTML篇 —— 深入解析从URL请求到页面加载的艺术
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
05-21 611
前端技术的博大精深，远不止于此。从HTML的简单解析到复杂的SPA应用，每一步都蕴含着开发者对极致体验的追求。本文旨在为你铺就一条坚实的基础之路，鼓励你不断深入学习，探索新技术，实践新理念。前端的世界日新月异，保持好奇心，勇于实践，你将在这条道路上走得更远。最后，我们期待你在评论区分享你的学习心得、实战经验或是对未来前端发展的独到见解，让我们一起推动Web技术的车轮滚滚向前。欢迎来到我的博客，很高兴能够在这里和您见面！
/audio~ 前端音浪来袭：HTML音频&视频标签的深度探索
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
05-19 705
想要音频自动播放、循环播放，甚至静默加载？小菜一碟：< audio controls autoplay loop preload = " auto " > < source src = " ambient.mp3 " type = " audio/mpeg " > 准备好享受氛围音乐了吗？
前端基础入门三大核心之HTML篇：构建网页世界的基石与HTML5的魔力
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
05-18 885
HTML是一种标记语言，它使用一系列标签来描述网页内容的结构和表现形式。这些标签告诉浏览器如何处理和显示文本、图片、视频等网页元素。从最基础的段落、标题到复杂的表格、表单，HTML都能轻松应对。
前端基础入门三大核心之HTML篇 —— IndexedDB详解
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
05-21 794
IndexedDB是一种运行在浏览器中的非关系型数据库，它允许web应用在用户的设备上存储大量结构化数据，包括文件和 blob 数据类型。与传统的Cookie和localStorage相比，IndexedDB支持复杂的查询、索引以及事务处理，特别适合处理大量或者复杂的数据集。在事件中定义对象仓库和索引。// 创建索引IndexedDB为前端开发者提供了强大的本地数据存储能力，是构建高性能Web应用不可或缺的工具。
超链接的魅力：HTML中的 `＜a＞` 标签全方位探索！
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
05-19 1152
超链接是互联网的脉络，它不仅仅是一个技术点，更是信息流动的桥梁。今天，我们不仅学习了基础，也探索了高级技巧和最佳实践。但旅程远未结束，超链接的世界还有更多等你去发现。现在轮到你了！在你的项目中实践这些技巧，或者在评论区分享你遇到的有趣超链接应用。让我们携手，让互联网的每一个角落都充满活力与连接！你曾用超链接实现过哪些有趣的交互？或者在超链接使用过程中遇到过哪些坑？分享你的故事，让我们共同成长！🌟欢迎来到我的博客，很高兴能够在这里和您见面！
html通过数据改变，图片跟着改变
最新发布
凡尘
05-22 227
html通过数据来控制样式展示
将本地HtmL网站打包成exe
黄老五的专栏
05-22 326
以上步骤展示了如何使用Electron将一个本地HTML网站打包成exe文件。具体细节可以根据需要调整，例如调整窗口大小、添加更多配置等。参考Electron的官方文档获取更多信息。
echarts柱状图，折线图样式
ndkfa的博客
05-22 213
【代码】echarts柱状图，折线图样式。
百度页面奔跑的白熊html、css
2302_80141844的博客
05-16 1018
用keyframes定义动画（类似定义类选择器）@keyframes动画名称{0%{100%{
python初学者安装第三方库
04-03
对于Python初学者来说，安装第三方库可能是一个比较困惑的问题。下面是一些步骤来帮助你安装第三方库： 1. 使用pip安装：pip是Python的包管理工具，它可以帮助你轻松地安装第三方库。首先，确保你已经安装了Python...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

ddj-sun

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值