form表单 css的选择器和一些属性以及盒子模型，浮动

form表单



input：更下type属性就可以得到对应的效果
	text:文本
     passwrod:密码
     date:日期
     radio:单选框
     checkbox:复选框
     file:文件
     hidden:隐藏属性
textarea:评论框
    
# 按钮：
	input
    	submit 提交
         button
    button按钮：没有实际意义，就是一个空的按钮，后面我们会学事件，用它来绑定事件

action='' method='' enctype=''
action：朝后端发送的地址
	1. 什么都不写：朝当前地址提交
    2. 写全路径
    3. 只写后缀
    	ip:port/index/
form表单可以提交的请求方式：
	get
    post
enctype属性：
	数据格式总共分3种：
    	1. urlencode
        2. form-data
        3. json
对于form表单来说，默认提交的是urlencode格式的数据
	eg: k=v&k1=v1&k2=v2
 json:
    	{"k1":v1, "k2":"v2"}
form表单只能提交：
	1. urlenocde(默认提交)
    2. form-data

form上传文件的条件：
	1. method = 'post'
    2. enctype='form-data'
    # 以上两个条件缺一不可
    
每一个input框都要有一个name属性，如果不写name属性，那么，用户输入的数据是没办法提交到后端的。

name属性名相当于python的字典k，用户输入的数据相当于python的字典value

# 另外：每一个input框也都可以有value属性
radio
checkbox
都要加value，否则无法判断出用户选择的是什么选项

# 其他的input框如果加了value，代表了是默认值

单选框默认选中：checked
复选框默认选中：checked
下拉框默认选中：selectd


注册页面







    
        

            
        

        

            
        

        

            生   日
        

        



            男
            女
            其他
        

        
        
        

        
    
    input标签 通过type变形
    text：普通文本
    passowrd：密文
    file:文件
    date：日期
    submit：用来出发form表单提交的数据
    button：普通的按钮，本身没有任何功能，但是学了js之后可以给它自定义各种功能
    reset：重置内容
    redio：单选
    	默认选中要加checken='checked',当标签名和属性名一样的时候可以简写
        
    checbox:多选

CSS

# 层叠样式表
# 给网页骨架添砖加瓦

语法结构：
	选择器 {
        属性名：属性值
    }
    
注释：
	/*
    	这是注释
    */
    
   ctrl + ? (快捷键)

1. 基本选择器
2. 属性选择器
3. 伪类选择器
4. 伪元素选择器
5. 后代选择器
6. 并列选择器

设置长宽：
	'''
		默认只有块儿级元素可以设置长宽
		默认行内元素不能设置长宽
	'''
文字属性：
	font-size
    font-weight
    颜色属性
    color:red

选择器

后代选择器
 #d1 .p1 .s1 {
            color: red;
        }
并列选择器
    #d1 .p1 .s1 , #d2 a , .s2 {
    		color: red;
        }

颜色属性

#d1 .p1 .s1 {
            /*color: red;*/
            /*1600w  种颜色*/
            /*color: #5b9648;  */
            /*0-255*/
            /*color: rgb(43, 43, 44);*/
            color: rgba(255, 0, 0, 0.1);
        }

背景属性

    /*background-color: red;*/
            /*background-image: url("123.png");*/
            /*background-repeat: repeat-x;*/
            /*background-repeat: repeat-y;*/
            /*background-repeat: no-repeat;*/
            /*background-position: center center;*/
            /*background-position: 100px 50px;*/

           /*只要是前缀一样的属性，都可以简写 */
            background: no-repeat center center red url("123.png") ;

边框属性

			border-left-color: red;
            border-left-style: solid;
            border-left-width: 5px;

            border-top-color: green;
            border-top-style: dashed;
            border-top-width: 5px;

            border-right-color: blue;
            border-right-style: solid;
            border-right-width: 2px;

            border-bottom-color: blueviolet;
            border-bottom-style: solid;
            border-bottom-width: 5px;

            border: 5px solid red;
 
# border-radius: 50% 画圆

display属性

# inline: 行内元素
# block：块儿级元素
# inline-block：既有行内元素又有块儿级元素的特征
# none：隐藏

盒子模型


# margin:外边距
	以两个快递盒子为例，快递盒与快递盒之间的距离我们称为外边距
# padding: 内边距
	物品与盒子之间的距离，我们称之为内边距
# border
# content

'''
	面试题：margin值是否叠加？
		   不叠加，按照最大的显示
'''

浮动

# float:left
# float:right
        #d2{
            height: 100px;
            width: 100px;
            background-color: yellow;
            float: left;
        }
        #d3{
            height: 100px;
            width: 100px;
            background-color: blue;
            float: left;
        }
 		.clearfix:after {
            content: '';
            display: block;
            clear: both;
        }

相关

标签