静态页面——Annil

最新推荐文章于 2024-07-13 09:19:02 发布

gjklj

最新推荐文章于 2024-07-13 09:19:02 发布

阅读量269

点赞数

文章标签： html css

本文链接：https://blog.csdn.net/gjklj/article/details/106865301

版权

页面效果

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/6.9css.css">
</head>
<body>
    <header>
        <div class="header_nav">
            <div class="header_left">
                <a href=""><img src="images/qm/切片/home.png"></a>
                <a href="">男童</a>
                <a href="">女童</a>
                <a href="">小童</a>
                <a href="">婴童</a>
                <a href="">家居</a> 
            </div>
            <div class="header_right">
                <a href="">关于annil</a>
                <a href="">新闻资讯</a>
                <a href="">会员权益</a>
                <a href="">加盟招商</a>
                <a href="">投资者关系</a>
                <a href="">旗舰店</a>
            </div>  
        </div>
        
    </header>
    <div class="bz">
        <div class="logo"></div>
        <div class="fj"><img src="images/qm/切片/banner.jpg">
            <a href="" class="fj_l"><img src="images/qm/切片/b-prev.png" alt=""></a>
            <a href="" class="fj_r"><img src="images/qm/切片/b-next.png"></a>
        </div>
    </div>
    <div class="tro_1">
        <div class="tro_nav">
            <div class="js">
                <div class="kirt">
                    <a href=""><img src="images/qm/切片/kirt.png"></a>
                    <div class="x"></div>
                    <a href="">男大童</a>
                    <a href="">女大童</a>
                    <a href="">明星单品</a>
                </div>
            </div>
            <a href="" class="dp"><img src="images/qm/切片/pic06.jpg"></a>
            <p>Annil 2019春夏新品</p>
            <p>明星单品</p>
        </div>
        <div class="tro_nav">
            <a href=""><img src="images/qm/切片/pic11.jpg"></a>
            <p>Annil 2019春夏新品</p>
            <p>女大童</p>
        </div>
        <div class="tro_nav">
            <a href=""><img src="images/qm/切片/pic10.jpg"></a>
            <p>Annil 2019春夏新品</p>
            <p>男大童</p>
        </div>
    </div>
    <div class="tro_2">
        <div class="tro_nav">
            <div class="js">
                <div class="kirt">
                    <a href=""><img src="images/qm/切片/baby.png"></a>
                    <div class="x"></div>
                    <a href="">男小童</a>
                    <a href="">女小童</a>
                    <a href="">配饰</a>
                </div>
            </div>
            <a href="" class="dp"><img src="images/qm/切片/pic09.jpg"></a>
            <p>Annil 2019春夏新品</p>
            <p>配饰</p>
        </div>
        <div class="tro_nav">
            <a href=""><img src="images/qm/切片/pic12.jpg"></a>
            <p>Annil 2019春夏新品</p>
            <p>婴童</p>
        </div>
        <div class="tro_nav">
            <div class="sm">
                <a href=""><img src="images/qm/切片/pic04.jpg"></a>
                <p>Annil 2019春夏新品</p>
                <p>男小童</p>
            </div>
            <div class="xm">
                <a href=""><img src="images/qm/切片/pic05.jpg"></a>
                <p>Annil 2019春夏新品</p>
                <p>女小童</p>
            </div>
        </div>
    </div>
    <div class="tro_3">
        <div class="tro_nav">
            <div class="js">
                <div class="kirt">
                    <a href=""><img src="images/qm/切片/annil-home.png"></a>
                    <div class="x"></div>
                    <a href="">家居</a>
                    <a href="">内衣</a>
                </div>
            </div>
            
        </div>
        <div class="tro_nav">
            <a href=""><img src="images/qm/切片/pic07.jpg"></a>
            <p>Annil 2019春夏新品</p>
            <p>家居</p>
        </div>
        <div class="tro_nav">
            <a href=""><img src="images/qm/切片/pic08.jpg"></a>
            <p>Annil 2019春夏新品</p>
            <p>内衣</p>
        </div>

    </div>
    <div class="fe"></div>
    <div class="tro_4">
        <div class="nav">
            <h2>Store Image</h2>
            <a href=""><img src="images/qm/切片/pic03.jpg"></a>
        </div>
        <div class="nav">
            <h2>Prduct Video</h2>
            <a href=""><img src="images/qm/切片/pic03.jpg"></a>
        </div>
        <div class="nav">
            <h2>Annil TV</h2>
            <a href=""><img src="images/qm/切片/pic01.jpg"></a>
        </div>
    </div>
    <div class="tro_5">
        <div class="ys">
            <h6>实用信息</h6>
            <div class="fex"></div>
            <a href="">会员权益</a>
            <a href="">售后服务</a>
            <a href="">加盟招商</a>
            <a href="">招贤纳士</a>
        </div>
        <div class="ys">
            <h6>网上商城</h6>
            <div class="fex"></div>
            <a href="">天猫</a>
            <a href="">唯品会</a>
            <a href="">微商城</a>
        </div>
        <div class="ys">
            <h6>联系我们</h6>
            <div class="fex"></div>
            <a href="" class="tel">0755-28895666</a>
            <a href="" class="fox">0755-28896696</a>
            <a href="" class="site">www.annil.com</a>
            <a href="" class="mail">hello@annil.com</a>
            <a href="" class="adder">深圳市安奈儿股份有限公司</a>
            <a href="">深圳市龙岗区坂田街道雪岗路2018号</a>
            <a href="">天安云谷产业园区一期3栋A座16楼</a>
        </div>
        <div class="ys">
            <h6>友情链接</h6>
            <div class="fex"></div>
            <a href="">牧星策划</a>
        </div>
        <div class="sx"></div>
        <div class="ys">
            <h6>关注我们</h6>
            <div class="fex"></div>
            <div class="box">
                <div class="tu">
                    <img src="images/qm/切片/wechart-code.jpg" alt="" style="width: 82px" height="82px">
                    <a href="">安奈儿微博</a>
                </div>
                <div class="tu">
                    <img src="images/qm/切片/wechart-code.jpg" alt="" style="width: 82px" height="82px">
                    <a href="">安奈儿微博</a>
                </div>
            </div>
            
            
            
            
        </div>
        <div class="fex1"></div>
        <div class="xx">
            <span>?COPYRIGHT 2014</span>
            <span>粤ICP备05082467号</span>
            <span>技术支持：牧星策划</span>
        </div>
    </div>
    <footer></footer>
    <a href="" class="dl"><img src="images/qm/切片/cc-arrow-circle-left.png"></a>
    <a href="" class="dr"><img src="images/qm/切片/cc-arrow-circle-right.png"></a>
        
    
    
</body>
</html>

CSS

body,p{
    margin: 0;
}
*{
    font-style: 微软雅黑;
}
header{
    width: 100%;
    height: 30px;
    background-color: black;
}
.header_nav{
    width: 1400px;
    overflow: hidden;
    margin: auto;
}
.header_left{
    float: left;
}
.header_right{
    float: right;
}
.header_left a,.header_right a{
    display: block;
    float: left;
    text-decoration: none;
    font-size: 14px;
    color: white;
    line-height: 30px;
}
.header_left a{
    margin-right: 25px;
}
.header_right a{
   margin-left: 25px;
}
.bz{
    width: 1400px;
    overflow: hidden;
    margin: auto;
    margin-bottom: 45px;
    margin-top: 15px;
}
.bz .logo{
    width: 127px;
    height: 35px;
    background-image: url(../images/qm/切片/logo.gif);
    background-repeat: no-repeat;
    margin: auto;
}
.bz .fj{
    display: block;
    width: 1400px;
    height: 578px;
    margin-top: 15px;
    position: relative;
}
.fj .fj_l{
    display: block;
    width: 50px;
    height: 50px;
    position: absolute;
    left: 1%;
    top: 48%;
}
.fj .fj_r{
    display: block;
    width: 50px;
    height: 50px;
    position: absolute;
    right: 1%;
    top: 48%;
}

.tro_1,.tro_2,.tro_3,.tro_4{
    width: 1400px;
    overflow: hidden;
    margin: auto;
}
.tro_1 .tro_nav,.tro_2 .tro_nav,.tro_3 .tro_nav{
    width: 446px;
    overflow: hidden;
    float: left;
}
.tro_1 .tro_nav:nth-child(2),.tro_2 .tro_nav:nth-child(2),.tro_3 .tro_nav:nth-child(2){
    margin-left: 31px;
    margin-right: 30px;
}
.tro_nav .js{
    width: 446px;
    height: 316px;
    background-color:#f5f3f3;
}
.js .kirt{
    width: 113px;
    overflow: hidden;
    margin: auto;
    padding-top: 80px;
}
.kirt .x{
    width: 20px;
    height: 10px;
    border-bottom: #bfbfbf 1px solid;
    margin: auto;
}
.kirt a{
    display: block;
    width: 113px;
    height: 20px;
    text-decoration: none;
    text-align: center;
    font-size:14px;
    font-weight: bold;
    color: black;
    margin-top: 5px;
}
.tro_nav .dp{
    width: 446px;
    height: 296px;
    display: block;
    margin-top: 16px;
}
.tro_nav p{
    font-size: 14px;
    color: #666666;
    margin-top: 15px;
}
.tro_2,.tro_3{
    margin-top: 50px;
}
.tro_nav .sm{
    width: 446px;
    overflow: hidden;
    margin-bottom: 30px;
}
.fe{
    width: 1400px;
    height: 70px;
    margin: auto;
    border-bottom: 1px solid #bfbfbf;
}
.tro_4{
    margin-top: 54px;
}
.tro_4 .nav{
    width: 440px;
    overflow: hidden;
    float: left;
}
.tro_4 .nav:nth-child(2){
    margin-left: 30px;
    margin-right: 31px;
}
.nav h2{
    margin: 0;
    padding: 0;
    font-size: 22px;
    color: #333333;
}
.nav a{
    display: block;
    margin-top: 20px;
}
.tro_5{
    width: 100%;
    overflow: hidden;
    background-color:#f6f6f6;
    margin-top: 42px;
}
.tro_5 .ys{
    overflow: hidden;
    float: left;
    margin-top: 70px;
}
.tro_5 .sx{
    width: 62px;
    height: 177px;
    border-left: black 1px solid;
    float: left;
    margin-top: 70px;
}
.tro_5 .ys:nth-child(1){
    margin-left: 180px;
}
.tro_5 .ys:nth-child(2){
    margin-left: 100px;
    margin-right: 100px;
}
.tro_5 .ys:nth-child(3){
   margin-right: 45px;
}
.tro_5 .ys:nth-child(4){
    margin-right: 108px;
}
.ys .fex{
    width: 26px;
    height: 10px;
    border-bottom: #999999 1px solid;
    margin-bottom: 10px;
}
.ys h6{
    margin: 0;
    padding: 0;
    font-size: 14px;
    color: black;
}
.ys a{
    display: block;
    font-size: 12px;
    color: #666666;
    margin-bottom: 14px;
    text-decoration: none;
}
.ys .box{
    width: 555px;
    overflow: hidden;
}
.box .tu{
    float: left;
}
.box .tu:nth-child(1){
    margin-right: 35px;
}
.tu a{
    display: block;
    margin-top: 15ox;
}
.tro_5 .fex1{
    width: 1122px;
    height: 44px;
    border-bottom: solid 1px #e4e4e4;
    margin: auto;
    margin-top: 280px;
}
.tro_5 .xx{
    width: 400px;
    height: 20px;
    margin: auto;
    margin-top: 24px;
    margin-bottom: 15px;
}
.xx span{
    font-size: 12px;
    color: #666666;
}
.xx span:nth-child(2){
    margin-left: 20px;
    margin-right: 50px;
}
footer{
    width: 100%;
    height: 20px;
    background-color: black;
}
.dl{
    display: block;
    width: 32px;
    overflow: hidden;
    position: fixed;
    bottom: 0;
    left:46% ;
}
.dr{
    display: block;
    width: 32px;
    overflow: hidden;
    position: fixed;
    bottom: 0;
    left:48% ;
}
.ys .tel{
    height: 20px;
    background-image: url(../images/qm/切片/icon-tel.png);
    background-repeat: no-repeat;
    padding-left: 20px;
    margin-bottom: 5px;
}
.ys .fox{
    height: 20px;
    background-image: url(../images/qm/切片/icon-fox.png);
    background-repeat: no-repeat;
    padding-left: 20px;
    margin-bottom: 5px;
}
.ys .site{
    height: 20px;
    background-image: url(../images/qm/切片/icon-site.png);
    background-repeat: no-repeat;
    padding-left: 20px;
    margin-bottom: 5px;
}
.ys .mail{
    height: 20px;
    background-image: url(../images/qm/切片/icon-mail.png);
    background-repeat: no-repeat;
    padding-left: 20px;
    margin-bottom: 5px;
}
.ys .adder{
    height: 20px;
    background-image: url(../images/qm/切片/icon-adder.png);
    background-repeat: no-repeat;
    padding-left: 20px;
    margin-bottom: 5px;
}

gjklj

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
静态页面——Annil

页面效果HTML<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet"
复制链接

扫一扫