WEB学习笔记12.9 – 内补白及制作爱奇艺界面

内补白:

head:

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
    .wrap{
        padding: 10px 30px 50px 100px;
        border: 2px solid #446644;
    }
    .content{
        padding: 10px;
    }
    h1{
        border-bottom: 8px double #007700;
        padding-bottom: 10px;
        text-align: center;
    }
    p{
        padding: 0 20px 10px;
    }
</style>

body:

<div class="wrap">
        <div class="content">
            <h1>内补白</h1>
            <p>内补白的区域是从盒子边框到实际内容展示部分的区域,内补白也常用于对页面布局,使用内补白也可以控制不同盒子间内容的间隔。</p>
        </div>
    </div>

爱奇艺界面:

head:

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
    table{
        margin: 200px auto;
    }
    table img{
        width: 186px;
        height: 278px;
        opacity: 0.8;
        border-radius: 5px;
    }
    table img:hover{
        opacity: 1;
    }
    table td{
        padding: 0 10px;
    }
    body{
        background-color: black;
    }
    span{
        background-color: #16e07a;
        margin-left: 50px;
        border-radius: 2px;
        color: cornsilk;
    }
    .title{
        font-size: 16px;
        font-weight: bolder;
        color: rgb(255, 255, 255);
    }
    .yy{
        color: #999999;
        font-size: 14px;
    }
    a{
        text-decoration: none;
    }
</style>

body:

<table>
    <tr>
        <td><a href=""><img src="img/1.webp"></a></td>
        <td><a href=""><img src="img/2.webp"></a></td>
        <td><a href=""><img src="img/3.webp"></a></td>
        <td><a href=""><img src="img/4.webp"></a></td>
        <td><a href=""><img src="img/5.webp"></a></td>
        <td><a href=""><img src="img/6.webp"></a></td>
    </tr>
    <tr>
        <td><a href="" class="title">人鱼之海牢物怪</a></td>
        <td><a href="" class="title">流浪猫鲍勃</a></td>
        <td><a href="" class="title">开拍吧电影</a></td>
        <td><a href="" class="title">神都洛阳</a></td>
        <td><a href="" class="title">陪你很久很久</a></td>
        <td><a href="" class="title">卿卿我心</a></td>
    </tr>
    <tr>
        <td><a href="" class="yy">9.1w人预约<span>预约</span></a></td>
        <td><a href="" class="yy">7.5w人预约<span>预约</span></a></td>
        <td><a href="" class="yy">13.9w人预约<span>预约</span></a></td>
        <td><a href="" class="yy">8.7w人预约<span>预约</span></a></td>
        <td><a href="" class="yy">3.8w人预约<span>预约</span></a></td>
        <td><a href="" class="yy">34.6w人预约<span>预约</span></a></td>
    </tr>
</table>

WEB学习笔记12.9 - 内补白及制作爱奇艺界面

给TA打赏
共{{data.count}}人
人已打赏
编程专区

WEB学习笔记12.8 - 盒子模型及外补白

2021-12-8 11:51:00

编程专区

WEB学习笔记12.11 - 相对 绝对 固定及堆叠

2021-12-11 11:48:00

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
今日签到
有新私信 私信列表
搜索