web第三天表单与css基础

一，表单

　　1，表单标签

　　　　<form> : 表单的最外层容器

　　　　<input> : 标签用于收集用户容器，根据不同的Type属性值，展示不同的控件，如输入框，密码框，复选框

　　　　action ：用户输入的信息的提交地址

　　　　<input type=“” >决定了当前是什么控件。（单标签）

　　　　text : 文本输入框

　　　　password : 密码输入框

　　　　checkbox ：复选框

　　　　radio ：单选框（在radio单选框中加入 name=" " 属性可以让单选框成为一组.）

　　　　submit ：提交控件

　　　　reset ：重置控件

　　　　button : 按钮控件

　　　　file ：上传控件

　　　　textarea ：多行文本框（双标签）

　　　　select，option（双标签）：下拉菜单控件

　　　　控件属性

　　　　selected ：select下拉菜单控件中默认选中有selected属性的option控件。

　　　　disabled ：禁止操作（select input）

　　　　checked ：选中操作（input）

　　　　size ：显示下拉个数

　　　　multiple ：多选操作（select input上传多个文件）

　　　　placeholder ：输入框的提示信息

　　　　辅助表单lable ：提高用户体验，让选中范围变大

　　　　　　1 <input type="checkbox" name="submit" id="a"><label for="a">啊啊</label>

　　　　　　2 <label ><input type="checkbox" name="submit" id="">安安</label>

　　　　注：表单嵌套没有必要的嵌套规则，比较随意。　

　　2，HTML中的属性：

　　　　假如属性与属性值为同一个值的话可以简写。

　　　　例 selected="selected" 可以简写为selected

二，CSS基础

1，div和span?

　　这两个标签都是没有任何默认样式的。( 样式都是通过CSS来控制 )

　　div : 划分区域的
　　span : 修饰文字

2，CSS入门

　　CSS ：就是美化页面的（HTML）

　　选择器 { 属性:值; 属性:值 }

　　注：CSS样式和HTML属性，都是没有先后顺序的。

　 CSS中的单位：px（像素） %（百分比 , 是一个相对的单位，根据外层容器大小决定的）

3，CSS注释

　　/* 要注释的内容 */

　　ctrl+/ 或 shift+alt+a

4，CSS引入方式

　　1. 内联样式(行间样式)
样式写到html标签身上的。
            通过style属性添加的
            区别：内联只针对当前标签，不能对样式进行复用。
            建议：尽量不要写内联样式，推荐内部、外部两种写法。

        2. 内部样式
            <style>
                ...CSS
            </style>

        3. 外部样式
            有一个单独的文件： xxx.css yyy.css
            <link>定义是引入外部资源，标签引入样式文件
                href属性：样式的地址
                rel属性：确定文档（HTML）跟要引入的资源关系
            区别：跟内部样式的，外部样式可以在多个页面之间复用CSS。

            还有另外一种外部引入CSS的方式（了解）
                @import url('地址');
                区别：https://www.cnblogs.com/my--sunshine/p/6872224.html

5，CSS颜色

　　1. 单词表示法：
red、yellow、green、blue、white、black ... hotpink

　　2. 十六进制表示法：

        0 1 2 3 4 5 6 7 8 9 10 11 12 13 ...
        0 1 10 11 100 101 110 111 ...
        0 1 2 3 4 5 6 7 8 9 a b c d e f 10 11 12 ... 1a 1b ..

#000000(黑色) #ffffff(白色) #ff0000(红色)

　　3. rgb三元色：
        里面的值：0~255
        rgb(0,0,0) (黑色)   rgb(255,255,255) (白色)   rgb(255,0,0) (红色)

6.CSS背景

　　background-color：背景颜色

　　background-image：背景图片

url(地址) : 默认是 x y 都平铺

　　background-repeat：背景图片的平铺方式
　　repeat;默认
   repeat-x;
   repeat-y;
   no-repeat;

跟图片的区别：
　　　　经常在网页中变化的图，一般用图片。
　　　　而在网页中用于修饰的图，一般用背景。

　　background-position：背景图片的位置
　　　　x y : 0 0 ( 针对当前容器的最上角 )
　　　　像素 % | x(left center right) y(top center bottom)

　　background-attachment：背景图随滚动条的移动方式

　　　　scroll : 滚动（默认值）
　　　　fixed : 固定

　 scroll下的定位模式position是根据当前容器来偏移的
　　fixed下的定位模式position是根据当前页面来偏移的

小例子：视觉差的网站：https://divups.com/

7,CSS边框

　　border-style：边框的样式
　　solid : 实线
　　dashed : 虚线
　　dotted : 点线
　　border-width：边框的大小
　　border-color：边框的颜色

　　如何针对某一条边框:
　　border-left-style
　　border-right-style
　　border-top-style
　　border-bottom-style

　　颜色设置中，有一个单词表示透明：transparent

三，表单与表格嵌套实例

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7     <title>Document</title>
 8 </head>
 9 <body>
10     <form action="" text-align="center">
11        <table>
12            <tr width="100px">
13                <td height="30px"><label for="dzyx">电子邮箱：</label></td>
14                <td><input type="text" name="" id="dzyx"></td>
15            </tr>
16            <tr>
17                <td><label for="mima">设置密码：</label></td>
18                <td><input type="password" name="" id="mima"></td>
19            </tr>
20            <tr>
21                <td><label for="username">真实姓名：</label></td>
22                <td><input type="text" name="" id="username"></td>
23            </tr>
24            <tr>
25                <td align="right">性别：</td>
26                <td> <label><input type="radio" name="username" id="">男</label> <label> <input type="radio" name="username" id="">女</label></td>
27            </tr>
28            <tr align="right">
29                <td>生日：</td>
30                <td> 
31                     <select name="" id="">
32                         <option selected disabled>请选择：</option>
33                         <option value="">1997</option>
34                         <option value="">1998</option>
35                         <option value="">1999</option>
36                     </select>年
37                     <select name="" id="">
38                         <option value="" selected disabled>--</option>
39                     </select>月
40                     <select name="" id="">
41                         <option value="" selected disabled>--</option>
42                     </select>日<br>
43                     <span style="color: blue;">为什么要填写我的生日？</span>
44                </td>
45            </tr>
46            <tr align="right">
47                <td>我现在：</td>
48                <td>
49                    <select name="" id="">
50                        <option value="" selected disabled>请选择身份</option>
51                        <option value="">学生</option>
52                        <option value="">上班</option>
53                    </select>（非常重要）
54                </td>
55            </tr>
56            <tr align="center">
57                <td colspan="2"><img src="./imgs/dd.png" alt=""></td>
58            </tr>
59            <tr align="right">
60                <td>验证码：</td>
61                <td><input type="text"></td>
62            </tr>
63            <tr >
64                <td colspan="2" style=" widows: 200px; height:50px; background-size:100% 100%">
65                 <img src="./imgs/liz.png" alt="">
66                 </td>
67            </tr>
68        </table>
69     </form>

posted on 2020-02-05 20:50 传奇盗贼抓根宝阅读(179) 评论(0) 编辑收藏举报