博客列表 >3月23日作业

3月23日作业

唔良人
唔良人原创
2018年03月24日 10:10:38596浏览

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS控制元素对齐的技巧</title>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }
    body {
        margin-left: 20px;
    }
    .box1 {
        width: 200px;
        height: 200px;
        background-color: #f40;
        text-align: center;
    }

    .box1 a {
        line-height: 200px;
        color: #fff;
    }

    .box2 {
        width: 200px;
        height: 200px;
        background-color: #0f4;
        text-align: center;
        display: table-cell;
        vertical-align: middle;
    }

    .box3 {
        width: 200px;
        height: 200px;
        background-color: #f04;
        display: table-cell;
        vertical-align: middle;
    }

    .box3 .child {
        width: 100px;
        height: 100px;
        background-color: #4f0;
        margin: 0 auto;
    }

    .box4 {
        width: 200px;
        height: 200px;
        background-color: #40f;
        text-align: center;
        display: table-cell;
        vertical-align: bottom;
    }

    .box4 a {
        color: #fff;
        text-decoration: none;
    }
</style>
<body>
<div class="box1">
    <a href="">我是单行文本</a>
</div>
<br>
<div class="box2">
    <a href="">我是多行文本1</a><br>
    <a href="">我是多行文本2</a><br>
    <a href="">我是多行文本3</a>
</div>
<br>
<div class="box3">
    <div class="child"></div>
</div>
<br>
<div class="box4">
    <ul>
        <il><a href="">1</a></il>
        <il><a href="">2</a></il>
        <il><a href="">3</a></il>
        <il><a href="">4</a></il>
        <il><a href="">5</a></il>
    </ul>
</div>
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

手抄作业

1521857366037.jpg

声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议