Day9
1.CSS高级技巧
1.元素的显示与隐藏
display 隐藏对象,不保留位置
(none,block)
visibility 隐藏对象,保留位置
(hidden,visible)
overflow 只隐藏超出盒子部分
(auto)
2.用户界面样式
①鼠标样式
cursor:default(默认)/pointer(小手)/move(移动样式)/text(文本竖线)
②轮廓线
outline:none(取消表单轮廓线)
③防止拖曳文本域
resize:none;
3.垂直对齐
vertical-align:baseline/bottom/middle/top(行内和行内块元素)
附练习代码:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style>
.box{
position: relative;
height: 135px;
width: 300px;
margin: 100px auto;
}
.nav{
display: none;/*第一步先将图片上放一个透明盒子并将其隐藏起来*/
position: absolute;
left: 0;
top: 0;
width: 300px;
height: 135px;
background-color: rgba(0, 0, 0, .4);
}
.box a:hover .nav{
display:block;/*第二部当鼠标经过图片时再将透明盒子显示出来*/
cursor: move;/*小操作剑鼠标变为move形*/
}
</style>
</head>
<body>
<div class="box">
<a href="#">
<div class="nav"></div>
<img src="1.31(first).jpg" width=300px>
</a>
</div>
</body>
</html>
Day10
4.阿里icomoon小图标
①先从网站解压下载
②将fonts复制与于根文件
③使用时打开htmldemo复制小图标后粘上文字
附练习代码: