用 CSS 做一个注册页面

最新推荐文章于 2023-10-19 20:48:44 发布
最新推荐文章于 2023-10-19 20:48:44 发布
阅读量2.5k 收藏 21
点赞数 4
分类专栏： Front-end 文章标签： html css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Regino/article/details/105321548
版权

目录

CSS

  • CSS（Cascading Style Sheet，层叠样式表）；
  • 层叠样式：对同一个标签应用不同的样式，所有样式会叠加在一起展示出效果；
  • 优点：把 HTML 内容和 CSS 样式分离，降低了耦合度，提高了样式复用性，而且还可以提供更强大的美化效果。

1. 引入方式

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>引入方式</title>
    <!-- 告诉浏览器把解析器切换CSS解析器，type="text/css"可以省略 -->
    <style type="text/css">h2{
        color: green; /*字体颜色：绿色*/
    }</style>
    <!-- link的href属性指明样式文件的地址；
         rel属性指明外部文件是当前页面的stylesheet样式表 -->
    <link href="../css/外部样式.css" rel="stylesheet"/>
</head>
<body>
<!-- CSS的引入方式有三种：
        1.行内，在标签的style属性中写样式，作用域：该标签；
        2.内部(内嵌)，在页面中的style标签中写样式，style标签位置理论上任意，推荐放置在head中的底部，作用域：本页面；
        3.外部，使用link标签引入外部样式，作用域：所有引入的页面 -->
<h1 style="color:red;">1.行内</h1>
<h2>2.内部(内嵌)</h2>
<h3>3.外部 </h3>
</body>
</html>
  • 效果图：
    在这里插入图片描述

2. 基本语法

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>语法</title>
</head>
<body>
<!-- CSS语法：选择器{CSS样式}，选择器：匹配标签；
     CSS样式：标签要显示的外观效果，格式：{样式名:样式值;样式名:样式值;}，样式名多个单词用短杠-分割，样式值多个单词用空格分割；
     CSS注释：/*CSS注释*/ -->
<style> font {
    color: green; /*字体绿色*/
    font-size: 20px; /*字体大小*/
    line-height: 40px; /*行高*/
    font-weight: bold; /*加粗*/
    font-style: italic; /*倾斜*/
} </style>
<font>床前明月光</font><br/>
<font>疑是地上霜</font><br/>
<font>举头望明月</font><br/>
<font>低头思故乡</font><br/>
</body>
</html>
  • 效果图：
    在这里插入图片描述

a. 基本选择器

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>基本选择器</title>
</head>
<body>
<!-- CSS基本选择器:
        1.标签 ：根据标签匹配元素，格式：标签{} ；
        2.类：根据class的值匹配元素，class属性是给标签归类添加样式，格式：.class{}；
        3.ID：根据id值匹配元素，id属性是标签的唯一标志，#id{} -->
<!-- 渲染需求:
        1.所有span标签中的文字为楷体；
        2.所有女性(class="female")的文字为红色；
        3.所有英雄(class="hero")的文字大小为50px；
        4.Java(id="main")的字体大小为100px -->
<style>span { /*所有的span标签*/
    font-family: "楷体"; /*楷体*/
}

.female { /*所有class值中有female的标签*/
    color: red; /*字体红色*/
}

.hero { /*所有class值中有hero的标签*/
    font-size: 50px; /*字体大小*/
}

#main { /*匹配id=main的一个标签*/
    font-size: 100px; /*字体大小*/
}</style>
<span class="female">小红</span><span class="female">小美</span><span class="female">小娜</span><span class="female">小丽</span>
<!-- .female + .hero -->
<span class="female hero">小杰</span>
<!-- span + .hero -->
<span class="male hero">小王</span><span class="male hero">小黄</span>
<span class="hero">小刚</span>
<!-- #main -->
<span id="main">Java</span>
<!-- span -->
<span id="east">JavaScript</span>
</body>
</html>
  • 效果图：
    在这里插入图片描述

b. 扩展选择器

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>扩展选择器</title>
</head>
<body>
<!-- 扩展选择器，
        E,F：并列关系；
        属性 E[attribute=value] -->
<style type="text/css"> span, p, label { /*并列关系*/
    font-family: "楷体"; /*字体类型*/
}

div span { /*div所有的后代span标签*/
    color: red; /*字体红色*/
}

input[type="text"] { /* 有type属性值等于text的input标签*/
    background-color: gold; /*背景颜色 金色*/
} </style>
<!-- div span -->
<div><span>地址</span>
    <p><span id="gbl">爱好</span></p>
</div>
<!-- span -->
<span id="cld">性别</span><br/>
<!-- input -->
<label>姓名</label><input type="text" name="userName" value="Jack"/><br/>
<label>密码</label><input type="password" name="userPass" value="123456"/><br/>
</body>
</html>
  • 效果图：
    在这里插入图片描述

c. 盒子模型理论

  • 前端万物皆盒子；
    在这里插入图片描述
<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>盒子模型理论</title>
</head>
<body>
<!-- 盒子模型的组成:
        margin(外)边距：边框之外的距离，默认透明，可以设置：上、右、下、左的大小；
        border边框：可以设置边框的上、右、下、左的大小，类型、颜色；
        padding(内)填充：边框和内容之间的距离，默认透明，可以设置上、右、下、左的大小；
        设置宽高width和height两种方式：
            box-sizing:content-box;设置的是content所占的宽度和高度；
            box-sizing:border-box;设置的是border所占的宽度和高度 ；
        content内容：是标签中内容放置区域；-->
<style> div {
    border: 10px solid red; /*边框 10px 实线 红色*/
    margin: 40px; /*边距 40px*/
    padding: 30px; /*填充 30px*/
    width: 300px; /*宽度*/
    height: 100px; /*高度*/
    box-sizing: content-box; /*默认:content所占的宽度和高度*/
    box-sizing: border-box; /*默认:border所占的宽度和高度*/
} </style>
<div>我是content内容1</div>
<div>我是content内容2</div>
<div>我是content内容3</div>
</body>
</html>
  • 效果图 + F12：
    在这里插入图片描述

3. 常用样式

a. 边距边框

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>边框边距</title>
</head>
<body>
<!-- 边框border：可以设置宽度,类型,颜色；
    边距margin: 左右外边距可以取值，auto为自动居中对齐；
    边框圆角border-radius：可以设置四个角(左上,右上,右下,左下)边框从多少像素开始圆滑，一般设置一个值全部应用 -->
<style> div {
    border: 10px solid red; /*边框 10px 实线 红色*/
    box-sizing: border-box; /*边框作为盒子大小*/
    width: 200px; /*宽度200px*/
    height: 200px; /*高度200px*/
    margin: 10px auto; /*外边距上下10px 左右自动居中*/
    border-radius: 100px; /*边框圆角*/
}</style>
<div>1</div>
</body>
</html>
  • 效果图：
    在这里插入图片描述

b. 字体文本

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>字体文本</title>
    <style type="text/css"> div p {
        color: green; /*字体绿色*/
        font-size: 20px; /*字体大小*/
        line-height: 40px; /*行高*/
        font-weight: bold; /*加粗*/
        font-family: '楷体'; /*字体类型楷体*/
    }

    div p span {
        font-style: italic; /*倾斜*/
        text-decoration: underline; /*文本装饰 下划线*/
    } </style>
</head>
<body>
<div><p><span>学习必经三种境界:</span><br/>
    第一境界“昨夜西风凋碧树。独上高楼，望尽天涯路。”<br/>
    第二境界“衣带渐宽终不悔，为伊消得人憔悴。”<br/>
    第三境界“众里寻他千百度。蓦然回首，那人却在，灯火阑珊处。”<br/></p></div>
</body>
</html>
  • 效果图：
    在这里插入图片描述
i. 博客简介
<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>博客简介</title>
</head>
<body>
<style> h1 {
    text-align: center; /*文字水平居中*/
}

.redColor {
    color: red; /*红色字体*/
}

.boldItalic {
    font-weight: bold; /*字体重量加粗*/
    font-style: italic; /*字体样式倾斜*/
}

p {
    text-indent: 2em; /*首行缩进两个字符*/
}

.graySize {
    text-align: center; /*文字水平居中*/
    color: gray; /*灰色字体*/
    font-size: 12px; /*字体大小12px 默认不写是16px*/
    text-indent: 0em; /*首行不缩进*/
} </style>
<h1>博客简介</h1>
<hr color="orange"/>
<p><span class="redColor">“Regino的博客”</span>是Regino在<span class="boldItalic">CSDN</span>平台上的个人博客。域名为：https://blog.csdn.net/Regino，自定义域名为：qwert.blog.csdn.net。欢迎来访。</p>
<p>个人箴言：</p>
<p>区区二十几岁，人言后生，本应是前途坦荡之年纪，然而资质平平，见识短浅，可造之材本已难当，唯求可独立支持，笃定心之所寄，不负亲友所托，是为所愿。</p>
<p>积土成山而兴风雨，积善成德始备圣心。古人以流水计时，时间流逝，亦是水流积累沉淀。光阴可惜，譬诸流水一去不返。岁月更改，于洗刷幼稚之时亦教导人哲思。</p>
<p>过往实难更改，因果轮回或是注定，然当下尚未写就，未来仍未来临。把握、珍惜，是为能善其身之不二法门，与诸君共勉。</p>
<hr color="orange"/>
<p class="graySize">版权声明：本文为CSDN博主「Regino」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。<br/>
    原文链接：https://qwert.blog.csdn.net/article/details/105321548</p>
</body>
</html>
  • 效果图：
    在这里插入图片描述

c. 背景属性

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>背景属性</title>
    <style type="text/css"> div {
        border: 1px solid lightgray; /*边框 1px 实线 浅灰色*/
        box-sizing: border-box; /*边框作为盒子大小*/
        width: 1000px; /*宽度*/
        height: 250px; /*高度*/
        margin: 0px auto; /*外边距 上下0px 左右自动居中*/
    }

    #d1 {
        background-color: #024bd5; /*背景颜色*/
    }

    #d2 {
        background-image: url("./img/博客右栏.png"); /*背景图片地址*/
        background-repeat: no-repeat; /*背景图片不平铺*/
        background-position: top 0px right 0px; /*背景图片位置 右上角*/
        background-size: auto 250px; /* 设置背景图片宽度和高度。第一个值设置宽度，第 二个值设置的高度。如果只给出一个值，第二个是设置为"atuo(自动)"*/
    } </style>
</head>
<body>
<div id="d1"></div>
<div id="d2"></div>
</body>
</html>
  • 效果图：
    在这里插入图片描述

d. 显示属性

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>显示属性</title>
    <style> span, div {
        border: 1px solid lightgray;
        width: 500px;
        height: 100px;
    } </style>
</head>
<body>
<!-- 显示属性display标签的显示方式，常用取值：
        inline显示为内联标签，内联标签设置宽高不起作用，因为它的宽高是由内容撑起来的；
        block显示为块级标签，可设置width和height；
        none隐藏不显示 -->
<span>内联标签1</span><span style="display:inline;">内联标签2</span><span style="display:block;">内联标签3</span>
<div>块级标签1</div>
<div style="display:block;">块级标签2</div>
<div style="display:none;">块级标签3</div>
</body>
</html>
  • 效果图：
    在这里插入图片描述

4. 综合应用：注册表单

  • 根据提供的 HTML 和 CSS 素材编写 table 和表单标签完成注册表单案例；

a. 素材 1: HTML

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>注册表单</title>
    <link href="../css/register.css" rel="stylesheet"/>
</head>
<body>
<div class="container">
    <div class="child center"></div>
</div>
</body>
</html>

b. 素材 2: CSS

body {
    background-color: beige; /*背景颜色*/
}

.container {
    box-sizing: content-box; /*默认的 content 作为盒子大小*/
    width: 800px; /*宽度*/
    height: 500px; /*高度*/
    border: 10px ridge lightgray; /*边框 10px 桥梁 浅灰色*/
    margin: 50px auto; /*外边距 上下50px 左右自动居中*/
    background-color: white; /*背景颜色*/
}

.child {
    border: 1px solid red; /*边框 1px 实线 红色*/
    box-sizing: border-box; /*边框作为盒子大小*/
    height: 500px; /*高度*/
    border-color: rgba(0, 0, 0, 0); /*边框颜色 完全透明*/
}

.center {
    margin: 0px auto; /*外边距 上下0px 左右自动居中*/
    width: 400px; /*宽度*/
    font-family: '楷体'; /*字体类型*/
    color: gray; /*字体颜色*/
}

.center table tr {
    height: 50px; /*高度*/
}

input[type="text"], input[type="password"], input[type="date"] {
    border: 1px solid lightgray; /*边框 1px 实线 浅灰色*/
    width: 180px; /*宽度*/
    height: 30px; /*高度*/
    border-radius: 15px; /*边框圆角*/
    padding: 5px; /*填充*/
    box-sizing: border-box; /*边框作为盒子大小*/
}

input[name="userCode"] {
    width: 60px; /*宽度*/
}

input[name="userCode"] + img {
    vertical-align: top; /*垂直对齐方式 上对齐*/
}

.btn {
    width: 100px; /*宽度*/
    line-height: 30px; /*行高*/
    background-color: gold; /*背景金色*/
    color: white; /*字体白色*/
    border: 1px solid gold; /*边框 1px 实线 金色*/
    border-radius: 5px; /*边框圆角*/
}

input:focus { /*输入框获取焦点时*/
    outline: none; /*获取焦点时不显示轮廓*/
    border: 1px solid lightskyblue; /*边框 1px 实线 浅天蓝色*/
}

c. 具体实现：注册表单

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>注册表单</title>
    <!-- 引入css样式文件 -->
    <link href="../css/register.css" rel="stylesheet"/>
</head>
<body>
<div class="container">
    <div class="child center">
        <form action="#" method="post">
            <table border="0" align="center">
                <tr>
                    <td>用户名</td>
                    <td><input type="text" name="userName" placeholder="请输入账号"></td>
                </tr>
                <tr>
                    <td>密码</td>
                    <td><input type="password" name="userPass" placeholder="请输入密 码"></td>
                </tr>
                <tr>
                    <td>邮箱</td>
                    <td><input type="text" name="userMail" placeholder="请输入邮箱"></td>
                </tr>
                <tr>
                    <td>姓名</td>
                    <td><input type="text" name="userName" placeholder="请输入姓名"></td>
                </tr>
                <tr>
                    <td>手机号</td>
                    <td><input type="text" name="userPhone" placeholder="请输入手机号"></td>
                </tr>
                <tr>
                    <td>性别</td>
                    <td><input type="radio" id="male"><label for="male">男</label>&emsp;
                        <input type="radio" id="female"><label for="female">女</label>&emsp;</td>
                </tr>
                <tr>
                    <td>生日</td>
                    <td><input type="date" name="userBirth"></td>
                </tr>
                <tr>
                    <td>验证码</td>
                    <td><input type="text" name="userCode" placeholder="验证码">
                        <img width="90px"
                             title="标题"
                             src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1586044277242&di=d742a7bf56fd8d991e776bd092467589&imgtype=0&src=http%3A%2F%2Fdl2.iteye.com%2Fupload%2Fattachment%2F0092%2F0152%2Fa256e0dc-35cd-389c-ad2d-12bdaba19e80.jpg"
                             alt="加载失败"></td>
                </tr>
                <tr>
                    <td colspan="2" align="center">
                        <button class="btn">用户注册</button>
                    </td>
                </tr>
            </table>
        </form>
    </div>
</div>
</body>
</html>
  • 效果图：
    在这里插入图片描述

原文链接：https://qwert.blog.csdn.net/article/details/105321548

Regino
关注
专栏目录
CSS概念+使用+语法+案例：注册页面
Stacy的博客
07-26 257
本文章的主要内容为：CSS的简单介绍，包括概念、好处、使用（CSS与HTML结合方式），以及用CSS编写简单注册页面的案例，供对Javaweb感兴趣的小伙伴们学习。
html之div注册页面
qq_36943809的博客
12-14 577
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>注册页面</title> <style> *{ margin: 0px; padding...
用css写一个登录注册页面
weixin_42590539的博客
02-11 459
如果你想用CSS来创建一个登录注册页面，那么你需要先学习一些CSS的基础知识。首先，你需要了解HTML的布局方式，然后再学习如何使用CSS来设计页面的样式。 接下来，你可以使用CSS的各种样式属性来设计登录注册页面的布局。例如，你可以使用CSS的定位属性来设置元素的位置，使用CSS的颜色属性来设置元素的颜色，使用CSS的字体属性来设置元素的字体等。 最后，你可以使用CSS的媒体查询来设计登录注册页...
简单登录注册界面模板（HTML+CSS+JavaScript）
12-28
简单登录注册界面模板（HTML+CSS+JavaScript）。简单登录注册界面模板（HTML+CSS+JavaScript）。简单登录注册界面模板（HTML+CSS+JavaScript）。
CSS注册页面实现
weixin_43521197的博客
10-26 454
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>注册页面</title> <style> body{ background: url("img/register_bg.jpg") no-repeat; ba...
手机APP注册页面html模板是一款采用css3制作的手机APP注册页面设计html模板。.rar
04-27
在本案例中，"手机APP注册页面html模板" 是专为创建手机应用程序注册页面而设计的一个模板，它利用了CSS3（层叠样式表第三版）的特性，提供了丰富的视觉效果和交互体验。 首先，我们要理解HTML（HyperText Markup ...
html+css高仿B站的注册页面
08-07
- **头部元素**：模仿B站注册页面，可能需要包含一个导航栏，这可以由`<header>`标签实现，其中可能包含链接到其他页面的`<a>`标签。 - **主体部分**：注册表单通常包含在一个`<form>`标签内，包括输入字段如`...
简单登录注册页面（HTML5、CSS、JS）
03-24
在这个登录注册页面中，CSS可能被用来设置背景颜色、字体样式、边框、内边距、外边距等视觉效果。使用CSS可以实现响应式设计，使页面在不同设备和屏幕尺寸上都能良好显示。CSS3还引入了许多新特性，如伪类选择器、...
HTML+css+js实现一个完整的登录+注册页面
最新发布
12-27
html登录注册页面 使用div标签来划分页面的不同区域，方便进行样式设置和内容填充。 使用label标签来为输入框添加文本标签，方便用户输入和验证。 使用button标签来创建登录和注册按钮，设置背景颜色、边框样式和...
简单登录注册界面模板（HTML+CSS+JavaScript）【登录注册界面代码】
06-13
简单登录注册界面模板（HTML+CSS+JavaScript）【登录注册界面代码】 简单登录注册界面模板（HTML+CSS+JavaScript）。简单登录注册界面模板（HTML+CSS+JavaScript）。简单登录注册界面模板（HTML+CSS+JavaScript）。 ...
js css 实现的登录注册页面
08-13
js css 实现的登录注册页面（达内老师写的）
悬浮感，html+纯css注册页面
04-14
使用纯css+html完成制作。有需要的可以来拿，原理是盒子阴影，定位，和一些简单的css修饰
CSS+JS注册页面+显示当前时间
06-18
CSS+JS注册页面+显示当前时间 用css和js编写的看看吧
CSS3用户登录注册页面模板.zip
05-23
CSS3用户登录注册页面模板，全屏背景图片，有用户登录、用户注册功能，动画效果。
基于HTML5+css+JS的精美登陆注册界面
03-18
基于HTML5+css+JS的精美登陆注册界面
css注册页面
qq_44336097的博客
11-17 274
<!--案例--> <!DOCTYPE html> <html> <head> <title>注册页面</title> <style type="text/css"> *{ margin: 0px; padding: 0px; box-sizing: border-box; } body{ background: url("img/bg.png") no-repeat center; } .r
简单的css注册页面
woaichuzhong的博客
03-10 1584
注册界面 &lt;style&gt; .form{ width: 70%; position: absolute; top: 10%; left: 25%; } .tree{ position: relative; top: 420px; left: 220px; } .form ul{ width: 750px;...
html与css制作表单注册页面个人理解
不小努力的小龙
09-14 2039
常用的表单注册页面 1. 第一个注册页面 我的分析思路： 整个内容时居中的，所以需要有一个版心，根据ps测量，内容宽度是1200px，所以我设置版心（.w）为1200px(一般的内容的版心为1200px),再设置居中的属性margin: 100px auto; 整个框架如上图所示，这样就很容易写出代码 接下来，我们来研究h3里面的内容 一般样式： *号一般设置（margin,padding）取消标签与标签的间隙 a标签一帮设置(color:#666, text-decoration:n
html+css制作简单注册登录页面
热门推荐
m0_67930426的博客
10-19 1万+
光标为手的形状，当光标指定这个div的时候，光标为手的形状。没有账号，去注册 忘记密码。前端页面要得到css的布局，就得在html页面里调用css文件。方框（请输入用户名）方框（请输入用户名）写完这一步，然后再去运行，是没有东西的，但是并不是不存在。例如我在注册这一块级里，我用鼠标指定这一区域时会变成蓝色。如果不加，我们可以根据内容的多少，设计多少白色的部分。.b{ } 是针对注册两个字后面的白色部分进行布局。
用css写一个注册页面
04-14
要写一个注册页面，需要以下步骤： 1. 设计页面布局，包括表单、输入框、按钮等。 2. 使用CSS样式为页面元素添加样式，可以使用层叠样式表（CSS）来设计页面布局和外观。 3. 编写表单验证功能，以确保用户输入的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值