前端学习-第一阶段-day11

最新推荐文章于 2023-05-03 15:59:42 发布

澜痕

最新推荐文章于 2023-05-03 15:59:42 发布

阅读量166

点赞数

分类专栏：前端学习日记

本文链接：https://blog.csdn.net/qq_34723035/article/details/110408812

版权

前端学习日记专栏收录该内容

26 篇文章 0 订阅

订阅专栏

今日练习

练习图片

在这里插入图片描述

练习代码

<!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="./html5shiv.js">
    <link rel="stylesheet" href="./2.css">

</head>

<body>
    <header id="top">
        <div class="wrapper clearfix">
            <div>个人银行
                <div class="triangle block"></div>
            </div>
            <div class="shu"></div>
            <div>小企业服务
                <div class="triangle"></div>
            </div>
            <div class="shu"></div>
            <div>商业理财
                <div class="triangle"></div>
            </div>
            <div class="shu"></div>
            <div>环球银行及资本市场
                <div class="triangle"></div>
            </div>
            <div class="shu"></div>
            <div>私人银行
                <div class="triangle"></div>
            </div>
            <div class="shu"></div>
            <div>村镇银行
                <div class="triangle"></div>
            </div>
            <div class="right red-bgc">登录</div>
            <div class="right">简体</div>
            <div class="right">中国</div>
        </div>
    </header>
    <nav>
        <div class="wrapper ">
            <div class="nav-logo clearfix">
                <div>
                    <a href="">
                        <p>银行服务</p>
                        <span>账户及借记卡</span>
                    </a>
                </div>
                <div class="shu"></div>
                <div>
                    <a href="">
                        <p>借贷</p>
                        <span>贷款及信用卡</span>
                    </a>
                </div>
                <div class="shu"></div>
                <div>
                    <a href="">
                        <p>投资</p>
                        <span>投资及理财</span>
                    </a>
                </div>
                <div class="shu"></div>
                <div>
                    <a href="">
                        <p>保险</p>
                        <span>产品及服务</span>
                    </a>
                </div>
                <div class="shu"></div>
                <div>
                    <a href="">
                        <p>财富远见</p>
                        <span>市场资讯及财富规划</span>
                    </a>
                </div>
                <div class="shu"></div>
                <div>
                    <a href="">
                        <p>全渠道银行</p>
                        <span>电子银行及分支行</span>
                    </a>
                </div>

            </div>
            
        </div>
    </nav>
    <div class="wrapper clearfix">
        <div class="banner">
            <div class="banner-box">
                <div class="banner-font">
                    汇飨大湾在广州
                </div>
                <p>甄选美食+最高人民币800元刷卡金&nbsp;不容错过</p>
                <a href="">
                    <div class="banner-a">
                        了解详情
                    </div>
                </a>
            </div>
        </div>
        <aside>
            <p class="p1">汇丰中国信用卡</p>
            <p class="p2">成功申请即享精彩礼遇，随心还款，尽享便捷。</p>
            <div></div>
            <p class="p1">非常周末+</p>
            <p class="p2">汇丰信用卡为您打造周末用餐、购物、休闲娱乐好去处。</p>
        </aside>
    </div>
    <article>
        <div class="wrapper clearfix">
            <section>
                <img src="./pic01.png" alt="">
                <div>汇风尚玉</div>
                <p>尚臻无界&nbsp;玉成大家</p>
            </section>
            <section>
                <img src="./pic01.png" alt="">
                <div>推诚相"荐"越荐越多礼</div>
                <p>尚臻无界&nbsp;玉成大家</p>
            </section>
            <section class="third">
                <img src="./pic01.png" alt="">
                <div>汇丰携手签证代理机构VFS</div>
                <p>尚臻无界&nbsp;玉成大家</p>
            </section>
        </div>
    </article>
    <div class="prolist">
        <div class="wrapper clearfix">
            <div class="prolist-in">
                <div>汇丰存款业务</div>
                <p>以优质的存款服务，祝您轻松积累财富并管理个人财务，实现未来规划。</p>
            </div>
            <div class="prolist-in">
                <div>汇丰投资及理财产品</div>
                <p>以优质的存款服务，祝您轻松积累财富并管理个人财务，实现未来规划，祝您轻松积累财富并管理个人财务。</p>
            </div>
            <div class="prolist-in">
                <div>汇丰留学汇款</div>
                <p>以优质的存款服务，祝您轻松积累财富并管理个人财务，实现未来规划。</p>
            </div>
            <div class="prolist-in">
                <div>汇丰个人手机银行</div>
                <p>以优质的存款服务，祝您轻松积累财富并管理个人财务，实现未来规划，祝您轻松积累财富并管理个人财务。</p>
            </div>
        </div>
    </div>
    <div class="wrapper">
        <a href="#top" class="top-top">返回顶部</a>
    </div>
    <div class="linkus">
        <div class="wrapper clearfix">
            <div class="linkus-in margin-l">
                <span>联系汇丰</span>
                <p>致电或留言给我们</p>
            </div>
            <div class="linkus-in">
                <span>寻找汇丰分行</span>
                <p>致电或留言给我们</p>
            </div>
            <div class="linkus-in">
                <span>帮助及支持</span>
                <p>致电或留言给我们</p>
            </div>
            <div class="linkus-in border-r">
                <span>关于汇丰</span>
                <p>致电或留言给我们</p>
            </div>
        </div>
    </div>
    
    <footer>
        <div class="wrapper clearfix">
            <a href=""><span>保密及安全</span></a>
            <a href=""><span>使用条款</span></a>
            <a href=""><span>网站链接的规定</span></a>
            <a href=""><span>网络安全</span></a>
            <a href=""><span>消费者教育</span></a>
            <div>
                <a href=""><p>版权所有。汇丰银行（中国）有限公司2019.不得转载</p></a>
                <a href=""><p>沪ICP备15029387号</p></a>
                <a href=""><p>上海工商</p></a>
                <a href=""><p>沪公网安备31011502400282号</p></a>
            </div>
        </div>
    </footer>
</body>

</html>

*{
    margin: 0;
    padding: 0;
}
a{
    text-decoration: none;
    
}
.wrapper{
    margin: 0 auto;
    width: 1240px;
}
.clearfix::after{
    content: "";
    display: block;
    clear: both;

}
header{
    height: 30px;
    background-color: black;
}
header>.wrapper>div{
    float: left;
    margin-right: 10px;
    position: relative;
    color: #f9f9f9;
    line-height: 30px;
    font-size: 12px;
}
.triangle{
    display: none;
    position: absolute;
    margin-top: -5px;
    margin-left: calc(50% - 4px);
    height: 0;
    width: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 5px solid white;        
}
.block{
    display: block;
}
.wrapper>div:hover .triangle{
    display: block;
}
.shu{
    margin-top: 8px;
    width: 1px;
    height: 14px;
    background-color: #393939;
}
header div .right{
    float:right;
    margin-right: 0;
    width: 75px;
    height: 30px;
    text-align: center;
}
div .red-bgc{
    background-color: #db0011;
}
nav{
    height: 80px;
    border-bottom: 1px solid #dcdddb;
}
.nav-logo{
    margin: 0 auto;
    height: 100%;
    width: auto;
    background: url(./logo.png) no-repeat 50px 10px;
    padding-left: 262px;
}
.nav-logo div{
    float: left;
    margin-top: 10px;
    
    line-height: 30px;
   
}
.nav-logo div p{
    font-size: 23px;
    color: #979797;
}
.nav-logo div span{
    
    color: #979797;
}
.nav-logo .shu{
    margin: 22px 20px 0 22px ;
    height: 40px;
    background-color:#979797;
}
.banner{
    float: left;
    margin-top: -1px;
    width: 880px;
    height: 400px;
    background: url(./banner01.jpg) no-repeat;
    background-size: 930px 400px;
    border-top: 1px solid transparent;
}
.banner-box{
    margin:95px 45px;
    padding:25px;
    width: 450px;
    height: 150px;
    border-top: 1px solid transparent;
    background-color: white;

}
.banner-font{
    font-size: 35px;
    margin-bottom: 20px;
}
.banner-a{
    margin-top: 20px;
    width: 190px;
    height: 50px;
    background-color: #db0011;
    color: white;
    text-align: center;
    line-height: 50px;
}
aside{
    float: right;
    padding: 15px 20px;
    width: 270px;
    height: 370px;
    background-color: #3e505d;
}
aside .p1{
    font-size: 30px;
    margin-bottom: 20px;
    color: white;
}
aside .p2{    
    color: white;
    margin-bottom: 20px;
}
aside div{
    height: 1px;
    background-color: white;
    margin-bottom: 20px;
}
section{
    float: left;
    margin-top: 40px;
    margin-right: 20px;
    width: 398px;
    height: 398px;
    border: 1px solid #d7d8d6;
}
section img{
    width: 398px;  
}
section div{
    margin: 30px 15px;
    font-size: 25px;
}
section p{
    margin-left: 15px;
}
article .third{
    margin-right: 0;
}
.prolist{
    height: 170px;
    padding: 40px 0;
    padding-bottom: 0;
}
.prolist-in{
    float: left;
    margin-right: 25px;
    width: 285px;
}
.prolist-in div{
    font-size: 25px;
    margin-bottom: 44px;
}
.prolist-in p{
    color: #333333;
}
.top-top{
    color: #333333;
}
.linkus{
    
    padding-top: 25px;
    margin-top: 45px;
    height: 110px;
    background-color: #404040;
}
.linkus-in{
    float: left;
    margin-left: 19px;
    padding-left: 30px;
    width: 265px;
    height: 77px;
    border-right: 1px solid #979797;
    background: url(./pic02.png) no-repeat 0 4px;
}
.linkus-in span{
    color: white;
}
.linkus-in p{
    margin-top: 20px;
    font-size: 14px;
    color: white;
}
.linkus .border-r{
    border-right: none;
}
.linkus .margin-l{
    margin-left: 0;
}
footer{
    padding-top: 15px;
    height: 75px;
    background-color: black;

}

footer span{
    float: left;
    margin-right: 10px;
    color: white;
    font-size: 12px;
}
footer div{
    float: right;
    margin-right: 20px;
    text-align: right;
    font-size: 12px;
    color: white;
}
footer a p{
    color: white;
}