如何用flex布局html css做出这个页面。只做布局
上面是要做出的页面。
下面是自己写的。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
.divall{
display: flex;
width: 100%;
height: 100%;
flex-wrap: wrap;
}
.head{
display: flex;
flex-wrap: wrap;
margin-top: 30px;
margin-left: 10%;
width: 100%;
height: 150px;
min-width: 900px;
}
.div0{
width: 25%;
height: 150px;
}
#span1{
/* width: 90px; */
/* height: 150px; */
font-size: 14px;
margin: 10px;
/* font:; */
}
#span1:hover{
color: darkorange;
border-bottom: #FF8C00 solid 1px;
}
/* .pPRODUCT{
margin: 5% 0 0 45%;
font-size: 25px;
color: gray;
}
#id1{
color: black;
} */
.divpzuopin{
width: 100%;
margin-top: 5%;
display: flex;
justify-content: center;
}
.div4gtp{
display: flex;
justify-content: center;
text-align: center;
flex-wrap: wrap;
}
#lbt{
width: 20%;
margin: 10px;
}
#ptpwz{
width: 20%;
margin: 10px;
font-size: 10px;
}
</style>
</head>
<body>
<div class="divall">
<div class="head">
<img src="img/avatar.jpg" width="50px" height="50px" >
<span style="font-size: 35px;">Alloy Team</span>
<div class="div0">
</div>
<span id="span1">首页</span>
<span id="span1">博客</span>
<span id="span1">Github</span>
<span id="span1">SuperStar</span>
<span id="span1">Web前端导航</span>
<span id="span1">关于</span>
</div>
<hr width="100%" >
<!-- <p class="pPRODUCT">Product / <strong id="id1">作品</strong></p> -->
<div class="divpzuopin">
<span style="">Product /</span>
<span>作品</span>
</div>
<div class="div4gtp">
<img id="lbt" src="img/codetank.jpg" >
<img id="lbt" src="img/alloyphoto.jpg" >
<img id="lbt" src="img/alloydesigner.jpg" >
<img id="lbt" src="./img/alloystick.jpg" >
<p id="ptpwz">CodeTank <br>全世界首个JavaScript程序员的在线</p>
<p id="ptpwz">AllowPhonto</p>
<p id="ptpwz">AllowDisigner <br>新概念开发工具</p>
<p id="ptpwz"> AllowStrck</p>
</div>
<div style="display: flex;justify-content: center; margin: 2% 0 0 47% ;">
<input type="button" name="" id="" value="更多作品/" />
</div>
</div>
</body>
</html>
新手自己写的。有很多功能存在缺陷。
比如缩放会变型。鼠标移动到导航 出现的线会往下很多。
希望有时间的大佬帮忙教一下怎么做。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
img{
margin: 0;
padding: 0;
display: inline-block;
}
.head{
width: calc(100% - 280px);
margin: 0 auto;
display: flex;
justify-content: space-between;
align-items: center;
}
.left, .right{
display: flex;
justify-content: flex-end;
align-items: center;
}
.span1{
min-width: 72px;
margin: 0 20px;
height: 60px;
line-height: 60px;
display: flex;
justify-content: center;
align-items: center;
box-sizing: border-box;
}
.span1:hover{
border-top: 10px solid transparent;
border-bottom: 10px solid #f7b334;
}
.lbt{
width: 100%;
height: 170px;
}
.divpzuopin p{
text-align: center;
}
.div4gtp{
display: flex;
justify-content: space-around;
align-items: center;
}
.listCard{
width: calc((100% / 4) - 60px);
border-radius: 10px;
border: 1px solid #f3f3f3;
margin: 0 60px;
overflow: hidden;
}
.listCard:hover{
box-shadow: 0px 3px 3px #F3F3F3;
}
.listCard p{
padding: 0 10px;
box-sizing: border-box;
text-align: left;
overflow-x: hidden;
text-overflow: ellipsis;
white-space: nowrap;
width: calc(100% - 1px);
}
footer{
display: flex;
justify-content: center;
align-items: center;
margin: 10px;
}
footer .foot{
background: #e1e1e1;
border: 2px solid #f3f3f3;
border-radius: 4px;
padding: 20px 60px;
}
</style>
</head>
<body>
<header class="head">
<div class="left">
<img src="img/avatar.jpg" width="50px" height="50px">
<span style="font-size: 35px;">Alloy Team</span>
</div>
<div class="right">
<div class="span1">首页</div>
<div class="span1">博客</div>
<div class="span1">Github</div>
<div class="span1">SuperStar</div>
<div class="span1">Web前端导航</div>
<div class="span1">关于</div>
</div>
</header>
<div class="divpzuopin">
<p style="">
<span>Product</span>
<span>/作品</span>
</p>
<p>新奇好玩的作品，让你欲罢不能</p>
</div>
<div class="div4gtp">
<div class="listCard">
<img class="lbt" src="./12.jpg">
<p class="ptpwz">CodeTank</p>
<p class="ptpwz">全世界首个JavaScript程序员的在线</p>
</div>
<div class="listCard">
<img class="lbt" src="./12.jpg">
<p class="ptpwz">CodeTank</p>
<p class="ptpwz">全世界首个JavaScript程序员的在线</p>
</div>
<div class="listCard">
<img class="lbt" src="./12.jpg">
<p class="ptpwz">CodeTank</p>
<p class="ptpwz">全世界首个JavaScript程序员的在线</p>
</div>
<div class="listCard">
<img class="lbt" src="./12.jpg">
<p class="ptpwz">CodeTank</p>
<p class="ptpwz">全世界首个JavaScript程序员的在线</p>
</div>
</div>
<footer>
<div class="foot">
更多作品>
</div>
</footer>
</body>
</html>
选中的样式就用你自己的进行，样式对照着再改改就可以了，
我也是个菜鸟,希望对你有用哦
你可以用flex布局 很方便,可以看一下阮一峰的flex哦
https://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
鼠标移动上去有一个鼠标悬浮,可以改变样式,==> :hover
给父元素加diaplay:flex； justify-content: center;