【笔记】11.22 小知识点总结
2016-11-22 本文已影响16人
程小E
这些都是比较好玩的效果,mark起来吧~
一、页面的标题图片
先来看看效果：
页面标题图片.png
步骤：
1.需要作为图标的图片到>http://www.bitbug.net/
保存成.ico格式的图片
（注：必须是.ico格式的图片）
2.添加到link下，具体如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<!--
页面标题图标
使用注意：
图片格式必须是.ico格式
rel
后面填充路径和当前文件是什么关系
rel="shortcut icon"
-->
<link rel="shortcut icon" href="img/bitbug_favicon.ico">
<style>
</style>
</head>
<body>
</body>
</html>
二、辅助按钮
效果：可以让我们在单选框或多选框中，点击文字既可以选择选项。
如下图：
fuzhuanniu.gif
代码来了~
用label标签套内容就可以啦，要记得id对应是唯一的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<form action="">
请问摩卡的性别是什么
<br>
<!-- label -->
<input id="man" type="radio" name="sex">
<label for="man">男孩子</label><br>
<input id="woman" type="radio" name="sex">
<label for="woman">女孩子</label><br>
<input id="weizhi" type="radio" name="sex">
<label for="weizhi">熊孩子</label>
</form>
<form action="">
请问摩卡的爱好是什么
<br>
<input id="eat" type="checkbox" name="hao">
<label for="eat">吃饭</label><br>
<input id="shuijiao"type="checkbox" name="hao">
<label for="shuijiao">睡觉</label>
<br>
<input id="doudou" type="checkbox" name="hao">
<label for="doudou">打豆豆</label>
</form>
</body>
</html>
三、小图标利用position实现hover变化效果
效果如下：
小图标变化效果.gif
原图：
nav_bg.png
代码~
重点：父级元素高度设置为图片的一半，所以能通过定位实现效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div div{
display: inline-block;
height: 50px;
width: 50px;
/*图片实际高度100px,50px的父元素只能看到我们想要的那一半*/
}
.div_img1{
background-image: url(img/1zhu.png);
background-repeat: no-repeat;
}
.div_img2{
background-image: url(img/2yuyin.png);
background-repeat: no-repeat;
}
.div_img3{
background-image: url(img/3daizi.png);
background-repeat: no-repeat;
}
.div_img4{
background-image: url(img/4bi.png);
background-repeat: no-repeat;
}
.div_img5{
background-image: url(img/5xing.png);
background-repeat: no-repeat;
}
div div:hover{
background-position: 0px -50px;
}
</style>
</head>
<body>
<div>
<div class="div_img1"></div>
<div class="div_img2"></div>
<div class="div_img3"></div>
<div class="div_img4"></div>
<div class="div_img5"></div>
</div>
</body>
</html>
