|
|
京东购物网页商品分类界面设计
想要实现的效果图片
实现的代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,inital-scale=1.0"/>
<title>京东首页界面</title>
<link rel="stylesheet" href="font_3328321_fw8r461zh3n/iconfont.css">
<style>
*{
margin: 0;
padding:0;
}
html,body{
height:100%;
}
ul{
list-style: none;
}
body{
display: flex;
flex-direction: column;
}
header{
height: 45px;
background: gray;
text-align: center;
color:mediumblue;
font-weight: bolder;
padding-top:10px;
}
footer{
height: 50px;
background: gray;
text-align: center;
color:mediumblue;
font-weight: bolder;
padding-top:10px ;
}
setion{
flex:1;
display: flex;
overflow: auto;
}
setion ul{
width:85px;
overflow: auto;
}
setion ul li{
height: 45px;
line-height: 45px;
text-align: center;
font-size: 14px;
background: lightgrey;
}
setion ul li:hover{
background: white;
color:#e96062
}
setion>div{
flex:1;
background:lightpink;
display: flex;
flex-wrap: wrap;
align-content: flex-start;
overflow: auto;
}
::-webkit-scrollbar{
display: none;
}
setion .content>div{
height: 101px;
width: 33.33%;
text-align:center;
font-size: 12px;
}
<!--
将span标签换为img标签, 就可以实现首页界面的改变，让我们本来的卡通图表变为真实的物品的图片--, >
setion .content > div span {
width: 60px;
height: 50px;
margin-top: 20px;
}
</style>
</head>
|
|
发表于 2022-4-15 15:33:35
