前端HTML+CSS_htmlcss管理-优快云博客

本文链接：https://blog.youkuaiyun.com/m0_60323584/article/details/124480800

这篇博客介绍了HTML和CSS的基础知识，包括常见的HTML标签、CSS的选择器和盒子模型的应用。通过实例展示了如何使用CSS来修改网页元素的样式，如背景色、字体、边框等。还涵盖了网页布局、表单元素以及用户注册页面的设计。同时，文章提到了CSS的引入方式，如行内、内部和外部CSS。此外，还讨论了CSS在实际项目中的应用，如学生管理系统和小票打印页面的样式设定。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一.概述：

1.HTML是超文本标记语言.

常见标签：

1,输入框: 单选多选
2,图片
3,按钮
4,视频
5,超链接

2.CSS是层叠样式表,主要用来修饰HTML网页的

html文件引入.css文件

1.CSS代码可以出现的位置:

1,行内CSS
2,内部CSS
3,外部CSS
语法: 选择器 { 属性名:属性值; }

2.选择器!!!

分类：

1.标签名选择器 div{}

2.class选择器 .a{}

3.id选择器 #b{}

4.分组选择器 div,#a,.b{}

5.属性选择器 input[type="password"]{}

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>测试 css的选择器</title>
		<style>
			/* 1.标签名选择器:按照标签的名字选中元素 */
				/* 练习0:给网页设置背景色 */
				body{
					background-color:#d0e4fe;
				}
				/* 练习1:把a的文字改成绿色 */ 
				a{
					color: green;
				}
				/* 练习2:把div加个边框颜色 */
				div{
					text-align:center;/* 文字居中 */
					border: 1px solid red;/* 边框的宽度 实线 边框的颜色 */
					border-radius:15px; /* 圆角边框 */
				}
			/* 2.class选择器:先给元素添加class属性+通过.选中元素 */
				/* 练习1:把div的字号变大 */
				.a{/* 选中class=a的所有元素,class的值可以相同 */
					font-size: 25px;/* 字号 */
					font-family: "宋体";/* 字体 */
				}
			/* 3.id选择器:先给元素添加id属性（值必须唯一）+通过#获取id的值 */
				/* 练习1:把div1添加蓝色圆角边框 */
				#b{/* 获取网页中id=b的元素 */
					border:1px solid blue;/* 边框的宽度 实线 颜色 */
					border-radius: 10px;/* 边框圆角 */
				}
			/* 综合练习:给按钮添加背景色,选择器有好几种,优先使用id选择器选择高效 */
			#c{
				background-color: blue;/* 背景色 */
				border: 1px dashed red;/* 边框的宽度 虚线 颜色 */
				color: white;/* 文字的颜色 */
			}
			
		</style>
	</head>
	<body>
		<a>我是a1</a>
		<a>我是a2</a>
		<div class="a" id="b">我是div1</div>
		<div class="a">我是div2</div>
		<button id="c">按钮</button>
	</body>
</html>

学生管理系统

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>学生信息管理系统MIS</title>
		<style>
			.a{
				width: 300px;/* 宽度 高度 */
				height: 30px;
			}
			#btn1{
				/* 背景色 文字的颜色 宽度 高度 */
				background-color: #0000FF;
				border-color: #0000FF;
				color: white;
				width: 50px;
				height: 30px;
				font-size: 15px;
			}
			#btn2{
				/* 背景色 文字的颜色 宽度 高度 */
				background-color: hotpink;
				border-color: hotpink;
				color: white;
				width: 50px;
				height: 30px;
				font-size: 15px;
			}
		</style>
	</head>
	<body>
		<!-- 完成网页的制作,总结: 
			1,标签:form表单可以提交数据,table表格,tr行,td列,h1标题,input输入框,
					select下拉框,option下拉选项,button按钮,br换行
			2,属性:method是form提交数据的方式,默认是get,数据在地址栏
					action是form提交的数据交给哪个程序处理,#是没人处理
					name是提交数据时的key,placeholder是输入框的提示,
					checked是默认选中,value是提交的数据的值
		-->
		<form method="post" action="#">
			<table>
				<tr>
					<td>
						<h1>学生信息管理系统MIS</h1>
					</td>
				</tr>
				<tr>
					<td>姓名:</td>
				</tr>
				<tr>
					<td>
						<input class="a" type="text" name="user" placeholder="输入姓名.."/>
					</td>
				</tr>
				<tr>
					<td>年龄:</td>
				</tr>
				<tr>
					<td>
						<input class="a" type="number" name="age" placeholder="输入年龄.."/>
					</td>
				</tr>
				<tr>
					<td>
						性别:(单选框)
						<input type="radio" name="sex" value="1" checked="checked"/>男
						<input type="radio" name="sex" value="0"/>女
					</td>
				</tr>
				<tr>
					<td>
						爱好:(多框)
						<input type="checkbox" name="hobby" value="ppq" checked="checked"/>乒乓球
						<input type="checkbox" name="hobby" value="ps"/>爬山
						<input type="checkbox" name="hobby" value="cg"/>唱歌
					</td>
				</tr>
				<tr>
					<td>
						学历:(下拉框)
						<select name="edu">
							<option value="1">本科</option>
							<option value="2">专科</option>
							<option value="3">小学</option>
						</select>
					</td>
				</tr>
				<tr>
					<td>
						入学日期:<br />
						<input type="date" name="intime"/>
					</td>
				</tr>
				<tr>
					<td>
						<input id="btn1" type="submit" value="保存"/>
						<input id="btn2" type="reset" value="取消"/>
					</td>
				</tr>
			</table>
		</form>
	</body>
</html>

3.盒子模型

CSS把HTML里的元素看做是一个一个的盒子.
内边距padding: 一个盒子里的现象,内容和边框的距离
外边距margin: 盒子和盒子间的距离
边框border:是指盒子可以设置边框

小票

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>测试 小票</title>
		<style>
			/* 统一网页的风格 */
			body{
				width: 300px;/* 宽度 */
			}
			/* 加大字号 */
			.a{
				font-size: 30px;
			}
			/* 文字居中 */
			.b{
				/* text-align:center ; */
				margin-left: 80px;/* 左 内边距 */
			}
			/* 设置首行缩进 */
			#readme{
				text-indent: 30px;
			}
			/* 设置图片居中 */
			img{
				margin-left: 20px;
			}
			/* 设置水平线: 宽度 虚线 红色*/
			hr{
				border:1px dashed red;
			}
		</style>
	</head>
	<body>
		<div>顾客联</div>
		<div class="a">请您留意取餐账单号</div>
		<div class="b">自取顾客联</div>
		<div>永和大王(北二环西路店)</div>
		<div>010-62112313</div>
		<div class="b">--结账单--</div>
		<div class="a">账单号:P00000009</div>
		<div>账单类型:食堂</div>
		<div>人数:1</div>
		<div>收银员:张静</div>
		<div>开单时间:2018-04-17 07:24:11</div>
		<div>结账时间:2018-04-17 07:24:22</div>
		<hr />
		<table>
			<tr>
				<td>数量</td>
				<td>品项</td>
				<td>金额</td>
			</tr>
			<tr>
				<td>1</td>
				<td>
					油条豆浆套餐<br />
					1X--油条<br />
					1X--现磨豆浆(热/甜)
				</td>
				<td>7.00</td>
			</tr>
		</table>
		
		<hr />
		<table>
			<tr>
				<td width="180px">支付宝花呗一元早餐</td>
				<td>-3.00</td>
			</tr>
			<tr>
				<td>合计</td>
				<td>4.00</td>
			</tr>
			<tr>
				<td>支付宝</td>
				<td>1.00</td>
			</tr>
			<tr>
				<td>支付宝补贴</td>
				<td>3.00</td>
			</tr>
		</table>
		<hr />
		打印时间:2018-04-17 07:24:22
		<hr />
		<div id="readme">
			根据相关税法规定，电子发票的开票日期同网上申请电子发票的日期，如您需要当日的电子发票请务必在消费当日通过扫描下方二维码，根据指引步骤开具您的增值税电子普通发票。此二维码30天有效，扫描时请保持小票平整。
		</div>
		<div>
			<img src="2.png"/>
		</div>
		<div>官网：www.yonghe.com.cn</div>
		<div>加盟热线：86-21-60769397 或 86-21-60769002</div>

	</body>
</html>

用户注册

创建.css文件

/* 1.修饰input框  宽度高度 内边距 外边距 字号 */
.a{
	width: 330px;
	height: 40px;
}
/* 2.修饰提示文字 字号 颜色 缩进 */
.b{
	font-size: 5px;
	color: gray;
	text-indent: 10px;
}
/* 3.立即注册的按钮 背景色 字的颜色 字号 边框的颜色 居中*/
button{
	background-color: red;
	border-color: red;
	color: white;
	text-align: center;
	width: 330px;
	height: 50px;
	font-size:25px ;
}
/* 4.居中的用户注册 */
h1{
	/* text-align: center; */
	margin-left: 100px;
}

创建html文件，并引入2.css文件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>用户注册</title>
		<!-- 引入外部的css文件 -->
		<link rel="stylesheet" href="2.css"/>
	</head>
	<body>
		<form>
			<table>
				<tr>
					<td>
						<h1>用户注册</h1>
					</td>
				</tr>
				<tr>
					<td>
						<input class="a" type="text" placeholder="用户名" name="user"/>
					</td>
				</tr>
				<tr>
					<td class="b">支持中文、字母、数字、“-”、“_”的组合，4-20个字符</td>
				</tr>
				<tr>
					<td>
						<input class="a" type="password" placeholder="设置密码" name="pwd"/>
					</td>
				</tr>
				<tr>
					<td class="b">建议使用数字、字母和符号两种以上的组合，6-20个字符</td>
				</tr>
				<tr>
					<td>
						<input class="a" type="password" placeholder="确认密码" name="repwd"/>
					</td>
				</tr>
				<tr>
					<td class="b">两次密码输入不一致</td>
				</tr>
				<tr>
					<td>
						<input class="a" type="number" placeholder="验证手机" name="tel"/>
						或 
						<a href="#">验证邮箱</a>
					</td>
				</tr>
				<tr>
					<td>
						<input type="checkbox" />
						我已阅读并同意
						<a href="#">《京淘用户注册协议》</a>
					</td>
				</tr>
				<tr>
					<td>
						<button type="submit">立即注册</button>
					</td>
				</tr>
			</table>
		</form>
	</body>
</html>