2018-10-15
1.css3作用:①选择器②属性(动画效果)
- 学习选择器用法(先不考虑优先级问题)
//html代码均相同,更改css样式来观察不同效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--css3 选择器,属性(动画)-->
<style type="text/css">
/*交集选择器*/
/*既是div又是类选择器*/
div.box{
width: 200px;
height: 200px;
border: 1px solid #2e2e2e;
float: left;
margin: 6px;
text-align: center;
line-height: 200px;
font-size: 2em;
}
</style>
</head>
<body>
<h2>css3选择器</h2>
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
<div class="box">5</div>
<div class="box">6</div>
<div class="box">7</div>
<div class="box">8</div>
</body>
</html>
- 交集选择器——既是div又是类选择器
div.box是交集选择器(这里既是div标签选择器又是类选择器)
在原有的css样式上增加一个属性
- 同个父元素,包括兄弟元素
.box:nth-child(2){
color: yellow;
}
- class为box的最后一个子元素
.box:last-child{
background-color: #28a4c9;
}
- 父元素偶数个,选择多个元素。偶数2n,奇数2n-1
//偶数
.box:nth-child(2n){
color: purple;
font-weight: bold;
}
.box:nth-child(2n-1){
color: purple;
font-weight: bold;
}
- 第几个元素变,div元素——nth-of-type(2)
.box:nth-of-type(2){
border-radius: 100px ;
/*border: 1px dotted #e9322d;*/
}
- box后的class为box内容样式 ——.box+.box
.box+.box{
background-color: yellow;
}
- h2后第一个——h2+.box
h2+.box{
background-color: #2e6da4;
}
- h2:first-letter——h2第一个字母的样式(第一个文字也算第一个字母)
h2:first-letter{
color: #28a4c9;
}
- after多用清浮。这里在.box后面添加图片
.box:after{
content: url("../image/2.4.jpg");
}
-before和after相对使用,在内容前加的文字
.box:before{
content:"w";
}
- 有class属性的div——div[class]
div[class]{
color: #00A000;
}
## 下拉菜单-二级菜单(ul-li)-
HTML部分
<body>
<div class="menu">
<ul>
<li>
<a href="#">标题1</a>
<ul>
<li><a href="#">菜单1</a></li>
<li><a href="#">菜单2</a></li>
<li><a href="#">菜单3</a></li>
</ul>
</li>
<li>
<a href="#">标题1</a>
<ul>
<li><a href="#">菜单1</a></li>
<li><a href="#">菜单2</a></li>
</ul>
</li>
<li>
<a href="#">标题1</a>
<ul>
<li><a href="#">菜单1</a></li>
<li><a href="#">菜单2</a></li>
</ul>
</li>
<li>
<a href="#">标题1</a>
<ul>
<li><a href="#">菜单1</a></li>
<li><a href="#">菜单2</a></li>
</ul>
</li>
</ul>
</div>
</body>
css样式:
/*一级菜单下所有二级菜单隐藏*/
/*下拉菜单*/
.menu>ul>li{
float: left;
width: 150px;
}
.menu>ul ul{
display: none;
}
.menu>ul>li:hover ul{
display: block;
}
现在写css样式
- 选中所以一级标题——子代选择器,.menu ul是后代选择器
.menu>ul>li>a{
color: #00A000;
}
- 选中所以二级标题-写法一
.menu ul ul a{
color: #28a4c9;
}
- 选中所以二级标题-写法二
.menu ul>li>ul a{
color: yellow;
}
- 选中所以二级标题-写法三
.menu li li a{
color: #e9322d;
}
- 选中所以二级标题-写法四
.menu li>ul>li>a{
color: #28a4c9;
}
- 第一个二级菜单()
.menu>ul>li>ul>li:nth-child(1){
background-color: purple;
}
- 对不同父元素下的子元素都是独立计数
.menu ul ul li+li a{
background-color: #2e2e2e;
}
- 选中第二个 一个标题
.menu>ul>li:nth-child(2)>a{
background-color: pink;
}
- 第二个 一级菜单下的第二个二级菜单
- 鼠标在一级菜单的时候 他的子a变色
2018-10-18 css3的transition(过度)和transform(变形),复习css的选择器
一.用10个列表项展示几种变换效果。并且了解每个选择器的意义
- 鼠标在tlist下第一个li—— .tlist>li:first-child:hover
- tlist的第二个li——.tlist>li:nth-of-type(2):hover
- tlist里的第三个li上—— .tlist>li:nth-child(3):hover
- tlist下第三个li的后面相连的第一个兄弟li——.tlist>li:nth-child(3)+li:hover
- tlist中li倒数第五个——所有子元素—— .tlist>li:nth-last-child(5)
- 只有li的子元素——.tlist>li:nth-last-child(4):hover
动画效果:
-
-过度,transition属性增加thml元素有css3属性变化,这两个变化的属性是数值,则以动画的方式呈现。 transition: all 2s;
-
border-radius: 值大于等于宽度一半,html元素为圆形;(参数上右下左每个值可以不同)
border-radius: 50%;
border-radius: 10px 70px 30px 5px; -
box-shadow:6px 6px 6px #030;
加阴影:box-shadow和text-shadow的四个属性值分别是(x偏移,y偏移, 阴影宽度 ,阴影颜色) -
text-shadow: 6px 6px 7px #c00;
-
background: lightgoldenrodyellow;
css3支持颜色变化,jQuery不支持 -
线性渐变 background: linear-gradient(#000,#ccc,#fff);
-
径向渐变,从圆心向外发散 background: radial-gradient(#000,#fff);
-
transform: scale(0.2);
注意:transform后的效果不影响盒模型的宽度和高度 -
平移,沿x轴,y轴*!向左-100,向右+100
transform: translateX(-100px); -
旋转
transform: rotateX(180deg);
transform: rotateY(80deg);
transform: rotateZ(80deg); -
倾斜+右,-左
transform: skew(10deg);
transform: skew(-10deg);
源代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--css3新属性-->
<style type="text/css">
ul{
list-style: none;
}
/*子元素*/
.tlist>li{
width: 150px;
height: 150px;
background-color: #f0f0f0;
float: left;
border: 1px solid #666666;
margin: 10px;
line-height: 150px;
text-align: center;
font-size: 50px;
/*//隐藏溢出部分*/
overflow: hidden;
/*过度,transition属性增加thml元素有css3属性变化,这两个变化的属性是数值,则以动画的方式呈现*/
transition: all 2s;
}
/*鼠标在tlist下第一个li*/
.tlist>li:first-child:hover{
height: 20px;
font-size: 10px;
}
/*tlist的第二个li*/
.tlist>li:nth-of-type(2):hover{
/*参数上右下左每个值可以不同*/
/*border-radius: 值大于等于宽度一半,html元素为圆形;*/
/*border-radius: 50%;*/
border-radius: 10px 70px 30px 5px;
}
/*tlist里的第三个li上*/
.tlist>li:nth-child(3):hover{
box-shadow:6px 6px 6px #030;
/*加阴影:box-shadow和text-shadow的四个属性值分别是x偏移,y偏移, 阴影宽度 ,阴影颜色*/
}
/*tlist下第三个li的后面相连的第一个兄弟li*/
.tlist>li:nth-child(3)+li:hover{
text-shadow: 6px 6px 7px #c00;
}
.tlist>li:nth-child(5):hover{
/*background: lightgoldenrodyellow;*/
/*css3支持颜色变化,jQuery不支持*/
/*线性渐变*/
background: linear-gradient(#000,#ccc,#fff);
}
/*tlist中li倒数第五个*/
/*所有子元素*/
.tlist>li:nth-last-child(5){
/*径向渐变,从圆心向外发散*/
background: radial-gradient(#000,#fff);
}
/*只有li的子元素*/
.tlist>li:nth-last-child(4):hover{
transform: scale(0.2);
/*注意:transform后的效果不影响盒模型的宽度和高度*/
}
.tlist>li:nth-of-type(8):hover{
/*!*平移,沿x轴,y轴*!向左-100,向右+100*/
transform: translateX(-100px);
}
.tlist>li:nth-of-type(9):hover{
/*旋转*/
/*transform: rotateX(180deg);*/
/*transform: rotateY(80deg);*/
transform: rotateZ(80deg);
}
.tlist>li:last-of-type{
/*倾斜+右,-左*/
/*transform: skew(10deg);*/
transform: skew(-10deg);
}
</style>
</head>
<body>
<ul class="tlist">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
</ul>
</body>
</html>
效果:
1上下移动,2出现圆弧,3.边框阴影,4.文字阴影,5渐变,6圆形渐变,7.缩放,8平移,9旋转,10形状
上图下文(新版div)
1.基本布局
<div class="tr">
<img src="image/9.4.jpg">
<div class="text">
<h3>这里是标题</h3>
<p>这里是很多文字,transition是两个状态的动画</p>
</div>
</div>
注意:在有a超链接的时候、指定图片的时候,宽高不用设定。img——display: block;
源代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--用div上图下文-->
<style type="text/css">
h3,p{
margin: 0;
padding: 0;
}
img{
/*在有a超链接的时候、*/
/*指定图片的时候,宽高不用设定*/
display: block;
border: none;
}
.tr{
width: 200px;
height: 200px;
/*溢出隐藏不是清浮*/
overflow: hidden;
float: left;
}
.text{
height: 32px;
background-color: rgba(0,0,0,0.5);
transition: all 2s;
margin-top: -32px;
position: relative;
z-index: 1;
}
.text>h3{
height: 32px;
color: #f0f0f0;
font-size: 14px;
text-align: center;
line-height: 32px;
}
.text>p{
color: #255625;
font-size: 12px;
text-align: center;
line-height: 20px;
overflow: hidden;
height: 40px;
text-indent: 2em;
}
</style>
</head>
<body>
<div class="tr">
<img src="image/9.4.jpg">
<div class="text">
<h3>这里是标题</h3>
<p>这里是很多文字,transition是两个状态的动画</p>
</div>
</div>
<div class="tr">
<img src="image/9.4.jpg">
<div class="text">
<h3>这里是标题</h3>
<p>这里是很多文字,transition是两个状态的动画</p>
</div>
</div>
<div class="tr">
<img src="image/9.4.jpg">
<div class="text">
<h3>这里是标题</h3>
<p>这里是很多文字,transition是两个状态的动画</p>
</div>
</div>
</body>
</html>
效果:
这里看出两段文字在text的盒子内但是只要h3继承bg的特点所以p标签没有渲染成功,可以在p的样式中增加bg
- 还可以给图片增加缩放的属性
.tr:hover img{
transform: scale(1.8);
}
- 让文字在图片上移动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--用div上图下文-->
<style type="text/css">
h3,p{
margin: 0;
padding: 0;
}
img{
/*在有a超链接的时候、*/
/*指定图片的时候,宽高不用设定*/
display: block;
border: none;
}
.tr{
width: 200px;
height: 200px;
/*溢出隐藏不是清浮*/
overflow: hidden;
float: left;
}
.text{
height: 32px;
background-color: rgba(0,0,0,0.5);
transition: all 2s;
margin-top: -32px;
position: relative;
z-index: 1;
}
.text>h3{
height: 32px;
color: #f0f0f0;
font-size: 14px;
text-align: center;
line-height: 32px;
}
.text>p{
color: #255625;
font-size: 12px;
text-align: center;
line-height: 20px;
overflow: hidden;
height: 40px;
text-indent: 2em;
/*p的背景在text没生效所以在这里要加*/
background-color: rgba(0,0,0,0.5);
}
.tr:hover .text{
margin-top: -72px;
}
</style>
</head>
<body>
<div class="tr">
<img src="../image/9.4.jpg">
<div class="text">
<h3>这里是标题</h3>
<p>这里是很多文字,transition是两个状态的动画</p>
</div>
</div>
<div class="tr">
<img src="../image/9.4.jpg">
<div class="text">
<h3>这里是标题</h3>
<p>这里是很多文字,transition是两个状态的动画</p>
</div>
</div>
<div class="tr">
<img src="../image/9.4.jpg">
<div class="text">
<h3>这里是标题</h3>
<p>这里是很多文字,transition是两个状态的动画</p>
</div>
</div>
</body>
</html>
2018-10-23
还是学习css3属性(animation&&flex)
一.animation 多状态动画
参照手册了解animation属性
写法一:from——to(animation参数三个:动画名称+时长+ 循环是infinite无限)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
/*animation多状态动画*/
.box{
width: 100px;
height: 100px;
color: #fff;
text-shadow: 10px 10px 10px #255625;
font-size: 14px;
line-height: 100px;
border: 1px solid #255625;
background-color: #666666;
}
.box{
/*动画名称+时长+ 循环是infinite无限*/
animation: yuan 3s infinite;
}
@keyframes yuan {
/*from_to*/
from{background-color: #00c}
to{background-color: #0c0;}
}
</style>
</head>
<body>
<div class="box">animation</div>
</body>
</html>
颜色从蓝色渐变3s到绿色
写法二:百分数%(%多少可以改变)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
/*animation多状态动画*/
.box{
width: 100px;
height: 100px;
color: #fff;
text-shadow: 10px 10px 10px #255625;
font-size: 14px;
line-height: 100px;
border: 1px solid #255625;
background-color: #666666;
}
.box{
/*动画名称+时长+ 循环是infinite无限*/
animation: yuan 3s infinite;
}
@keyframes yuan {
/*from_to*/
20%{background-color: #00c}
60%{background-color: #0c0;
color: yellow;}
100%{background-color:#255625}
}
</style>
</head>
<body>
<div class="box">animation</div>
</body>
</html>
二.animation全屏自适应宽度类似幻灯片效果但是不支持跳转 (跳转还是要jQuery)
源码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--animation实例-->
<!--全屏宽度自适应宽度——幻灯片但是不支持跳转-->
<style type="text/css">
/*全局*/
ul,p{
margin: 0;
padding: 0;
}
ul{
list-style: none;
}
a img{
border: none;
display: block;
}
.slide{
overflow: hidden;//溢出隐藏
height: 250px;
/*宽度没设置就是100% */
}
.slide>ul{
/*有5个占100%的子元素*/
width: 500%;
height: 250px;
/*每个元素动2s*/
animation: donghua 10s infinite;
}
/*left或margin-left可以动起来*/
.slide>ul>li{
/*width: 20%;//是屏幕的100%。父元素是500%*/
float: left;
position: relative;
width: 20%;
}
.slide>ul>li img{
width: 100%;
height: 250px;
/*相同图片不要设置高度,而是每张图格式相同?*/
}
.slide>ul>li p{
position: absolute;
width: 100%;
height: 33px;
line-height: 33px;
text-align: center;
color: #255625;
font-weight: bold;
background-color: rgba(0,0,0,0.5);
left: 0;
bottom: 0;
}
@keyframes donghua {
/*10-20是为了让内容可读,停止点时间*/
10%{margin-left: -100%}
20%{margin-left: -100%}
30%{margin-left: -100%}
40%{margin-left: -200%}
50%{margin-left: -200%}
60%{margin-left: -300%}
70%{margin-left: -300%}
80%{margin-left: -400%}
90%{margin-left: -400%}
100%{margin-left: -400%}
}
</style>
</head>
<body>
<div class="slide">
<ul>
<li>
<a href="#">
<img src="image/flower1.jpg" alt="">
</a>
<p>这里是文字</p>
</li>
<li>
<a href="#">
<img src="image/flower6.jpg" alt="">
</a>
<p>这里是文字</p>
</li>
<li>
<a href="#">
<img src="image/flower2.jpg" alt="">
</a>
<p>这里是文字</p>
</li>
<li>
<a href="#">
<img src="image/flower4.jpeg" alt="">
</a>
<p>这里是文字</p>
</li>
<li>
<a href="#">
<img src="image/flower5.jpg" alt="">
</a>
<p>这里是文字</p>
</li>
</ul>
</div>
</body>
</html>
注意
- .slide>ul设置宽度500%是给里面5个li,每个li为100%。
- .slide>ul>li是屏幕的100%。父元素是500%
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
/*父元素display:flex,子元素继承父元素,bootstrap4都用flex不考虑清浮*/
ul{
list-style: none;
}
.flex{
display: flex;
/*翻转*/
/*flex-direction: row-reverse;*/
/*换行,默认不换行*/
/*flex-wrap: wrap;*/
justify-content: center;
}
.flex>li{
border: 1px solid #255625;
/*w=10%不满一行会压缩,width: >20%会达到最大界限;*/
width: 20%;
height: 200px;
font-size: 30px;
line-height: 200px;
text-align: center;
}
</style>
</head>
<body>
<ul class="flex">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</body>
</html>
四.flex优先级
源码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
/*父元素display:flex,子元素继承父元素,bootstrap4都用flex不考虑清浮*/
ul{
list-style: none;
}
.flex{
display: flex;
/*翻转*/
/*flex-direction: row-reverse;*/
/*换行,默认不换行*/
/*flex-wrap: wrap;*/
justify-content: center;
}
/*改变顺序order从小到大排序*/
.flex>li{
order: 1;
}
.flex>li:first-child{
order: 2;
/*屏幕宽度大于内容宽度,则多用宽度给这个*/
flex-grow:1 ;
/*收缩*/
flex-shrink: 2;
}
.flex>li:last-child{
order: 1;
flex-shrink: 3;
}
/*order相同按他们出现的顺序来排序*/
/*第四个元素*/
.flex>li:nth-child(4){
order: 3;
}
.flex>li{
border: 1px solid #255625;
/*w=10%不满一行会压缩,width: >20%会达到最大界限;*/
width: 30%;
height: 200px;
font-size: 30px;
line-height: 200px;
text-align: center;
}
</style>
</head>
<body>
<ul class="flex">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</body>
</html>
2018-10-25
自适应宽度
1.长度单位
px pt em
rem vw vh(viewport-width/height)
rem=>html
rem:①屏幕宽度百分比
②media query固定值
③media query+计算值
例一:media按照升序或降序书写
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
.media{
background-color: red;
}
/*media按照升序或降序书写*/
@media screen and (max-width: 1000px){
.media{
background-color: blue;
}
}
@media screen and (max-width: 800px){
.media{
background-color: #1b6d85;
}
}
@media screen and (max-width: 500px){
.media{
background-color: #2e2e2e;
}
}
</style>
</head>
<body>
<div class="media">
123
</div>
</body>
</html>
大于1000时候
800-1000
500-800
小于500
例二:rem——字体大小随屏幕改变
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
html{
font-size: 5.3vw;
}
ul{
list-style: none;
}
img{
display: block;
border: none;
}
.rem>li{
width: 20%;
}
.rem{
display: flex;
}
.rem img{
width: 3em;
margin-top: .5rem;
}
/*字体大小随屏幕改变*/
.rem p{
font-size: .8rem;
}
</style>
</head>
<body>
<ul class="rem">
<li>
<a href="#"><img src="image/flower1.jpg" alt=""></a>
<p>这里是文字</p>
</li>
<li> <a href="#"><img src="image/flower2.jpg" alt=""></a>
<p>这里是文字</p></li>
<li> <a href="#"><img src="image/flower4.jpeg" alt=""></a>
<p>这里是文字</p></li>
<li> <a href="#"><img src="image/flower5.jpg" alt=""></a>
<p>这里是文字</p></li>
<li> <a href="#"><img src="image/flower6.jpg" alt=""></a>
<p>这里是文字</p></li>
</ul>
</body>
</html>
全屏幕
缩小屏幕
例三——rem(2)——只写一个max-width从大到小max。只写一个min-width从小到大书写(顺序)。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
html{
font-size: 60px;
}
ul{
list-style: none;
}
ul{
padding: 0;
margin: 0;
}
@media screen and (max-width: 700px){
/*c只写一个max-width从大到小max。只写一个min-width从小到大*/
html{
font-size: 48px;
}
}
@media screen and (max-width: 500px){
/*c从大到小max*/
html{
font-size: 36px;
}
}
img{
display: block;
border: none;
}
.rem>li{
width: 20%;
}
.rem{
display: flex;
}
.rem img{
width: 3em;
margin-top: .5rem;
}
/*字体大小随屏幕改变*/
.rem p{
font-size: .4rem;
}
</style>
</head>
<body>
<ul class="rem">
<li>
<a href="#"><img src="image/flower1.jpg" alt=""></a>
<p>这里是文字</p>
</li>
<li> <a href="#"><img src="image/flower2.jpg" alt=""></a>
<p>这里是文字</p></li>
<li> <a href="#"><img src="image/flower4.jpeg" alt=""></a>
<p>这里是文字</p></li>
<li> <a href="#"><img src="image/flower5.jpg" alt=""></a>
<p>这里是文字</p></li>
<li> <a href="#"><img src="image/flower6.jpg" alt=""></a>
<p>这里是文字</p></li>
</ul>
</body>
</html>
全屏幕
缩小屏幕
例四——自适应宽度
用到几个属性:
- display: flex;—— flex-wrap: wrap;让弹性盒元素在必要的时候拆行:
- 这里可以用浮动或者flex,而flex有好处就是可以随意使用margin-left,让图片有间距
- box-sizing: border-box;盒子的width的含义改变为内容宽度+padding+border+box-sizing
content-box 是默认值。如果你设置一个元素的宽为100px,那么这个元素的内容区会有100px宽,并且任何边框和内边距的宽度都会被增加到最后绘制出来的元素宽度中。
border-box 告诉浏览器去理解你设置的边框和内边距的值是包含在width内的。也就是说,如果你将一个元素的width设为100px,那么这100px会包含其它的border和padding,内容区的实际宽度会是width减去border + padding的计算值。大多数情况下这使得我们更容易的去设定一个元素的宽高。
border-box width 和 height 属性包括内容,内边距和边框,但不包括外边距。这是当文档处于 Quirks模式 时Internet Explorer使用的盒模型。
注意,填充和边框将在盒子内 , 例如, .box {width: 350px; border: 10px solid black;} 导致在浏览器中呈现的宽度为350px的盒子。内容框不能为负,并且被分配到0,使得不可能使用border-box使元素消失。
这里的维度计算为: width = border + padding + 内容的 width, height = border + padding + 内容的 height。
- 边框之间不能加距离
- 图片自适应
- 左图右文不做适应。一般充满的布局会自适应
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
ul{
margin: 0;
padding: 0;
}
ul{
list-style: none;
}
a img{
border: none;
display: block;
}
/*第一种自适应*/
.rem{
/*考虑浮动或者flex*/
display: flex;
flex-wrap: wrap;
}
.rem>li{
width: 32.3%;
/*让图片有间距 flex容易给margin-left*/
/*margin-left: 15px;*/
padding-left: 5px;
box-sizing: border-box;
/*盒子的width的含义改变为内容宽度+padding+border+box-sizing*/
/*//边框之间不能加距离*/
border: 1px solid #eee;
margin-left: 1%;
margin-bottom: 6px;
}
/*图片自适应*/
.rem>li img{
width: 95%;
margin: 2px auto;
}
.rem>li p{
font-size: 14px;
text-align: center;
line-height: 22px;
}
/*P6-6-3*/
</style>
</head>
<body>
<!--左图右文不做适应。一般充满的布局会自适应-->
<ul class="rem">
<li>
<a href="#"><img src="image/flower1.jpg" alt=""></a>
<p>这里是文字</p>
</li>
<li> <a href="#"><img src="image/flower2.jpg" alt=""></a>
<p>这里是文字</p>
</li>
<li> <a href="#"><img src="image/flower4.jpeg" alt=""></a>
<p>这里是文字</p>
</li>
<li>
<a href="#"><img src="image/flower1.jpg" alt=""></a>
<p>这里是文字</p>
</li>
<li> <a href="#"><img src="image/flower2.jpg" alt=""></a>
<p>这里是文字</p>
</li>
<li> <a href="#"><img src="image/flower4.jpeg" alt=""></a>
<p>这里是文字</p>
</li>
</ul>
</body>
</html>
全屏幕
缩小