HTML_CSS基础

最新推荐文章于 2022-07-12 13:01:22 发布
最新推荐文章于 2022-07-12 13:01:22 发布
阅读量323 收藏
点赞数
分类专栏： 编程语言 文章标签： HTML CSS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43495317/article/details/102746181
版权

HTML_CSS基础

4.HTML_CSS
4.1. web概念概述
4.1.1. JavaWeb
  • 使用Java语言开发基于互联网的项目
4.1.2. 软件架构
  • C/S：Client/Server 客户端/服务器端
    • 在用户本地有一个客户端程序，在远程有一个服务器端程序
    • 缺点：
      • 开发、安装、部署、维护麻烦
  • B/S：Brower/Server 浏览器/服务器端
    • 只需要一个浏览器，用户通过不同的网址（URL），客户访问不同的服务器端程序
    • 优点：
      • 开发、安装、部署、维护简单
    • 缺点：
      • 如果应用过大，用户的体验可能会受到影响
      • 对硬件要求过高
  • B/S架构详解
    • 资源分类：
      1. 静态资源：
        • 使用静态网页开发技术发布的资源
        • 特点：
          • 所有用户访问，得到的结果是一样的。
          • 如：文本、图片、音频、视频、HTML、CSS、JavaScript
          • 如果用户请求的是静态资源，那么服务器会直接将静态资源发送给浏览器。浏览器中内置了静态资源的解析引擎，可以展示静态资源。
      2. 动态资源：
        • 使用动态网页开发技术发布的资源
        • 特点：
          • 所有用户访问，得到的结果可能不一样。
          • 如：jsp/servlet，php，asp…
          • 如果用户请求的是动态资源，那么服务器会执行动态资源，转换为静态资源，再发送给浏览器。
    • 我们要学习动态资源，必须先学习静态资源！
    • 静态资源：
      • HTML：用于搭建基础网页，展示页面的内容
      • CSS：用于美化页面，布局页面
      • JavaScript：控制页面的元素，让页面有一些动态的效果
4.2. HTML
4.2.1. 概念
  • Hyper Text Markup Language：超文本标记语言，是最基础的网页开发语言。
    • 超文本：超文本是用超链接的方式，将各种不同空间的文字信息组织在一起的网状文本。
    • 标记语言：由标签构成的语言。<标签名称>。如：html、xml
      • 标记语言不是编程语言
4.2.2. 快速入门

  • 语法：

    • html文档后缀名：.html或者.htm

    • 标签分类：

      • 围堵标签：有开始标签和结束标签。如：<html></html>
      • 自闭和标签：开始标签和结束标签在一起。如：<br/>

    • 标签可以嵌套：

      • 需要正确嵌套，不能你中有我，我中有你。
      • 错误：<a><b></a></b>
      • 正确：<a><b></b></a>

    • 在开始标签可以定义属性。属性是由键值对构成。值需要用引号（单双都可以）引起来。

    • html的标签不区分大小写，但是建议使用小写。

      E<!DOCTYPE html>
<html>
    <head>
        <title>title</title>
    </head>

    <body>
        <font color="red">Hello World</font><br/>
        <font color="green">Hello World</font>
    </body>
</html>
4.2.3. 标签学习

  1. 文件标签：构成html最基本的标签

    • html：html文档的根标签
    • head：头标签。用于指定html文档的一些属性。引入一些外部的资源。
    • title：标题标签。
    • body：体标签。
    • <!DOCTYPE html>：html5中定义该文档是html文档。

  2. 文本标签：和文本有关的标签

    • 注释：<!-- 注释内容 -->

    • <h1> to <h6>：标题标签

      • h1~h6：字体大小

    • <p>：段落标签

    • <br>：换行标签

    • <hr>：展示一条水平线

      • 属性：
        • color：颜色
        • width：宽度
        • size：高度
        • align：对齐方式
          • center：居中
          • left：左对齐
          • right：右对齐

  • <b>：字体加粗

  • <i>：字体斜体

    • <font>：字体标签：color：颜色 size：大小 face：字体

    • <center>：文本居中

    • 属性定义：

      • color：

    • 英文单词：red、green、blue

      • rgb(值1, 值2, 值3)：值的范围：0~255 如：rgb(0, 0, 255)
      • #值1值2值3：值的范围：00~FF之间 如：FF00FF

    • width：

      • 数值：width=“20”，数值的单位，默认的是px（像素）
      • 数值%：占比相对于父元素的比例

    • 案例：公司简介

    • 特殊字符

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2n5J11BZ-1571993667504)(images/html_特殊字符表.png)]

  1. 图片标签：

    • img：展示图片：src->指定图片的位置
    <!-- 展示一张图片 -->
<img src="images/1.jpg" align="right" alt="wlop" width="500" height="500"/>
<!--
    相对路径
    以.开头的路径
    ./：代表当前目录   ./images/1.jpg
    ../：代表上一级目录
 -->
<img src="./images/1.jpg" align="right" alt="wlop" width="500" height="500"/>

  2. 列表标签：

    • 有序列表：ol和li：

      <!-- type:I/i/A/a/1 -->
<!-- 有序列表 ol -->
早上起床干的事情
<ol type="I" start="5">
    <li>睁眼</li>
    <li>看手机</li>
    <li>穿衣服</li>
    <li>洗漱</li>
</ol>

    • 无序列表：ul和li：

      <!-- type:disc（默认）/square/circle -->
<!-- 无序列表 ul -->
早上起床干的事情
<ul type="circle">
    <li>睁眼</li>
    <li>看手机</li>
    <li>穿衣服</li>
    <li>洗漱</li>
</ul>

  3. 链接标签：a：定义一个超链接–>href：指定访问资源的URL（统一资源定位符）/target：_blank（在空白页面打开）/_parent/_self（默认：在当前页面打开）/_top：指定打开资源的方式

    <!-- 超链接 a -->
<a href="images/1.jpg">图片</a>
<br>
<a href="images/1.jpg" target="_blank">图片</a>
<br>
<a href="http://www.baidu.com" target="_self">百度</a>
<br>
<a href="mailto:yangqi199808@gmail.com">联系我们</a>
<br>
<a href="http://www.baidu.com"><img src="images/3.jpg"/></a>

  4. div和span：

    • div：块级标签，每一个div占据一整行
    • span：文本信息在一行展示，行内标签/内联标签
    <!-- 块标签 div和span -->
<!-- div：占据一整行，称为块级标签 -->
<div>阿里巴巴</div>
<div>让天下没有难做的生意</div>
<!-- span：文本信息在一行展示，称为行内标签 内联标签 -->
<span>阿里巴巴</span>
<span>让天下没有难做的生意</span>

  5. 语义化标签：html5中为了提高程序的可读性，提供了一些标签。（header：页眉/footer：页脚）

  6. 表格标签：

    • table：定义表格
      • width：宽度
      • border：边框
      • cellpadding：定义
      • cellspacing：定义单元格之间的距离。如果指定位0，则单元格的线会合为一条
      • bgcolor：背景色
      • align：对齐方式
      • caption：表格标题
      • thead：表示表格的头部分
      • tbody：表示表格的体部分
      • tfoot：表示表格的脚部分
    • tr：定义行
      • bgcolor：背景色
      • align：对齐方式
    • td：定义单元格
      • colspan：合并列
      • rowspan：合并行
    • th：定义表头单元格
    <table border="1" width="50%" cellpadding="0" cellspacing="0" bgcolor="#faebd7" align="center">
    <tr>
        <!--<td>编号</td>-->
        <!--<td>姓名</td>-->
        <!--<td>成绩</td>-->
        <th>编号</th>
        <th>姓名</th>
        <th>成绩</th>
    </tr>
    <tr>
        <td>1</td>
        <td>小龙女</td>
        <td>100</td>
    </tr>
    <tr>
        <td>2</td>
        <td>杨过</td>
        <td>50</td>
    </tr>
</table>
<hr>
<table border="1" width="50%" cellpadding="0" cellspacing="0" bgcolor="#faebd7" align="center">
    <thead>
        <caption>学生信息表</caption>
        <tr>
            <!--<td>编号</td>-->
            <!--<td>姓名</td>-->
            <!--<td>成绩</td>-->
            <th>编号</th>
            <th>姓名</th>
            <th>成绩</th>
        </tr>
    </thead>
    <tbody>
        <tr bgcolor="#00ffff" align="center">
            <td>1</td>
            <td>小龙女</td>
            <td>100</td>
        </tr>
        <tr>
            <td>2</td>
            <td>杨过</td>
            <td>50</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>3</td>
            <td>尹志平</td>
            <td>10</td>
        </tr>
    </tfoot>
</table>
<hr>
<table border="1" width="50%" cellpadding="0" cellspacing="0" bgcolor="#faebd7" align="center">
    <tr>
        <th rowspan="2">编号</th>
        <th>姓名</th>
        <th>成绩</th>
    </tr>
    <tr>
        <td>1</td>
        <td>小龙女</td>
    </tr>
    <tr>
        <td>2</td>
        <td colspan="2">杨过</td>
    </tr>
</table>

  7. 综合案例

    <!-- 采用table来完成布局 -->
<!-- 最外层的table，用于整个页面的布局 -->
<table width="100%" align="center">
    <!-- 第1行 -->
    <tr>
        <td>
            <img src="images/1.jpg" width="100%" alt="">
        </td>
    </tr>

    <!-- 第2行 -->
    <tr>
        <td>
            <table width="100%" align="center">
                <tr>
                    <td>
                        <img src="images/3.jpg" alt="">
                    </td>
                    <td>
                        <img src="images/3.jpg" alt="">
                    </td>
                    <td>
                        <img src="images/3.jpg" alt="">
                    </td>
                </tr>
            </table>
        </td>
    </tr>

    <!-- 第3行 -->
    <tr>
        <td>
            <table width="100%" align="center">
                <tr bgcolor="#ffd700" align="center" height="45">
                    <td>
                        <a href="1_HelloWorld.html">首页</a>
                    </td>
                    <td>
                        门票
                    </td>
                    <td>
                        门票
                    </td>
                    <td>
                        门票
                    </td>
                    <td>
                        门票
                    </td>
                    <td>
                        门票
                    </td>
                    <td>
                        门票
                    </td>
                    <td>
                        门票
                    </td>
                    <td>
                        门票
                    </td>
                    <td>
                        门票
                    </td>
                </tr>
            </table>
        </td>
    </tr>

    <!-- 第4行 轮播图 -->
    <tr>
        <td>
            <img src="images/4.jpg" width="100%" alt="">
        </td>
    </tr>

    <!-- 第5行 -->
    <tr>
        <td>
            <img src="images/5.jpg" alt="">
            好大的图片
            <hr color="#ffd700">
        </td>
    </tr>

    <!-- 第6行 -->
    <tr>
        <td>
            <table width="100%" align="center">
                <tr>
                    <td>
                        <img src="images/1.jpg" alt="">
                        <p>上海飞三亚五天四晚自由行（春节销售+亲子+蜜月+自由行）</p>
                        <font color="red">&yen; 899</font>
                    </td>
                    <td>
                        <img src="images/1.jpg" alt="">
                        <p>上海飞三亚五天四晚自由行（春节销售+亲子+蜜月+自由行）</p>
                        <font color="red">&yen; 899</font>
                    </td>
                    <td>
                        <img src="images/1.jpg" alt="">
                        <p>上海飞三亚五天四晚自由行（春节销售+亲子+蜜月+自由行）</p>
                        <font color="red">&yen; 899</font>
                    </td>
                    <td>
                        <img src="images/1.jpg" alt="">
                        <p>上海飞三亚五天四晚自由行（春节销售+亲子+蜜月+自由行）</p>
                        <font color="red">&yen; 899</font>
                    </td>
                </tr>
            </table>
        </td>
    </tr>

    <!-- 第7行 -->
    <tr>
        <td>
            <img src="images/5.jpg" alt="">
            没有图片
            <hr color="#ffd700">
        </td>
    </tr>

    <!-- 第8行 -->
    <tr>
        <td>
            <table width="100%" align="center">
                <tr>
                    <td rowspan="2">
                        <img src="images/5.jpg" height="100%" alt="">
                    </td>
                    <td>
                        <img src="images/1.jpg" alt="">
                        <p>上海飞三亚五天四晚自由行（春节销售+亲子+蜜月+自由行）</p>
                        <font color="red">&yen; 699</font>
                    </td>
                    <td>
                        <img src="images/1.jpg" alt="">
                        <p>上海飞三亚五天四晚自由行（春节销售+亲子+蜜月+自由行）</p>
                        <font color="red">&yen; 699</font>
                    </td>
                    <td>
                        <img src="images/1.jpg" alt="">
                        <p>上海飞三亚五天四晚自由行（春节销售+亲子+蜜月+自由行）</p>
                        <font color="red">&yen; 699</font>
                    </td>
                </tr>
                <tr>
                    <td>
                        <img src="images/1.jpg" alt="">
                        <p>上海飞三亚五天四晚自由行（春节销售+亲子+蜜月+自由行）</p>
                        <font color="red">&yen; 699</font>
                    </td>
                    <td>
                        <img src="images/1.jpg" alt="">
                        <p>上海飞三亚五天四晚自由行（春节销售+亲子+蜜月+自由行）</p>
                        <font color="red">&yen; 699</font>
                    </td>
                    <td>
                        <img src="images/1.jpg" alt="">
                        <p>上海飞三亚五天四晚自由行（春节销售+亲子+蜜月+自由行）</p>
                        <font color="red">&yen; 699</font>
                    </td>
                </tr>
            </table>
        </td>
    </tr>

    <!-- 第9行 -->
    <tr>
        <td>
            <img src="images/5.jpg" alt="">
            没有图片
            <hr color="#ffd700">
        </td>
    </tr>

    <!-- 第10行 -->
    <tr>
        <td>
            <table width="100%" align="center">
                <tr>
                    <td rowspan="2">
                        <img src="images/5.jpg" height="100%" alt="">
                    </td>
                    <td>
                        <img src="images/1.jpg" alt="">
                        <p>上海飞三亚五天四晚自由行（春节销售+亲子+蜜月+自由行）</p>
                        <font color="red">&yen; 699</font>
                    </td>
                    <td>
                        <img src="images/1.jpg" alt="">
                        <p>上海飞三亚五天四晚自由行（春节销售+亲子+蜜月+自由行）</p>
                        <font color="red">&yen; 699</font>
                    </td>
                    <td>
                        <img src="images/1.jpg" alt="">
                        <p>上海飞三亚五天四晚自由行（春节销售+亲子+蜜月+自由行）</p>
                        <font color="red">&yen; 699</font>
                    </td>
                </tr>
                <tr>
                    <td>
                        <img src="images/1.jpg" alt="">
                        <p>上海飞三亚五天四晚自由行（春节销售+亲子+蜜月+自由行）</p>
                        <font color="red">&yen; 699</font>
                    </td>
                    <td>
                        <img src="images/1.jpg" alt="">
                        <p>上海飞三亚五天四晚自由行（春节销售+亲子+蜜月+自由行）</p>
                        <font color="red">&yen; 699</font>
                    </td>
                    <td>
                        <img src="images/1.jpg" alt="">
                        <p>上海飞三亚五天四晚自由行（春节销售+亲子+蜜月+自由行）</p>
                        <font color="red">&yen; 699</font>
                    </td>
                </tr>
            </table>
        </td>
    </tr>

    <!-- 第11行 -->
    <tr>
        <td>
            <img src="images/1.jpg" width="100%" alt="">
        </td>
    </tr>

    <!-- 第12行 -->
    <tr>
        <td align="center" bgcolor="#ffd700" height="40">
            <font color="gray" size="2">
                阿里巴巴
                让天下没有难做的生意
            </font>
        </td>
    </tr>
</table>

  8. 表单标签：

    • 概念：用于采集用户输入的数据的。用于和服务器进行交互。

    • 使用的标签：form

      • 属性：

        • action：指定提交数据的URL，#表示当前页面。

        • method：指定提交方式。一共7种，2种比较常见。（get和post）

          get和post的区别：

          1. get的请求参数会在地址栏中显示；post的请求参数不会在地址栏中显示。会封装在请求体中（HTTP协议）
          2. get请求参数的长度是有限制的；post的请求参数的长度没有限制
          3. get请求不太安全；post请求较为安全

      • 表单项中的数据要想被提交，必须指定其name属性

    • 表单项标签：

      • input：可以通过type属性值，改变元素展示的样式
        • type属性：
          • text：文本输入框
          • password：密码输入框
            • placeholder：指定
          • radio：单选框：
            • 要想让多个单选框实现单选的效果，则多个单选框的name属性值
            • 一般会给每一个单选框提供value属性，指定其被选中后提交的值
            • checked属性，可以指定默认值
          • checkbox：复选框
            • 一般会给每一个单选框提供value属性，指定其被选中后提交的值
            • checked属性，可以指定默认值
          • file：文件选择框
          • hidden：隐藏域，用于提交一些信息
          • 按钮：
            • submit：提交按钮，可以提交表单
            • button：普通按钮
            • image：图片提交按钮：src属性指定图片的路径
      • label：指定输入项的文字描述信息
        • for属性一般会和input的id属性值对应。如果对应了，则点击label区域，会让input输入框获取焦点。
      • select：下拉列表
        • option：指定列表项
      • textarea：文本域
        • cols：指定列数，每一行有多少个字符
        • rows：默认多少行
    <form action="#" method="get">
    <label for="username">用户名</label>：<input type="text" name="username" placeholder="请输入用户名" id="username"><br>
    密码：<input type="password" name="password" placeholder="请输入密码"><br>
    性别：<input type="radio" name="gender" value="male" checked="checked">男
        <input type="radio" name="gender" value="female">女<br>
    兴趣爱好：<input type="checkbox" name="interest" value="sing">唱歌
            <input type="checkbox" name="interest" value="dance" checked>跳舞
            <input type="checkbox" name="interest" value="basketball">蓝球<br>

    图片：<input type="file" name="file"><br>
    隐藏域：<input type="hidden" name="id" value="aaa"><br>

    取色器：<input type="color" name="color"><br>
    生日：<input type="date" name="date"><br>
    生日：<input type="datetime-local" name="datetime-local"><br>
    邮箱：<input type="email" name="email"><br>
    年龄：<input type="number" name="age"><br>

    省份：<select name="province">
        <option value="">--请选择--</option>
        <option value="1">北京</option>
        <option value="2">上海</option>
        <option value="3" selected>陕西</option>
    </select><br>

    自我描述：
    <textarea cols="20" rows="5" name="description"></textarea>

    <input type="submit" value="登录"><br>
    <input type="button" value="一个按钮"><br>
    <input type="image" src="../images/button.png" value="一个按钮">
</form>

  9. 案例

    <!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>注册页面</title>
    </head>

    <body>
        <!-- 定义表单 -->
        <form action="#" method="post">
            <!-- 控制样式 -->
            <table border="1" align="center" width="500">
                <tr>
                    <td><label for="username">用户名</label></td>
                    <td><input type="text" name="username" id="username" placeholder="请输入账号"></td>
                </tr>
                <tr>
                    <td><label for="password">密码</label></td>
                    <td><input type="password" name="password" id="password" placeholder="请输入密码"></td>
                </tr>
                <tr>
                    <td><label for="email">Email</label></td>
                    <td><input type="email" name="email" id="email" placeholder="请输入Email"></td>
                </tr>
                <tr>
                    <td><label for="name">姓名</label></td>
                    <td><input type="text" name="name" id="name" placeholder="请输入真实姓名"></td>
                </tr>
                <tr>
                    <td><label for="phone">手机号</label></td>
                    <td><input type="number" name="phone" id="phone" placeholder="请输入您的手机号码"></td>
                </tr>
                <tr>
                    <td><label>性别</label></td>
                    <td>
                        <input type="radio" name="gender" value="male">男
                        <input type="radio" name="gender" value="female">女
                    </td>
                </tr>
                <tr>
                    <td><label for="birthday">出生日期</label></td>
                    <td><input type="date" name="birthday" id="birthday"></td>
                </tr>
                <tr>
                    <td><label for="checkcode">验证码</label></td>
                    <td>
                        <input type="text" name="checkcode" id="checkcode">
                        <img src="../images/验证码.png">
                    </td>
                </tr>
                <tr>
                    <td colspan="2" align="center"><input type="submit" value="注册"></td>
                </tr>
            </table>
        </form>
    </body>
</html>
4.3. CSS
  • 页面美化和布局控制
4.3.1. CSS基本简介
概念：
	Cascading Style Sheets：层叠样式表
	层叠：多个样式可以作用在html的元素上，同时生效
好处：
	1.功能强大
	2.将内容的展示和样式控制分离
		降低耦合度（解耦）
		让分工协作更容易
		提高开发的效率
4.3.2. CSS的使用
CSS与HTML的结合方式：
	1.内联样式：在标签内使用style属性指定css代码
	2.内部样式：在head标签内，定义style标签，style标签的标签体内容就是css代码
	3.外部样式：定义css资源文件；在head标签内，定义link标签，引入外部的资源文件

注意：
	1.三种方式，css作用范围越来越大
	2.第1种方式不常用，后期常用第2种和第3种
	3.第3种格式可以写为：
	<style>
        @import "../css/a.css";
    </style>
4.3.3. CSS语法

  • 格式：

    选择器 {
    属性名1: 属性值1;
    属性名2: 属性值2;
    属性名3: 属性值3;
    ...
}

  • 选择器：筛选具有相似特征的元素

    • 注意：每一对属性需要使用;隔开，最后一对属性可以不加;
4.3.4. 选择器

  • 筛选具有相似特征的元素

  • 分类

    • 基础选择器

      • id选择器：选择具体的id属性值的元素，建议在一个html页面中id值唯一
        • 语法：#id属性值 {}
      • 元素选择器：选择具有相同标签名称的元素
        • 语法：标签名称 {}
        • 注意：id选择器的优先级高于元素选择器
      • 类选择器：选择具有相同class属性值的元素
        • 语法：.class属性值 {}
        • 注意：类选择器的优先级高于元素选择器
      • 优先级顺序：id选择器 > 类选择器 > 元素选择器
      <style>
    #div1 {
        color: red;
    }

    div {
        color: green;
    }

    .cls1 {
        color: blue;
    }
</style>

    • 扩展选择器

      • 选择所有元素：
        • 语法：* {}
      • 并集选择器：
        • 语法：选择器1, 选择器2 {}
      • 子选择器：筛选选择器1元素下的选择器2元素
        • 语法：选择器1 选择器2 {}
      • 父选择器：筛选选择器2父元素选择器1
        • 语法：选择器1 > 选择器2 {}
      • 属性选择器：选择元素名称，属性名=属性值的元素
        • 语法：元素名称[属性名="属性值"] {}
      • 伪类选择器：选择一些元素具有的状态
        • 语法：元素:状态 {}
        • 如：<a>：状态：
          • link：初始化的状态
          • visited：被访问过的状态
          • active：正在访问的状态
          • hover：鼠标悬浮状态
4.3.5. 属性
  • 字体、文本
    • font-size：字体大小
    • color：文本颜色
    • text-align：对齐方式
    • line-height：行高
  • 背景
    • background：背景
  • 边框
    • border：设置边框，复合属性
  • 尺寸
    • width：宽度
    • height：高度
  • 盒子模型：控制布局
    • margin：外边距
    • padding：内边距：默认情况下内边距会影响整个盒子的大小
      • box-sizing：border-box：设置盒子的属性，让width和height就是最终盒子的大小
    • float：浮动
      • left：左浮动
      • right：右浮动
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>字体</title>
        <style>
            div {
                border: 1px solid #FF0000;
                width: 100px;
            }

            .div1 {
                width: 100px;
                height: 100px;
                /*外边距*/
                /*margin: 50px;*/
            }

            .div2 {
                width: 200px;
                height: 200px;
                padding: 50px;
                /*
                    设置盒子的属性，让width和height就是最终盒子的大小
                 */
                box-sizing: border-box;
            }

            .div3 {
                float: left;
            }

            .div4 {
                float: left;
            }

            .div5 {
                float: right;
            }
        </style>
    </head>

    <body>
        <div class="div2">
            <div class="div1"></div>
        </div>

        <div class="div3">阿里巴巴</div>
        <div class="div4">让天下没有难做的生意</div>
        <div class="div5">阿里巴巴</div>
    </body>
</html>
4.3.6. 案例
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>注册页面</title>
        <style>
            * {
                margin: 0px;
                padding: 0px;
                box-sizing: border-box;
            }

            body {
                width: auto;
                height: 100%;
                background-image: url("../../images/2.jpg");
                background-repeat: no-repeat;
                background-size: 100%;
            }

            .re_layout {
                width: 900px;
                height: 500px;
                border: 8px solid #EEEEEE;
                background-color: white;
                /*让div水平居中*/
                margin: auto;
                margin-top: 15px;
            }

            .rg_left {
                /*border: 1px solid red;*/
                /*浮动*/
                float: left;
                margin: 15px;
            }

            .rg_left > p:first-child {
                color: #FFD026;
                font-size: 20px;
            }

            .rg_left > p:last-child {
                color: #A6A6A6;
                font-size: 20px;
            }

            .rg_center {
                /*border: 1px solid red;*/
                float: left;
                width: 450px;
            }

            .td_left {
                width: 100px;
                text-align: right;
                height: 45px;
            }

            .td_right {
                padding-left: 50px;
            }

            #username, #password, #email, #name, #phone, #birthday, #checkcode {
                width: 251px;
                height: 32px;
                border: 1px solid #A6A6A6;
                /*设置边框圆角*/
                border-radius: 5px;
                padding-left: 10px;
            }

            #checkcode {
                width: 110px;
            }

            #img_check {
                height: 32px;
                vertical-align: middle;
                margin-left: 20px;
            }

            #btn_submit {
                width: 150px;
                height: 40px;
                background-color: #FFD026;
                border: 1px solid #FFD026;
            }

            .rg_right {
                /*border: 1px solid red;*/
                float: right;
                margin: 15px;
            }

            .rg_right p {
                font-size: 15px;
            }

            .rg_right p a {
                color: pink;
            }
        </style>
    </head>

    <body>
        <div class="re_layout">
            <div class="rg_left">
                <p>新用户注册</p>
                <p>USER REGISTER</p>
            </div>
            <div class="rg_center">
                <div class="rg_form">
                    <!-- 定义表单 -->
                    <form action="#" method="post">
                        <!-- 控制样式 -->
                        <table>
                            <tr>
                                <td class="td_left"><label for="username">用户名</label></td>
                                <td class="td_right"><input type="text" name="username" id="username" placeholder="请输入用户名"></td>
                            </tr>
                            <tr>
                                <td class="td_left"><label for="password">密码</label></td>
                                <td class="td_right"><input type="password" name="password" id="password" placeholder="请输入密码"></td>
                            </tr>
                            <tr>
                                <td class="td_left"><label for="email">Email</label></td>
                                <td class="td_right"><input type="email" name="email" id="email" placeholder="请输入邮箱"></td>
                            </tr>
                            <tr>
                                <td class="td_left"><label for="name">姓名</label></td>
                                <td class="td_right"><input type="text" name="name" id="name" placeholder="请输入姓名"></td>
                            </tr>
                            <tr>
                                <td class="td_left"><label for="phone">手机号</label></td>
                                <td class="td_right"><input type="number" name="phone" id="phone" placeholder="请输入手机号码"></td>
                            </tr>
                            <tr>
                                <td class="td_left"><label>性别</label></td>
                                <td class="td_right">
                                    <input type="radio" name="gender" value="male">男
                                    <input type="radio" name="gender" value="female">女
                                </td>
                            </tr>
                            <tr>
                                <td class="td_left"><label for="birthday">出生日期</label></td>
                                <td class="td_right"><input type="date" name="birthday" id="birthday" placeholder="请输入出生日期"></td>
                            </tr>
                            <tr>
                                <td class="td_left"><label for="checkcode">验证码</label></td>
                                <td class="td_right">
                                    <input type="text" name="checkcode" id="checkcode" placeholder="请输入验证码">
                                    <img id="img_check" src="../../images/验证码.png">
                                </td>
                            </tr>
                            <tr>
                                <td colspan="2" align="center"><input type="submit" id="btn_submit" value="注册"></td>
                            </tr>
                        </table>
                    </form>
                </div>
            </div>
            <div class="rg_right">
                <p>已有账号？<a href="#">立即登录</a></p>
            </div>
        </div>
    </body>
</html>
Yanko24
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
Error while importing sbt project:
weixin_45762425的博客
03-25 1469
Error while importing sbt project: List([info] Loading global plugins from C:\Users\dell.sbt\1.0\plugins [info] Loading project definition from D:\Users\dell\IdeaProjects\event-hive-ml\project [info] ...
win10+idea+spark+scala+sbt配置
pursuingparadise的博客
03-16 540
最近刚刚在学习spark，涉及到配置sbt，焦头烂额，遇到了各种问题，这里详细讲讲这些问题（不讲具体怎么配置，个人经验）。 环境： win 10 x64 idea 社区版 hadoop 2.7.2 spark 2.4.5 spark2.4.5下载官网 scala 2.11.8 如果什么都没有装的，可以看看这篇文章：https://blog.csdn.net/a1066196847/article...
CSS选择器
h294590501的专栏
05-29 411
CSS选择器CSS称之为层叠样式表（Cascading Style Sheet）。 ​ 在网页制作时可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。 ​ 让HTML制作出来的网页更加漂亮，页面更容易维护。CSS美化的好处功能上 比HTML属性更加强大，可以实现HTML属性中不能实现的功能 ​ 耦合度 代码降低了耦合度，分工更加明确，张三编写HTML，李四编写CSS，再将二...
CSS注册页面实现
weixin_43521197的博客
10-26 440
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>注册页面</title> <style> body{ background: url("img/register_bg.jpg") no-repeat; ba...
43-css案例-注册界面
shwjakak的博客
11-29 1493
html的tr和td标签 两姐妹双飞 2019-01-30 19:58:16 13489 收藏 33 版权 tr 标签——代表HTML表格中的一行 1） tr 标签是成对出现的,以<tr>开始,</tr>结束 2）属性 ——Common -- 一般属性 1》align ：代表行的水平对齐方式(left(左对齐) | center(居中对齐) |right(右对齐) | justify)(此属性应该使用CSS实现) 2》v...
HTML_CSS基础.rar
05-02
这个名为"HTML_CSS基础.rar"的压缩包文件显然是针对初学者准备的，包含了一些基本的HTML和CSS的学习材料。 在HTML方面，你将学习到如何使用各种标签来创建网页的基本结构。这些标签包括`<html>`、`<head>`、`...
HTML_CSS基础.docx
11-04
HTML_CSS基础.docx
html_css_material-master.zip
11-22
HTML和CSS是构建网页设计的基础，而JavaScript则是前端开发的核心技术之一。这个"html_css_material-master.zip"压缩包文件提供了一套完整的教学材料，旨在帮助学习者深入理解这些关键技术。 HTML（HyperText ...
HTML678day_htmlCSS_前端基础_
10-01
从"HTML678day_htmlCSS_前端基础_"这个标题来看，我们可以推测这是一系列关于HTML和CSS的三天密集学习资料，特别针对前端开发的基础技能提升。 在前端开发中，HTML（HyperText Markup Language）是构建网页结构的...
HTML_CSS.zip
03-29
HTML是一种基础技术，常与CSS、JavaScript一起被众多网站用于设计网页、网页应用程序以及移动应用程序的用户界面。网页浏览器可以读取HTML文件，并将其渲染成可视化网页。HTML描述了一个网站的结构语义随着线索的...
2022-07-10 第八小组 张明敏 学习笔记
qq_50392643的博客
07-12 201
CSS---层叠样式表，相当于整个网页的美化一、CSS选择器1、 标签选择器2、 类选择器3、 ID选择器二、CSS复合选择器1、后代选择器● 在CSS选择器中通过嵌套的方式，对特殊位置的HTML标签进行声明● 外层的标签写在前面，内层的标签写在后面，之间用空格分隔● 标签嵌套时，内层的标签成为外层标签的后代2、交集选择器● 由两个选择器直接连接构成，选中二者各自元素范围的交集● 第一个必须是标签选择器，第二个必须是类选择器或者ID选择器● 选择器之间不能有空格，必须连续书写3、并集选择器● 多个选择器通过
html中css的各种颜色对应的色号
wanghui_0924的博客
12-17 4806
哈喽，各位道友，下边这一篇是抄袭的别人，我直接放链接了 感谢原博主 https://blog.csdn.net/qq_21792169/article/details/50615822
CSS修饰HTML的静态注册表
weixin_43305674的博客
10-01 269
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>注册页面</title> <style> *{ margin: 0px; padding: 0px; box-sizing: border-box; } .
HTML和CSS做一个简单的注册页面
qq_45736175的博客
08-15 2902
我们先来看一下效果图 大致就是背景图片+白色背景的边框 在白色边框里面加元素 我们可以把里面分为三个部分：左边是一段文字、中间是form表单、右边是一段文字 1.先把form表单搞定 简单介绍一下table表格属性： tr:表示一行 td:表示一个单元格 input属性： 1.1.type： text：文本 ...
使用html和css写一个简单的登录页面
喜欢藏风里
05-26 2253
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> *{ margin: 0px; padding: 0px; box-sizing: border-box; } body{ background-color: azure; } .rg_layout
CSS基础学习——注册页面
筱旭灬的博客
02-02 270
注册页面案例 案例代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>注册页面</title> <!--<link rel="stylesheet" href="css/b.css">--&g...
CSS笔记
qq_41156186的博客
09-10 238
今日内容： 1. HTML标签：表单标签 2. CSS： HTML标签：表单标签 * 表单： * 概念：用于采集用户输入的数据的。用于和服务器进行交互。 * form：用于定义表单的。可以定义一个范围，范围代表采集用户数据的范围 * 属性： * action：指定提交数据的URL * method:指定提交方式 ...
前端学习笔记——HTML与CSS
liuzuoping的博客
04-01 418
HTML 概念：是最基础的网页开发语言 Hyper Text Markup Language 超文本标记语言 超文本: 超文本是用超链接的方法，将各种不同空间的文字信息组织在一起的网状文本. 标记语言: 由标签构成的语言。<标签名称> 如 html，xml 标记语言不是编程语言 快速入门： 语法： html文档后缀名 .html 或者 .htm ...
HTML_CSS学习笔记.docx
07-15
HTML和CSS是网页开发中最基础的两种技术，HTML负责网页的结构和内容，而CSS则负责网页的样式和布局。学习HTML和CSS是学习网页开发的第一步，因此对于初学者来说，掌握HTML和CSS是至关重要的。本文是根据IMOOC的学习...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Yanko24

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值