master

分支 (1)

管理

管理

master

frontend_teaching_project
/
网页布局练习.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>布局练习</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        body{
            background-color: aliceblue;
        }
        .logo{
            width: 1200px;
            margin: auto;
        }
        .img_logo{
            width: 800px;
            height: 220px;
            margin: auto;
            float: right;
        }
        h1{
            display:block;
            padding-top: 60px;
            padding-bottom: 80px;
            font: bold 5em "华文彩云";
            color: #268dcd;
        }
        span{
            margin:0 53px;
            font:2em "华文彩云"
        }
        .top{
            width: 1200px;
            height: 50px;
            background-color:blanchedalmond;
            margin: auto;
            padding-top: 8px;
        }
        .main{
            width: 1200px;
            height: 550px;
            margin: auto;
        }
        .left{
            width: 200px;
            height: 100%;
            background-color: blue;
            float: left;
        }
        .center{
            width: 780px;
            height: 100%;
            background-color:cadetblue;
            float: left;
            margin: 0 10px;
        }
        .right{
            width: 200px;
            height: 100%;
            background-color:burlywood;
            float: left;
        }
        .bottom{
            width: 1200px;
            height: 30px;
            margin: auto;
            background-color: yellow;
        }
        .d1{
            width: 100%;
            height: 250px;
        }
        .d1 div{
            width: 220px;
            height: 40px;
            float: left;
            margin: 0 18px;
        }
        .d1 img{
            width: 220px;
            height: 140px;
        }
        .d1 span{
            font: 20px "宋体";
            margin: 0 60px;
        }
        .right1{
            height: 260px;
            background: tomato;
            margin-bottom: 30px;
        }
        .right2{
            height: 260px;
            background:thistle;
        }
        .bottom a{
            display: inline-block;
            width: 500px;
        }
        a{
            text-decoration:none
        }
    </style>
</head>
<body>
    <header class="logo">
        <img src="img/logo.jpg" alt="logo" class="img_logo" >
        <h1>
            颓颓电影
        </h1>
    </header>>
    <nav class="top">
        <span>电影</span>
        <span>电视剧</span>
        <span>排行榜</span>
        <span>分类</span>
        <span>影评</span>
        <span>年度榜单</span>
    </nav>>
    <main class="main">
            <div class="left">
                <li> 分类
                    <ul> 按地区
                        <li>欧美</li>
                        <li>日韩</li>
                        <li>港台</li>
                        <li>内地</li>
                    </ul>
                </li>
            </div>

            <div class="center">
                <div class="d1">
                    <div >
                        <img src="/img/1.jpg">
                        <span>评分：8.0</span> <br>
                        <span>大话西游</span> <br>
                    </div>
                    <div >
                        <img src="/img/1.jpg">
                        <span>AAA</span> <br>
                        <span>AAA</span> <br>
                    </div>
                    <div >
                        <img src="/img/1.jpg">
                        <span>AAA</span> <br>
                        <span>AAA</span> <br>
                    </div>
                </div>
                <div class="d1">
                    <div >
                        <img src="/img/1.jpg">
                        <span>AAA</span> <br>
                        <span>AAA</span> <br>
                    </div>
                    <div >
                        <img src="/img/1.jpg">
                        <span>AAA</span> <br>
                        <span>AAA</span> <br>
                    </div>
                    <div >
                        <img src="/img/1.jpg">
                        <span>AAA</span> <br>
                        <span>AAA</span> <br>
                    </div>
                </div>
            </div>

            <div class="right">
               <div class="right1">
                颓颓电影
               </div>
               <div class="right2">
                颓颓电影
                </div>
            </div>
    </main>>
    <footer class="bottom">
            <a href="#" id="bottom">回到顶部</a>
            <a href="mailto :123@bgg.com">联系我们</a>
    </footer>>
</body>
</html>