海创软件组--20200712-HTML+CSS3雪碧图
程序员文章站
2022-07-07 19:38:41
界面效果一些框的属性文本框的type=text,密码框的type=password，提交框的type=submit，单选按钮type=radio，多选框type=checkbox单选按钮和多选框默认选中加一个checked=“checked”下拉表格的不同处但是下拉表格就不一样了name给后台使用name是为了给后台使用的多选框多选框也类似使用label点击文字选中使用label之后点击文字之后可以选中，并且要设置id对...
界面效果
一些框的属性
文本框的type=text,密码框的type=password，提交框的type=submit，单选按钮type=radio，多选框type=checkbox
单选按钮和多选框默认选中加一个checked=“checked”
下拉表格的不同处
但是下拉表格就不一样了
name给后台使用
name是为了给后台使用的
多选框
多选框也类似
使用label点击文字选中
使用label之后点击文字之后可以选中，并且要设置id
对表单进行分组
完整代码
<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>
雪碧图
如果你想要做天猫的的这样的格式
法一是较普通的办法就是创建div，之后把用超链接引入一张张的图片，然后在图片下面写入名字，但是这样需要加载多张图片。
这个法一需要用的图片：
现在法二可以用更加高级的办法，可以只需要加载一张图片，就是把他们都整合在一起，这个就叫做雪碧图，具体整合方法是使用ps，这里就不具体介绍了。
下面先写body的代码
<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样式
这里有一个语法点，display: -webkit-box;display: flex;要结合下面的代码
这样子浏览器会自动帮你适应div大小，不用你再自己调整。
伪类
之后会用到伪类，在a标签前面加入一个width:86px;height:85px背景是icon.png的一个块
icon.png就是上面那张雪碧图，设置好了之后就是调整它的position
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一一设置。
以下是完整的代码
<!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
推荐阅读
-
海创软件组-20200712-学习过程中的记录
-
海创软件组--20200712--axios上传文件获取进度--js对多个四边形的点对象数组分别按顺时针排序--定义上传视频并可预览
-
海创软件组--20200712-HTML+CSS3雪碧图
-
海创软件组-20200712-背包,队列和栈-算法4
-
荐 海创软件组--20200712--Butterknife与自定义图标字体
-
海创软件组-20200712-学习过程中的记录
-
海创软件组--20200712--axios上传文件获取进度--js对多个四边形的点对象数组分别按顺时针排序--定义上传视频并可预览
-
海创软件组--电商项目的总结
-
海创软件组--20200712-HTML+CSS3雪碧图