基础班day13笔记

发表于
字数统计: 832 | 阅读时长 ≈ 3

学习目标

  • 能够完成品优购首页推荐模块
  • 能够完成品优购首页焦点图模块
  • 能够完成品优购首页楼层模块

理解上课的知识点……

使用css写出一个三角形

有时候需要在页面中展示一个三角形，并且要求只使用css代码，不用图片或者字体图标，怎么实现？

例如：

jd

可以通过边框来实现：

  • 设置一个盒子
  • 设置四周不同颜色的边框
  • 盒子的宽高设置为0

  • 此时每一个方向的边框就是一个三角形了，选择一个之后让其他边框的颜色为全透明即可

背景透明

设置透明的方法

  • rgba（0,0,0,0）
  • transparent：表示全透明的颜色

代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
/* ------------------------------------方法一------------------------------------ */
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;
}

三种鼠标常见的样式

通过cursor属性来设置鼠标移入盒子中的样式

取值：

  • default ：光标为一个箭头（默认样式）
  • pointer ：光标为一只小手（a标签的默认样式）
  • text ：此光标指示文本
  • move：显示十字光标（表示可移动的效果）

拓展

相邻兄弟选择器（知道即可）

用的不多

相邻选择器（+）

选择某个元素后面紧贴着的的第一个兄弟元素（ 只找一个）

例子：如何通过.son1找到.son2呢？

1
2
3
4
<div class="father">
  <div class="son1"></div>
  <div class="son2"></div>
</div>

可以通过相邻选择器找到：

.son+div {}

注意点：

  • 相邻兄弟选择只会选择相邻的那个元素，本身元素不会选中。

兄弟选择器（~）

选择某个元素后面的所有兄弟元素（会找一堆）

例子：找到h1标签后面所有兄弟中的p标签

1
2
3
4
5
6
7
8
9
10
<div>
    <p>1</p>
    <h1>2</h1>
    <p>3</p>
    <p>4</p>
    <p>5</p>
    <p>6</p>
    <h2>7</h2>
</div>
<p>8</p>

可以通过兄弟选择器找到：

h1~p {}

属性选择器的一些匹配规则（知道即可）

可以通过标签的属性选择标签

1
2
3
<a href="http://www.baidu.com" class="baidu">百度一下</a>
<a href="#">点击不跳转</a>
<a href="http://www.itcast.cn" class="itcast">传智播客</a>

  • E:[class]

    选择带有class属性的E元素。

    如：选中带有class属性的元素为红色

  • E:[class=”attr”]

    选择带有class属性，并且属性值是attr的E元素

    如：选中class属性值为baidu的元素为黄色

  • E:[class^=”attr”]

    选择带有class属性，并且属性值是 以attr开头 的E元素

    如：选中href属性值以http开头的元素为粉色

  • E:[class$=”attr”]

    选择带有class属性，并且属性值是 以attr结尾 的E元素

    如：选中href属性值以cn结尾的元素为橘色

  • E:[class*=”attr”]

    选择带有class属性，并且属性值是 包含attr 的E元素

    如：选中href属性值里包含www的元素为紫色