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
    评论
HTMLCSS是用于创建网页的基本技术。 HTML是超文本标记语言,用于描述网页的内容和结构。它使用标记来定义文本、图像、链接等元素,并将它们分组在段落、标题、列表等结构中。 CSS是层叠样式表,用于控制网页的布局和样式。它可以为HTML元素指定字体、颜色、边框、间距等属性,并通过选择器和样式规则来定义网页的整体外观。 要创建一个简单静态网页,首先需要编写HTML代码来定义网页的内容和结构。例如,下面是一个简单HTML页面: ``` <!DOCTYPE html> <html> <head> <title>My Website</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <header> <h1>Welcome to my website</h1> <nav> <ul> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> </ul> </nav> </header> <main> <section> <h2>About me</h2> <p>Hi, my name is John and I'm a web developer.</p> </section> <section> <h2>My work</h2> <ul> <li><a href="#">Project 1</a></li> <li><a href="#">Project 2</a></li> <li><a href="#">Project 3</a></li> </ul> </section> </main> <footer> <p>Copyright © 2021 My Website</p> </footer> </body> </html> ``` 在上面的代码中,我们定义了一个网页的基本结构,包括页眉、主体和页脚。页眉包含网站标题和导航菜单,主体包含两个部分(关于我和我的工作),页脚包含版权信息。 然后,我们可以使用CSS来控制页面的布局和样式。例如,下面是一个简单的样式表,用于设置网页的颜色、字体和布局: ``` body { font-family: Arial, sans-serif; background-color: #f2f2f2; } header { background-color: #333; color: #fff; padding: 20px; } nav ul { list-style: none; margin: 0; padding: 0; } nav li { display: inline-block; margin-right: 20px; } nav a { color: #fff; text-decoration: none; } main { max-width: 800px; margin: 0 auto; padding: 20px; } section { margin-bottom: 40px; } h1, h2 { font-weight: normal; } footer { background-color: #333; color: #fff; padding: 20px; text-align: center; } ``` 在上面的样式表中,我们设置了页面的背景颜色、字体和布局。我们还定义了页眉、导航菜单、主体和页脚的样式,以及一些通用元素(如标题和段落)的样式。 通过组合HTMLCSS,我们可以创建一个简单静态网页。当然,这只是一个基础示例,您可以根据需要自由地添加更多内容和样式。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值