品优购网页

最新推荐文章于 2023-04-23 11:55:53 发布

asnone0

最新推荐文章于 2023-04-23 11:55:53 发布

阅读量149

点赞数

分类专栏：代码文章标签： html css 前端

本文链接：https://blog.csdn.net/qq_53912756/article/details/128585673

版权

代码专栏收录该内容

6 篇文章 0 订阅

订阅专栏

这是一个HTML页面的头部和导航部分，使用了CSS精灵图技术来优化图像加载，包括快捷导航栏、头部、导航菜单等元素的样式定义。页面结构包含logo、搜索框、热门关键词、购物车模块以及导航菜单，展示了电商网站常见的布局特征。

摘要由CSDN通过智能技术生成

images/logo.png

images/icons.png

这属于精灵图，需要自己测量坐标，我相对来说只用了一个

公共页面

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>品优购商城</title>
<!-- 网站说明 -->
<meta name="description" content="">
<!-- 关键字 -->
<meta name="keywords" content="">
<!-- html页面引入favicon图标 -->
<link rel="shortcut icon" href="bitbug_favicon.ico" >
<link href="css/index.css" rel="stylesheet">
<!-- 引入初始化文件 -->
<link rel="stylesheet" href="css/reset.css">
<!-- 引入公共样式 -->
<link rel="stylesheet" href="css/common.css">
<!-- 引入我们index.css 文件 -->
<link rel="stylesheet" href="css/index.css">
</head>
<body>
    <!-- 快捷导航栏 start-->
    <div class="shortcut">
    	<div class="w">
    		<div class="fl">
    			<ul>
    				<li>品优购欢迎你！&nbsp;</li>
    				<li>
    					<a href="#">请登录</a>&nbsp;
    					<a href="#" class="style_red">免费注册</a>
    				</li>
    			</ul>
    		</div>
    		<div class="fr">
    			<ul>
    				<li>我的订单</li>
    				<li></li>
    				<li class="arrow-icon">我的品优购</li>
    				<li></li>
    				<li>品优购会员</li>
    				<li></li>
    				<li>企业采购</li>
    				<li></li>
    				<li class="arrow-icon">关注品优购</li>
    				<li></li>
    				<li class="arrow-icon">客户服务</li>
    				<li></li>
    				<li class="arrow-icon">网站导航</li>
    			</ul>
    		</div>
    	</div>
    </div>
	<!-- 快捷导航栏 end-->

    <!-- 头部 start-->
    <header class="header w">
    	<!-- <div class="w"> -->
	  	<!-- logo模块 -->
		<div class="logo">
			<h1>
				<a href="index.html" title="品优购商城">品优购商城</a>
			</h1>
		</div>

		<!-- search搜索模块 -->
		<div class="search">
			<input type="search" placeholder="语言开发">
			<button>搜索</button>
		</div>

		<!-- hotwords模块制作 -->
		<div class="hotwords">
			<a href="#" class="style_red">优惠购首发</a>
			<a href="#">亿元优惠</a>
			<a href="#">9.9元团购</a>
			<a href="#">美满99减30</a>
			<a href="#">办公用品</a>
			<a href="#">电脑</a>
			<a href="#">通信</a>
		</div>
		
		<!-- 购物车模块 -->
		<div class="shopcar">
			我的购物车
			<i class="count">8</i>
		</div>
		<!-- </div> -->
    </header>
	<!-- 头部 end-->
	
	<!-- nav模块制作start -->
	<div class="nav">
		<div class="w">
			<div class="dropdown">
				<div class="dt">全部商品分类</div>
				<div class="dd">
					<ul>
						<li><a href="#">家用电器</a></li>
						<li><a href="#">手机</a>、
							<a href="#">通信</a>
						</li>
						<li><a href="#">电脑、</a></li>
						<li><a href="#">家居</a>、
							<a href="#">家装</a>、
							<a href="#">厨具</a>
						</li>
						<li><a href="#">男装</a>、
						    <a href="#">童鞋</a>、
						    <a href="#">内衣</a>
						</li>
						<li><a href="#">个护化妆</a>、
						    <a href="#">宠物</a>
						</li>
						<li><a href="#">鞋靴</a>、
							<a href="#">珠宝</a>、
							<a href="#">奢侈品</a>
						</li>
						<li><a href="#">运动户外、</a></li>
						<li><a href="#">汽车、</a></li>
						<li><a href="#">母婴、</a></li>
						<li><a href="#">食品</a>、
							<a href="#">生鲜</a>、
							<a href="#">特产</a>
						</li>
						<li><a href="#">医药保健</a></li>
						<li><a href="#">图书</a>、
							<a href="#">电子书</a>
						</li>
						<li><a href="#">彩票</a>、
							<a href="#">充值</a>、
							<a href="#">票务</a>
					 	</li>
						<li><a href="#">理财</a>、
							<a href="#">白条</a>、
							<a href="#">保险</a>		
						</li>
					</ul>	
				</div>
			</div>
			<div class="navitems">
				<ul>
					<li><a href="#">服装城</a></li>
					<li><a href="#">美妆馆</a></li>
					<li><a href="#">传智超市</a></li>
					<li><a href="#">全球购</a></li>
					<li><a href="#">闪购</a></li>
					<li><a href="#">团购</a></li>
					<li><a href="#">拍卖</a></li>
					<li><a href="#">有趣</a></li>
				</ul>
			</div>
		</div>
	</div>
	<!-- nav模块制作end -->

	<!-- 首页专有的模块 main start	 -->
	<div class="w">
		<div class="main">
			<div class="focus">焦点图</div>
			<div class="newsflash">快报模块</div>
		</div>
	</div>
	<!-- 首页专有的模块 main end	 -->

	<!--  底部模块的制作 start -->
	<footer class="footer">
		<div class="w">
			<div class="mod_service">
				<ul>
					<li>
						<h5></h5>
						<div class="service_txt">
							<h4>正品保障</h4>
							<p>正品保障，提供发票</p>
						</div>
					</li>
					<li>
						<h5></h5>
						<div class="service_txt">
							<h4>极速物流</h4>
							<p>急速物流，急速送达</p>
						</div>
					</li>
					<li>
						<h5></h5>
						<div class="service_txt">
							<h4>无忧售后</h4>
							<p>7天无理由退换货</p>
						</div>
					</li>
					<li>
						<h5></h5>
						<div class="service_txt">
							<h4>特色服务</h4>
							<p>私人定制家电套餐</p>
						</div>
					</li>
				</ul>
			</div>
			<div class="mod_help">
				<dl>
					<dt>购物指南</dt>
					<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>
				<dl>
					<dt>购物指南</dt>
					<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>
				<dl>
					<dt>购物指南</dt>
					<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>
				<dl>
					<dt>购物指南</dt>
					<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>
				<dl>
					<dt>购物指南</dt>
					<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>
				<dl>
					<dt>帮助中心</dt>
					<dd>
						<img src="images/wx_cz.jpg" alt="">
						品优购客服端
					</dd>
				</dl>
			</div>
			<div class="mod_copyright">
				<div class="links">
					<a href="#">关于我们</a>|
					<a href="#">联系我们</a>|
					<a href="#">联系客服</a>|
					<a href="#">商家入驻</a>|
					<a href="#">营销中心</a>|
					<a href="#">手机品优购</a>|
					<a href="#">友情链接</a>|
					<a href="#">销售联盟</a>|
					<a href="#">品优购社区</a>|
					<a href="#">品优购公益</a>|
					<a href="#">English Site</a>|
					<a href="#">Contact U</a>
						          	
				</div>
				<div class="copyright">
					地址：北京市昌平区建材城西路金燕龙办公楼一层 邮编：100096 电话：400-618-4000 
					传真：010-82935100 邮箱: zhanghj+itcast.cn<br>
                    京ICP备08001421号京公网安备110108007702
				</div>
			</div>
		</div>
	</footer>
	<!--  底部模块的制作 end -->
</body>
</html>

公共页面样式

@charset "UTF-8";
/**
 * 
 * @authors Your Name (you@example.org)
 * @date    2022-12-02 15:44:43
 * @version $Id$
 */

/* 导入字体样式  注意路径变换*/
@font-face {
  font-family: 'icomoon';
  src:  url('../fonts/icomoon.eot?3a2xdr');
  src:  url('../fonts/icomoon.eot?3a2xdr#iefix') format('embedded-opentype'),
    url('../fonts/icomoon.ttf?3a2xdr') format('truetype'),
    url('../fonts/icomoon.woff?3a2xdr') format('woff'),
    url('../fonts/icomoon.svg?3a2xdr#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
}

/* 版心 */
.w{
	width: 1200px;
	margin: 0 auto;
}
.fl{
	float: left;
}
.fr{
	float: right;
}
.style_red{
	color: #c81623;
}
/* 快捷导航栏 */
.shortcut{
	/* width: 1536px; */
	height: 31px;
	line-height: 31px;
	background-color: #f1f1f1;
}
.shortcut ul li{
	color: #666666;
	float: left;
}
/* 选择所有偶数的小li */
.shortcut .fr ul li:nth-child(even){
	margin: 9px 15px 0;
	width: 1px;
	height: 12px;
	background-color: #666;
}

.arrow-icon::after{
	margin-left: 6px;
	font-family: 'icomoon';
	content: '\ea52';
}

/* header头部制作 */
.header{
	/* width: 1536px; */
	position: relative;
	height: 105px;
}
.logo{
	position: absolute;
	top: 25px;
	width: 171px;
	height: 61px;
}
.logo a{
	display: block;
	width: 171px;
	height: 61px;
	background: url(../images/logo.png) no-repeat;
	/* font-size: 0; 京东隐藏文字做法*/
	/* 淘宝做法 */
	text-indent: -9999px;
	overflow: hidden;
}
.search{
	position: absolute;
	left: 346px;
	top:25px;
	width: 538px;
	height: 36px;
	border: 2px solid #b1191a;
}
.search input{
	float: left;
	width: 454px;
	height: 32px;
	padding-left: 10px;
}
.search button{
	margin-top: -2px;
	float: left;
	width: 80px;
	height: 36px;
	background-color: #b1191a;
	font-size: 16px;
	color: #fff;
}
.hotwords{
	position: absolute;
	top: 66px;
	left: 346px;
}
.hotwords a{
	margin: 0 10px;
}
.hotwords a:hover{
	color: #b1191a;
}
.shopcar{
	position: absolute;
	right: 60px;
	top: 25px;
	line-height: 35px;
	text-align: center;
	width: 140px;
	height: 35px;
	border: 1px solid #dfdfdf;
	background-color: #f7f7f7;
}
.shopcar::before{
	content: '\e93a';
	font-family: 'icomoon';
	margin-right: 5px;
	color: #b1191a;
}
.shopcar::after{
	content: '\ea51';
	font-family: 'icomoon';
	margin-left: 5px;
}
.count{
	position: absolute;
	top: -5px;
	left: 105px;
	height: 14px;
	line-height: 14px;
	color: #fff;
	background-color: #e60012;
	padding: 0 5px;
	border-radius: 7px 7px 7px 0;
}

/* nav模块制作 */
.nav{
	/* width: 1536px; */
	height: 47px;
	border-bottom: 2px solid #b1191a;
}
.nav .dropdown{
	float: left;
	width: 210px;
	height: 45px;
	background-color: #b1191a;
}
.nav .navitems{
	float: left;
}
.nav .dropdown .dt{
	width: 100%;
	height: 100%;
	color: #fff;
	text-align: center;
	line-height: 45px;
	font-size: 16px;
}
.nav .dropdown .dd{
	/* display: none; */
	width: 210px;
	height: 465px;
	background-color: #c81623;
	margin-top: 1px;
}
.nav .dropdown .dd ul li{
	position: relative;
	height: 31px;
	line-height: 31px;
	margin-left: 2px;
	padding-left: 10px;
}
.nav .dropdown .dd ul li a{

	font-size: 14px;
	color: #fff;
}
.nav .dropdown .dd ul li:hover{
	background-color: #fff;
}

.nav .dropdown .dd ul li::after{
	position: absolute;
	top: 1px;
	right: 10px;
	color: #fff;
	font-family: 'icomoon';
	content: '\ea51';
	font-size: 14px;
}
.nav .dropdown .dd ul li:hover a{
	color: #c81623;
}

.nav .navitems ul li{
	float: left;
}
.nav .navitems ul li:hover a{
	color: #c81623;
}
.nav .navitems ul li a{
	display: block;
	height: 45px;
	line-height: 45px;
	font-size: 16px;
	padding: 0 25px;
}

/* 底部模块制作 */
.footer{
	height: 415px;
	background-color: #f5f5f5;
	padding-top: 30px
}
.footer .mod_service{
	height: 80px;
	border-bottom: 1px solid #ccc;
}
.footer .mod_service ul li{
	float: left;
	width: 300px;
	height: 50px;
	padding-left: 35px;
}
.footer .mod_service ul li h5{
	float: left;
	width: 50px;
	height: 50px;
	background: url(../images/icons.png) no-repeat -252px -2px; 
	margin-right: 8px;
}
.footer .mod_service ul li .service_txt h4{
	font-size: 14px;
}
.footer .mod_service ul li .service_txt p{
	font-size: 12px;
}
.footer .mod_help{
	height: 185px;
	border-bottom: 1px solid #ccc;
	padding-top: 20px;
	padding-left: 50px;
}
.footer .mod_help dl dt{
	font-size: 16px;
	margin-bottom: 10px;
}
.footer .mod_help dl:last-child{
	width: 90px;
	text-align: center;
}
.footer .mod_help dl{
	float: left;
	width: 200px;
}
.footer .mod_copyright{
	text-align: center;
	padding-top: 20px;
}
.footer .mod_copyright .links{
	margin-bottom: 15px;
}
.footer .mod_copyright .links a{
	margin: 0 3px;
}
.footer .mod_copyright .links a:hover{
	color:#c81623;
}
.footer .mod_copyright .copyright{
	line-height: 20px;
}

main样式

@charset "UTF-8";
/**
 * 
 * @authors Your Name (you@example.org)
 * @date    2022-12-02 15:11:01
 * @version $Id$
 */
.main{
	width: 980px;
	height: 455px;
	margin-left: 220px;
	margin-top: 10px;
}
.focus{
	float: left;
	width: 721px;
	height: 455px;
	background-color: purple;
}
.newsflash{
	float: right;
	width: 250px;
	height: 455px;
	background-color: skyblue;
}