HTML和CSS样式

关二爷）

于 2024-07-27 17:12:22 发布

阅读量310

点赞数 15

文章标签： html css tensorflow

本文链接：https://blog.csdn.net/m0_73570063/article/details/140737711

版权

1.html

表单

<form action="提交表单的地址" method="提交的方式 get/post">
			<!--表单中的组件-->
			<input type="text" name="Username"/>  username就是key
			<!-- 单选框 -->
			<button type="submit" >提交</button>
	
			<!-- 密码框 -->
		    <input type="password" name="username"/>
			<div>
			<!-- 选择单选框 -->
			<input checked type="radio" value="男性" name="sex" id="sexMan"/><label for="sexMan">男</label>
			<input checked type="radio" value="w性" name="sex" id="sexWoman"/><label for="sexWoman">女</label>
			</div>
			<!-- div是一个容器，独占一行 -->
			<!-- 在一个表单中，name值一样的会产生互斥，只能选一个 -->
			<div>
				<!-- 复选框 -->
				<input type="checkbox" name="hobby" id="sing" value="sing"/><label for="sing">唱</label>
				<input disabled type="checkbox" name="hobby" id="dance" value="dance"/><label for="dance">跳</label>
				<input type="checkbox" name="hobby" id="rap" value="rap"/><label for="rap">rap</label>
			</div>
			<div>
				<label for="province">省份</label><select name="province" id="province">
				<option value="sds">山东省</option>
				<!-- 如果不写value，value就是山东省（option中间的） -->
				<option value="xjs">新疆省</option>
				<option value="jxs" selected>江西省</option>
				</select>
			</div>
			<div>
				<!-- 多行文本框（没有value值，两个标签中就是它的值，注意两个标签中不要回车，要不然会有内容） -->
				<textarea name="" id="" cols="10" rows="1"></textarea>
			</div>
			<!-- 普通按钮 -->
			<button type="button"></button>
			<!-- 重置按钮（回到表单的初始状态） -->
			<button type="reset"></button>
			<!-- 提交按钮 -->
			<button type="submit"></button>
			<input type="button" />
			<input type="submit" />
			<input type="reset" />
			<!-- 只读 -->
			<input type="text" value="20210300606" name="code" readonly/>
			<!-- 隐藏域 -->
			<input type="hidden" value="20210300606" name="id"/>
		</form>

html其他组件

一到六级标题：h1-h6；

p:文本

合并单元格：colspan是横向合并单元格，rowspan是纵向合并单元格，一般会注释掉后边的单元格

列表:列表有无序的和有序，ol是有序的，ul是无序的，在里面每一项就是一个li

内部样式：有类选择器（.类名），元素选择器（也叫标签选择器）（div），id选择器（#id）

	/* 内部样式*/
			/* 央视选择器 */
			/* id选择器 */
			#boxa{
				height: 100px;width: 100px;
				background-color: cadetblue;
				color: green;
				font-size: 30px;
				text-align: center;
				/* 单行文本垂直居中 （行高=容器高度就会居中）*/
				line-height: 100px;
				/* 字体加粗 */
				font-weight: bold;
				display: none;
			}
			/* 标签选择器（元素选择器） */
			div{
				height: 100px;
				width: 100px;
			}
			/* 类选择器（对class=read的组件生效） */
			.read{
				background-color: hotpink;
			}

浮动组件：float，使用在class里面，需要在css中先定义好一个类选择器.float，浮动之后浮动的内容不会占用空间

.float{
	float: right;
}

2.css

引入css文件用<link rel="stylesheet" href="css文件地址"

做一个页面登陆系统：

有系统名称，用户名，密码，登录按钮

html页面：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="css/login.css" />
	</head>
	<body class="bg" style="background-image: url(image/yi.png);">
		
		
		<!-- <img src="image/EasyImg.png" alt="失败了" /> -->
		<div class="loginbox">
			<div class="title">超级宇宙麻辣鸭脖销售系统</div>
			<div class="item">
				<label>用户名</label>
			    <input type="text" name="username"/></div>
			<div class="item">
				<label >密码</label>
				<input type="password" name="password"/>
			</div>
			<div class="btnbox">
				<button type="button">登录</button>
			</div>
		</div>
	</body>

css页面：

.loginbox{
	border: 1px solid #FF7043;
	border-radius: 10px;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%,-50%);
	background-color: #4B0082;
}
.loginbox>.title{
	color: #4B0082;
	font-weight: bold;
	font-size: 10px;
	text-align: center;
	padding: 20px,0px;
}
.loginbox label{
	color: antiquewhite;
	font-family: 宋体;
	width: 60px;
	text-align: right;
	display: inline-block;
}
.loginbox input{
	height: 20px;
	width: 200px;
	border: 1px solid black;
	outline: none;
}
.loginbox>.item{
	border-bottom: 1px solid red;
	margin: 10px;
}
.loginbox>.btnbox{
	
	text-align: center;
	font-size: 30px;
	
}
.loginbox button{
	width: 120px;
	height: 60;
	text-align: center;
	font-size: 30px;
	border: none;
	background-color: #FF7043;
	border-radius: 4px;
}
.bg{
	background-image: url(image/yi.png);
	background-size: cover;
}

这样就会有一个登陆界面

定位：

body部分来验证

		<div class="read"></div>
		<div class="green" style="position: fixed;bottom: 0px;right: 100px;"></div>
		<div class="pink" style="position: relative;left: 10px;top: 6px;"></div>
		<div class="green" style="position: absolute;"></div>
		<div class="read"></div>

在head部分设置style：

<style>
			div{
				height:100px;
				width: 100px;
			}
			.read{
				background-color: red;
				
			}
			.green{
				background-color: #E6A0C4;
			}
			.pink{
				background-color: #F2B5D4;
			}
		</style>

关二爷）

关注

15
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
HTML和CSS样式

1.absolute 绝对定位参照物是第一个非static定位的父组件，如果找不到参照物就是html/body，不占空间。浮动组件：float，使用在class里面，需要在css中先定义好一个类选择器.float，浮动之后浮动的内容不会占用空间。内部样式：有类选择器（.类名），元素选择器（也叫标签选择器）（div），id选择器（#id）列表:列表有无序的和有序，ol是有序的，ul是无序的，在里面每一项就是一个li。-- 要明白四个属性的参照物是否占空间 -->一到六级标题：h1-h6；
复制链接

扫一扫