web开发实战 10-19：-优快云博客

本文链接：https://blog.youkuaiyun.com/2301_77097615/article/details/143070076

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>元素应用仿写</title>
<meta name="viewport"
	  content="width=device-width,initial-scale=1.0">
	<style>
		body {
			font-family: Arial,sans-serif;
		}
		.container {
			width: 80%;
			margin:auto;
		}
		header {
			background-color: #E66062;
			padding:10px 0;
			text-align: center;
		}
		nav ul {
			list-style: none;
			padding: 0;
		}
		nav ul li {
			display: inline;
			margin-right: 10px;
		}
		nav a {
			text-decoration: none;
			color:#35B54D;
		}
		table {
			width:100%;
			border-collapse: collapse;
			margin-top: 20px;
		}
		th, td {
			border: 1px solid #8580C6;
			padding:8px;
			text-align: left;
		}
		th {
			background-color: #E5C6C7;
		}
		form {
			margin-top: 20px;
		}
		label {
			display: block;
			margin-top: 10px;
		}
		input[type="text"], input[type="email"], textarea {
			width: 100px;
			padding: 8px;
			margin-top: 5px;
		}
		input[type="submit"] {
			background-color: #C477C9;
			color: #B53035;
			padding: 10px 20px;
			border: #DD9A9B double;
			cursor: pointer;
		}
		input[type="submit"]:hover {
			background-color: #BFEC27;
		}
	</style>
</head>

<body>
	<div>
		<header>
			<h1>欢迎来到网站开发</h1>
		</header>
		
		<nav>
			<ul>
				<li><a href="https://kimi.moonshot.cn/">Kimi</a>
				</li>
				<li><a href="https://www.baidu.com/">Baidu</a>
				</li>
			</ul>
		</nav>
		
		<section>
			<h2>Unordered List</h2>
			<ul type="disc" >
				<li>example1</li>
				<li>example2</li>
				<li>example3</li>
				<li>example4</li>
			</ul>
			
			<h2>Ordered List</h2>
			<ol type="A" start="2">
				<li>1e</li>
				<li type="I" value="8">2e</li>
				<li>3e</li>
				<li>4e</li>
			</ol>
		</section>
		
		<section>
			<h2>Table</h2>
			<table>
				<tr>
					<th>ID</th>
					<th>NAME</th>
					<th>NUM</th>
				</tr>
				<tr>
					<td>12</td>
					<td>xie</td>
					<td>67</td>
				</tr>
			</table>
		</section>
		
		<section>
			<h2>Form</h2>
			<form action="https://kimi.moonshot.cn/" method="post">
				<label for="name1">Name:</label>
				<input type="text" id="name1">
				
				<label for="select1, select2">Sex:</label>
				<input type="radio" id="select1">male
				<input type="radio" id="select2">female
				
				<input type="submit" value="提交">
				
				<label for="reset">重置</label>
				<input type="reset" id="reset">
			</form>
		</section>
		
	</div>
	
</body>
</html>

码农心得

css中的style在选择器与{}间加上空格，在属性名：值间加上空格。而其他元素内部属性赋值直接属性名=“” 即可，之间不用存在空格。

border边框；border-collapse表示边框合并规则

在CSS中，border-collapse 属性用于设置表格的边框合并行为。当这个属性设置为 collapse 时，它意味着表格的相邻单元格之间的边框会合并为一个单一的边框，而不是在相邻边框之间显示空隙。

如果 border-collapse 设置为 separate（默认值），则单元格的边框会显示为独立的线，相邻边框之间会有空隙。

表格元素样式；

		th, td {
			border: 1px solid #8580C6; 边框
			padding:8px;填充
			text-align: left; 左对齐
			background-color: #E5C6C7; 单元格背景颜色

		}

属性选择器，并集选择器

		input[type="text"], input[type="email"], textarea {
			width: 100px;
			padding: 8px;
			margin-top: 5px;
		}

<label for="email1">Email:</label>
<input type="email" id="email1">邮箱号
label设置for属性，可帮助点击文字Email：时，将光标定位至相同id号的表单输入框中。此时id号，不是id样式，应为id样式会在前文用#设置。

Email：文字显示在输入框的上方，