css(10)

学习目标

能够使用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 ：此光标指示文本