学习目标
能够使用css写出三角形
能够写出3种常见的鼠标样式(cursor)
能够跟随课程写出品优购首页推荐模块
能够跟随课程写出品优购首页focus焦点图模块
能够跟随课程写出品优购首页service服务模块
能够跟随课程写出品优购首页楼层模块
能够跟随课程写出品优购首页footer焦点图模块
。。。。。。
使用css写出一个三角形
有时候需要在页面中展示一个三角形,并且要求只使用css代码,不用图片或者字体图标,怎么实现?
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6cKZQnUd-1572159437455)(mdImg/jd.png)]
可以通过css设置元素的边框来实现三角形的效果
- transparent表示透明的颜色
<style>
/*让内容部分为0 然后单独设置边框*/
/*方法一*/
div {
width: 0;
height: 0;
border-left: 100px solid purple;
border-bottom: 100px solid transparent;
border-right: 100px solid transparent;
border-top: 100px solid transparent;
}
/*方法二*/
div {
width: 0px;
height: 0px;
border-width: 100px;
border-style: solid;
border-color: transparent transparent transparent purple;
}
</style>
三种鼠标常见的样式
通过cursor属性来设置鼠标移入盒子中的样式
- default :光标为一个箭头(默认样式)
- pointer :光标为一只小手(a标签的默认样式)
- text :此光标指示文本