前言
接下来的内容是,利用HBuilder X来编写一个简单的前端静态页面:仿安踏首页的部分静态页面展示。本次是第一次写文章,有不足之处,后续会进行更改。
一、头部标签的编写
1.顶部的前半部分
代码如下
<div class="header-top" style="display: block;">
<div class="header-bar">
<div class="barOne">
<a href="#">登录</a>
或
<a href="#">注册</a>
ANTA会员
</div>
<div class="barTwo">
<a href="#" title="购物车" class="icon cart"></a>
</div>
<div class="barThree">
<a href="#" title="在线客服" class="icon service"></a>
</div>
<div class="barFour">
<a href="#">EN</a>
</div>
</div>
</div>
header .header-top {
height: 50px;
position: relative;
border-bottom: 0.5px solid #ccc;
width: 100%;
}
header .header-bar {
float: right;
color: rgb(153, 153, 153);
margin-right: 50px;
vertical-align: middle;
}
.header-bar div {
display: inline-block;
margin-right: 10px;
}
.header-top a {
color: rgb(153, 153, 153);
}
.header-bar .barTwo .cart {
background-image: url(https://img.fishfay.com/theme/images/icons/cart-g.svg);
}
.header-bar .barThree .service {
background-image: url(https://img.fishfay.com/theme/images/icons/service-g.svg);
}
.header-bar .icon {
height: 50px;
display: inline-block;
width: 50px;
vertical-align: middle;
background-repeat: no-repeat;
background-size: 20px auto;
background-position: center center;
}
2.顶部的后半部分
代码如下
<div class="header-nav">
<div class="nav-logo">
<img src="https://img.fishfay.com/theme/images/logo/logo-anta-r-02.svg" />
</div>
<ul class="nav-list">
<li><a href="冬奥国旗款.html">冬奥国旗款</a></li>
<li class="fudong"><a>男子</a>
<div class="panel">
<div class="panel-scroll">
<div class="sub-nav-inner">
<div class="sub-nav-item">
<div class="cate-title">
<a href="#">所有鞋类</a>
</div>
<div class="cate-box">
<ul>
<li><a>运动鞋</a></li>
<li><a>跑鞋</a></li>
<li><a>篮球鞋</a></li>
<li><a>休闲鞋</a></li>
<li><a>板鞋</a></li>
<li><a>户外综训鞋</a></li>
</ul>
</div>
</div>
<div class="sub-nav-item ">
<div class="cate-title">
<a href="#">所有服装</a>