自适应布局
学完这个代码,基本解决90%餐饮网上店铺网页布局问题,关键就是自适应,可根据文字描述自适应样式,维护成本低,性能好与效率高。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>panpan_6</title>
<style>
*{margin:0;padding:0;}
.wrap{
width: 1200px;/* 宽度: 200像素; */
height: 400px;/* 高度 */
margin: 50px auto;/* 上下 左右 */
/* background-color: #096;/* 背景颜色: 原谅绿; */ */
}
.content{
position: relative;/* 相对定位 */
width: 380px;
height: 180px;
/* background-color: red; */
display: inline-block;
margin-left: 12px;
margin-bottom: 15px;
}
.content:hover .hide{/* 当你鼠标移入名字叫content里让子集hide执行{}中代码 */
opacity: 1;
}
.content:hover .title{
opacity: 0;
}
.images{
width: 380px;
height: 180px;
}
.title{
position: absolute;/* 绝对定位 */
bottom: 0;
left: 0;
width: 100%;
height: 35px;
/* rgba(红色0-255,绿,蓝,透明度0-1) */
background-color: rgba(0,0,0,.5);
color: #fff;/* 文字颜色 */
line-height: 35px;/* 行高 = 高度 垂直居中 */
text-indent: 16px;/*首行缩进 */
transition: .5s;
}
.hide{
position: absolute;/* 绝对定位 */
top: 0;
width: 380px;
height: 180px;
background-color: rgba(0,0,0,.5);
text-align: center;/* 文本对齐方式 居中 */
opacity: 0;/* css3透明度 */
transition: .5s;/* css3动画过渡效果 */
}
.h-header{
display: block;/* 元素类型转换 块级元素 */
margin: 15px auto;
}
.h-title{
display: inline-block;
/* 边框属性 粗细3px 样式none 颜色: #000 黑色 */
border-bottom: double;
color: #fff;
font-size: 20px;/* 文字大小 */
line-height: 35px;
}
.more{
position: absolute;
left: 50%;
margin: 15px auto;
padding: 5px 15px;/* 内边距 上下 左右 */
border: 2px solid #fff;
color: #fff;
border-radius: 10px;/* css3圆角属性 */
transform: translateX(-50%);/* css3变换属性 移动自身当前X方向位移 */
}
.more:hover{
cursor: pointer;
color: #009966;
}
</style>
</head>
<body>
<div class="wrap"><!-- 盒子标签 -->
<div class="content">
<!-- img加载图片标签 src加载图片的标签 -->
<img class="images" src="images/1.webp">
<p class="title">口水菌品鉴│宅男宅女觅食记</p>
<div class="hide">
<img class="h-header" src="images/1.png">
<div class="h-title">
<img src="images/2.png">
<span>口水菌品鉴│宅男宅女觅食记</span>
<img src="images/3.png">
</div>
<div class="more">立即查看</div>
</div>
</div>
<div class="content">
<!-- img加载图片标签 src加载图片的标签 -->
<img class="images" src="images/2.webp">
<p class="title">外酥里嫩,韩式炸蟹肉</p>
<div class="hide">
<img class="h-header" src="images/1.png">
<div class="h-title">
<img src="images/2.png">
<span>外酥里嫩,韩式炸蟹肉</span>
<img src="images/3.png">
</div>
<div class="more">立即查看</div>
</div>
</div>
<div class="content">
<!-- img加载图片标签 src加载图片的标签 -->
<img class="images" src="images/3.webp">
<p class="title">寒冬福利:火锅燥起来</p>
<div class="hide">
<img class="h-header" src="images/1.png">
<div class="h-title">
<img src="images/2.png">
<span>寒冬福利:火锅燥起来</span>
<img src="images/3.png">
</div>
<div class="more">立即查看</div>
</div>
</div>
<div class="content">
<!-- img加载图片标签 src加载图片的标签 -->
<img class="images" src="images/4.webp">
<p class="title">弄碗蟹黄豆腐开开荤</p>
<div class="hide">
<img class="h-header" src="images/1.png">
<div class="h-title">
<img src="images/2.png">
<span>弄碗蟹黄豆腐开开荤</span>
<img src="images/3.png">
</div>
<div class="more">立即查看</div>
</div>
</div>
<div class="content">
<!-- img加载图片标签 src加载图片的标签 -->
<img class="images" src="images/5.webp">
<p class="title">好吃又好看,美食</p>
<div class="hide">
<img class="h-header" src="images/1.png">
<div class="h-title">
<img src="images/2.png">
<span>好吃又好看,美食</span>
<img src="images/3.png">
</div>
<div class="more">立即查看</div>
</div>
</div>
<div class="content">
<!-- img加载图片标签 src加载图片的标签 -->
<img class="images" src="images/6.webp">
<p class="title">冬天来了,吃点东西滋补一下</p>
<div class="hide">
<img class="h-header" src="images/1.png">
<div class="h-title">
<img src="images/2.png">
<span>好吃又好看,美食</span>
<img src="images/3.png">
</div>
<div class="more">立即查看</div>
</div>
</div>
</div>
</body>
</html>