Learning Notes - day27

Form:
				form: 
					Properties:
						action: Submit path, request path
						method: 
							get: Postcards
								The parameter url is raised.
								Limited capacity,
								Unsafe,
								There are caches.
									http://www.baidu.com?uname=zs&rnd=1002
							post: envelope
								Put parameter url, request entity
								Relative safety
								There is no limit to theory.
							
							put:
							delete:
						enctype:
							enctype="multipart/form-data"
							Set when files exist
				Input: Input, input library, password box, radio button, check box, hidden field, submit, reset, button
					type:
						Default: text
						Password: password
						radio: 
							name: Grouping, Group, Mutual Exclusion
							Note: value is set
							checked: Selected by default
								checked="checked" or checked
								In js: checked=true
								Select more than one, and the last one takes effect.
						checkbox: Reelection
							name: grouping, not mutually exclusive
								Note: value is set
							checked: 
						hidden:
							Hidden domain, submissible,
							name,value must be set
						submit: 
							Submission
							
						reset: 
							Reset
						button: 
							Button, used in conjunction with js
						
						file: 
							method: post
							enctype: multipart/form-data
				select:
					Drop-down box, drop-down menu
					Property name: Settings
					Subtag:
						option: 
							<option> </option>
							Value: Set the value that is submitted
							No value: value is innerHTML.
					
					Only one of these drop-down menus can be selected.
					Check the drop-down menu:
					Attribute: multiple="multiple"
						
											
							
						
						
					
				button: 
					type attribute:
						button
						reset: 
						submit: default
						
						
				Properties:
					name: Submitted field
					Disad: disabled, unable to submit
					readonly: Can submit
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<!--
			method:Default value get
			input:Properties:
				placeholder="enter one user name"
				autocomplete="on" : on,off
				//Mandatory: required="required"
				pattern="^\d{1,3}$":regular
		-->
		<form action="">
			//User name: <input type="text" name="username" value="zs" autocomplete="on" required="required"/>
			//Age: <input type="text" name="age" value="18" pattern="^[0-9]{1,3}$"/>
			<!--understand-->
			//Color: <input type="color" name="color"/>
			//Number: <input type="number" name="number"/>
			//Date: <input type="date" name=""id=""value="/>
			//Date: <input type="datetime" name=""id=""value="/>
			//Date: <input type="datetime-local" name=""id=""value="/>
			<input type="month" name="" id="" value="" />
			<input type="week" name="" id="" value="" />
			<input type="submit" name="" id="" value="Submission" />
			
		</form>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<!--Introducing mode:
				1.inline
				html in style Attribute, highest priority
				Decoupling:
					html+css
				2.inside
					style Write in Tags CSS Code,
				
				3.external
					xxx.css file
					link href="xxx.css Path"
					
				Priority:
					The inline priority is the highest, with the same internal and external priority, and the later comes to the top.
					inline > inside==external
					1000	100
					
		-->
		<link rel="stylesheet" type="text/css" href="css/style01.css"/>
		<style type="text/css">
			div{
				width: 100px;
				height: 100px;
				border: 1px solid green;
			}
		</style>
		
	</head>
	<body>
		<!--<div id="" style="width: 200px;height: 200px;border: 1px solid red;">-->
		<div></div>
		<div></div>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
		/*
		 Initialization
		 Typeface:
		 margin: 
		 padding: 
		 * */
			*{
				font-size: 50px;
				font-family: "Song style";
				/*italic Italic
				 oblique*/
				font-style: oblique;
				font-weight: bold;
			}
			/*id*/
			#div{
				color: green;
			}
			/*element*/
			span{
				background: deeppink;
			}
			div{
				
			}
			
			/*class attribute*/
			.div{
				border: 1px dashed gray;
			}
			/*
			 Selector:
			 	#: id
			 	.:Class class
			 	This element: label selector, element selector, node
			 	*: Unified selector
			 * */
			
		</style>
	</head>
	<body>
		<div id="div" class="div">div</div>
		<span class="div">span</span>
		<span>span2</span>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#div{
				width: 1000px;
				height: 200px;
				/*
				 * color:
				 * image:
				 * repeat:
				 */
				background:red url(img/cxk.jpg) no-repeat;
				/*Enlarge the background picture:
				 It's exactly the same size as the element.
				 background-size: 100% 100%;
				 cover:Full coverage, but possibly picture completion
				 contain:The picture is fully displayed, but may not be covered.
				 
				 * */
				background-size: contain;
			}
			#camera{
				height: 20px;
				background: url(img/camera.png) no-repeat;
				background-position: 10px -20px;
			}
			.pp{
			    height: 25px;
			    width: 25px;
			    background: url(img/pass_login_icons.png) no-repeat;
			    background-position: -134px 0;
			}
		</style>
	</head>
	<body>
		<div id="div">
			
		</div>
		<div id="camera">
			
		</div> 
		<div class="pp"></div>
	</body>
</html>

Frame

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#border{
				width: 200px;
				min-height: 150px;
				/*border: 1px solid red ,5px dashed yellow ,10px dotted green ,20px double blue;*/
				border-width: 1px 5px 10px ;
				border-style: dashed double solid dotted; 
				border-color: gold #000 #100860 rgb(250,0,0);
				/*border: 1px 5px 10px dashed double solid dotte gold #000 #100860 rgb(250,0,0);*/
			}
		</style>
	</head>
	<body>
		<!--
			border
		-->
		<div id="border">
			
		</div>
	</body>
</html>

Border triangle

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			body{
				background-color: #008000;
			}
			#tri{
				width: 0;
				height: 0;
				border: 100px solid ;
				/*border-color: red blue green gold;*/ 
				/*border-color: red transparent transparent transparent;*/ 
				border-color: red rgba(0,0,0,0.2) rgba(0,0,0,0.1) rgba(0,0,0,0.3); 
			}
		</style>
	</head>
	<body >
		<div id="tri">
			
		</div>
	</body>
</html>

Border fillet

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#circle{
				width: 200px;
				height: 200px;
				border: 1px solid red;
				/*circular*/
				border-radius: 50%;
				background: url(img/timg.jpg) ;
				background-size: contain;
				
			}
			#tuoyuan{
				width: 200px;
				height: 100px;
				border: 1px solid red;
				border-radius: 50%;
				background: url(img/timg.jpg) no-repeat ;
				background-size: 100% 100%;
				/*shadow*/
				box-shadow: 5px 5px 5px yellow;
			}
		</style>
	</head>
	<body>
		<div id="circle">
			
		</div>
		<div id="tuoyuan">
			
		</div>
	</body>
</html>

Location

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.dv1{
				width: 50px;
				height: 50px;
				background: red;
				/*Location*/
				/*Relative positioning:
				 Reference object: its initial position
				 * */
				position: relative;
				top: 50px;
				left: 50px;
			}
			.dv2{
				width: 100px;
				height: 100px;
				background: green;
				/*Absolutely:
				 Reference: The first ancestor element that sets the position attribute, up to body
				 * */
				position: absolute;
				top: 100px;
				left: 100px;
			}
			.dv3{
				width: 200px;
				height: 200px;
				background: blue;
				/*
				 * Fixed:
				 * Reference: body
				 */
				position: fixed;
				top: 10px;
				left: 10px;
			}
		</style>
	</head>
	<body>
		<div class="dv1"></div>
		<div class="dv2"></div>
		<div class="dv3"></div>
	</body>
</html>

layout

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.container{
				width: 960px;
				min-height: 1000px;
				background: pink;
				float: left;
			}
			.head{
				width: 100%;
				height: 200px;
				background: skyblue;
				float: left;
			}
			
			.body{
				width: 100%;
				/*height: 700px;*/
				float: left;
				background: greenyellow;
				
			}
			/*
			 Set up
			 * */
			.body .main{
				width: 70%;
				height: 700px;
				background: red;
				float: left;
			}
			
			.body .sub{
				width: 29%;
				height: 700px;
				background: cornsilk;
				float: right;
			}
			
			.foot{
				float: left;
				width: 100%;
				height: 100px;
				background: darkgray;
			}
		</style>
	</head>
	<body>
		<div id="" class="container">
			<!--The head has begun.-->
			<div class="head">
				
			</div>
			<!--The head is over.-->
			<!--The body has begun.-->
			<div class="body">
				<div class="main"></div>
				<div class="sub"></div>
			</div>
			<!--The body is over.-->
			<!--The tail begins.-->
			<div class="foot"></div>
			<!--The end of the tail.-->
		</div>
	</body>
</html>

Overflow overflow

/*overflow: hidden;*/
overflow: scroll;

Tags: Attribute

Posted on Wed, 09 Oct 2019 14:26:31 -0700 by SueHubert