前端学习的第十天

最新推荐文章于 2024-08-26 16:38:21 发布

Supdna

最新推荐文章于 2024-08-26 16:38:21 发布

阅读量29

点赞数

文章标签：前端学习 css html css3

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

版权

今天第二课15

继续完成相关内容

style

    <style>
        *{margin: 0;padding: 0;}
        .fl{float: left;}
        .fr{float: right;}
        .clear{clear: both;}
        body{background-color: #f3f3f3;}
        .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;}
        .areapic_list .shadow{height: 303px;background-color: rgba(51,51,51,0.5);padding-left: 30px;padding-top: 70px;}
        .areapic_list .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;}
        .tour_news{width: 1200px;background: url(img/news_bg.jpg);height: 745px;margin: auto;margin-top: 402px;position: relative;}
        .tour_news img{border: #f3f3f3 41px solid;position: absolute;right: 0;top: -176px;}
        .rule .line{width: 132px;height: 7px;background-color: #666666;margin-left: auto;margin-bottom: 28px;}
        .w1200{width: 1200px;margin: auto;}
        .rule{margin-top: 50px;}
        .rule p{width: 561px;font-size: 24px;line-height: 48px;color: #333333;text-indent: 2em;}
        .rule h3{text-align: right;font-size: 30px;color: #333333;font-weight: 500;}
        .art_tit{margin-left: 158px;}
        .main_art{width: 730px;height: 965px;background: url(img/art_bg.jpg);}
        .main_art .shadow{width: 501px;height: 965px;background: rgba(0,0,0,0.3);}
        .photo{width: 1164px;height: 472px;box-shadow: #979797 0px 0px 20px 5px;padding:26px 18px 0 18px;}
    </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 class="tour_news">
            <img src="img/pic.jpg">
        </div>

        <div class="rule w1200">
            <div class="fl art_tit">
                <div class="line"></div>
                <h3>墨西哥关于<br>外国公民入境的有关规定</h3>
            </div>
            <div class="fr">
                <p style="text-indent: 0em;">墨西哥对外国公民入境有严格的规定。为便于中国公民准备入境材料，驻墨西哥使馆将墨移民
                    局提供的部分规定摘译整理如下，供来墨人员参考（以下规定最终解释权属墨方有关部门）：
                </p>
                <p>一、墨西哥《移民法》规定，外国公民入境墨西哥应满足如下要求：</p>
                <p>1、向墨西哥移民官员出示如下证件：</p>
                <p>（1）护照或现行国际法认可有效的身份和旅行证件；</p>
                <p>（2）合法有效签证（如需）......</p>
            </div>
            <div class="clear"></div>
        </div>
       
        <!-- 游记分享 -->
        <div class="w1200">
            <div class="main_art fl">
                <div class="shadow">
                    <p>云南&nbsp;&nbsp; |&nbsp;&nbsp; 大理&nbsp;&nbsp; |&nbsp;&nbsp; 洱海</p>
                </div>
            </div>
            <div class="art_list fr"></div>
            <div class="clear"></div>
        </div>

        <!-- 精选照片 -->
        <div class="w1200 photo">
            <div class="photo_tit"></div>
            <div class="photo_list"></div>
        </div>
    </div>
</body>