博客列表 >1101作业

1101作业

無雙ヾ
無雙ヾ原创
2019年11月03日 20:18:54663浏览

1:制作一张商品信息表,内容自定,要求用到行与列的合并

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>制作一张商品信息表,内容自定,要求用到行与列的合并</title>
    <style>
        table{
            border: 1px solid black;
            box-sizing: border-box;
            width: 600px;
            margin: 20px auto;

            border-collapse: collapse;
        }
        th,td{
            border: 1px solid black;
            line-height: 50px;
            text-align: center;
            padding: 5px;
        }
        table caption{
            margin-bottom: 10px;
        }
        table thead>tr:first-of-type{
            background:linear-gradient(greenyellow,yellow);
        }
        tbody tr:nth-of-type(odd){
            background:linear-gradient(orangered,lightgoldenrodyellow);
        }
        tbody tr:nth-of-type(5)>td:first-of-type{
            background:linear-gradient(lavender,aqua);
        }
        tbody tr:nth-of-type(5)>td:nth-of-type(2){
            color: white;
            background:linear-gradient(lavender,aqua);
        }
        tbody tr:nth-of-type(6)>td:nth-child(1){
            background:linear-gradient(lightgray,fuchsia);
            color: white;
        }

    </style>
</head>
<body>

    <table>

        <caption>京东双十一促销</caption>
        <thead>
        <tr>
            <th>序号</th>
            <th>商品名称</th>
            <th>数量</th>
            <th>促销价</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td>1</td>
            <td>iphone11</td>
            <td>100</td>
            <td>5599</td>
        </tr>
        <tr>
            <td>2</td>
            <td>华为note30</td>
            <td>100</td>
            <td>3599</td>
        </tr>
        <tr>
            <td>3</td>
            <td>vivo223</td>
            <td>100</td>
            <td>2599</td>
        </tr>
        <tr>
            <td>4</td>
            <td>oppo213</td>
            <td>100</td>
            <td>1599</td>
        </tr>

        <tr>
            <td rowspan="2">系统</td>
            <td>IOS</td>
            <td>100</td>
            <td>559900</td>

        </tr>
        <tr>

            <td>ANDROID</td>
            <td>300</td>
            <td>779700</td>

        </tr>
        <tr>
            <td colspan="2">合计</td>
            <td>400</td>
            <td>1339600</td>
        </tr>
        </tbody>
    </table>
</body>
</html>

运行实例 »

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

360截图20191103174049707.jpg

2:使用<div><span><p><ul>...等标签来制作一张课程表

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>使用<div><span><p><ul>...等标签来制作一张课程表</title>
    <style>
        .table{
            display: table;
            margin: auto;
            box-sizing: border-box;
            width: 500px;
        }
        .caption{
            display: table-caption;
            text-align: center;
            margin-bottom: 10px;
        }
        .thead{
            display: table-header-group;
            font-size: 1.2rem;
            color: lightcoral;
            background: linear-gradient(lightcyan,yellow);
        }
        .tfoot{
            display: table-footer-group;
        }
        .tbody{
            display: table-row-group;
        }
        ul{
            display: table-row;

        }
        ul>li{
            display: table-cell;
            border: 1px solid black;
            padding: 10px;
        }
        .tfoot ul:first-of-type{
            background: linear-gradient(lightgrey,crimson);
            color: white;
        }
    </style>
</head>
<body>
    <div class="table">
        <span class="caption">课程表</span>
        <div class="thead">
            <ul>
                <li>序号</li>
                <li>课程</li>
                <li>描述</li>
            </ul>
        </div>
        <div class="tbody">
            <ul>
                <li>1</li>
                <li>前端</li>
                <li>HTML+css</li>
            </ul>
            <ul>
                <li>2</li>
                <li>后端</li>
                <li>PHP+mysql</li>
            </ul>
            <ul>
                <li>3</li>
                <li>框架</li>
                <li>laravel</li>
            </ul>
        </div>
        <div class="tfoot">
            <ul>
                <li>备注</li>
                <li>努力学习</li>
                <li>才能步入知识殿堂</li>
            </ul>
        </div>
    </div>
</body>
</html>

运行实例 »

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

360截图20191103183341098.jpg

3:使用绝对定位,实现用户登录框在页面中始终居中显示 

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>使用绝对定位,实现用户登录框在页面中始终居中显示 </title>
    <style>
        body{
            height: 2000px;
        }
        .login{
            width: 300px;
            margin:0px  auto;
        }
        .form{
            position: fixed;
            top:100px;
        }
    </style>
</head>
<body>
    <div class="login">
        <div class="form">
        <p>
            <label for="name">账号:</label>
            <input type="text" name="name" id="name">
        </p>
        <p>
            <label for="pwd">密码:</label>
            <input type="password" name="pwd" id="pwd">
        </p>
        <p>
            <input type="submit" value="登录">
        </p>
        </div>
    </div>

</body>
</html>

运行实例 »

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

4:模仿课堂案例, 实现圣杯布局,并写出完整流程与布局思路

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>模仿课堂案例, 实现圣杯布局,并写出完整流程与布局思路</title>
    <style>
        header,footer{
            height: 100px;
            background-color: lightgray;
        }
        main{
            border: 2px solid red;
            box-sizing: border-box;
            padding-left: 200px;
            padding-right: 200px;
            overflow: auto;
        }
        main>article{
            box-sizing: border-box;
            min-height: 500px;
            width: 100%;
            background-color: lawngreen;
        }
        main>aside{
            width: 200px;
            box-sizing: border-box;
            min-height: 500px;

        }
        main > aside:first-of-type {
            background-color: red;
        }
        main > aside:last-of-type {
            background-color: lightcyan;
        }
        main>article,
        main > aside:first-of-type,
        main > aside:last-of-type{
            float: left;
        }
      aside:first-of-type{
            margin-left:-100%;
            position: relative;
            left:-200px;
        }
        aside:last-of-type{
            margin-left: -200px;
            position: relative;
            left: 200px;
        }
    </style>
</head>
<body>
    <header>
    头部
    </header>
    <main>

        <article>
            内容
        </article>
        <aside>

            左侧
        </aside>
        <aside>
            右侧
        </aside>
    </main>
    <footer>
    底部
    </footer>
</body>
</html>

运行实例 »

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

360截图20191103201455119.jpg

思路:是将主体内容部分固定,利用左右边内边距来为左右区域留出位置。

步骤1:写出主体内容区,并给左右边距设置padding值。2:利用相对定位进行位移。达到圣杯布局效果

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