前端学习第九天-CSDN博客

本文链接：https://blog.csdn.net/qq_41550419/article/details/130051897

今天继续完成网页内容

style

<style>
        *{margin: 0;padding: 0;}
        .fl{float: left;}
        .fr{float: right;}
        .clear{clear: both;}
        .head{width: 1200px;margin: auto;font-size: 18px;color: #3c3d46;}
        li{list-style: none;}
        .nav li{float: left;width: 80px;height: 72px;line-height: 72px;margin-right: 24px;text-align: center;}
        .nav{margin-left: 159px;}
        .logo{margin-top: 7px;}
        .logo img{vertical-align: middle;}
        .act{background-color: #5096ff;color: #fff !important;}
        .login{line-height: 72px;}
        .head .line{margin: 0 10px;}
        .banner{height: 600px;background: url(img/main_pic.jpg) no-repeat center;position: relative;}
        .change{width: 53px;position: absolute;left: 50%;top: 552px;margin-left:-27px;}
        .cir{width: 16px;height: 16px;border-radius: 50%;}
        .circle1{background-color: #fcfcfd;}
        .circle2{border: #fcfcfd 2px solid;box-sizing: border-box;}
        .title .line{width: 78px;height: 6px;background-color: #666666;margin-top: 18px;}
        .area{width: 327px;margin: auto;margin-top: 60px;}
        .title h1{margin-left: 14px;font-size: 36px;color: #5096ff;}
        .second_title{text-align: center;font-size: 22px;color: #666666;margin-top: 24px;}
        .search{width: 350px;margin: auto;position: relative;margin-top: 70px;}
        .search input{width: 350px;height: 40px;border: #666666 1px solid;border-radius: 5px;}
        .search img{position: absolute;right: 13px;top: 8px;}
        .pic{width: 118px;height: 373px;float: left;margin-right: 3px;}
        .areapic_list{width: 1202px;margin: auto;margin-top: 55px;}
        .denmark{width: 596px;background: url(img/denmark.jpg);}
        .sichuan{background: url(img/sichuan.jpg);}
        .dali{background: url(img/dali.jpg);}
        .japan{background: url(img/japan.jpg);}
        .italy{background: url(img/italy.jpg);}
        .france{background: url(img/france.jpg);margin-right: 0;}
        .shadow{height: 303px;background-color: rgba(51,51,51,0.5);padding-left: 30px;padding-top: 70px;}
        .shadow p{font-size: 28px;color: #fcfcfd;line-height: 30px;}
        .more{width: 160px;height: 54px;border: #5096ff 2px solid;border-radius: 5px;font-size: 26px;color: #5096ff;background: none;text-align: center;line-height: 54px;margin: auto;margin-top: 72px;}

    </style>

body

<body>
    <div class="wrap">
        <!-- 头部导航 -->
        <div class="head">
            <div class="logo fl">
                <img src="img/logo.png">
                <img src="img/logo_name.png">
            </div>
            <ul class="nav fl">
                <li class="act">首页</li>
                <li>地区</li>
                <li>特惠</li>
                <li>资讯</li>
                <li>游记</li>
                <div class="clear"></div>
            </ul>
            <div class="login fr">
                <span>登录</span>
                <span class="line">|</span>
                <span>注册</span>
            </div>
            <div class="clear"></div>
        </div>
        <!-- banner图 -->
        <div class="banner">
            <div class="change">
                <div class="circle1 cir fl"></div>
                <div class="circle2 cir fr"></div>
                <div class="clear"></div>
            </div>
        </div>
        <!-- 搜索框 -->
        <div class="search">
            <input placeholder="开启你的旅程吧！">
            <img src="img/search_icon.png">
        </div>
        <!-- 地区旅游 -->
        <div class="area">
            <div class="title">
                <div class="line fl"></div>
                <h1 class="fl">地区旅游</h1>
                <div class="line fr"></div>
                <div class="clear"></div>
            </div>
            <div class="second_title">从这开始有意思的地方</div>
        </div>
        <!-- 图片列表 -->
        <div class="areapic_list">
            <div class="pic sichuan">
                <div class="shadow">
                    <p>四<br>川</p>
                </div>
            </div>
            <div class="pic dali"></div>
            <div class="pic denmark"></div>
            <div class="pic japan"></div>
            <div class="pic italy"></div>
            <div class="pic france"></div>
            <div class="clear"></div>
        </div>
        <!-- 按钮 -->
        <div class="more">More></div>
        
    </div>
</body>