此网页已经能初步的掌握html5和css的知识
里面包含了定位、浮动、以及伪类选择器、精灵图的使用,适合于学习前端的新手小白练手
以下便是代码和展示效果
相关的图片和精灵图在上次一个品优购的分享中,字体样式的话可以在icomoon下载,或者可以私信我分享
代码如下
html5代码
<!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>品优购欢迎你! </li>
<li>
<a href="#">请登录</a>
<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">
<ul>
<li><img src="uploads/banner1.jpg" alt=""></li>
</ul>
</div>
<div class="newsflash">
<div class="news">
<div class="news-hd">
<h5>品优购快报</h5>
<a href="#" class="more">更多</a>
</div>
<div class="news-bd">
<ul>
<li><strong>[特惠]</strong><a href="#">备战开学季 全民半价购数码</a></li>
<li><strong>[公告]</strong><a href="#">品优稳占家电网购六成份额</a></li>
<li><strong>[特惠]</strong> <a href="#">百元中秋全品类礼券限量领</a></li>
<li><strong>[公告]</strong><a href="#">上品优生鲜 享阳澄湖大闸蟹</a></li>
<li><strong>[特惠]</strong><a href="#">每日享折扣优品优质游</a></li>
</ul>
</div>
</div>
<div class="lifeservice">
<ul>
<li>
<i></i>
<p>话费</p>
</li>
<li>
<i></i>
<p>机票</p>
</li>
<li>
<i></i>
<p>电影票</p>
</li>
<li>
<i></i>
<p>游戏</p>
</li>
<li>
<i></i>
<p>彩票</p>
</li>
<li>
<i></i>
<p>加油卡</p>
</li>
<li>
<i></i>
<p>酒店</p>
</li>
<li>
<i></i>
<p>火车票</p>
</li>
<li>
<i></i>
<p>众筹</p>
</li>
<li>
<i></i>
<p>理财</p>
</li>
<li>
<i></i>
<p>礼品卡</p>
</li>
<li>
<i></i>
<p>白条</p>
</li>
</ul>
</div>
<div class="bargain">
<img src="uploads/ad.jpg" alt="">
</div>
</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>
<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>
329
common.css
@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: 230px;
height: 50px;
padding-left: 35px;
}
.footer .mod_service ul li:nth-child(1) h5{
float: left;
width: 50px;
height: 50px;
background: url(../images/icons.png) no-repeat -252px -2px;
margin-right: 8px;
}
.footer .mod_service ul li:nth-child(2) h5{
float: left;
width: 50px;
height: 50px;
background: url(../images/icons.png) no-repeat -255px -53px;
margin-right: 8px;
}
.footer .mod_service ul li:nth-child(3) h5{
float: left;
width: 50px;
height: 50px;
background: url(../images/icons.png) no-repeat -257px -106px;
margin-right: 8px;
}
.footer .mod_service ul li:nth-child(4) h5{
float: left;
width: 50px;
height: 50px;
background: url(../images/icons.png) no-repeat -257px -156px;
margin-right: 8px;
}
.footer .mod_service ul li:nth-child(5) h5{
float: left;
width: 50px;
height: 50px;
background: url(../images/icons.png) no-repeat -257px -208px;
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;
}
index.css
@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;
}
.news{
height: 165px;
border: 1px solid #e4e4e4;
}
.news .news-hd{
height: 33px;
line-height: 33px;
border-bottom: 1px dotted #e4e4e4;
padding: 0 15px;
}
.news .news-hd h5{
float: left;
color: #666666;
font-size: 14px;
}
.news .news-hd .more{
float: right;
font-size: 12px;
}
.news .news-hd .more::after{
font-family: 'icomoon';
content: '\ea50';
}
.news .news-bd{
padding: 5px 15px 0;
}
.news .news-bd ul li{
/* 超出文字用省略号 */
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
height: 24px;
line-height: 24px;
}
.news .news-bd ul li strong{
color: #666666;
}
.news .news-bd ul li a{
font-size: 12px;
}
.lifeservice{
overflow: hidden;
height: 209px;
border: 1px solid #e4e4e4;
border-top: 0;
}
.lifeservice ul{
width: 252px;
}
.lifeservice ul li{
float: left;
width: 63px;
height: 71px;
border-right: 1px solid #e4e4e4;
border-bottom:1px solid #e4e4e4 ;
text-align: center;
}
/* 这一段可以用js循环语句来快速实现 */
.lifeservice ul li:nth-child(1) i{
display: inline-block;
width: 24px;
height: 28px;
background: url(../images/icons.png) no-repeat -16px -15px;
margin-top: 12px;
}
.lifeservice ul li:nth-child(2) i{
display: inline-block;
width: 24px;
height: 28px;
background: url(../images/icons.png) no-repeat -79px -15px;
margin-top: 12px;
}
.lifeservice ul li:nth-child(3) i{
display: inline-block;
width: 24px;
height: 28px;
background: url(../images/icons.png) no-repeat -142px -15px;
margin-top: 12px;
}
.lifeservice ul li:nth-child(4) i{
display: inline-block;
width: 24px;
height: 28px;
background: url(../images/icons.png) no-repeat -206px -15px;
margin-top: 12px;
}
.lifeservice ul li:nth-child(5) i{
display: inline-block;
width: 24px;
height: 28px;
background: url(../images/icons.png) no-repeat -16px -84px;
margin-top: 12px;
}
.lifeservice ul li:nth-child(6) i{
display: inline-block;
width: 24px;
height: 28px;
background: url(../images/icons.png) no-repeat -79px -84px;
margin-top: 12px;
}
.lifeservice ul li:nth-child(7) i{
display: inline-block;
width: 24px;
height: 28px;
background: url(../images/icons.png) no-repeat -142px -84px;
margin-top: 12px;
}
.lifeservice ul li:nth-child(8) i{
display: inline-block;
width: 24px;
height: 28px;
background: url(../images/icons.png) no-repeat -206px -84px;
margin-top: 12px;
}
.lifeservice ul li:nth-child(9) i{
display: inline-block;
width: 24px;
height: 28px;
background: url(../images/icons.png) no-repeat -16px -156px;
margin-top: 12px;
}
.lifeservice ul li:nth-child(10) i{
display: inline-block;
width: 24px;
height: 28px;
background: url(../images/icons.png) no-repeat -79px -156px;
margin-top: 12px;
}
.lifeservice ul li:nth-child(11) i{
display: inline-block;
width: 24px;
height: 28px;
background: url(../images/icons.png) no-repeat -142px -156px;
margin-top: 12px;
}
.lifeservice ul li:nth-child(12) i{
display: inline-block;
width: 24px;
height: 28px;
background: url(../images/icons.png) no-repeat -206px -156px;
margin-top: 12px;
}
.bargain{
margin-top: 5px;
}
reset.css这属于是重置样式的css代码
/* v2.0 | 20110126
http://meyerweb.com/eric/tools/css/reset/
License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video,button {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
a{
text-decoration: none;
color:#666;
}
*{
padding: 0;
margin: 0;
/* css3盒子模型 */
box-sizing: border-box;
}
li{
list-style: none;
}
button,input{
/* 默认有灰色边框我们需要手动去掉 */
border: 0;
outline: none;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}