博客列表 >浮动定位与布局 - PHP培训九期线上班11.1

浮动定位与布局 - PHP培训九期线上班11.1

会上树的猪
会上树的猪原创
2019年11月02日 17:53:55727浏览


实例

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <title>浮动定位与布局</title>
    <style type="text/css">
        *{
            padding: 0;
            margin: 0;
            box-sizing:border-box;
        }
        li{
            list-style: none;
        }
        .table{
            border-top: 1px solid #ddd;
            border-right: 1px solid #ddd;
            overflow: hidden;
            display: inline-block;
        }
        .table>ul{
            float: left;
        }
        .table>ul:first-child>li{
            width: 100px;
        }
        .table>ul>li{
            width: 60px;
            height: 25px;
            line-height: 25px;
            text-align: center;
            border-bottom: 1px solid #ddd;
            border-left: 1px solid #ddd;
        }
        .table>ul>li:first-child{
            font-weight: bold;
        }
        .table>ul:first-child>li:nth-child(2){
            height: 75px;
            line-height: 75px;
        }
        .table>ul:first-child>li:nth-child(3){
            height: 50px;
            line-height: 50px;
        }


        /*登录框*/
        .dl{
            position: absolute;
            top: 50%;
            left: 50%;
            margin-top: -100px;
            margin-left:-75px;
            width: 200px;
            height: 150px;
            background: #abcdef;
        }
        /*圣杯布局*/
        .box1{
            margin-top: 100px;
            position: relative;
        }
        .left{
            position: absolute;
            left: 0;
            top:0;
            width: 200px;
            height: 100px;
            background: #abcdef;
        }
        .in{
            margin: 0 200px;
            height: 100px;
            background: red;
        }
        .right{
            position: absolute;
            right: 0;
            top:0;
            width: 200px;
            height: 100px;
            background: #cdcdcd;
        }
    </style>
</head>
<body>

<table>
    <caption>课程表</caption>
    <thead>
        <tr>
            <th>日期</th>
            <th>星期一</th>
            <th>星期二</th>
            <th>星期三</th>
            <th>星期四</th>
            <th>星期五</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td rowspan="3">8:00-12:00</td>
            <td>体育</td>
            <td>体育</td>
            <td>体育</td>
            <td>体育</td>
            <td>体育</td>
        </tr>
        <tr>
            <td>体育</td>
            <td>体育</td>
            <td>体育</td>
            <td>体育</td>
            <td>体育</td>
        </tr>
        <tr>
            <td>体育</td>
            <td>体育</td>
            <td>体育</td>
            <td>体育</td>
            <td>体育</td>
        </tr>
        <tr>
            <td rowspan="2">14:00-16:00</td>
            <td>体育</td>
            <td>体育</td>
            <td>体育</td>
            <td>体育</td>
            <td>体育</td>
        </tr>
        <tr>
            <td>体育</td>
            <td>体育</td>
            <td>体育</td>
            <td>体育</td>
            <td>体育</td>
        </tr>
    </tbody>
</table>

<div class="table">
    <ul>
        <li>日期</li>
        <li>8:00-12:00</li>
        <li>14:00-16:00</li>
    </ul>
    <ul>
        <li>星期一</li>
        <li>体育</li>
        <li>体育</li>
        <li>体育</li>
        <li>体育</li>
        <li>体育</li>
    </ul>
    <ul>
        <li>星期二</li>
        <li>体育</li>
        <li>体育</li>
        <li>体育</li>
        <li>体育</li>
        <li>体育</li>
    </ul>
    <ul>
        <li>星期三</li>
        <li>体育</li>
        <li>体育</li>
        <li>体育</li>
        <li>体育</li>
        <li>体育</li>
    </ul>
    <ul>
        <li>星期四</li>
        <li>体育</li>
        <li>体育</li>
        <li>体育</li>
        <li>体育</li>
        <li>体育</li>
    </ul>
    <ul>
        <li>星期五</li>
        <li>体育</li>
        <li>体育</li>
        <li>体育</li>
        <li>体育</li>
        <li>体育</li>
    </ul>
</div>

<div class="dl">
    <form action="login.php" method="post">
        <p>
            <label for="username">账号:</label>
            <input type="username" id="username" name="username" placeholder="用户名不能为空">
        </p>
        <p>
            <label for="password">密码:</label>
            <input type="password" id="password" name="password" placeholder="不能少于6位">
        </p>
    </form>
</div>
<!-- 圣杯布局 -->
<div class="box1">
    <div class="left"></div>
    <div class="in"></div>
    <div class="right"></div>
</div>
</body>
</html>

运行实例 »

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


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