效果图
.html代码
<!DOCTYPE html>
<html><head><meta name="viewport"content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /><meta charset="utf-8" /><title></title><link rel="stylesheet" href="./css/css1.css"></head><body><div class="fullbigbox"><div class="elebigbox"><div class="bigheader"><div class="row"><div class="col-6"><div class="menuleft"><ul><li><a href="#">最美旅游网</a></li><li><a href="#">山东游</a></li><li><a href="#">国内游</a></li><li><a href="#">国际游</a></li></ul></div></div><div class="col-6"><div class="menuright"><ul><li><a href="#">登录/注册</a></li></ul></div></div></div></div><div class="zhong"><div class="row"><div class="qq"><div class="col-1 "><div class="zhongq"><a href="#">旅游直通车</a></div></div></div><div class="col-1"><div class="zhongq">123</div></div><div class="col-1"><div class="zhongq">123</div></div><div class="col-1"><div class="zhongq">123</div></div><div class="col-1"><div class="zhongq">123</div></div><div class="col-1"><div class="zhongq">123</div></div><div class="col-1"><div class="zhongq">123</div></div><div class="col-1"><div class="zhongq">123</div></div><div class="col-1"><div class="zhongq">123</div></div><div class="col-1"><div class="zhongq">123</div></div><div class="col-1"><div class="zhongq">123</div></div><div class="col-1"><div class="zhongq">123</div></div></div></div><div class="info"><div class="firstrow"><div class="row"><div class="col-6"><div class="infocontent"><div class="infocontbox"><dl><dt><div class="pic"> <img src="./img/img/zc.png" alt=""><div></div></dt><dd>qwe</dd><dd>123123</dd></dl></div></div></div><div class="col-6"><div class="infocontent"><div class="infocontbox"><dl><dt><div class="pic"><img src="./img/img/zc.png" alt=""></div></dt><dd>qwe</dd><dd>123123</dd></dl></div></div></div></div><div class="row"><div class="col-6"><div class="infocontent"><div class="infocontbox"><dl><dt><div class="pic"> <img src="./img/img/zc.png" alt=""><div></div></dt><dd>qwe</dd><dd>123123</dd></dl></div></div></div><div class="col-6"><div class="infocontent"><div class="infocontbox"><dl><dt><div class="pic"><img src="./img/img/zc.png" alt=""></div></dt><dd>qwe</dd><dd>123123</dd></dl></div></div></div></div></div></div><div class="footer"><div class="row"><div class="col-12"><div class="footerq">sadafasfxxxxx</div></div></div></div></div></div></div></body>
</html>
css代码
.col-1,
.col-2,
.col-3,
.col-4,
.col-5,
.col-6,
.col-7,
.col-8,
.col-9,
.col-10,
.col-11,
.col-12 {flex-shrink: 1;
}.col-1 {flex-grow: 1;
}.col-2 {flex-grow: 2;
}.col-3 {flex-grow: 3;
}.col-4 {flex-grow: 4;
}.col-5 {flex-grow: 5;
}.col-6 {flex-grow: 6;
}.col-7 {flex-grow: 7;
}.col-8 {flex-grow: 8;
}.col-9 {flex-grow: 9;
}.col-10 {flex-grow: 10;
}.col-11 {flex-grow: 11;
}.col-12 {flex-grow: 12;
}a:hover {font-weight: bold;
}* {margin: 0px;padding: 0px;
}a {text-decoration: none;
}ul {list-style: none;
}.row {display: flex;flex-wrap: nowrap;
}.fullbigbox {width: 100%;background-color: lightblue;
}.elebigbox {margin-left: 10%;width: 80%;background-color: white;
}.menuleft ul li {float: left;margin: 0px 50px;
}.bigheader {width: 100%;height: 60px;background-color: lightblue;
}.menuright ul li {float: right;margin-right: 20px;}.menuleft {height: 40px;margin-top: 10px;background-color: slategray;line-height: 40px;
}.menuright {line-height: 40px;height: 40px;margin-top: 10px;background-color: slategray;
}.zhongq {background-color: white;height: 40px;line-height: 40px;text-align: center;
}.qq {background-color: rebeccapurple;
}img {border-radius: 10px 10px 0px 0px;
}.info {width: 100%;}.infocontent {display: flex;
}.infocontbox {flex: 1;width: 0;margin: 10px;
}.infocontbox dl dt img {width: 100%;height: 100%;border-radius: 10px 10px 0px 0px;
}.infocontbox:hover {box-shadow: 0px 0px 10px 10px green;
}.pic {overflow: hidden;
}.infocontbox:hover dl dt img {transform: scale(1.1);
}.footer {width: 100%;background-color: skyblue;height: 80px;position: relative;
}.footerq {width: 100%;position: absolute;top: 20px;background-color: white;height: 60px;line-height: 60px;text-align: center;
}
