前端学习第五天-CSDN博客

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

第一课：跟着老师完成网页

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: 170px;}
        .title h1{margin-left: 14px;font-size: 36px;color: #5096ff;}
        .second_title{text-align: center;}
    </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="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>
</body>