实现淘宝界面
实现代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
* {
margin: 0px;
padding: 0px;
}
.nvg_Dao {
float: left;
}
.DaoHang1 {
float: left;
}
.DaoHang1 h3 {
background-color: #FF8C00;
}
#right {
float: left;
}
table {
border: 0px #FF0000 solid;
border
}
.DaoHang2 div {
font-weight: 400;
color: #666;
padding: 10px 10px;
}
.tr1 {
color: white;
background-color: #ff4f00;
height: 30px;
}
#nvg {
background-color: #ff5907;
width: 1000px;
}
#right{
height: 700px;
}
.nvg_Dao {
color: white;
padding: 5px 10px 5px 10px;
}
.nvg_Nei1{
float: left;
width: 720px;
}
.nvg_Nei1-1 {
float: left;
margin: 10px;
}
.nvg_Nei1-2 {
float: left;
margin: 10px;
}
.nvg_Nei1-3 {
float: left;
background-image: url(img/屏幕截图%202020-10-30%20191248.png);
margin: 0px 10px;
width: 520px;
height: 310px;
background-color: #00FFFF;
}
.nvg_Nei1-4 {
float: left;
background-image: url(img/TB1j4LLKpXXXXcbaXXXSutbFXXX.jpg);
margin: 0px 10px;
width: 160px;
height: 310px;
background-color: #ffbc10;
}
.nvg_Nei2 {
margin: 10px;
float: left;
width: 270px;
height: 605px;
font-size: 100px;
background-image: url(img/屏幕截图%202020-10-30%20192002.png);
background-size: 97%;
}
</style>
</head>
<body>
<div>
<!-- 左导航栏 -->
<div class="DaoHang1">
<table border="1">
<tr class="tr1">
<th>主题市场</th>
</tr>
<tr>
<th>
<div class="DaoHang2">
<div>女装/内衣/家具</div>
<div>女鞋/男鞋/箱包</div>
<div>女鞋/男鞋/箱包</div>
<div>女鞋/男鞋/箱包</div>
<div>女鞋/男鞋/箱包</div>
<div>女鞋/男鞋/箱包</div>
<div>女鞋/男鞋/箱包</div>
<div>女鞋/男鞋/箱包</div>
<div>女鞋/男鞋/箱包</div>
<div>女鞋/男鞋/箱包</div>
<div>女鞋/男鞋/箱包</div>
<div>女鞋/男鞋/箱包</div>
<div>女鞋/男鞋/箱包</div>
<div>女鞋/男鞋/箱包</div>
<div>女鞋/男鞋/箱包</div>
</div>
</th>
</tr>
</table>
</div>
<!-- 右侧内容 -->
<div id="right">
<!-- 上标签栏 -->
<div id="nvg">
<div class="nvg_Dao">天猫</div>
<div class="nvg_Dao">聚划算</div>
<div class="nvg_Dao">天猫超市</div>
<div class="nvg_Dao"> | </div>
<div class="nvg_Dao">淘抢购</div>
<div class="nvg_Dao">电器城</div>
<div class="nvg_Dao">司法拍卖</div>
<div class="nvg_Dao">淘宝心选</div>
<div class="nvg_Dao"> | </div>
<div class="nvg_Dao">肥猪旅行</div>
<div class="nvg_Dao">智能生活</div>
<div class="nvg_Dao">苏宁易购</div>
<div style="clear: left;"></div>
</div>
<!-- 内容区 -->
<div class="nvg_Nei1">
<div>
<div class="nvg_Nei1-1">
<img src="img/TB183NQapLM8KJjSZFBSutJHVXa.jpg" />
</div>
<div class="nvg_Nei1-2">
<img src="img/O1CN013JuQ1e29EXQ0RTg0O_!!1588036-0-lubanu.jpg_290x290q90.jpg_.webp" />
</div>
<div style="clear: left;"></div>
</div>
<div>
<div class="nvg_Nei1-3"></div>
<div class="nvg_Nei1-4"> </div>
<div style="clear: left;"></div>
</div>
<div style="clear: left;"></div>
</div>
<!-- 顾客信息 -->
<div class="nvg_Nei2">
</div>
</div>
</div>
</body>
</html>
效果图
本文地址：https://blog.csdn.net/XiaoFanMi/article/details/109391599
