css练习 登录网页

最新推荐文章于 2024-07-24 13:45:34 发布
最新推荐文章于 2024-07-24 13:45:34 发布
阅读量116 收藏
点赞数 1
文章标签： css 前端 css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/SakitamaX/article/details/140464194
版权

练习1：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>1</title>
    <style>
        body{
            background: url("./文理教务系统背景.jpg")  center no-repeat fixed;
            }
        .box{
        display: grid;
        grid-template-columns: repeat(6,1fr);
        height: 750px;
        grid-template-rows:repeat(5,1fr);
        grid-gap: 3px;
        }

        .box>div:nth-child(1){
             grid-column: 1/7;
        }
        
        .box>div:nth-child(4){
        background-color:white;
        height: 400px;
        grid-area:2/3/5/5;
        border-radius:4%;
        }

        .box>div:nth-child(15){
            grid-column:1/7;
        }

        .box1{
            color: white;
            font-size:40px;
            text-align:center;
            margin: auto;
        }
        .table{
            margin-top:7%;

        }
        .table1{
            width: 60px;
            height: 12%;
           text-align:center;
           font-size: 16px;
        }
        .table2{
            width: 100%;
            height: 30px;
        }
        .table3{
            width: 100%;
            height:30px;
        }
        .table4{
            width: 100%;
            height:30px;
        }
        .table5{
            width: 100px;
            height:30px;
            color: darkgrey;
        }
        .table51{
            color:darkgray;
            font-size: 15%;
        }
        .table6{
            height: 25%;
            color: orangered;
            font-size: 11px;
            text-align:right ;
        }
        .table7{
            height: 100%;
            background-color:cornflowerblue;
            color: white;
            text-align: center;

        }
        .div1{
            color: red;
            text-align: center;
        }
        .div2{
            margin-left:33%;
        }
        .div2,.div3,.div4{
            color: whiteb;
            font-size: 17px;
            float: left;
            color: white;
        }
        .div3{
            color: blue;
        }
    </style>
</head>
<body>
    <div class="box">
    <div class="box1">KINGOSOFT高校教务管理系统</div>
    <div></div>
    <div></div>
    <div ><table class="table" width="400px" height="340px"  cellspacing=0.1px  align="center">
        <tr>
            <td  class="table1">账号登录</td>
            <td  class="table1">扫码登录</td>
        </tr>
        <tr>
            <td colspan="2">
                <select class="table2" name="bw" id="">
                    <option value="">学生</option>
                    <option value="">教师</option>
                </select>
            </td>
            <!-- <td></td> -->
        </tr>
        <tr>
            <td colspan="2"><input class="table3" type="text"  placeholder="请输入账号" reguired ></td>
            <!-- <td ></td> -->
        </tr>
        <tr>
            <td colspan="2"><input class="table4" type="password" placeholder="请输入密码" ></td>
            <!-- <td></td> -->
        </tr>
        <tr>
            <td><input type="text" class="table5" placeholder="验证码" > </td>
            <td><span class="table51">正常情况 免验证码</span></td>
        </tr>
        <tr>
            <td colspan="2"><span class="table6">忘记密码？</span></td>
            <!-- <td></td> -->
        </tr>
        <tr>
            <td colspan="2"><div class="table7">登录</div></td>
            <!-- <td></td> -->
        </tr>

    </table></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div>
        <div class="div1">运行环境指南</div> 
        <div class="div2">Copyright 2000-2024</div> 
        <div class="div3">青果软件集团有限公司</div>
        <div class="div4">All Rights Reserved</div>
    </div>
    </div>
</body>
</html>

运行结果：

练习2：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>div两栏布局</title>
    <style>
    div{
        /* border:1px solid red; */
        height: 150px;
        }

        .div1{
        padding-top: 6%;
        padding-left: 15%;
        height: 100px;
        }

        .div2{
        height: 300px;
        width: 70%;
        margin: auto;
        }

        .div3{
        height:200px;
        /* background-color:aqua;*/
        }
        .div21,.div22{
        width:49%;
        height: 300px;
        float: left;
        margin:2px;
        
        }
        .div31,.div32{
         width: 49%;
        float: left;
        height: 196px;
        margin: 3px;
        color:darkgrey;
        text-align: center;
        padding-top: 10px;
        }

        .table{
            height: 310px;
        }
        .table1{

            height: 10%;
            font-size:24px;
            text-align:left;
            margin: auto;
        }
        .table2,.table3{
            width: 60%;
            height: 40%;
        }
        .td1,.td2{
            height: 20%;
        }
        .td2{
             padding-left: 5%;
        }
        .table3{
            width: 62%;
        }
        .table4{
            height: 20%;
        }
        .table41{
            width: 30%;
            height: 30%;
        }
        .table42{
            font-size: 20px;
            width: 40%;
            height: 40%;
        }
        .td3{
            width: 55%;
            height: 30px;
        }
        .table5{
            width: 50%;
            background-color:cornflowerblue;
            color: white;
            text-align: center;

        }
    </style>
</head>
<body>
    <div class="div1"> <img src="./QQ截图2024071019593加1.png" alt=""></div>
    <div class="div2">
    <div class="div21"><img src="./211.png"></div>
    <div class="div22">
        <table class="table" width="400px" height="340px"  cellspacing=0.1px  align="center">
            <tr>
                <td class="table1" colspan="2">用户登录</td>
                <!-- <td></td> -->
            </tr>
            <tr>
                <td colspan="2" class="td1">用户名：<input class="table2" type="text" reguired ></td>
                <!-- <td></td> -->
            </tr>
            <tr>
                <td class="td2" colspan="2">密码：<input class="table3" type="password"></td>
                <!-- <td></td> -->
            </tr>
            <tr class="table4">
                <td >验证码：<input class="table41" type="text" reguired ></td>
                <td ><input class="table42" type="text"  placeholder="2vxb" readonly> </td>
            </tr>
            <tr>
                <td class="td3"></td>
                <td class="table5">登录</td>
            </tr>
        </table>
    </div>
    </div>
    <div class="div3">
        <div class="div31">湖南强智科技有限公司版权所有</div>
        <div class="div32">在线人数:11人</div>
    </div>
</body>
</html>

运行结果：

练习3：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>3</title>
    <style>

        .div1{
        padding-top: 15px;
        height: 100px;
        }

        .div2{
        height: 480px;
        width: 80%;
        margin: auto;
        }

        .div3{
        height:100px;
        /* background-color:aqua;*/
        }
        .div21,.div22{
        float: left;
        margin:2px;
        height: 460px;
        }
        .div21{
            width: 63%;
        }
        .div22{
            height: 500px;
            width: 35%;
        }
        .div31,.div32{
        width: 49%;
        float: left;
        height: 100px;
        margin: 3px;
        font-size: 12px;
        color:gray;
        }
        .div31{
            text-align: right;
        }

        
        .table1{

            height: 10%;
            font-size:24px;
            text-align:left;
            margin: auto;
        }
        .table2,.table3{
            width: 80%;
            height: 20px;
        }
        .td1,.td2{
            height: 20px;
        }
        .table4{
            height: 7px;
        }
        .table41{
            width: 50%;
            height: 60%;
        }
        .table42{
            font-size: 20px;
            width: 40%;
            height: 40%;
        }
        .table5{
          height: 50px;
            background-color:cornflowerblue;
            color: white;
            text-align: center;
        }
        .table6{
            height: 40px;
            text-align: center;
            color: rgb(215, 109, 109);
            background-color:rgb(253, 199, 199);
        }
        .td4{
            height: 15px;
            color:blue;
            font-size: 11px;
            text-align:right ;
        }
    </style>
</head>
<body>
    <div class="div1"> <img src="./作业3 教学管理信息服务平台.png" alt=""></div>
    <div class="div2">
    <div class="div21"><img src="./login_bg_pic.jpg"></div>
    <div class="div22">
        <table  width="400px" height="460px"  cellspacing=0.1px  align="center">
            <tr>
                <td class="table1" colspan="2"><b>用户登录</b></td>
                <!-- <td></td> -->
            </tr>
            <tr>
                <td colspan="2" class="td1"><input class="table2" type="text" placeholder="用户名" reguired ></td>
                <!-- <td></td> -->
            </tr>
            <tr>
                <td colspan="2" class="td2"><input class="table3" type="password" placeholder="密码"></td>
                <!-- <td></td> -->
            </tr>
            <tr class="table4">
                <td ><input class="table41" type="text" reguired placeholder="验证码"></td>
                <td ><input class="table42" type="text"  placeholder="2vxbx" readonly> </td>
            </tr>
            <tr>
                <td colspan="2" class="td4">忘记密码了？</td>
                <!-- <td></td> -->
            </tr>
            <tr>
                <td colspan="2" class="table5">登录</td>
                <!-- <td></td> -->
            </tr>
            <tr>
                <td colspan="2" class="table6">忘记密码请联系教学秘书或辅导员</td>
                <!-- <td></td> -->
            </tr>
            <tr>
                <td class="table7"><img src="./login_ewm.gif" alt=""></td>
               <td>用手机扫一扫，安全快捷登录</td>
            </tr>
        </table>
    </div>
    </div>
    <div class="div3">
        <div class="div31">版权所有© Copyright 1999-2022 正方软件股份有限公司</div>
        <div class="div32">中国·杭州西湖区紫霞街176号 互联网创新创业园2号301   版本V-8.0.0</div>
    </div>
    </div>
</body>
</html>

运行结果：

SakitamaX
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
练习 | css页面练习案例
A123ppleQueen的博客
06-09 716
纸质卡片
CSS综合练习
weixin_46331127的博客
06-08 1312
Div+css综合练习一、css小动画二、Div+css练习 一、css小动画 这是我学习css之后写的第一个小动画模型哦，看着有点多，但是不难，都是之前学习内容的衍生，想要学习的就来看看叭 别的不说了，代码粘起来，希望可以帮到你！ <style> #box1{ margin: 0 auto; width: 500px; height: 500px;
html+css网页练习三
qq_52108058的博客
02-05 2336
另外，为【技术】设置宽度为“17%”、外边距为“4%”；为【技术logo】设置高度为“200px”、宽度为“200px”、边框颜色为“#000000”、边框为“1px、实线”、边框设置“20px圆角”；（2）【网站介绍】样式：为页面上端【网站介绍】部分添加背景颜色“#000000”，并设置宽度为“100%”、高度为“400px”、字体颜色为“#FFFFFF”。另外，为【欢迎语】和【网站内容介绍】内容设置“绝对布局”、距顶部边缘“16%”、距左边缘“16%”、宽度为“68%”、文本内容“居中”。
html+css网页练习四
qq_52108058的博客
02-07 4180
阅读下列说明、效果图，完成静态页面。 某购物网站首页页面局部效果。当鼠标悬停到导航文字上时，背景色会变为红色。现在我们需要编写该网站效果图部分代码。 项目包含首页index.html、img文件夹和css文件夹，页面效果如图所示。 4、style.css 二、活动页面 1、要求 阅读下列说明、效果图和HTML代码，进行静态网页开发，主要应用HTML和css3完成。 这个某项目中的其中一个活动页，应用HTML5和css3技术完成页面动画。鼠标没经过是图1，当鼠标经过是图2，当鼠标经过遮罩层像翻书一样显示出来
html+css网页练习一
qq_52108058的博客
02-02 7136
阅读下列说明、效果图和HTML代码，进行静态网页开发。 这个某项目中的其中一个活动页，应用html和css技术完成页面的布局。项目包含主页index.html、style.css，css和img文件夹分析： 4、style.css 二、改革进展与成效管理平台页面 1、要求 阅读下列说明、效果图和HTML代码，进行静态网页开发。 项目名称为“改革进展与成效管理平台”，包含首页index.html、css文件夹、img文件夹，其中，css文件夹包含normalize.css文件；img文件夹包含用到的图片。大
html+css网页练习二
qq_52108058的博客
02-04 1733
这是某茶叶公司的官网，以下效果图是商品展示页。 该项目包含prolist.html、css文件夹、img文件夹，其中，css文件夹包含include.css文件；img文件夹包含所用到的图片。分析： 4、include.css 二、电商网站页面 1、要求 这是某电商网页其中的页面，以下效果图是购物车模块。 该项目包含index.html、css文件夹、img文件夹，其中，css文件夹包含index.css文件；img文件夹包含所用到的图片。分析： 4、index.css 三、顶部信息栏页面 1、要求 项
CSS练习三(盒子练习)
屈帅波的技术博客
05-23 1681
练习题1 <!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
css常用demo练习
SundayGoG的博客
05-30 1736
1.横向弹性布局，溢出的部分换行 flex布局实现不同分辨率屏幕显示效果不同，”自适应布局“ (flex-flow是flex-direction和flex-wrap的复合属性） display:flex; flex-flow:wrap; white-space: nowrap; text-overflow: ellipsis; 2.文字多余部分用省略号表示 over-flow:hidden; white-space:nowarp; text-overflow:ellipsis; 3.弹性布局，水平均匀间
HTML+CSS简单网页练习
海梦初的博客
02-25 4426
前言     运用了CSS进行简单的网页制作 一、效果图 二、HTML代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>手机</title> <script type="application/javascript"> alert("欢迎—&g.
html-css练习网页.zip
12-14
基于html+css+js进行网页设计 课程设计 毕业设计 供参考 源码+说明 基于html+css+js进行网页设计 课程设计 毕业设计 供参考 源码+说明 基于html+css+js进行网页设计 课程设计 毕业设计 供参考 源码+说明 基于...
div css练习div css练习div css练习div css练习
04-20
在前端开发领域，CSS（Cascading Style Sheets）是一种用于表现HTML或XML（包括SVG、XHTML等）文档的样式语言，它对于网页布局和设计至关重要。本练习旨在通过使用div元素结合CSS来提升对页面布局和样式的理解与应用...
HTML+CSS网页练习.zip
12-14
基于html+css+js进行网页设计 课程设计 毕业设计 供参考 源码+说明 基于html+css+js进行网页设计 课程设计 毕业设计 供参考 源码+说明 基于html+css+js进行网页设计 课程设计 毕业设计 供参考 源码+说明 基于...
html css 练习素材
01-02
HTML（HyperText Markup Language）和CSS（Cascading Style Sheets）是网页开发的基石，它们共同决定了网页的结构和样式。HTML用于定义网页内容的结构，而CSS则负责页面的布局和视觉呈现。 HTML5是HTML的最新版本，...
css练习_css_
09-28
这个名为“css练习”的项目文件正提供了这样一个平台，帮助你提升CSS技能并节省开发时间。 在“css练习.css”中，我们可以预见到一系列的CSS规则和选择器，它们定义了元素的样式，如颜色、字体、布局、动画和响应式...
CSS实现从上往下过渡效果
Rverdoser的博客
07-18 339
属性改变时（即鼠标悬停时），它会在0.5秒内完成平滑的从上往下移动50像素的变化。要在CSS中实现一个从上往下的过渡效果，你可以使用。类定义了一个方框，并指定了一个过渡效果，使得当。
css性能优化的方法
jht_520的博客
07-21 329
避免使用过多的动画和过渡效果：过多的动画和过渡效果会占用更多的 CPU 和内存资源，降低性能。以上是一些常见的 CSS 性能优化方法，具体的优化策略和技巧还需要根据具体的项目和需求来确定。避免嵌套和选择器冗余：尽量避免使用过多的嵌套和冗余的选择器，这会增加解析和匹配的时间。使用标准字体：使用浏览器默认的字体，而不是使用自定义字体文件，可以减少请求和文件大小。），会消耗更多的性能。避免使用昂贵的选择器：某些选择器，如后代选择器和通用选择器（使用缩写和简写属性：尽量使用简写属性来减少代码量，例如使用。
CSS相关记录
最新发布
oThrowsException的博客
07-24 601
它接受两个参数，分别表示在X轴和Y轴上的缩放比例。如果指定侧轴大小的属性值为’auto’，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照’min/max-width/height’属性的限制。CSS的transform属性是一个功能强大的工具，允许你对HTML元素应用2D或3D转换效果，包括旋转、缩放、倾斜和移动等。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。scaleX()、scaleY()、scaleZ()：这些函数分别用于沿X轴、Y轴和Z轴缩放元素。
CSS学习笔记[Web开发]
Jenlibein的博客
07-19 740
CSS 是一种描述 HTML 文档样式的语言。CSS 描述应该如何显示 HTML 元素。CSS 用于定义网页的样式，包括针对不同设备和屏幕尺寸的设计和布局。CSS指的是层叠样式表* (CascadingStyleSheets)CSS 描述了如何在屏幕、纸张或其他媒体上显示 HTML 元素CSS节省了大量工作。它可以同时控制多张网页的布局外部样式表存储在CSS 文件中***：**也称级联样式表。一张 HTML 页面 可以有 多个样式下面是一张提供了四个不同样式表的 HTML 页面。
css盒子模型网页练习题
09-10
当涉及到CSS盒子模型的练习题时，以下是一些可以考虑的问题： 1. 创建一个具有特定宽度和高度的固定大小的盒子。 2. 创建一个具有自适应宽度和高度的盒子，以适应其内容。 3. 创建一个具有指定外边距和内边距的盒子。 4. 在一个页面上创建多个盒子，并使用浮动或定位来放置它们。 5. 创建一个具有不同背景颜色的盒子，并设置其中一个盒子的边框样式。 6. 创建一个具有阴影效果的盒子。 7. 将一个盒子放置在另一个盒子内部，并调整它们之间的间距。 8. 创建一个响应式布局，其中的盒子在不同屏幕大小下具有不同的宽度和位置。 这些练习题可以帮助你熟悉CSS盒子模型的不同属性和用法，并提高你对网页布局和样式设计的理解。你可以使用HTML和CSS来实现这些练习题，并通过浏览器查看结果。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值