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

2022-03-10 10:35:38 阅读：116 来源： 互联网

标签：form color background border 选择器 css 属性

form表单

<form action='' method='' enctype=''>
<input type='text'>
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

<h1>注册页面</h1>
<!--    在form标签内部书写的获取用户的数据都会被form标签提交到后端-->
<!--    action用来控制数据提交的后端路径，给哪个服务端提交数据-->
<!--    1 什么都不写 默认就是朝当前页面所在的url提交数据-->
<!--    2 写全路径：www.baidu.com-->
<!--    3 只写路径后缀action='/index/' 自动识别当前服务端的ip和port端口到前面-->
<!--      host:port/index/-->
    <form action="" method="" >
        <p>
            <label for="d1">用户名<input type="text" id="d1"></label>
        </p>
        <p>
            <label for="d2">密&nbsp&nbsp&nbsp码<input type="password" id="d2"></label>
        </p>
        <p>
            生&nbsp&nbsp&nbsp日<input type="date">
        </p>
        <p>
<!--            所有获取用户输入的标签，都应该有name属性-->
<!--            name类似字典的key，用户输入的数据类似字典的value-->
            <input type="radio" name="gender" checked="checked">男
            <input type="radio" name="gender">女
            <input type="radio" name="gender">其他
        </p>
        <input type="submit" value="注册">
        <input type="button" value="按钮">
        <input type="reset" value="重置">
<!--        也能提交form表单的数据-->
        <button>点我</button>
    
    input标签 通过type变形
    text：普通文本
    passowrd：密文
    file:文件
    date：日期
    submit：用来出发form表单提交的数据
    button：普通的按钮，本身没有任何功能，但是学了js之后可以给它自定义各种功能
    reset：重置内容
    redio：单选
    	默认选中要加checken='checked',当标签名和属性名一样的时候可以简写
        <input type="radio" name="gender" checked>
    checbox:多选
    <select name="" id="">
                <option value="">上海</option>
                <option value="" selected="selected">北京</option>
                <option value="">深圳</option>
            </select>

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：隐藏

盒子模型

<style>
        body{
            margin: 0;
        }
        #d1{
            width: 20%;
            height: 1000px;
            background-color: greenyellow;
            float: left;
        }
        #d2{
            width: 80%;
            height: 2000px;
            background-color: blue;
            float: right;
        }

    </style>
# 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;
        }

标签：form,color,background,border,选择器,css,属性
来源： https://www.cnblogs.com/hzangyao/p/15988357.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9