lsy/practice_code
0
0
Fork 0
Code Pull Requests Actions Packages Projects Releases Wiki Activity

写完尚品会

Browse Source
This commit is contained in:
lsy2246 2024-05-16 00:29:41 +08:00
parent 0fa08bf074
commit bad55834d3
2 changed files with 241 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

150
web/shang_shopping/css/index.css
View File

@ -432,6 +432,152 @@
.floor .floor_info{
height:432px;
background-color: skyblue;
}
/* endregion 楼层结束 */
.floor .floor_info>div{
float: left;
font-size: 0;
}
.floor .floor_info .item1{
width: 230px;
height: 100%;
font-size: 0;
}
.floor .floor_info .item1 dl{
height: 108px;
width: 190px;
margin: 20px 20px 0;
font-size: 16px;
}
.floor .floor_info .item1 dt{
float: left;
width: 90px;
height: 22px;
line-height: 22px;
text-align: center;
padding-bottom: 3px;
border-bottom: 1px solid #D9D9D9;
}
.floor .floor_info .item1 dt a:link,.floor .floor_info .item1 dt a:visited
{
font-size: 16px;
color: #666666;
}
.floor .floor_info .item1 dt a:hover{
color:red;
}
.floor .floor_info .item1 dt:nth-child(odd){
margin-right: 10px;
}
.floor .floor_info .item1 dt:nth-child(n+3){
margin-top: 14px;
}
.floor .floor_info .item1 img{
margin: 30px 18px;
}
.floor .floor_info .item2{
width: 340px;
height: 100%;
}
.floor .floor_info .item3{
background-color: skyblue;
width: 206px;
height: 100%;
}
.floor .floor_info .item3 img
{
width: 206px;
height: 215px;
}
.floor .floor_info .item3 img:first-child{
border-bottom: 1px solid #D9D9D9;
}
.floor .floor_info .item4{
width: 206px;
height: 100%;
border-left: 1px solid #E2E2E2;
border-right: 1px solid #E2E2E2;
}
/* endregion 楼层结束 */
/* region 页脚 */
.footer{
margin-top: 48px;
background: #483E3E;
height: 1000px;
overflow:hidden
}
.footer a:link,.footer a:visited{
font-size: 14px;
color: #FFFFFF;
font-weight: bold;
}
.footer a:hover{
color:red;
}
.footer .top_link{
margin-top: 48px;
border-bottom: 1px solid #584D4D;
padding-bottom:22px;
}
.footer .top_link div{
width: 190px;
float: left;
}
.footer .top_link div:not(:last-child){
margin-right: 10px;
}
.footer .top_link div a{
display: block;
height: 32px;
line-height: 32px;
}
.footer .bottom_link{
margin-top: 47px;
text-align: center;
}
.footer .bottom_link dl{
display: flex;
align-items: center; /* 垂直居中 */
justify-content: center; /* 水平居中 */
margin-bottom: 10px;
}
.footer .bottom_link dl dd{
float: left;
height: 18px;
line-height: 18px;
}
.footer .bottom_link dl dd:not(:last-child):after{
content: "|";
margin: 0 26px;
color: #D9D9D9;
}
/* endregion 页脚 */

95
web/shang_shopping/index.html
View File

@ -374,7 +374,7 @@
<!--楼层-->
<div class="floor">
<div class="container">
<div class="floor_nav float_clear">
<div class="floor_nav">
<span class="float_left">家用电器</span>
<dl class="float_right float_clear">
<dt><a href="#">热门</a></dt>
@ -386,7 +386,98 @@
<dd><a href="#">高端家电</a></dd>
</dl>
</div>
<div class="floor_info"></div>
<div class="floor_info">
<div class="item1">
<dl class="float_clear">
<dt><a href="#">节能补贴</a></dt>
<dt><a href="#">4K电视</a></dt>
<dt><a href="#">空气净化器</a></dt>
<dt><a href="#">IH电饭煲</a></dt>
<dt><a href="#">滚筒洗衣机</a></dt>
<dt><a href="#">电热水器</a></dt>
</dl>
<img src="./images/编组.png" alt="编组">
</div>
<div class="item2">
<img src="./images/appliance_banner07.png" alt="广告图1">
</div>
<div class="item3">
<img src="./images/微波炉.png" alt="微波炉">
<img src="./images/空气炸锅.png" alt="空气炸锅">
</div>
<div class="item4">
<img src="./images/冰箱.png" alt="冰箱">
</div>
<div class="item3">
<img src="./images/电饭煲.png" alt="电饭煲">
<img src="./images/电饭煲2.png" alt="电饭煲2">
</div>
</div>
</div>
</div>
<!--页脚-->
<div class="footer">
<div class="container">
<div class="top_link float_clear">
<div>
<a href="#">购物指南</a>
<a href="#">购物流程</a>
<a href="#">会员介绍</a>
<a href="#">生活旅行</a>
<a href="#">常见问题</a>
<a href="#">大家电</a>
<a href="#">联系客服</a>
</div>
<div>
<a href="#">配送方式</a>
<a href="#">上门自提</a>
<a href="#">211限时达</a>
<a href="#">配送服务查询</a>
<a href="#">配送费收取标准</a>
</div>
<div>
<a href="#">支付方式</a>
<a href="#">货到付款</a>
<a href="#">在线支付</a>
<a href="#">分期付款</a>
<a href="#">公司转账</a>
</div>
<div>
<a href="#">售后服务</a>
<a href="#">售后政策</a>
<a href="#">价格保护</a>
<a href="#">退款说明</a>
<a href="#">返修/退换货</a>
<a href="#">取消订单</a>
</div>
<div>
<a href="#">特色服务</a>
<a href="#">夺宝岛</a>
<a href="#">DIY装机</a>
<a href="#">延保服务</a>
<a href="#">京东E卡</a>
<a href="#">京东通信</a>
<a href="#">京鱼座智能</a>
</div>
<div>
<a href="#">自营覆盖区县<br>京尚品汇已向全国2661个区县提供自营配送服务，支持货到付款、POS 机刷卡和售后上门服务。<br>查看详情</a>
</div>
</div>
<div class="bottom_link">
<dl class="float_clear">
<dd><a href="#">关于我们</a></dd>
<dd><a href="#">联系我们</a></dd>
<dd><a href="#">联系客服</a></dd>
<dd><a href="#">合作招商</a></dd>
<dd><a href="#">商家帮助</a></dd>
<dd><a href="#">营销中心</a></dd>
<dd><a href="#">手机商城</a></dd>
<dd><a href="#">友情链接</a></dd>
<dd><a href="#">销售联盟</a></dd>
<dd><a href="#">隐私政策</a></dd>
</dl>
<a href="#">京ICP备12345678901</a>
</div>
</div>
</div>