欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

海创软件组--20200712-HTML+CSS3雪碧图

程序员文章站 2022-03-13 07:59:00
界面效果一些框的属性文本框的type=text,密码框的type=password,提交框的type=submit,单选按钮type=radio,多选框type=checkbox单选按钮和多选框默认选中加一个checked=“checked”下拉表格的不同处但是下拉表格就不一样了name给后台使用name是为了给后台使用的多选框多选框也类似使用label点击文字选中使用label之后点击文字之后可以选中,并且要设置id对...

界面效果

海创软件组--20200712-HTML+CSS3雪碧图

一些框的属性

文本框的type=text,密码框的type=password,提交框的type=submit,单选按钮type=radio,多选框type=checkbox
单选按钮和多选框默认选中加一个checked=“checked”
海创软件组--20200712-HTML+CSS3雪碧图

下拉表格的不同处

但是下拉表格就不一样了
海创软件组--20200712-HTML+CSS3雪碧图
海创软件组--20200712-HTML+CSS3雪碧图

name给后台使用

name是为了给后台使用的
海创软件组--20200712-HTML+CSS3雪碧图
海创软件组--20200712-HTML+CSS3雪碧图
海创软件组--20200712-HTML+CSS3雪碧图
海创软件组--20200712-HTML+CSS3雪碧图
海创软件组--20200712-HTML+CSS3雪碧图
海创软件组--20200712-HTML+CSS3雪碧图
海创软件组--20200712-HTML+CSS3雪碧图
海创软件组--20200712-HTML+CSS3雪碧图
海创软件组--20200712-HTML+CSS3雪碧图
海创软件组--20200712-HTML+CSS3雪碧图
海创软件组--20200712-HTML+CSS3雪碧图
海创软件组--20200712-HTML+CSS3雪碧图
海创软件组--20200712-HTML+CSS3雪碧图
海创软件组--20200712-HTML+CSS3雪碧图
海创软件组--20200712-HTML+CSS3雪碧图

多选框

多选框也类似

海创软件组--20200712-HTML+CSS3雪碧图
海创软件组--20200712-HTML+CSS3雪碧图
海创软件组--20200712-HTML+CSS3雪碧图
海创软件组--20200712-HTML+CSS3雪碧图
海创软件组--20200712-HTML+CSS3雪碧图
海创软件组--20200712-HTML+CSS3雪碧图
海创软件组--20200712-HTML+CSS3雪碧图
海创软件组--20200712-HTML+CSS3雪碧图
海创软件组--20200712-HTML+CSS3雪碧图
海创软件组--20200712-HTML+CSS3雪碧图
海创软件组--20200712-HTML+CSS3雪碧图
海创软件组--20200712-HTML+CSS3雪碧图

使用label点击文字选中

使用label之后点击文字之后可以选中,并且要设置id
海创软件组--20200712-HTML+CSS3雪碧图

对表单进行分组

海创软件组--20200712-HTML+CSS3雪碧图
海创软件组--20200712-HTML+CSS3雪碧图
海创软件组--20200712-HTML+CSS3雪碧图
海创软件组--20200712-HTML+CSS3雪碧图

完整代码

	<body>

		<form action="target.html">

			<fieldset>
				
				<legend>用户信息</legend>

				<label for="um">用户名</label>
				<input id="um" type="text" name="username"  /> <br /><br />
	
				<label for="pwd">密码 </label>
				<input id="pwd" type="password" name="password" /> <br /><br />
			</fieldset>
			
			<fieldset >
				
				<legend>用户爱好</legend>
			
			性别  <input type="radio" name="gender" value="male" id="male" /><label for="male">男</label>
				<input type="radio" name="gender" value="female" checked="checked" id="female" /><label for="female">女</label> 
				<br /><br />

			爱好 	<input type="checkbox" name="hobby" value="zq" />足球
				<input type="checkbox" name="hobby" value="lq" />篮球
				<input type="checkbox" name="hobby" value="ymq" checked="checked" />羽毛球
				<input type="checkbox" name="hobby" value="ppq" checked="checked"/>乒乓球
			<br /><br />
			
			</fieldset>

			你喜欢的明星 
				<select name="star">

					<optgroup label="女明星">
						<option value="fbb">范冰冰</option>
						<option value="lxr">林心如</option>
						<option value="zw">赵薇</option>
					</optgroup>
					
					<optgroup label="男明星">
						<option value="zbs" selected="selected">赵本山</option>
						<option value="ldh">刘德华</option>
						<option value="pcj">潘长江</option>
					</optgroup>
					
				</select>
			
			<br /><br />

			自我介绍  <textarea name="info"></textarea>
			
			<br /><br />

			<input type="submit" value="注册" />

			<input type="reset" />
			
	
			<input type="button" value="按钮" />
	
			<br /><br />
			<button type="submit">提交</button>
			<button type="reset">重置</button>
			<button type="button">按钮</button>
			
		</form>
	</body>

雪碧图

如果你想要做天猫的的这样的格式
海创软件组--20200712-HTML+CSS3雪碧图
法一是较普通的办法就是创建div,之后把用超链接引入一张张的图片,然后在图片下面写入名字,但是这样需要加载多张图片。
这个法一需要用的图片:
海创软件组--20200712-HTML+CSS3雪碧图
现在法二可以用更加高级的办法,可以只需要加载一张图片,就是把他们都整合在一起,这个就叫做雪碧图,具体整合方法是使用ps,这里就不具体介绍了。
海创软件组--20200712-HTML+CSS3雪碧图
下面先写body的代码
海创软件组--20200712-HTML+CSS3雪碧图

<body>
		<div class="rows">
			<div>
				<a href="javascript:;">天猫</a>
			</div>
			<div>
				<a href="javascript:;">聚划算</a>
			</div>
			<div>
				<a href="javascript:;">天猫国际</a>
			</div>
			<div>
				<a href="javascript:;">外卖</a>
			</div>
			<div>
				<a href="javascript:;">天猫超市</a>
			</div>
		</div>
		<div class="rows">
			<div>
				<a href="javascript:;">天猫</a>
			</div>
			<div>
				<a href="javascript:;">聚划算</a>
			</div>
			<div>
				<a href="javascript:;">天猫国际</a>
			</div>
			<div>
				<a href="javascript:;">外卖</a>
			</div>
			<div>
				<a href="javascript:;">天猫超市</a>
			</div>
	</body>

调整css样式海创软件组--20200712-HTML+CSS3雪碧图

这里有一个语法点,display: -webkit-box;display: flex;要结合下面的代码
海创软件组--20200712-HTML+CSS3雪碧图
这样子浏览器会自动帮你适应div大小,不用你再自己调整。

伪类

之后会用到伪类,在a标签前面加入一个width:86px;height:85px背景是icon.png的一个块
icon.png就是上面那张雪碧图,设置好了之后就是调整它的position
海创软件组--20200712-HTML+CSS3雪碧图

nth-of-type选择器

:nth-of-type(n) 选择器选取属于其父元素的特定类型的第 n 个子元素的所有元素。
这里例如.rows:nth-of-type(1)就是选择class="rows"的第一个元素,.rows:nth-of-type(1) div:nth-of-type(1)就是选择class="rows"的第一个元素它下面的第一个div元素,并且对它的a标签设置伪类,设置他们的position,让图片移动来显示对应的图标,从1-10一一设置。
海创软件组--20200712-HTML+CSS3雪碧图
以下是完整的代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
		/* 清除浏览器的自定义样式 */
			*{
				margin: 0;
				padding: 0;
			}
			/* 去掉a标签的默认下划线 */
			a{
				text-decoration: none;
			}
			/* 设置row的属性*/
			.rows{
				padding: 0 25px;
				display: -webkit-box;
				display: flex;
			}
			.rows div{
				width: 0;
				-webkit-box-flex:1;
				flex:1 ;
			}
			.rows div a {
				font-size: 22px;
				color: #666;
				text-align: center;
				line-height: 50px;
				display: block;
			}
			.rows div a:before{
				content: "";
				display: block;
				margin: 0 auto;
				width: 86px;
				height: 85px;
				background-image: url(img/icon.png);
				background-size: 450px 180px;
			}
			.rows:nth-of-type(1) div:nth-of-type(1) a:before{
				background-position: 0 0;
			}
			.rows:nth-of-type(1) div:nth-of-type(2) a:before{
				background-position: -90px 0;
			}
			.rows:nth-of-type(1) div:nth-of-type(3) a:before{
				background-position: -180px 0;
			}
			.rows:nth-of-type(1) div:nth-of-type(4) a:before{
				background-position: -270px 0;
			}
			.rows:nth-of-type(1) div:nth-of-type(5) a:before{
				background-position: -360px 0;
			}
			.rows:nth-of-type(2) div:nth-of-type(1) a:before{
				background-position: 0 -90px;
			}
			.rows:nth-of-type(2) div:nth-of-type(2) a:before{
				background-position: -90px -90px;
			}
			.rows:nth-of-type(2) div:nth-of-type(3) a:before{
				background-position: -180px -90px;
			}
			.rows:nth-of-type(2) div:nth-of-type(4) a:before{
				background-position: -270px -90px;
			}
			.rows:nth-of-type(2) div:nth-of-type(5) a:before{
				background-position: -360px -90px;
			}
		</style>
	</head>
	<body>
		<div class="rows">
			<div>
				<a href="javascript:;">天猫</a>
			</div>
			<div>
				<a href="javascript:;">聚划算</a>
			</div>
			<div>
				<a href="javascript:;">天猫国际</a>
			</div>
			<div>
				<a href="javascript:;">外卖</a>
			</div>
			<div>
				<a href="javascript:;">天猫超市</a>
			</div>
		</div>
		<div class="rows">
			<div>
				<a href="javascript:;">天猫</a>
			</div>
			<div>
				<a href="javascript:;">聚划算</a>
			</div>
			<div>
				<a href="javascript:;">天猫国际</a>
			</div>
			<div>
				<a href="javascript:;">外卖</a>
			</div>
			<div>
				<a href="javascript:;">天猫超市</a>
			</div>
	</body>
</html>

本文地址:https://blog.csdn.net/m0_46239267/article/details/107272640