[学习交流] 案例练习作业

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>导航栏</title>
<style>
* {
padding: 0;
margin: 0;
}
li {
list-style: none;
}
.box {
width: 760px;
height: 182px;
margin:auto;
}
.one {
width: 760px;
height: 150px;
background: url(images/banner.jpg);
}
.nav {
width: 760px;
height: 32px;
background: url(images/nav_bg.jpg);
}
.nav li {
float: left;
/*width: 80px;*/
padding: 0 16px;
background: url(images/button1.jpg) no-repeat;
}
.nav li a {
font-size: 12px;
color: #40510a;
height: 32px;
line-height: 32px;
text-decoration: none;
}
.nav li:hover {
background: url(images/button2.jpg);
}
</style>
</head>
<body>
<div class="box">
<div class="one"></div>
<ul class="nav">
<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>
</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
a{
width:120px;
height:58px;
display:inline-block;
text-align:center;
line-height:50px;
color:white;
text-decoration:none;
}
.one{
background:url(images/bg1.png);}
.two{
background:url(images/bg2.png);}
.three{
background:url(images/bg3.png);}
.four{
background:url(images/bg4.png);}
.one:hover{
background:url(images/bg5.png);}
.two:hover{
background:url(images/bg6.png);}

</style>
</head>
<body>
<a href="#" class="one">五彩导航</a>
<a href="#" class="two">五彩导航</a>
<a href="#" class="three">五彩导航</a>
<a href="#" class="four">五彩导航</a>
<a href="#" class="five">五彩导航</a>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>高级导航栏</title>
<style>
a {
display: block;
text-align: center;
width: 119px;
height: 50px;
text-decoration: none;
color: #fff;
line-height: 50px;
}
.red {
background-color: #f00;
}
.pink {
background-color: pink;
}
.sky {
background-color: skyblue;
}
.purple {
background-color: purple;
}
.yellow {
background-color: yellow;
}
.red:hover {
background-color: purple;
width: 179px;
}
.pink:hover {
background-color: yellow;
width: 179px
}
.sky:hover {
background-color: red;
width: 179px;
}
.purple:hover {
background-color: blue;
width: 179px;
}
.yellow:hover {
background-color: pink;
width: 179px;
}
</style>
</head>
<body>
<a href="#" class="red">导航项</a>
<a href="#" class="pink">导航项</a>
<a href="#" class="sky">导航项</a>
<a href="#" class="purple">导航项</a>
<a href="#" class="yellow">导航项</a>

</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>品优购</title>
<meta name="Keywords" content="网上购物,网上商城,手机,笔记本,电脑,MP3,CD,VCD,DV,相机,数码,配件,手表,存储卡,品优购" />
<meta name="description" content="小米商城直营小米公司旗下所有产品，囊括小米手机系列小米MIX、小米Note 2，红米手机系列红米Note 4、红米4，智能硬件，配件及小米生活周边，同时提供小米客户服务及售后支持。" />
<link rel="shortcut icon" href="favicon.ico"  type="image/x-icon"/>
<link rel="stylesheet" href="css/base.css">
<link rel="stylesheet" href="css/common.css">
<link rel="stylesheet" href="css/index.css">
</head>
<body>

<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><a href="#">我的订单</a></li>
<li class="spacer"></li>
<li>
<a href="#">我的品优购 </a>
<i class="icomoon">  </i>
</li>
<li class="spacer"></li>
<li><a href="#">品优购会员</a></li>
<li class="spacer"></li>
<li><a href="#">企业采购</a></li>
<li class="spacer"></li>
<li><a href="#">关注品优购</a><i class="icomoon">  </i></li>
<li class="spacer"></li>
<li><a href="#">客户服务</a><i class="icomoon">  </i></li>
<li class="spacer"></li>
<li><a href="#">网站导航</a><i class="icomoon">  </i></li>
</ul>
</div>
</div>
</div>


<div class="header w">

<div class="logo">
<h1><a href="index.html" title="品优购">品优购</a></h1>
</div>

<div class="search">
<input type="text" class="text" placeholder="请输入关键词">
<button class="but">搜索</button>
</div>

<div class="hotwrods">
<ul>
<li><a href="#" class="style-red">优惠购首发</a></li>
<li><a href="#">亿元优惠</a></li>
<li><a href="#">9.9元团购</a></li>
<li><a href="#">美满99减30 </a></li>
<li><a href="#">办公用品</a></li>
<li><a href="#">电脑</a></li>
<li><a href="#">通信</a></li>
</ul>
</div>

<div class="shopcar">
<i class="car"> </i>
我的购物车
<i class="srrow"> </i>
<i class="count">8</i>
</div>
</div>


<div class="nav" style="overflow: hidden;">
<div class="w">

<div class="dropdown fl">
<div class="dt">全部商品分类</div>
<div class="dd">
<ul>
<li><a>家居、家具、家装、厨具</a><i></i></li>
<li><a>家居、家具、家装、厨具</a><i></i></li>
<li><a>家居、家具、家装、厨具</a><i></i></li>
<li><a>家居、家具、家装、厨具</a><i></i></li>
<li><a>家居、家具、家装、厨具</a><i></i></li>
<li><a>家居、家具、家装、厨具</a><i></i></li>
<li><a>家居、家具、家装、厨具</a><i></i></li>
<li><a>家居、家具、家装、厨具</a><i></i></li>
<li><a>家居、家具、家装、厨具</a><i></i></li>
<li><a>家居、家具、家装、厨具</a><i></i></li>
<li><a>家居、家具、家装、厨具</a><i></i></li>
<li><a>家居、家具、家装、厨具</a><i></i></li>
<li><a>家居、家具、家装、厨具</a><i></i></li>
<li><a>家居、家具、家装、厨具</a><i></i></li>
<li><a>家居、家具、家装、厨具</a><i></i></li>
</ul>
</div>
</div>

<div class="navitems fl">
<a href="#">服装城 </a>
<a href="#">美妆馆</a>
<a href="#">美妆馆</a>
<a href="#">传智超市</a>
<a href="#">全球购</a>
<a href="#">闪购</a>
<a href="#">拍卖</a>
<a href="#">有趣</a>
</div>
</div>
</div>



<div class="main">
<div class="w">
<div class="focus fl">

</div>
<div class="newsflash fr">

</div>
</div>
</div>



<div class="footer">
<div class="w">

<div class="mod_service">
<ul>
<li>
<i class="mod_service_zheng"></i>
<h3>正品保障</h3>
<p>正品保障，提供发票</p>
</li>
<li>
<i class="mod_service_zheng"></i>
<h3>正品保障</h3>
<p>正品保障，提供发票</p>
</li>
<li>
<i class="mod_service_zheng"></i>
<h3>正品保障</h3>
<p>正品保障，提供发票</p>
</li>
<li>
<i class="mod_service_zheng"></i>
<h3>正品保障</h3>
<p>正品保障，提供发票</p>
</li>
<li>
<i class="mod_service_zheng"></i>
<h3>正品保障</h3>
<p>正品保障，提供发票</p>
</li>
</ul>
</div>
   
<div class="mod_help">
     <div>
     <dl class="mod_help_ps">
     <dt>配送方式</dt>
     <dd>上门自提</dd>
     <dd>上门自提</dd>
     <dd>上门自提</dd>
     <dd>上门自提</dd>
     <dd>上门自提</dd>
     </dl>
     <dl class="mod_help_ps">
     <dt>配送方式</dt>
     <dd>上门自提</dd>
     <dd>上门自提</dd>
     <dd>上门自提</dd>
     <dd>上门自提</dd>
     <dd>上门自提</dd>
     </dl>
     <dl class="mod_help_ps">
     <dt>配送方式</dt>
     <dd>上门自提</dd>
     <dd>上门自提</dd>
     <dd>上门自提</dd>
     <dd>上门自提</dd>
     <dd>上门自提</dd>
     </dl>
     <dl class="mod_help_ps">
     <dt>配送方式</dt>
     <dd>上门自提</dd>
     <dd>上门自提</dd>
     <dd>上门自提</dd>
     <dd>上门自提</dd>
     <dd>上门自提</dd>
     </dl>
     <dl class="mod_help_ps">
     <dt>配送方式</dt>
     <dd>上门自提</dd>
     <dd>上门自提</dd>
     <dd>上门自提</dd>
     <dd>上门自提</dd>
     <dd>上门自提</dd>
     </dl>
<dl class="mod_help_bz">
<dt>帮助中心</dt>
<dd> <img src="img/wx_cz.jpg" alt=""></dd>
<dd>品优购客户端</dd>
</dl>
     </div>
</div>
<div class="mod_copyright">
<p>
关于我们  |  联系我们  |  联系客服  |  商家入驻  |  营销中心  |  手机品优购  |  友情链接  |  销售联盟  |  品优购社区  |  品优购公益  |  English Site  |  Contact
</p>
<p>地址：北京市昌平区建材城西路金燕龙办公楼一层邮编：100096 电话：400-618-4000 传真：010-82935100 邮箱: zhanghj+itcast.cn</p>
<p>京ICP备08001421号京公网安备110108007702</p>
</div>
</div>
</div>


</body>
</html>

/*公共样式*/
.fl {
float: left;
}
.fr {
float: right;
}
@font-face {
  font-family: 'icomoon';
  src:  url('../fonts/icomoon.eot?7kkyc2');
  src:  url('../fonts/icomoon.eot?7kkyc2#iefix') format('embedded-opentype'),
url('../fonts/icomoon.ttf?7kkyc2') format('truetype'),
url('../fonts/icomoon.woff?7kkyc2') format('woff'),
url('../fonts/icomoon.svg?7kkyc2#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
}
.icomoon{
font-family: 'icomoon';
}
/*版心*/
.w {
width: 1200px;
margin: 0 auto;
}
li {
list-style: none;
}
.style-red {
color: #df3033;
}
/*.shortcut */
.shortcut {
height: 30px;
background-color: #f1f1f1;
line-height: 30px;
}
.shortcut li {
float: left;
}
.spacer {
border:1px solid #666;
height: 10px;
margin: 9px 10px;
}
/*header,.,*/
.header {
position: relative;
height: 106px;
}
.logo {
position: absolute;
top: 27px;
left: 0;
width: 175px;
height: 55px;
}
.logo a {
display: block;
overflow: hidden;
width: 175px;
height: 55px;
background: url(../img/logo.png) no-repeat;
text-indent: -999em;
}
/*search*/
.search {
position: absolute;
top: 25px;
left: 350px;
}
.text {
float: left;
width: 455px;
height: 34px;
border:1px solid #df3033;
}
.but {
float: left;
width: 80px;
height: 36px;
background-color: #df3033;
border: 0;
font-size: 16px;
color: #fff;
}
.hotwrods {
position: absolute;
top: 70px;
left: 350px;
}
.hotwrods li {
float: left;
}
.hotwrods a {
margin: 0 10px;
}
/*shopcar*/
.shopcar {
position: absolute;
top: 25px;
right: 67px;
width: 140px;
height: 35px;
border:1px solid #dfdfdf;
line-height: 35px;
text-align: center;
}
.car {
font-family: 'icomoon';
color: #d84b4b;
}
.srrow {
font-family: 'icomoon';
}
.count {
position: absolute;
left: 105px;
top: -5px;
height: 14px;
line-height: 14px;
background-color: #e60012;
border-radius: 7px 7px 7px 0;
}
/**/
.nav {
height: 45px;
border-bottom: 2px solid #b1191a;
}
/*左侧*/
.dt {
width: 209px;
height: 45px;
background-color: #b1191a;
font-size: 16px;
line-height: 45px;
text-align: center;
color: #fff;
}
.dd {
position: relative;
width: 209px;
height: 465px;
background-color: #c81623;
}
.dd a {
font-size: 14px;
height: 30px;
line-height: 30px;
margin-left: 10px;
color: #fff;
}
.dd i {
position: absolute;
right: 10px;
font-family: 'icomoon';
font-size: 16px;
color: #fff;
}
.dd li:hover a {
background-color: #fff;
color: #c81623;
}
/*右侧*/
.navitems {
margin-left: 10px;
}
.navitems a {
font-size: 16px;
line-height: 45px;
margin: 0 25px;
}
/**/

/**/

.main {
height: 1000px;
}
/**/

/*fotter部分*/
.footer {
height: 417px;
/*background-color: pink;*/
}
.mod_service {
height: 109px;
background-color: #fff;
border-bottom: 1px solid #ededed;
}
.mod_service li {
float: left;
width: 240px;
}
.mod_service_zheng {
position: absolute;
float: left;
width: 50px;
height: 50px;
background: url(../img/icons.png) no-repeat -252px -3px;
margin: 30px 0 0 30px;
}
.mod_service h3 {
float: left;
margin: 37px 0 0 92px;
}
.mod_service p {
float: left;
margin: 3px 0 0 92px;
}

/*mod_help */
.mod_help {
height: 190px;
}
.mod_help_ps {
float: left;
width: 150px;
padding: 20px 0 0 50px;
}
.mod_help_bz {
float: left;
padding: 20px 0 0 50px;
}
.mod_copyright p {
text-align: center;
}
/**/

帐号		自动登录	找回密码
密码			加入黑马

[学习交流] 案例练习作业

0 个回复