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>
											
  • 2
    点赞
  • 22
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值