黑马程序员技术交流社区

标题: 案例练习作业 [打印本页]

作者: 826018910    时间: 2019-3-18 14:29
标题: 案例练习作业
<!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>
        <!-- .shortcut  -->
        <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>
        <!-- shortcut,.,end -->
        <!-- header -->
        <div class="header w">
                <!-- logo         -->
                <div class="logo">
                        <h1><a href="index.html" title="品优购">品优购</a></h1>
                </div>
                <!-- search -->
                <div class="search">
                        <input type="text" class="text" placeholder="请输入关键词">
                        <button class="but">搜索</button>
                </div>
                <!-- hotwords -->
                <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>
                <!-- shopcar -->
                <div class="shopcar">
                        <i class="car"> </i>
                        我的购物车
                        <i class="srrow"> </i>
                        <i class="count">8</i>
                </div>
        </div>
        <!-- header,.,end -->
        <!-- .nav导航栏, -->
        <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>
        <!-- .nav导航栏,end -->

        <!-- 页面main主体start -->
        <div class="main">
                <div class="w">
                        <div class="focus fl">
                               
                        </div>
                        <div class="newsflash fr">
                               
                        </div>
                </div>
        </div>
        <!-- 页面main主体end -->

        <!-- footer 部分 -->
        <div class="footer">
                <div class="w">
                        <!-- mod_service  -->
                        <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>
                         <!-- mod_help  -->
                        <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>
        <!-- footer end-->

</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导航栏, -->*/
.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;
}
/*<!-- .nav导航栏,end -->*/





/*<!-- 页面main主体start -->*/

.main {
        height: 1000px;
}
/*<!-- 页面main主体start -->*/





/*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;
}
/*<!-- footer end-->*/
















欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/) 黑马程序员IT技术论坛 X3.2