HTML简单静态页面的编写

---

前言

接下来的内容是，利用HBuilder X来编写一个简单的前端静态页面：仿安踏首页的部分静态页面展示。本次是第一次写文章，有不足之处，后续会进行更改。

---

一、头部标签的编写

1.顶部的前半部分

代码如下

<div class="header-top" style="display: block;">
					<div class="header-bar">
						<div class="barOne">
							<a href="#">登录</a>
							&nbsp;或&nbsp;
							<a href="#">注册</a>
							&nbsp;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>