Python全栈最全学习之路-WEB前端练习（一）_python web前端练习-优快云博客

本文通过实战案例介绍了HTML和CSS的基础应用，包括表单元素、布局调整及交互样式设计等，帮助初学者快速掌握前端开发的基本技能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

练习（一）

一、HTML练习

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML作业</title>
</head>
<body>
<div>
    <h2>请注册</h2>
    <p>
        <span>已有账号？</span>
        <a href="#">登录</a>
    </p>
    <form action="#">
        <label for="user">用户名</label>
        <input type="text" placeholder="请输入用户名" id="user" name="user"><br>
        <label for="phone">手机号</label>
        <select name="prePhone" id="prePhone">
            <option value="+86" selected>+86</option>
        </select>
        <input type="text" placeholder="请输入手机号" name="phone" id="phone"><br>
        <label for="pwd">密&emsp;码</label>
        <input type="password" placeholder="请设置登录密码" name="pwd" id="pwd"><br>
        <label for="code">验证码</label>
        <input type="text" placeholder="请输入验证码" name="code" id="code">
        <input type="button" value="获取验证码"><br>
        <input type="checkbox" name="isAgree" id="isAgree">
        <label for="isAgree">阅读并接受协议</label><br>
        <input type="submit" value="注册">
    </form>
</div>
</body>
</html>

在这里插入图片描述
总结：标题、链接、输入框、下拉框、用户体验、按键、换行符

二、CSS1

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS第一次作业</title>
    <style>
        div{
            width: 400px;
            height: 470px;
            border: 1px solid grey;
            border-radius: 12px; //边框弧度 50%就成了圆
            margin: 50px auto;
            padding: 0px 30px 0px 20px; // 内边距 上右下左
        }
        span{
            font-size: 14px;
            color: grey;
        }
        a{
            font-size: 14px;
        }
        .ipt1{
            width: 341px;
            height: 40px;
            border: 1px solid grey;
            border-radius: 6px;
        }
        .ipt2{
            margin: 20px 0px;
            width: 274px;
            height: 40px;
            border: 1px solid grey;
            border-radius: 6px;
        }
        .cell{
            height: 40px;
            width: 60px;
            border-radius: 6px;
        }
        .cod{
            margin: 20px 0px;
            height: 40px;
            width: 220px;
            border: 1px solid grey;
            border-radius: 6px;
        }
        .btn1{
            width: 115px;
            height: 40px;
            border: 1px solid grey;
            border-radius: 6px;
            background: url("images/yanzhengma1.jpg") center/115px 40px; // 背景是为图片，大小居中
            vertical-align: middle; // 调节位置到中间
        }
        .lab1{
            font-size: 14px;
            color: grey;
        }
        .btn2{
            width: 400px;
            height: 40px;
            margin: 20px 0px;
            background: #a2ddff;
            border: 1px solid lightgrey;
            border-radius: 6px;
            color: white;
            font-size: 16px;
        }
    </style>
</head>
<body>
<div>
    <h2>请注册</h2>
    <p>
        <span>已有账号？</span>
        <a href="#">登录</a>
    </p>
    <form action="#">
        <label for="user">用户名</label>
        <input type="text" placeholder="请输入用户名" id="user" name="user" class="ipt1"><br>
        <label for="phone">手机号</label>
        <select name="prePhone" id="prePhone" class="cell">
            <option value="+86" selected>+86</option>
        </select>
        <input type="text" placeholder="请输入手机号" name="phone" id="phone" class="ipt2"><br>
        <label for="pwd">密&emsp;码</label>
        <input type="password" placeholder="请设置登录密码" name="pwd" id="pwd" class="ipt1"><br>
        <label for="code">验证码</label>
        <input type="text" placeholder="请输入验证码" name="code" id="code" class="cod">
        <input type="button" class="btn1"><br>
        <input type="checkbox" name="isAgree" id="isAgree" style="vertical-align: middle">
        <label for="isAgree" class="lab1">阅读并接受协议</label><br>
        <input type="submit" value="注册" class="btn2">
    </form>
</div>
</body>
</html>

在这里插入图片描述
总结：
1、标题、链接、输入框、下拉框、用户体验、按键、换行符
2、外边距（margin）
3、微调width、height
4、边框角度
5、对齐方式

三、 CSS2、

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS第二次作业</title>
    <link rel="stylesheet" href="css/reset.css">
    <style>
        div{
            width: 600px;
            height: 400px;
            border: 1px solid grey;
            margin: 100px auto;
            position: relative;
        }
        .pic{
            position: absolute;
            left: 0;
            top: 0;
        }
        .pic img{
            width: 600px;
            height: 400px;
        }
        .jt li:hover{
            background: floralwhite;
        }
        .left{
            width: 30px;
            height: 30px;
            left: 0;
            text-align: center;
            line-height: 30px;
            background: grey;
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            cursor: pointer;
        }
        .right{
            width: 30px;
            height: 30px;
            right: 0;
            text-align: center;
            line-height: 30px;
            background: grey;
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            cursor: pointer;
        }
        .tab{
            position: absolute;
            bottom: 10px;
            left: 50%;
            transform: translateX(-50%);
        }
        .tab li{
            width: 10px;
            height: 10px;
            border: 1px solid grey;
            border-radius: 50%;
            float: left;
            margin: 3px;
            background: grey;
            cursor: pointer;
        }
        .tab li:hover{
            background: white;
        }
    </style>
</head>
<body>
<div class="slide">
    <ul class="pic">
        <li><img src="images/oneplus1.jpg" alt="图片出错了"></li>
    </ul>
    <ul class="jt">
        <li class="left">&lt;</li>
        <li class="right">&gt;</li>
    </ul>
    <ul class="tab">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</div>
</body>
</html>