【生产实习】web方向实训练习day01

最新推荐文章于 2024-06-20 05:06:06 发布

AC它真的很香

最新推荐文章于 2024-06-20 05:06:06 发布

阅读量90

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/Erin_jwx/article/details/119877189

版权

前端专栏收录该内容

25 篇文章 0 订阅

订阅专栏

练习一表格练习
要求画出下表
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        table{
            border-collapse: collapse;
        }
        
    </style>
</head>
<body>
    <table border="1px">
        <thead>

        </thead>
        <tbody>
            <tr>
                <td></td>
                <td>星期一</td>
                <td>星期二</td>
                <td>星期三</td>
                <td>星期四</td>
                <td>星期五</td>
            </tr>
            <tr>
                <td>第一课</td>
                <td rowspan="2"></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>
                <td></td>
            </tr>
            <tr>
                <td>第四课</td>
                <td colspan="5"></td>
            </tr>
        </tbody>
    </table>
    
</body>
</html>

练习二表单练习
画出以下用户注册信息表
在这里插入图片描述
吐槽：这个老师不会这个项目中不怎么用的都不教吧，感觉多讲一点选择器会更好修改样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        table{
            border: 1px solid black;
            
            width: 400px;
            border-collapse: collapse;
            text-align: center;
        }
        td{
            width: 300px;
            height: 30px;
        }
        tbody tr td:not(:nth-child(2)){
            width: 100px;
        }
    </style>
</head>
<body>
    <table border="1px">
        <thead></thead>
        <tbody>
            <tr>
                <td colspan="3">欢迎注册</td>
            </tr>
            <tr>
                <td>用户名：</td>
                <td>
                    <input type="text">
                </td>
                <td></td>
            </tr>
            <tr>
                <td>密码：</td>
                <td><input type="password"></td>
                <td></td>
            </tr>
            <tr>
                <td>确认密码：</td>
                <td><input type="password"></td>
                <td></td>
            </tr>
            <tr>
                <td>性别：</td>
                <td>
                    <input type="radio" name="sex">男
                    <input type="radio" name="sex">女
                </td>
                <td></td>
            </tr>
            <tr>
                <td>地址：</td>
                <td>
                    <select name="" id="">
                        <option value="">请选择</option>
                    </select>
                    <select name="" id="">
                        <option value="">请选择</option>
                    </select>
                    <select name="" id="">
                        <option value="">请选择</option>
                    </select>
                </td>
                <td></td>
            </tr>
            <tr>
                <td>中国0086：</td>
                <td>
                    <input type="text">
                </td>
                <td></td>
            </tr>
            <tr>
                <td>手机验证码</td>
                <td><input type="text"></td>
                <td></td>
            </tr>
            <tr>
                <td colspan="3">
                    <input type="checkbox">同意并阅读
                </td>
            </tr>
            <tr>
                <td colspan="3">
                    <input type="submit">
                </td>
            </tr>
        </tbody>
    </table>
</body>
</html>

练习三植物大战僵尸
画出下图
在这里插入图片描述
吐槽：不知道是不是我理解不对，老师说这个有点难，但是图片不是本来就横着排列的吗？？完全用不到浮动的知识点？

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>植物大战僵尸</title>
    <style>
        #root{
            background-color: rgb(168, 236, 49);
            padding: 50px;
        }
        img{
            width: 150px;
        }
    </style>
</head>
<body>
    <div id="root">
        <img src="img/zwdzjs-1.png" alt="">
        <img src="img/zwdzjs-7.png" alt="">
        <img src="img/zwdzjs-4.png" alt="">
        <img src="img/zwdzjs-2.png" alt="">
        <img src="img/zwdzjs-3.png" alt="">
        <img src="img/zwdzjs-5.png" alt="">
        <img src="img/zwdzjs-6.png" alt="">
    </div>
    
</body>
</html>

AC它真的很香

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【生产实习】web方向实训练习day01

练习一表格练习要求画出下表<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
复制链接

扫一扫

专栏目录