一、标签群组通配等选择器
标签选择器(TAG选择器)
css : div{ } <div></div>
使用的场景:
1.去掉某些标签的默认样式时
2. 复杂的选择器中,如层次选择器
html : <div>
群组选择器(分组选择器)
可以通过用逗号隔开的方式,给不同的选择器添加统一的css样式,来达到代码的复用
css : div、p、span{ }
通配选择器
*{ } -> div,ul,li,p,h1,h2······{}
注: 尽量避免使用通配选择器,因为会给所有的标签添加样式,慎用
使用场景: 去掉所有标签的默认样式时
<style>
/* div{ background: red;}
#text{ background: red;}
.title{ background: red;} */
/* div , #text ,.title{ background: red;} */
*{ border: red solid;}
</style>
</head>
<body>
<div>这是一个块</div>
<p id="text">这是一个段落</p>
<h2 class="title">这是一个标题</h2>
</body>
二、层次选择器
后代 : M N{ }
父子 : M > N{ }
兄弟 : M ~ N{ } 当前M下面的所有兄弟N标签
相邻 : M + N{ } 当前M相邻的N标签
<style>
/* #list li{ border: red solid;} */
/* #list > li{ border: red solid;} */
/* div ~ h2{ background: red;} */
div + h2 { background: red;}
</style>
</head>
<body>
<!-- <ul id="list">
<li>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</li>
<li></li>
<li></li>
</ul>
<ol>
<li></li>
<li></li>
<li></li>
</ol> -->
<h2>这是一个标题</h2>
<di>这是一个块</di>
<h2>这是一个标题</h2>
<p>这是一个段落</p>
<h2>这是一个标题</h2>
<h2>这是一个标题</h2>
</body>
三、属性选择器
= : 完全匹配
*= : 部分匹配
^= : 起始匹配
$= : 结束匹配
[ ][ ][ ] : 多个中括号组合匹配
<style>
/* div[class]{ background: red;} */
/* div[class=box]{ background: red;} */
/* div[class*=search]{ background: red;} */
/* div[class^=search]{ background: red;} */
/* div[class$=search]{ background: red;} */
div[class][id]{ background: red;}
</style>
</head>
<body>
<div>庄达菲</div>
<div class="box" id="elem">李进步</div>
<div class="search">周林林</div>
<div class="search-button">韩菲</div>
<div class="button-search">白天</div>
</body>
四、hover等伪类选择器
伪类选择器
M:伪类{ }
CSS伪类用于向某些元素添加特殊效果。一般用于初始样式添加不上的时候,用伪类来添加。
1.:link 访问前的样式(只能添加(a标签)
2.:visited访问后的样式 (只能添加a标签)
3.:hover鼠标移入时的样式(可以添加给所有的标签)
4.:active鼠标按下时的样式(可以添加给所有的标签)
注:
1.link visited 只能给a标签加,hover和active可以给所有标签加。
2.如果四个伪类都失效,一定要注意顺序 : L V H A。
3.一般网站只这样去设置 : a{ } a:hover{ }。
<style>
/* div{ width: 200px; height: 200px; background: red;}
div:hover{ background: blue;}
div:active{ background: green;} */
/* a:link { color:red;}
a:visited{ color:blue;}
a:hover{ color:green;}
a:active{ color:yellow;} */
a{ color:gray;}
a:hover{ color: red;}
</style>
</head>
<body>
<a href="#">这是一个链接</a>
</body>
五、after等伪类选择器
:after、:before 通过伪类的方式给元素添加一些文本内容,使用content属性
:checked、:disabled、:focus都是针对表单元素的
<style>
/* div::after{ content:"Word";} */
/* div:before{ content:"Word"; color: red;} */
/* :checked{ width: 100px; height: 100px;} */
:disabled{ width: 100px; height: 100px;}
:focus{ background: red;}
</style>
</head>
<body>
<input type="checkbox">
<input type="checkbox" checked>
<input type="checkbox" disabled>
<input type="text">
</body>
六、结构伪类选择器
1.:nth-of-type()、:nth-child()
角标是从1开始的,1表示第一项,2表示第二项 | n值 表示从0到无穷大
2.:first-of-type、:first-child
3.:last-of-type、:last-child
4.:only-of-type、:only-child
nth-of-type()和nth-child()之间的区别
type : 类型
child : 孩子
<style>
/* li:nth-of-type(n){ background: red;} */
/* li:nth-of-type(2n){ background: blue;}
li:nth-of-type(2n+1){ background: red;} */
/* li:first-of-type{ background: red;}
li:last-of-type{ background: blue;} */
/* li:only-of-type{ background: red;} */
/* li:nth-of-type(2){ background: red;} */
/* div:nth-child(2){ background: red;} */
/* li:nth-child(3){ background: red;} */
/* li:nth-of-type(3){ background:red;} */
div:only-of-type{ background: red;}
</style>
</head>
<body>
<ul>
<li></li>
<div>庄达菲</div>
<li></li>
<li></li>
<li></li>
<li></li>
七、css样式的继承
文字相关的样式可以被继承
布局相关的样式不能被继承(默认是不能继承的,但是可以设置继承属性)
注 : inherit值
<style>
div{ width:300px; height: 300px; border: 1px red solid;
color: red; font-size: 30px;}
p{ border:inherit;}
</style>
</head>
<body>
<div>
<p>这是一个段落</p>
</div>
</body>
八、集、单一样式的优先级
1.相同样式优先级
当设置相同样式时,后面的优先级较高,但不建议出现重复设置样式的情况。
2.内部样式与外部样式
内部样式与外部样式优先级相同,如果设置了相同样式,那么后写的引入方式优先级高。
3.单一样式优先级
style行间 > id > class > tag > * > 继承
注 : style行间 权重 1000
id 权重 100
class 权重 10
tag 权重 1
<!-- <style>
div{ color:red;}
div{ color:blue;}
</style>
<link rel="stylesheet" href="./base.css"> -->
<style>
/* #elem{ color:red;} */
/* .box{ color: blue;} */
/* div{ color:green;} */
/* *{ color:red;} */
body{ color:blue;}
</style>
</head>
<body>
<!-- <div id="elem" style="color:blue;">这是一个块</div> -->
<div id="elem" class="box">这是一个块</div>
</body>
九、important群组等优先级
!important
提升样式优先级, 非规范方式,不建议使用。(不能针对继承的属性进行优先级的提升)
标签+类与单类
群组优先级
群组选择器与单一选择器的优先级相同,靠后写的优先级高
<style>
/* #elem{ color:red !important;}
*{ color:green;} */
/* #elem{ color:red ;}
*{ color:green !important;} */
/* #elem{ color:red ;}
*{ color:green ;}
body{ color:gray !important;} */
/* .box{ color:red;}
div.box{ color:blue;} */
/* div.box{ color:blue;}
.box{ color:red;} */
/* div,p{ color:red;}
div{ color:blue;}*/
div{ color:blue;}
div,p{ color:red;}
</style>
</head>
<body>
<!-- <div id="elem" style="color:blue;">这是一个块</div> -->
<div class="box">这是一个块</div>
<p>这是一个段落</p>
</body>
十、层次的优先级
层次优先级
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{ }
十一、css盒子模型
盒子模型:
组成 :
content -> padding -> border -> margin
物品 -> 填充物 -> 包装盒 -> 盒子与盒子之间的间距
1.content : 内容区域 width和height组成的
2.padding : 内边距 (内填充)
只写一个值 : 30px(上下左右)
写两个值 : 30px 40px( 上下、左右 )
写四个值 : 30px 40px 50px 60px ( 上、右、下、左 )
单一样式只能写一个值
padding-left
padding-right
padding-top
padding-bottom
3.margin : 外边距(外填充)
注 :1.背景颜色会填充到margin以内的区域(不包括)
2.文字会在content区域。
3.padding不能出现负值,margin是可以出现负值。
<style>
#box{ width:200px; height:200px; background: red; border:10px transparent 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>
十一、box-sizing改变盒模型
box-sizing盒尺寸,可以改变盒子模型的展现形态
默认值: content-box : width、height -> content
border-box : width、height -> content padding border
box-sizing属性允许您以特定的方式定义匹配某个区域的特定元素。
取值为content-box(默认值) | border-box
使用场景:
1.不用再去计算一些值
2.解决一些100%的问题
<style>
/* #box{ width:200px; height:200px; background: red; border:10px blue solid;
padding : 30px 50px;
box-sizing: border-box;} */
#box{ width:80px; height:120px; background: red; border:10px blue solid;
padding : 30px 50px;}
input{ width: 100%; padding: 30px; box-sizing: border-box;}
</style>
</head>
<body>
<div id="box">这是一个盒子</div>
<input type="text">
</body>
十二、盒模型之margin叠加问题
margin叠加
当给两个盒子同时添加上下边距的时候,就会出现叠加的问题。这个问题,只在上下有,左右是没有这个叠加问题的。
解决方案:
1.BFC规范
2.相办法只给一个元素添加间距
<style>
/* #box1{ width: 200px; height: 200px; background: red; margin-bottom: 70px;}
#box2{ width: 200px; height: 200px; background: blue; margin-top: 40px;} */
/* #box1{ width: 200px; height: 200px; background: red; margin-bottom: 70px;}
#box2{ width: 200px; height: 200px; background: blue;} */
#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>
十三、盒模型之margin传递问题
margin传递
margin传递的问题只会出现在嵌套的结构中,只有margin-top会有传递的问题,其它三个方向是没有传递问题的。
解决方案;
1.BFC规范
2.给父容器加边框
3.margin换成padding
<style>
/* #box1{ width: 200px; height: 200px; background: red ;}
#box2{ width: 100px; height: 100px; background: blue ; margin-top: 100px;} */
/* #box1{ width: 200px; height: 200px; background: red ; border: 1px black solid;}
#box2{ width: 100px; height: 100px; background: blue ; margin-top: 100px;} */
#box1{ width: 200px; height: 100px; background: red ; padding-top: 100px;}
#box2{ width: 100px; height: 100px; background: blue ;}
</style>
</head>
<body>
<div id="box1">
<div id="box2"></div>
</div>
</body>
十四、css盒子模型之扩展
margin自适应居中
margin左右自适应是可以的,但是上下自适应是不行的。(如果想实现上下自适应的话,需要在第二大部分来进行学习)
不设置content的现象
width、height不设置的时候,对盒子模型的影响, 会自动去计算容器的大小,节省代码。
/* #box{ width: 400px; height: 100px; background: red; margin-left: 200px;} */
/* #box{ width: 400px; height: 100px; background: red;
margin-left: auto; margin-right: auto;
margin: 0 auto;
margin: auto auto;} */
#box1{ width: 300px; height: 300px; background: red;}
/* #box2{ width: 100%; height: 100px; background: blue; color: white;
padding-left: 30px; border-left: 10px black solid;} */
#box2{ height: 100px; background: blue; color: white; padding-left: 30px;
border-left: 10px black solid; }
</style>
</head>
<body>
<!-- <div id="box"></div> -->
<div id="box1">
<div id="box2">这是一些内容</div>
</div>
</body>
十五、盒子模型的嵌套练习
<style>
#box1{ width: 350px; height: 350px; border: 1px black dashed; padding: 27px;}
#box2{ border: 5px #d7effe solid; padding: 20px;}
#box3{ background: #ffa0df; padding: 41px;}
#box4{ border: 1px white dashed; padding: 3px;}
#box5{ border: 1px white dashed; padding: 49px;}
#box6{ width: 100px; height: 100px; background: #96ff38; border: #fcff00 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>
十六、按类型划分标签
标签分类
按类型
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.内联标签之间会有空隙,原因: 换行产生
注: 布局一般用块标签,修饰文本一般用内联标签
inline-block : 内联块( input、select···)
挨在一起,但支持宽高
<style>
body{ font-size: 0;}
/* #box1,#box2{ width: 100px; height: 100px; background: red;} */
/* #box1,#box2{height: 100px; background: red;} */
#content1,#content2{ width: 100px; height: 100px; background: red; font-size: 16px;}
input{ width: 100px; height: 100px;}
</style>
</head>
<body>
<!-- <div></div>
<span></span>
<input type="text"> -->
<!-- <div id="box1">庄达菲</div>
<div id="box2">郭淼淼</div> -->
<!-- <span id="content1">内联1内联1内联1内联1</span><span id="content2">内联2</span> -->
<span id="content1">内联1内联1内联1内联1</span>
<span id="content2">内联2</span>
<input type="text">
<input type="text">
</body>
十七、按内容划分标签
按内容
Flow : 流的内容
Metadate : 元数据
Sectioning: 分区
Heading : 标题
Phrasing : 措辞
Embedded : 嵌入的
Interactive : 互动的
W3C
十八、按显示划分标签
按显示
替换元素 : 浏览器根据元素的标签和属性,来决定元素的具体显示内容
img、input···
非替换元素 : 将内容直接告诉浏览器,将其显示出来
div、h1、p···
<style>
img{ width: 100px; height: 100px;}
</style>
</head>
<body>
<img src="./Web前端学习3/img/1.jpg" alt="">
<!-- <input type="checkbox">
<h1>标题</h1> -->
</body>
十九、display显示框类
display
block
inline
inline-block
none
注: 区别
display:none( 不占空间的隐藏)
visibility:hidden( 占空间的隐藏)
<style>
/* div{ width: 100px; height: 100px; background: red; display: inline;} */
/* div{ width: 100px; height: 100px; background: red; display: inline-block;}
span{ width: 100px; height: 100px; background: red; display: inline-block;}
input{ display:none;} */
#box1,#box2{ width: 100px; height: 100px; background: red;}
/* #box1{ display: none;} */
#box1{ visibility: hidden;}
</style>
</head>
<body>
<!-- <div>庄达菲</div>
<div>郭淼淼</div>
<span>内联1</span>
<span>内联2</span>
<input type="text"> -->
<div id="box1">庄达菲</div>
<div id="box2">郭淼淼</div>
</body>
二十、标签嵌套规范
ul、li
dl、dt、dd
table、tr、td
1.块标签可以嵌套内联标签
块嵌套内联
<div>
<span></span>
<a href="#"></a>
</div>
块嵌套块
<div>
<div></div>
</div>
2.块标签不一定能嵌套块标签
特殊:
错误的写法
<p>
<div></div>
</p>
3.内联标签不能嵌套块标签
a标签是一个例外
错误的写法:
<span>
<div></div>
</span>
特殊:
正确的写法:
<a href="#">
<div></div>
</a>
二十一、overflow溢出隐藏
overflow
visible : 默认
hidden
scroll
auto
x轴、y轴
overflow-x、over-flow-y针对两个轴分别设置
<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;}
</style>
</head>
<body>
<div>
谷爱凌谷谷爱凌爱凌谷爱凌谷爱凌谷爱凌
谷爱凌谷爱凌谷爱凌谷爱凌谷爱凌谷爱凌
谷爱凌谷爱凌谷爱凌谷爱凌谷爱凌谷爱凌
谷爱凌谷爱凌谷爱凌谷爱凌谷爱凌谷爱凌
谷爱凌谷爱凌谷爱凌谷爱凌谷爱凌谷爱凌
</div>
</body>
二十二、透明度与手势
1.opacity : 0(透明,占空间) ~ 1(不透明)
0.5(半透明)
注:占空间、所有的自内容也会透明
2.rgba( ): 0 ~ 1
注: 可以让指定的样式透明,而不影响其他样式
3.cursor : 手势
default:默认箭头
要实现自定义手势:
准备图片: .cur、.ico
<style>
#div1{ width: 100px; height: 100px; background: red; opacity: 0.5;}
#div2{ width: 100px; height: 100px; background: rgba(255,0,0,0.5)
/* cursor: pointer; */
cursor : url( ./img/cursor.ico),auto;}
</style>
</head>
<body>
<div id="div1">这是一个块</div>
<p>这是一个段落</p>
<div id="div2">这又是一个块</div>
</body>
二十三、最大最小宽高
min-width、max-width
min-height、max-height
注: 强化对百分比单位的理解
%单位: 换算 -> 以父容器的大小进行换算
一个容器怎么适应屏幕的高**: 容器加height: 100%;body: 100%;html: 100%;
html,body{ height:100%;}
.contrainer{ height: 100%;}
<style>
/* div{ width: 200px; max-height: 200px; border: 1px red solid;} */
body{ height: 500px;}
/* #box1{ width: 200px; height: 200px; background: red;} */
#box1{ width: 200px; height: 100%; background: red;}
#box2{ width: 100%; height: 80%; background: blue;}
</style>
</head>
<body>
<!-- <div>
这是一段内容
这是一段内容
这是一段内容
这是一段内容
</div> -->
<div id="box1">
<div id="box2"></div>
</div>
</body>
二十四、css默认样式
有些标签有默认样式,有些标签没有默认样式。
没有默认样式:
div、span、···
有默认样式:
body、h1···h6、p、ul、···
body -> marign : 8px
h1 -> margin : 上下 21.440px
font-weight : bold
p -> margin : 上下 16px
ul -> margin : 上下 16px
padding: 左 40px
默认点: list-style : disc
a -> text-decoration: underline;
二十五、css重置样式
简单的CSS reset
*{ margin: 0; padding: 0;}
优点:
缺点:稍微的影响性能
ul{ list-style: none;}
a{ text-decoration: none; color: #666;}
img{ display: block;}
问题的现象: 图片跟容器底部有一些空隙。
内联元素的对齐方式是按照文字基线对齐的,而不是文字底线对齐的。
vertical-align: baseline; 基线对齐方式,默认值
vertical-align: bottom; 解决方式是推荐的
写具体页面的时候或一个布局效果的时候:
1.写结构
2.css重置样式
3.写具体样式
<style>
/* ul{ list-style: none;}
a{ text-decoration: none; color: #999;}
a:hover{ text-decoration:underline; color: red;} */
div{ border: 1px black solid;}
/* img{ vertical-align: baseline;} */
/* img{ vertical-align: bottom;} */
img{ display: block;}
</style>
</head>
<body>
<!-- <div>这是一个块</div>
<span></span>
<h1></h1>
<ul>
<li></li>
</ul>
<a href="#">这是一个链接</a> -->
<div>
<img src="./img/2.jpg" alt="">
</div>
二十六、float浮动概念及原理
文档流
文档流是文档中可显示对象在排列时占用的位置
float特性
加浮动的元素,会脱离文档流,会延迟容器靠左或靠右排列,如果之前已经有浮动的元素,会挨着浮动的元素进行排列。
float的取值
left
right
none(默认)
<style>
body{ border: 1px 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>
二十七、float注意点整理
float注意点:
1.只会影响后面的元素
2.内容默认提升半层
3.默认宽根据内容决定
4.换行排列
5.主要给块元素添加,但也可以给内联元素添加
ul{ margin: 0; padding: 0; list-style: none; width: 300px;
height: 300px; border: 1px black solid;}
li{ width: 100px; height: 100px; background: red;
border: 1px yellow solid; box-sizing: border-box; float: left;}
li:nth-of-type(1){ height: 120px;}
li:nth-of-type(2){ height: 80px;}
span:last-type{ float:right}
</style>
</head>
<body>
<!-- <div id="box1"></div>
<div id="box2"></div>
<div id="box3">谷爱凌谷爱凌谷爱凌谷爱凌</div>
<div id="box4">这是一个没有宽度的块元素</div> -->
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<span>谷爱凌</span><span>谷爱凌</span>
</body>
二十八、清除float浮动(上、下)
利用clear属性清除float浮动
(clear属性只会操作块标签,对内联标签不起作用)
嵌套排列:
1.固定宽高 : 不推荐,不能把高度固定死,不适合做自适应的效果。
2.父元素浮动: 不推荐,因为父容器浮动也会影响到后面的元素。
3.overfloat : hidden(BFC规范),如果有子元素想溢出,那么会受到影响。
4.display: inline-block(BFC规范),不推荐,父容器会影响到后面的元素。
5.设置空标签: 不推荐,会多添加一个标签。
6.after伪类: 推荐,是空标签的加强版,目前各大公司的做法。
上下排列: clear属性,表示清除浮动的,left、right、both
<style>
/* #box1{ width: 100px; height: 100px; background: red; float: left;}
#box2{ width: 200px; height: 200px; background: blue; clear: left;} */
/* #box1{ width: 100px; height: 100px; background: red; float: right;}
#box2{ width: 200px; height: 200px; background: blue; clear: both;} */
/* #box1{ width: 200px; height: 200px; border: 1px black solid;}
#box2{ width: 100px; height: 200px; background: red; float: left;} */
/* #box1{ width: 200px; border: 1px black solid; float: left;}
#box2{ width: 100px; height: 200px; background: red; float: left;} */
/* #box1{ width: 200px; border: 1px black solid; overflow: hidden;}
#box2{ width: 100px; height: 200px; background: red; float: left;}*/
/* #box1{ width: 200px; border: 1px black solid; display: inline-block;}
#box2{ width: 100px; height: 200px; background: red; float: left;} */
/* #box1{ width: 200px; border: 1px black solid;}
#box2{ width: 100px; height: 200px; background: red; float: left;}
.clear{ clear: both;} */
#box1{ width: 200px; 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"></div>
<div id="box2"></div> -->
<!-- <div id="box1">
<div id="box2"></div>
<div class="clear"></div>
</div>
庄达菲庄达菲 -->
<div id="box1" class="clear">
<div id="box2"></div>
</div>
郭淼淼郭淼淼
</body>
二十九、float制作页面小结构(上、下)
<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 .pc{ width: 99px; border: 1px solid #c8c4d3; margin-left: 5px;}
#main .pc img{ margin: 2px;}
#main .content{ width: 240px; margin-left: 13px;}
#main .content h2{ font-size: 12px; line-height: 24px;}
#main .content p{ font-size: 12px; line-height: 20px;}
</style>
</head>
<body>
<div id="main">
<h2>外媒评论精选</h2>
<ul>
<li class="clear">
<div class="l pic">
<a href="#">
<img src="./img2/img.png" alt="">
</a>
</div>
<div class="l content">
<h2>测试标题测试标题</h2>
<p>
测试段落测试段落测试段落测试段落测试段落测试段落测试段落····
<a href="#">[详细]</a>
</p>
</div>
</li>
<li class="clear">
<div class="l pic">
<a href="#">
<img src="./img2/img.png" alt="">
</a>
</div>
<div class="l content">
<h2>测试标题测试标题</h2>
<p>
测试段落测试段落测试段落测试段落测试段落测试段落测试段落····
<a href="#">[详细]</a>
</p>
</div>
</li>
<li class="clear">
<div class="l pic">
<a href="#">
<img src="./img2/img.png" alt="">
</a>
</div>
<div class="l content">
<h2>测试标题测试标题</h2>
<p>
测试段落测试段落测试段落测试段落测试段落测试段落测试段落····
<a href="#">[详细]</a>
</p>
</div>
</li>
</ul>
</div>
</body>