css鼠标变成小手_CSS总结四(前端一)

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复制小图标后粘上文字

附练习代码:

0bf7e17a5defdb9a0994eb58d94a871d.png

e1d495934a4014b4dd8dc63151f74fa3.png
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值