一、form表单

1、form表单的介绍

2、form表单的数据

3、< input >标签

radio

4、< input > 的常用属性以及标签

checked

disabled

placeholder

value

< lable >

< select >

< textarea >

二、CSS

1、CSS的简单介绍

2、CSS的基本使用

3、选择器规则

4、css示例以及代码

一、form表单

1、form表单的介绍

功能：用于搜集不同类型的用户输入的内容

有了表单，网页的内容可以由用户自己创建，那么对于网页来说，我们既是网页创建都者，也是网页的消费者。

<form></form> 由<input>标签+<button>提交按钮组成

2、form表单的数据

form表单是要提交数据的，那么数据要提交到服务器的哪里？

action="提交资源的路径，默认是当前资源"

method="本次提交采用的HTTP协议是什么方法，默认是get"

enctype="提交时，数据的编码类型 "

3、< input >标签

<input> 不需要闭合标签

<input type="..."> 类型不同，看到的样子就不同

text:普通的文本输入框

password：在浏览器默认是隐藏的文本输入框，用于输入密码

radio：单选框

checkbox：复选框

<input>的name属性非常重要，没有name的<input>的内容是不会提交到服务器的

会以 name=value 的形式将数据提交给服务器

radio

真正实现单选效果，要求name是相同的，也就是相同name的radio才会互斥

4、< input > 的常用属性以及标签

checked

radio/checkbox boolean类型的属性，分为填写或者不填写不需要跟value值

这时页面的单选框就默认是选中状态

disabled

boolean类型的属性不允许用户填写,不会提交

type="hidden" 是用户看不见的

readonly 不允许修改，可以提交

placeholder

占位符 text/password

value

radio/checkbox 一般会使用 text/password 可以用，有内容就相当于默认值

< lable >

对于单选框和复选框来说，如果没有<lable>,就必须点击前面的那个圈才可以选中，当有了<lable>后，<lable>包含的内容就是一个整体，点击后面的字也可以选中。在用户名和输入也是同理，就是包含的内容视为一个整体。

< select >

选择框

< textarea >

元素表示一个多行纯文本编辑控件，当你希望用户输入一段相当长的、不限格式的文本，例如评论或反馈表单中的一段意见时，这很有用。

二、CSS

1、CSS的简单介绍

层叠样式表

布局+样式：让HTML更加美观，写不出来很正常，需要HTML和CSS配合使用

外部链接： HTML文件和CSS文件是分开的，需要通过HTML的<link>引入

这个标签一般写在<head>中，快捷写法link:css 然后按下tab键

内部样式：直接在HTML中写样式

内联样式：直接指定在元素上 <element style="font-size:14px;">

推荐使用外部链接，偶尔使用内联样式

2、CSS的基本使用

3、选择器规则

元素选择器

body{...} 选择所有的body元素 li{...} 选择所有的li元素

id 选择器

HTML中的所有元素都有一个共同的属性，id，表示唯一标识符(在整个HTML中id是不可以重复的)

class选择器

HTML中的所有元素都有一个共同的属性，叫做class，只表示一组类别，可以重复，可以多个

几种常见的复合选择器

selector1没有空格直接跟selector2 { ...}表示并且的关系

div.hello {...}是div元素并且class中包含 hello的元素

.hello.world { ...}, class中包含hello的并且class中包含world的元素

div#thello { ...} div元素并且id 是 hello的元素

selector1, selector2 { ... } 表示或的关系

div, .hello { ... } div元素或者class中有hello的元素都应用这套规则

表示层级关系的

通配符选择器

*{...} 所有元素都会应用这套规则

伪类选择器

div.hover{...}

关于元素的位置

4、css示例以及代码

web1: web应用的简单使用和练习 - Gitee.comhttps://gitee.com/ren-xiaoxiong/web1/tree/master/src/main/resources/static

三、CSS的常见用法

font-familyfont-size

font-weight

font-style

color

text-align

text-decoratin

text-indent

line-height

backgroud-color

backgroud-image

路径是如果是相对路径就是相对于css的

border-radius

小结

盒模型的基本认识

在 CSS 中，所有的元素都被一个个的“盒子（box）”包围着，理解这些“盒子”的基本原理，是我们使用 CSS 实现准确布局、处理元素排列的关键。

完整的 CSS 盒模型应用于块级盒子，内联盒子只使用盒模型中定义的部分内容。模型定义了盒的每个部分 —— margin, border, padding, and content —— 合在一起就可以创建我们在页面上看到的内容。为了增加一些额外的复杂性，有一个标准的和替代（IE）的盒模型。

盒模型的各个部分

CSS 中组成一个块级盒子需要：

Content box: 这个区域是用来显示内容，大小可以通过设置 width 和 height.
Padding box: 包围在内容区域外部的空白区域；大小通过 padding 相关属性设置。
Border box: 边框盒包裹内容和内边距。大小通过 border 相关属性设置。
Margin box: 这是最外面的区域，是盒子和其他元素之间的空白区域。大小通过 margin 相关属性设置。

如下图：

弹性布局（flex）

display：flex；响应盒子的内部元素排布方式

相关属性： display：flex； align-items：垂直方向上的孩子元素的对齐方式

just-cpntent:水平方向孩子元素的布局方式

flex-direction

CSS flex-direction 属性指定了内部元素是如何在 flex 容器中布局的，定义了主轴的方向 (正方向或反方向)。

小练习1

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>基础的布局1</title><link rel="stylesheet" href="/font-awesome-4.7.0/css/font-awesome.min.css"><link rel="stylesheet" href="/css/demo1.css">
</head>
<body>
<div class="一篇文章"><div class="标题部分"><span class="标签">原力计划</span><span class="标题">基于Java+Spring+mybatis+vue+element实现酒店管理系统</span></div><div class="下半部分"><div class="左边的图片"><img src="header.png"></div><div class="右边的文字"><div class="上边的简介">酒店管理系统采用B/S结构、java开发语言、以及Mysql数据库等技术。系统主要分为管理员和用户二部分，管理员：首页、个人中心、用户管理、客房类型管理、客房信息管理、客房预订管理、入住登记管理、退房评价管理、系统管理，用户；首页、个人中心、客房预订管理、入住登记管理、点餐管理、退房评价管理、我的收藏管理，前台首页；首页、客房信息、酒店公告、个人中心、后台管理、在线咨询等功能，基本上实现了整个酒店管理系统信息管理的过程。本系统在一般酒店管理系统的基础上增加了最新信息的功能方便用户快速浏览，是一个高效的、动态的、相互友好的酒店管理系统。</div><div class="下面的功能区"><span class="点赞"><i class="fa fa-thumbs-o-up" aria-hidden="true"></i>75赞</span><span class="点踩"><i class="fa fa-thumbs-down" aria-hidden="true"></i>踩</span><span class="作者">java张三</span><span class="更多功能">...</span></div></div></div>
</div>
</body>
</html>

* {magin: 0;padding: 0;box-sizing: border-box;
}.一篇文章, .右边的文字 {display: flex;flex-direction: column;
}.标题部分, .下半部分, .下面的功能区 {display: flex;flex-direction: row;
}.左边的图片 img {width: 133px;height: 100%;object-fit:contain;
}.一篇文章 {width: 800px;height: 136px;border-bottom: 1px solid #eee;
}/* 当鼠标滑过这个元素时 */
.一篇文章:hover {background-color: #eee;
}.标题部分 {height: 30px;align-items: center;
}.标签 {background-color: #fff1f0;color: #fc5531;border-radius: 2px;margin-left: 8px;margin-right: 8px;font-size: 12px;padding: 2px 4px;
}.标题 {font-size: 18px;font-weight: 500;
}.左边的图 {width: 133px;display: flex;align-item: center;height: calc(136px - 30px - 20px);background-color: #eee;
}.右边的文字 {height: calc(136px - 30px);padding: 4px 12px;font-size: 14px;color: #555;
}.上面的简介 {height: 70px;
}.下面的功能区 span {margin: 0 8px;
}

小练习2

<!DOCTYPE html>
<html lang="zh-hans">
<head><meta charset="UTF-8"><title>QQ 聊天框</title><link rel="stylesheet" href="/font-awesome-4.7.0/css/font-awesome.min.css"><link rel="stylesheet" href="/css/demo2.css">
</head>
<body>
<div class="QQ聊天框"><div class="标题部分">2022Java火箭班<div class="特殊功能区">举报<i class="fa fa-angle-down" aria-hidden="true"></i><i class="fa fa-minus" aria-hidden="true"></i><i class="fa fa-square-o" aria-hidden="true"></i><i class="fa fa-times" aria-hidden="true"></i></div></div><div class="功能区部分"><div class="左侧功能区部分"><a href="/" class="active">聊天</a><a href="/">公告</a><a href="/">相册</a><a href="/">文件</a><a href="/">应用</a><a href="/">设置<i class="fa fa-angle-down" aria-hidden="true"></i></a></div><div class="右侧功能区部分"><a href="/">语音</a><a href="/">视频</a><a href="/">课程</a><a href="/">更多</a></div></div><div class="主体部分"><div class="左侧主体部分"><div class="聊天内容展示区"></div><div class="聊天输入区"></div></div><div class="右侧主体部分"><div class="群通知区域"></div><div class="群文件区域"></div><div class="群成员区域"></div></div></div>
</div>
</body>
</html>

* {margin: 0;padding: 0;box-sizing: border-box;
}body {width: 100vw;height: 100vh;display: flex;align-items: center;justify-content: center;
}.QQ聊天框 {width: 600px;height: 480px;background-color: #eee;
}.标题部分 {height: 38px;background-image: linear-gradient(to right, #0D7FFA, #0BD2FA);  /*渐变色*/text-align: center;line-height: 38px;position: relative; /* 坐标系 */
}.特殊功能区 {position: absolute; /* 采用绝对坐标进行布局 */height: 38px;top: 0;right: 10px;width: 140px;display: flex;align-items: center;justify-content: space-between;
}.功能区部分 {height: 44px;border-bottom: 1px solid #aaa;
}.主体部分 {height: calc(100% - 38px - 44px);background-color: #999;
}.功能区部分 {display: flex;align-items: center;justify-content: space-between;padding: 0 8px;
}.左侧功能区部分 a {display: inline-block;height: 44px;line-height: 44px;text-decoration: none;color: #888;
}.左侧功能区部分 a.active {border-bottom: 2px solid #000;color: #000;
}.左侧功能区部分 a:hover {color: #000;
}.主体部分 {display: flex;align-items: stretch;
}.左侧主体部分 {width: 490px;display: flex;flex-direction: column;background-color: yellow;
}.聊天内容展示区 {height: 300px;background-color: orange;
}.聊天输入区 {height: calc(100% - 300px);background-color: blue;
}.右侧主体部分 {width: calc(100% - 490px);background-color: pink;
}

小练习3

<!DOCTYPE html>
<html lang="zh-hans">
<head><meta charset="UTF-8"><title>聊天记录</title><link rel="stylesheet" href="/css/demo3.css">
</head>
<body><div class="聊天记录"><div class="头像展示区"><img src="https://pic2.zhimg.com/v2-c772f409a8c2c5603df84c841274d83d_r.jpg"></div><div class="右侧部分"><div class="昵称区域">小熊</div><div class="聊天记录主区域">@全体成员，大家听懂没，下来一定要多练习，多写代码。</div></div></div>
</body>
</html>

* {margin: 0;padding: 0;box-sizing: border-box;
}.头像展示区 {width: 40px;height: 40px;border-radius: 50%;overflow: hidden;
}img {width: 40px;
}body {width: 100vw;height: 100vh;display: flex;align-items: center;justify-content: center;
}.聊天记录 {width: 600px;border-radius: 4px;box-shadow: 1px 1px 3px rgba(0, 0, 0, .7);display: flex;align-items: center;padding: 4px;
}.右侧部分 {margin-left: 12px;
}.昵称区域 {font-size: 12px;color: #aaa;margin-bottom: 4px;
}.聊天记录主区域 {background-color: #eee;padding: 12px;border-radius: 4px;
}

CSS小结

web1: web应用的简单使用和练习 - Gitee.comhttps://gitee.com/ren-xiaoxiong/web1/tree/master/src/main/resources/static/fonttest

form表单以及CSS相关推荐

java_web1:基本标签、form表单、frameset框架标签、CSS样式、javascript、servlet
前端三剑客: html,css,js(javascript) html: Hyper Text Markup Language:超文本标记语言针对字体,图片,视频,音频等等进行操作,设置字体颜色,大 ...
HTML/CSS——form表单select联动（JavaScript方法）
下拉列表:二级联动菜单 Select对象的常用属性 options[]:返回所有option组成的一个数组: name:名称 value:option的value的值 length:设置或读取opti ...
HTML中的form表单的标签、属性、属性值； CSS以及HTML5新增属性、属性值
form表单HTML5.CSS3标签及属性.属性值 form表单HTML标签.属性.属性值: (单行文本输入框) (密码输入框) (单选框) (多选框) (提交按钮) (重置按钮) 或者按钮(空按钮) ...
使用Vue动态生成form表单的实例代码
具有数据收集.校验和提交功能的表单生成器,包含复选框.单选框.输入框.下拉选择框等元素以及,省市区三级联动,时间选择,日期选择,颜色选择,文件/图片上传功能,支持事件扩展. 欢迎大家star学习交流: ...
Java EE WEB工程师培训-JDBC+Servlet+JSP整合开发之13.Form表单处理(1)
–Form 表单简介 –创建并提交表单 –使用Servlet处理表单 • 读取单个请求参数 • 读取多个表单 • 读取所有参数名称 –实例 • 注册会员 ###############Michael分 ...
【Java Web前端开发】HTML表单和CSS部分
文章目录 HTML标签:表单标签 CSS:页面美化和布局控制案例: HTML标签:表单标签 * 表单:* 概念:用于采集用户输入的数据的.用于和服务器进行交互.* form:用于定义表单的.可以定义 ...
第十篇 Form表单
Form表单阅读目录(Content) Form介绍普通的登录使用form组件 Form那些事儿常用字段演示校验使用Django Form流程补充进阶应用Bootstrap样式批量添 ...
Django的Form表单
Django的Form表单 Django Form Form介绍 Form 表单是在前端向后端提交数据最常用的方式,同时在好多场景下都需要对用户的输入进行校验. 以注册为例,Form 需要的三件事: ...

form表单以及CSS

一、form表单

1、form表单的介绍

2、form表单的数据

3、< input >标签

radio

4、< input > 的常用属性以及标签

checked

disabled

placeholder

value

< lable >

< select >

< textarea >

二、CSS

1、CSS的简单介绍

2、CSS的基本使用

3、选择器规则

4、css示例以及代码

三、CSS的常见用法

font-familyfont-size

font-weight

font-style

color

text-align

text-decoratin

text-indent

line-height

backgroud-color

backgroud-image

border-radius

盒模型的基本认识

弹性布局（flex）

CSS小结

form表单以及CSS相关推荐

最新文章

热门文章