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

界面效果

海创软件组--20200712-HTML+CSS3雪碧图_第1张图片

一些框的属性

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

下拉表格的不同处

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

name给后台使用

name是为了给后台使用的
海创软件组--20200712-HTML+CSS3雪碧图_第5张图片
海创软件组--20200712-HTML+CSS3雪碧图_第6张图片
海创软件组--20200712-HTML+CSS3雪碧图_第7张图片
海创软件组--20200712-HTML+CSS3雪碧图_第8张图片
海创软件组--20200712-HTML+CSS3雪碧图_第9张图片
在这里插入图片描述
海创软件组--20200712-HTML+CSS3雪碧图_第10张图片
海创软件组--20200712-HTML+CSS3雪碧图_第11张图片
海创软件组--20200712-HTML+CSS3雪碧图_第12张图片
海创软件组--20200712-HTML+CSS3雪碧图_第13张图片
海创软件组--20200712-HTML+CSS3雪碧图_第14张图片
海创软件组--20200712-HTML+CSS3雪碧图_第15张图片
海创软件组--20200712-HTML+CSS3雪碧图_第16张图片
海创软件组--20200712-HTML+CSS3雪碧图_第17张图片
海创软件组--20200712-HTML+CSS3雪碧图_第18张图片

多选框

多选框也类似

海创软件组--20200712-HTML+CSS3雪碧图_第19张图片
海创软件组--20200712-HTML+CSS3雪碧图_第20张图片
海创软件组--20200712-HTML+CSS3雪碧图_第21张图片
海创软件组--20200712-HTML+CSS3雪碧图_第22张图片
海创软件组--20200712-HTML+CSS3雪碧图_第23张图片
海创软件组--20200712-HTML+CSS3雪碧图_第24张图片
海创软件组--20200712-HTML+CSS3雪碧图_第25张图片
海创软件组--20200712-HTML+CSS3雪碧图_第26张图片
海创软件组--20200712-HTML+CSS3雪碧图_第27张图片
海创软件组--20200712-HTML+CSS3雪碧图_第28张图片
海创软件组--20200712-HTML+CSS3雪碧图_第29张图片
海创软件组--20200712-HTML+CSS3雪碧图_第30张图片

使用label点击文字选中

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

对表单进行分组

海创软件组--20200712-HTML+CSS3雪碧图_第32张图片
海创软件组--20200712-HTML+CSS3雪碧图_第33张图片
海创软件组--20200712-HTML+CSS3雪碧图_第34张图片
海创软件组--20200712-HTML+CSS3雪碧图_第35张图片

完整代码

	

		
用户信息



用户爱好 性别

爱好 足球 篮球 羽毛球 乒乓球

你喜欢的明星

自我介绍



雪碧图

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


		
		

调整css样式海创软件组--20200712-HTML+CSS3雪碧图_第40张图片

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

伪类

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

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雪碧图_第43张图片
以下是完整的代码



	
		
		
		
	
	
		
		

你可能感兴趣的:(海创软件组)