前端学习第五天

最新推荐文章于 2024-08-25 21:50:20 发布

Supdna

最新推荐文章于 2024-08-25 21:50:20 发布

阅读量24

点赞数

文章标签：学习 html 前端 css

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

版权

昨天最后一课的作业：按照ps图完成代码

style

* {
    margin: 0;
    padding: 0;
}

.clear {
    clear: both;
}

.fl {
    float: left;
}

.fr {
    float: right;
}

.box {
    width: 1920px;
    margin: auto;
}

.top {
    width: 1200px;
    height: 72px;
    margin: auto;
}

.logo {
    width: 126px;
    height: 72px;
}

.nav {
    width: 604px;
    height: 72px;
    text-align: center;
    margin-left: 159px;
}

.nav>li {
    list-style: none;
    width: 80px;
    height: 72px;
    line-height: 72px;
    float: left;
    margin-right: 23px;
}

.first {
    background-color: #5696ff;
    color: #fefeff;
}

.button {
    color: #3c3d46;
    line-height: 72px;
    font-size: 18px;
    font-family: 微软雅黑;
}

.main_pic {
    height: 600px;
    background: url(../img/main_pic.jpg) no-repeat center;
    position: relative;
}

.pic_pot1 {
    position: absolute;
    left: 935px;
    bottom: 29px;
}

.pic_pot2 {
    position: absolute;
    left: 970px;
    bottom: 29px;
}

.research {
    width: 1200px;
    height: 170px;
    margin: auto;
}

.intro {
    margin: auto;
    width: 327px;
    height: 82px;
}

.intro_top {
    margin: auto;
    width: 327px;
    height: 36px;
}

.intro_top>p {
    color: #3c3d46;
    line-height: 36px;
    font-size: 36px;
    float: left;
    margin-left: 14px;
    color: #5696ff;
    font-family: 微软雅黑;
}

.left,
.right {
    width: 79px;
    height: 7px;
    background-color: #666666;
    margin-top: 14px;
}

.intro_bottom>p {
    margin-top: 22px;
    font-size: 22px;
    color: #666666;
    text-align: center;
    font-family: 微软雅黑;
}

body

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>这是我的titile</title>
    <link rel="stylesheet" href="css/style.css"/>
</head>

<body>
    <div class="box">
        <div class="top">
            <div class="logo fl">
                <img src="img/logo.png" style="float: left;margin-top: 7px;">
                <img src="img/logo_name.png" style="margin-left: 8px; float: left;margin-top: 21px;">
                <div class="clear"></div>
            </div>
            <ul class="nav fl">
                <li class="first">
                    <p>首页</p>
                </li>
                <li>
                    <p>地区</p>
                </li>
                <li>
                    <p>特惠</p>
                </li>
                <li>
                    <p>资讯</p>
                </li>
                <li>
                    <p>游记</p>
                </li>
            </ul>
            <span class="button fr">登录 | 注册</span>
            <div class="clear"></div>
        </div>
        <div class="main_pic">
            <img class="pic_pot1" src="img/pot1.png">
            <img class="pic_pot2" src="img/pot2.png">
        </div>
        <div class="research">
        </div>
        <div class="intro">
            <div class="intro_top">
                <div class="left fl"></div>
                <p>地区旅游</p>
                <div class="right fr"></div>
                <div class="clear"></div>
            </div>
            <div class="intro_bottom">
                <p>从这开始有意思的地方</p>
            </div>
        </div>
    </div>
    
</body>

</html>