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>

在这里插入图片描述
总结
1、箭头
2、箭头位置
3、小圆圈
4、小圆圈位置的实现
5、相对位置
6、划入、划出效果

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值