add: 用css border 画等边三角形
This commit is contained in:
qianguyihao
parent
95024348b0
commit
ff17db62ee
@ -69,6 +69,13 @@ CSS中，所有的行，都有行高。盒子模型的padding，绝对不是直
|
||||
|
||||
|
||||
|
||||
### `vertical-align: middle;` 属性
|
||||
|
||||
```css
|
||||
vertical-align: middle; /*指定行内元素（inline）或表格单元格（table-cell）元素的垂直对齐方式。*/
|
||||
|
||||
```
|
||||
|
||||
### font字体属性
|
||||
|
||||
css样式中，字体属性有以下几种：
|
||||
|
||||
@ -4,10 +4,7 @@
|
||||
|
||||
> 以下是正文。
|
||||
|
||||
|
||||
## background系列属性
|
||||
|
||||
### 常见背景属性
|
||||
## background 的常见背景属性
|
||||
|
||||
CSS样式中，常见的背景属性有以下几种：（经常用到，要记住）
|
||||
|
||||
@ -25,58 +22,74 @@ CSS样式中，常见的背景属性有以下几种：（经常用到，要记
|
||||
- `background-attachment:scroll;` 设置背景图片是否跟着滚动条一起移动。
|
||||
属性值可以是：`scroll`（与fixed属性相反，默认属性）、`fixed`（背景就会被固定住，不会被滚动条滚走）。
|
||||
|
||||
- 另外还有一个简写属性叫做`background`，它的作用是：将上面的多个属性写在一个声明中。
|
||||
- 另外还有一个综合属性叫做`background`，它的作用是：将上面的多个属性写在一个声明中。
|
||||
|
||||
上面这几个属性经常用到，需要记住。现在我们逐个进行讲解。
|
||||
|
||||
## background-color：背景颜色的表示方法
|
||||
|
||||
### background-color：背景颜色的表示方法
|
||||
|
||||
css2.1中，背景颜色的表示方法有三种：单词、rgb表示法、十六进制表示法。
|
||||
css2.1 中，背景颜色的表示方法有三种：单词、rgb表示法、十六进制表示法。
|
||||
|
||||
比如红色可以有下面的三种表示方法：
|
||||
|
||||
```
|
||||
```css
|
||||
background-color: red;
|
||||
background-color: rgb(255,0,0);
|
||||
background-color: #ff0000;
|
||||
```
|
||||
|
||||
CSS3 中，有一种新的表示颜色的方式：RGBA或者HSLA。
|
||||
|
||||
RGBA、HSLA可应用于**所有**使用颜色的地方。
|
||||
|
||||
下面分别介绍。
|
||||
|
||||
**1、用英语单词来表示：**
|
||||
### 用英语单词表示
|
||||
|
||||
能够用英语单词来表述的颜色，都是简单颜色。比如红色：
|
||||
能够用英语单词来表述的颜色，都是简单颜色。比如红色、绿色等。代码举例：
|
||||
|
||||
```
|
||||
```css
|
||||
background-color: red;
|
||||
```
|
||||
### RGB 表示法
|
||||
|
||||
**2、rgb表示法：**
|
||||
|
||||
rgb表示三原色“红”red、“绿”green、“蓝”blue。
|
||||
RGB 表示三原色“红”red、“绿”green、“蓝”blue。
|
||||
|
||||
光学显示器中，每个像素都是由三原色的发光原件组成的，靠明亮度不同调成不同的颜色的。r、g、b的值，每个值的取值范围0~255，一共256个值。
|
||||
|
||||
比如红色：
|
||||
|
||||
```
|
||||
```css
|
||||
background-color: rgb(255,0,0);
|
||||
```
|
||||
|
||||
黑色：
|
||||
|
||||
```
|
||||
```css
|
||||
background-color: rgb(0,0,0);
|
||||
```
|
||||
|
||||
颜色可以叠加，比如黄色就是红色和绿色的叠加：
|
||||
|
||||
```
|
||||
```css
|
||||
background-color: rgb(255,255,0);
|
||||
```
|
||||
|
||||
**3、十六进制表示法：**
|
||||
### RGBA 表示法
|
||||
|
||||
```javascript
|
||||
background-color: rgba(0, 0, 255, 0.3);
|
||||
|
||||
border: 30px solid rgba(0, 255, 0, 0.3);
|
||||
```
|
||||
|
||||
解释：
|
||||
|
||||
- RGBA 即：Red、Green、Blue、Alpha
|
||||
|
||||
- R、G、B 的取值范围是：0~255
|
||||
|
||||
### 十六进制表示法
|
||||
|
||||
比如红色：
|
||||
|
||||
@ -84,7 +97,7 @@ background-color: rgb(255,255,0);
|
||||
background-color: #ff0000;
|
||||
```
|
||||
|
||||
PS:所有用#开头的值，都是16进制的。
|
||||
PS:所有用`#`开头的值，都是16进制的。
|
||||
|
||||
这里，我们就要学会16进制与10进制之间的转换。下面举几个例子。
|
||||
|
||||
@ -98,7 +111,6 @@ PS:所有用#开头的值，都是16进制的。
|
||||
|
||||
`background-color: #123456;`等价于`background-color: rgb(18,52,86);`
|
||||
|
||||
|
||||
**十六进制可以简化为3位，所有#aabbcc的形式，能够简化为#abc**。举例如下：
|
||||
|
||||
比如：
|
||||
@ -148,8 +160,37 @@ PS:所有用#开头的值，都是16进制的。
|
||||
#ccc 浅灰
|
||||
```
|
||||
|
||||
### HSLA 表示法
|
||||
|
||||
### `background-repeat`属性（重要）
|
||||
举例：
|
||||
|
||||
```javascript
|
||||
background-color: hsla(240,50%,50%,0.4);
|
||||
```
|
||||
|
||||
解释：
|
||||
|
||||
- `H` 色调，取值范围 0~360。0或360表示红色、120表示绿色、240表示蓝色。
|
||||
|
||||
- `S` 饱和度，取值范围 0%~100%。值越大，越鲜艳。
|
||||
|
||||
- `L` 亮度，取值范围 0%~100%。亮度最大时为白色，最小时为黑色。
|
||||
|
||||
- `A` 透明度，取值范围 0~1。
|
||||
|
||||
如果不知道 H 的值该设置多少，我们不妨来看一下**色盘**：
|
||||
|
||||
|
||||
|
||||
推荐链接：[配色宝典](http://www.uisdc.com/how-to-create-color-palettes)
|
||||
|
||||
**关于设置透明度的其他方式：**
|
||||
|
||||
（1）`opacity: 0.3;` 会将整个盒子及子盒子设置透明度。也就是说，当盒子设置半透明的时候，会影响里面的子盒子。
|
||||
|
||||
（2）`background: transparent;` 可以单独设置透明度，但设置的是完全透明（不可调节透明度）。
|
||||
|
||||
## `background-repeat`属性
|
||||
|
||||
`background-repeat:no-repeat;`设置背景图片是否重复及如何重复，默认平铺满。属性值可以是：
|
||||
|
||||
@ -182,7 +223,7 @@ PS：padding的区域也是有背景图的。
|
||||
|
||||
|
||||
|
||||
### `background-position`属性
|
||||
## `background-position`属性
|
||||
|
||||
`background-position`属性指的是**背景定位**属性。公式如下：
|
||||
|
||||
@ -267,7 +308,7 @@ PS：padding的区域也是有背景图的。
|
||||
|
||||
上图可以看出，将banner图作为div的背景后，banner图会永远处于网页的正中间（水平方向来看）。
|
||||
|
||||
### background-attachment属性
|
||||
## background-attachment 属性
|
||||
|
||||
- `background-attachment:scroll;` 设置背景图片是否固定。属性值可以是：
|
||||
- `fixed`（背景就会被固定住，不会被滚动条滚走）。
|
||||
@ -283,13 +324,13 @@ background属性和border一样，是一个综合属性，可以将多个属性
|
||||
|
||||
举例1:
|
||||
|
||||
```
|
||||
```css
|
||||
background:red url(1.jpg) no-repeat 100px 100px fixed;
|
||||
```
|
||||
|
||||
等价于：
|
||||
|
||||
```
|
||||
```css
|
||||
background-color:red;
|
||||
background-image:url(1.jpg);
|
||||
background-repeat:no-repeat;
|
||||
@ -303,7 +344,7 @@ background属性和border一样，是一个综合属性，可以将多个属性
|
||||
|
||||
比如说，对于下面这样的属性：
|
||||
|
||||
```
|
||||
```css
|
||||
background: blue url(images/wuyifan.jpg) no-repeat 100px 100px;
|
||||
```
|
||||
|
||||
@ -311,11 +352,8 @@ background属性和border一样，是一个综合属性，可以将多个属性
|
||||
|
||||
|
||||
|
||||
|
||||
PS：以后的CSS3内容中，我们会接触到更多的background属性： background-origin、background-clip、background-size（在CSS2.1背景图片是不能调整尺寸，IE9开始兼容）、多背景。
|
||||
|
||||
|
||||
|
||||
## 我的公众号
|
||||
|
||||
想学习<font color=#0000ff>**代码之外的技能**</font>？不妨关注我的微信公众号：**千古壹号**（id：`qianguyihao`）。
|
||||
|
||||
@ -10,7 +10,6 @@
|
||||
|
||||
但是，图片、表单元素一律看作是文本，它们并不是盒子。这个很好理解，比如说，一张图片里并不能放东西，它自己就是自己的内容。
|
||||
|
||||
|
||||
### 盒子中的区域
|
||||
|
||||
一个盒子中主要的属性就5个：width、height、padding、border、margin。如下：
|
||||
@ -24,20 +23,14 @@
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
代码演示：
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
上面这个盒子，width:200px; height:200px; 但是真实占有的宽高是302*302。 这是因为还要加上padding、border。
|
||||
|
||||
注意：**宽度和真实占有宽度，不是一个概念！**来看下面这例子。
|
||||
|
||||
|
||||
### 标准盒模型和IE盒模型
|
||||
|
||||
> 我们目前所学习的知识中，以标准盒子模型为准。
|
||||
@ -52,10 +45,8 @@ IE盒子模型：
|
||||
|
||||
上图显示：
|
||||
|
||||
|
||||
在 CSS 盒子模型 (Box Model) 规定了元素处理元素的几种方式：
|
||||
|
||||
|
||||
- width和height：**内容**的宽度、高度（不是盒子的宽度、高度）。
|
||||
- padding：内边距。
|
||||
- border：边框。
|
||||
@ -63,14 +54,12 @@ IE盒子模型：
|
||||
|
||||
CSS盒模型和IE盒模型的区别：
|
||||
|
||||
- 在 <font color="#0000FF">**标准盒子模型**</font>中，<font color="#0000FF">**width 和 height 指的是内容区域**</font>的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸。
|
||||
- 在 <font color="#0000FF">**标准盒子模型**</font>中，<font color="#0000FF">**width 和 height 指的是内容区域**</font>的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸。
|
||||
|
||||
- <font color="#0000FF">**IE盒子模型**</font>中，<font color="#0000FF">**width 和 height 指的是内容区域+border+padding**</font>的宽度和高度。
|
||||
- <font color="#0000FF">**IE盒子模型**</font>中，<font color="#0000FF">**width 和 height 指的是内容区域+border+padding**</font>的宽度和高度。
|
||||
|
||||
|
||||
注：Android中也有margin和padding的概念，意思是差不多的，如果你会一点Android，应该比较好理解吧。区别在于，Android中没有border这个东西，而且在Android中，margin并不是控件的一部分，我觉得这样做更合理一些，呵呵。
|
||||
<br>
|
||||
|
||||
注：Android中也有margin和padding的概念，意思是差不多的，如果你会一点Android，应该比较好理解吧。区别在于，Android中没有border这个东西，而且在Android中，margin并不是控件的一部分，我觉得这样做更合理一些，呵呵。
|
||||
|
||||
### `<body>`标签也有margin
|
||||
|
||||
@ -116,10 +105,7 @@ CSS盒模型和IE盒模型的区别：
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
### 认识width、height
|
||||
|
||||
## 认识width、height
|
||||
|
||||
一定要知道，在前端开发工程师眼中，世界中的一切都是不同的。
|
||||
|
||||
@ -127,8 +113,6 @@ CSS盒模型和IE盒模型的区别：
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
下面这两个盒子，真实占有宽高，都是302*302：
|
||||
|
||||
盒子1：
|
||||
@ -154,7 +138,6 @@ CSS盒模型和IE盒模型的区别：
|
||||
```
|
||||
|
||||
|
||||
|
||||
真实占有宽度 = 左border + 左padding + width + 右padding + 右border
|
||||
|
||||
上面这两个盒子的盒模型图如下：
|
||||
@ -165,12 +148,9 @@ CSS盒模型和IE盒模型的区别：
|
||||
**如果想保持一个盒子的真实占有宽度不变，那么加width的时候就要减padding。加padding的时候就要减width**。因为盒子变胖了是灾难性的，这会把别的盒子挤下去。
|
||||
|
||||
|
||||
## 认识padding
|
||||
|
||||
### 认识padding
|
||||
|
||||
|
||||
#### padding区域也有颜色
|
||||
|
||||
### padding区域也有颜色
|
||||
|
||||
padding就是内边距。padding的区域有背景颜色，css2.1前提下，并且背景颜色一定和内容区域的相同。也就是说，background-color将填充**所有border以内的区域。**
|
||||
|
||||
@ -178,9 +158,7 @@ padding就是内边距。padding的区域有背景颜色，css2.1前提下，并
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
#### padding有四个方向
|
||||
### padding有四个方向
|
||||
|
||||
padding是4个方向的，所以我们能够分别描述4个方向的padding。
|
||||
|
||||
@ -188,7 +166,7 @@ padding是4个方向的，所以我们能够分别描述4个方向的padding。
|
||||
|
||||
小属性的写法：
|
||||
|
||||
```
|
||||
```css
|
||||
padding-top: 30px;
|
||||
padding-right: 20px;
|
||||
padding-bottom: 40px;
|
||||
@ -197,7 +175,7 @@ padding是4个方向的，所以我们能够分别描述4个方向的padding。
|
||||
|
||||
综合属性的写法：(上、右、下、左)（顺时针方向，用空格隔开。margin的道理也是一样的）
|
||||
|
||||
```
|
||||
```css
|
||||
padding:30px 20px 40px 100px;
|
||||
```
|
||||
|
||||
@ -213,7 +191,6 @@ padding: 30px 40px;
|
||||
|
||||
则顺序等价于：30px 40px 30px 40px;
|
||||
|
||||
|
||||
要懂得，**用小属性层叠大属性**。比如：
|
||||
|
||||
```
|
||||
@ -225,7 +202,6 @@ padding-left: 30px;
|
||||
|
||||
|
||||
|
||||
|
||||
下面的写法：
|
||||
|
||||
```
|
||||
@ -235,10 +211,9 @@ padding: 20px;
|
||||
|
||||
第一行的小属性无效，因为被第二行的大属性层叠掉了。
|
||||
|
||||
|
||||
下面的题，会做了，说明你明白了。
|
||||
|
||||
#### 一些题目
|
||||
### 一些题目
|
||||
|
||||
**题目1**：说出下面盒子真实占有宽高，并画出盒模型图。
|
||||
|
||||
@ -252,14 +227,10 @@ padding: 20px;
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
答案：
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
**题目2**：说出下面盒子真实占有宽高，并画出盒模型图。
|
||||
|
||||
```css
|
||||
@ -280,18 +251,15 @@ padding: 20px;
|
||||
|
||||
盒子模型如下：
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
**题目3**：现在给你一个盒子模型图，请写出代码，试着用最最简单的方法写。
|
||||
|
||||
|
||||
|
||||
|
||||
答案：
|
||||
|
||||
```
|
||||
```css
|
||||
width:123px;
|
||||
height:123px;
|
||||
padding:20px 40px;
|
||||
@ -302,10 +270,9 @@ padding: 20px;
|
||||
|
||||
|
||||
|
||||
|
||||
答案：
|
||||
|
||||
```
|
||||
```css
|
||||
width:123px;
|
||||
height:123px;
|
||||
padding:20px;
|
||||
@ -314,29 +281,25 @@ padding: 20px;
|
||||
|
||||
```
|
||||
|
||||
|
||||
|
||||
#### 一些元素，默认带有padding
|
||||
### 一些元素，默认带有padding
|
||||
|
||||
一些元素，默认带有`padding`，比如ul标签。如下：
|
||||
|
||||
|
||||
|
||||
|
||||
上图显示，不加任何样式的ul，也是有40px的padding-left。
|
||||
|
||||
所以，我们做站的时候，为了便于控制，总是喜欢清除这个默认的padding。
|
||||
|
||||
可以使用`*`进行清除：
|
||||
|
||||
```
|
||||
```css
|
||||
*{
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
但是，`*`的效率不高，所以我们使用并集选择器，罗列所有的标签（不用背，有专业的清除默认样式的样式表，今后学习）：
|
||||
|
||||
```
|
||||
@ -346,45 +309,48 @@ body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
|
||||
### 认识border
|
||||
## 认识border
|
||||
|
||||
border就是边框。边框有三个要素：像素（粗细）、线型、颜色。
|
||||
|
||||
颜色如果不写，默认是黑色。另外两个属性不写，要命了，显示不出来边框。
|
||||
比如：
|
||||
|
||||
#### border-style
|
||||
```css
|
||||
|
||||
.div1{
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border: 2px solid red;
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
颜色如果不写，默认是黑色。另外两个属性如果不写，则无法显示边框。
|
||||
|
||||
### border-style
|
||||
|
||||
border的所有的线型如下：（我们可以通过查看`CSS参考手册`得到）
|
||||
|
||||
|
||||
|
||||
|
||||
比如`border:10px ridge red;`这个属性，在chrome和firefox、IE中有细微差别：（因为可以显示出效果，因此并不是兼容性问题，只是有细微差别而已）
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
如果公司里面的设计师是处女座的，追求极高的**页面还原度**，那么不能使用css来制作边框。就要用到图片，就要切图了。
|
||||
|
||||
所以，比较稳定的border-style就几个：solid、dashed、dotted。
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
#### border拆分
|
||||
### border拆分
|
||||
|
||||
border是一个大综合属性。比如说：
|
||||
|
||||
```
|
||||
```css
|
||||
border:1px solid red;
|
||||
```
|
||||
|
||||
就是把4个边框，都设置为1px宽度、线型实线、red颜色。
|
||||
就是把上下左右这四个方向的边框，都设置为 1px 宽度、线型实线、red颜色。
|
||||
|
||||
PS：小技巧：在sublime text中，为了快速输入`border:1px solid red;`这个属性，可以直接输入`bd`，然后选第二个后回车。
|
||||
|
||||
@ -406,16 +372,13 @@ border-color:red green blue yellow;
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
（1）按三要素拆：
|
||||
|
||||
```
|
||||
```css
|
||||
border-width:10px; //边框宽度
|
||||
border-style:solid; //线型
|
||||
border-color:red; //颜色。
|
||||
```
|
||||
|
||||
等价于：
|
||||
|
||||
```
|
||||
@ -424,7 +387,7 @@ border:10px solid red;
|
||||
|
||||
(2)按方向来拆：
|
||||
|
||||
```
|
||||
```css
|
||||
border-top:10px solid red;
|
||||
border-right:10px solid red;
|
||||
border-bottom:10px solid red;
|
||||
@ -433,15 +396,13 @@ border-left:10px solid red;
|
||||
|
||||
等价于：
|
||||
|
||||
```
|
||||
```css
|
||||
border:10px solid red;
|
||||
```
|
||||
|
||||
（3）按三要素和方向来拆：(就是把每个方向的，每个要素拆开。3*4 = 12)
|
||||
|
||||
|
||||
|
||||
```
|
||||
```css
|
||||
border-top-width:10px;
|
||||
border-top-style:solid;
|
||||
border-top-color:red;
|
||||
@ -456,57 +417,75 @@ border:10px solid red;
|
||||
border-left-color:red;
|
||||
```
|
||||
|
||||
|
||||
等价于：
|
||||
|
||||
```
|
||||
```css
|
||||
border:10px solid red;
|
||||
|
||||
```
|
||||
|
||||
|
||||
工作中到底用什么？很简答：什么简单用什么。但要懂得，用小属性层叠大属性。举例如下：
|
||||
|
||||
|
||||
|
||||
|
||||
为了实现上方效果，写法如下：
|
||||
|
||||
```
|
||||
```css
|
||||
border:10px solid red;
|
||||
border-right-color:blue;
|
||||
```
|
||||
|
||||
|
||||
|
||||
|
||||
为了实现上方效果，写法如下：
|
||||
|
||||
```
|
||||
```css
|
||||
border:10px solid red;
|
||||
border-style:solid dashed;
|
||||
```
|
||||
|
||||
border可以没有：
|
||||
|
||||
```
|
||||
```css
|
||||
border:none;
|
||||
```
|
||||
|
||||
可以某一条边没有：
|
||||
|
||||
```
|
||||
```css
|
||||
border-left: none;
|
||||
```
|
||||
|
||||
也可以调整左边边框的宽度为0：
|
||||
|
||||
```
|
||||
```css
|
||||
border-left-width: 0;
|
||||
```
|
||||
|
||||
### border-image 属性
|
||||
|
||||
#### 举例：利用border属性画一个三角形（小技巧）
|
||||
比如：
|
||||
|
||||
```css
|
||||
border-image: url(.img.png) 30 round;
|
||||
```
|
||||
|
||||
这个属性在实际开发中用得不多，暂时忽略。
|
||||
|
||||
### 举例1：利用 border 属性画一个三角形（小技巧）
|
||||
|
||||
完整代码如下：
|
||||
|
||||
```css
|
||||
div{
|
||||
width: 0;
|
||||
height: 0;
|
||||
border: 50px solid transparent;
|
||||
border-top-color: red;
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
步骤如下：
|
||||
|
||||
@ -514,24 +493,39 @@ border-left-width: 0;
|
||||
|
||||
|
||||
|
||||
|
||||
（2）然后将border的底部取消：
|
||||
|
||||
|
||||
|
||||
|
||||
（3）最后设置border的左边和右边为白色：
|
||||
（3）最后设置border的左边和右边为白色或者**透明**：
|
||||
|
||||
|
||||
|
||||
|
||||
这样，一个三角形就画好了。
|
||||
|
||||
### 举例2：利用 border 属性画一个三角形（更推荐的技巧）
|
||||
|
||||
上面的例子1中，画出来的是直角三角形，可如果我想画等边三角形，要怎么做呢？
|
||||
|
||||
完整代码如下：（用 css 画等边三角形）
|
||||
|
||||
```css
|
||||
.div1{
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-top: 30px solid red;
|
||||
/* 通过改变 border-left 和 border-right 中的像素值，来改变三角形的形状 */
|
||||
border-left: 20px solid transparent;
|
||||
border-right: 20px solid transparent;
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
效果如下：
|
||||
|
||||
|
||||
|
||||
另外，我们在上方代码的基础之上，再加一个 `border-radus: 20px;` 就能画出一个扇形。
|
||||
|
||||
## 我的公众号
|
||||
|
||||
@ -542,4 +536,3 @@ border-left-width: 0;
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@ -1,6 +1,5 @@
|
||||
|
||||
|
||||
|
||||
## 前言
|
||||
|
||||
> CSS已经学了一些基础内容了，我们来讲解一个小案例吧。以[博雅互动](http://www.boyaa.com/)的官网首页举例。
|
||||
@ -17,13 +16,10 @@
|
||||
|
||||
我们量一下中间四个方形图的width，是1000px，所以，网页版心的宽度是1000px。
|
||||
|
||||
|
||||
### 网页的结构
|
||||
|
||||
从结构上来看，网页分为头部（导航栏）、banner区、内容区、底部。
|
||||
|
||||
|
||||
|
||||
## 导航栏的制作
|
||||
|
||||
在此我们只讲基础知识的使用，不涉及浏览器的优化。
|
||||
@ -35,8 +31,6 @@
|
||||
|
||||
现在我们需要在`class=inner_c`里放三个东西：左侧的logo、中间的导航栏、右侧的“加入我们”。
|
||||
|
||||
|
||||
|
||||
接下来我们开始做右侧的「加入我们」，「加入我们」的背景是带圆角的矩形，这个圆角，实现的方式有两种：要么切图，要么用CSS3实现（IE 7、IE 8不兼容）。我们暂时使用切图来实现。
|
||||
|
||||
我们最好把「加入我们」这个超链接`<a>`放到`div`里，然后设置div的margin和padding，而不是直接设置`<a>`的边距。
|
||||
@ -50,7 +44,6 @@
|
||||
|
||||
最终，导航栏的代码如下：
|
||||
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
@ -167,22 +160,18 @@
|
||||
|
||||
|
||||
|
||||
|
||||
## banenr图
|
||||
|
||||
> 因为涉及到 js 的内容，这里先不讲内容区域**轮播图**的效果。
|
||||
|
||||
我们首先在导航条和banner图之间加一道墙，即`class=cl`，然后采用隔墙法对其设置`clear: both;`的属性。
|
||||
|
||||
|
||||
然后设置banner的背景图片属性，添加banner图。
|
||||
|
||||
|
||||
## 内容区域的制作
|
||||
|
||||
导航栏+banner+内容区域的完整代码如下：
|
||||
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
@ -394,7 +383,6 @@
|
||||
|
||||
代码解释：
|
||||
|
||||
|
||||
（1）导航栏，左侧的logo：
|
||||
|
||||
**错误的写法：**
|
||||
@ -417,7 +405,6 @@
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
这样写虽然视觉效果上达到了，但是搜索引擎是搜不到图片的，不利于SEO。
|
||||
|
||||
**正确的写法：**
|
||||
@ -432,7 +419,6 @@
|
||||
</h1>
|
||||
```
|
||||
|
||||
|
||||
然后将**logo设置为背景图**：
|
||||
|
||||
```css
|
||||
@ -459,50 +445,28 @@
|
||||
|
||||
（1）内容区域，“点击播放”右侧的小三角形：
|
||||
|
||||
|
||||
我们在“点击播放”的右侧放了一个三角形。这个很有技巧。
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
代码截取如下：
|
||||
|
||||
|
||||
|
||||
```css
|
||||
.content .product ul li p.djbf a{
|
||||
font-size: 12px;
|
||||
color:#38B774;
|
||||
text-decoration: none;
|
||||
background:url(images/sanjiaoxing.png) no-repeat right center;
|
||||
padding-right: 12px;
|
||||
}
|
||||
.content .product ul li p.djbf a{
|
||||
font-size: 12px;
|
||||
color:#38B774;
|
||||
text-decoration: none;
|
||||
background:url(images/sanjiaoxing.png) no-repeat right center;
|
||||
padding-right: 12px;
|
||||
}
|
||||
```
|
||||
|
||||
上方代码中，我们在第6行给“点击播放”这个超链接加一个右padding（很关键），然后在第5行把小三角这个背景图放在右padding的位置，就能达到想要的视觉效果。
|
||||
|
||||
|
||||
|
||||
（2）
|
||||
|
||||
|
||||
导航栏+banner+内容区域的效果如下：
|
||||
|
||||
（2）导航栏+banner+内容区域的效果如下：
|
||||
|
||||
|
||||
|
||||
工程文件如下：
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
- [2018-03-20-boya.rar](待审核通过)
|
||||
@ -1,6 +1,4 @@
|
||||
|
||||
|
||||
|
||||
> 本文最初发表于[博客园](http://www.cnblogs.com/smyhvae/p/8430898.html)，并在[GitHub](https://github.com/qianguyihao/Web)上持续更新**前端的系列文章**。欢迎在GitHub上关注我，一起入门和进阶前端。
|
||||
|
||||
> 以下是正文。
|
||||
@ -11,8 +9,6 @@
|
||||
|
||||
本文主要内容：
|
||||
|
||||
- 颜色
|
||||
|
||||
- 文本
|
||||
|
||||
- 盒模型中的 box-sizing 属性
|
||||
@ -25,54 +21,6 @@
|
||||
|
||||
- 渐变
|
||||
|
||||
## 颜色
|
||||
|
||||
CSS3中，有一种新的表示颜色的方式：RGBA或者HSLA。
|
||||
|
||||
RGBA、HSLA可应用于**所有**使用颜色的地方。
|
||||
|
||||
**RGBA 举例**：
|
||||
|
||||
```javascript
|
||||
background-color: rgba(0, 0, 255, 0.3);
|
||||
|
||||
border: 30px solid rgba(0, 255, 0, 0.3);
|
||||
```
|
||||
|
||||
解释：
|
||||
|
||||
- RGBA 即：Red、Green、Blue、Alpha
|
||||
|
||||
- R、G、B 的取值范围是：0~255
|
||||
|
||||
**HSLA 举例**：
|
||||
|
||||
```javascript
|
||||
background-color: hsla(240,50%,50%,0.4);
|
||||
```
|
||||
|
||||
解释：
|
||||
|
||||
- `H` 色调，取值范围 0~360。0或360表示红色、120表示绿色、240表示蓝色。
|
||||
|
||||
- `S` 饱和度，取值范围 0%~100%。值越大，越鲜艳。
|
||||
|
||||
- `L` 亮度，取值范围 0%~100%。亮度最大时为白色，最小时为黑色。
|
||||
|
||||
- `A` 透明度，取值范围 0~1。
|
||||
|
||||
如果不知道 H 的值该设置多少，我们不妨来看一下**色盘**：
|
||||
|
||||
|
||||
|
||||
推荐链接：[配色宝典](http://www.uisdc.com/how-to-create-color-palettes)
|
||||
|
||||
**关于设置透明度的其他方式：**
|
||||
|
||||
（1）`opacity: 0.3;` 会将整个盒子及子盒子设置透明度。也就是说，当盒子设置半透明的时候，会影响里面的子盒子。
|
||||
|
||||
（2）`background: transparent;` 可以单独设置透明度，但设置的是完全透明（不可调节透明度）。
|
||||
|
||||
|
||||
## 文本
|
||||
|
||||
@ -531,7 +479,7 @@ CSS3 对盒模型做出了新的定义，即允许开发人员**指定盒子宽
|
||||
|
||||
上方代码中，我们其实给盒子设置了五张小图，拼成的一张大图。当改变浏览器窗口大小时，可以自适应布局。
|
||||
|
||||
## 渐变
|
||||
## 渐变：background-image
|
||||
|
||||
渐变是CSS3当中比较丰富多彩的一个特性，通过渐变我们可以实现许多炫丽的效果，有效的减少图片的使用数量，并且具有很强的适应性和可扩展性。
|
||||
|
||||
@ -547,8 +495,6 @@ CSS3 对盒模型做出了新的定义，即允许开发人员**指定盒子宽
|
||||
|
||||
|
||||
|
||||
注意，渐变属于背景图片属性`background-image`的属性值。我们依次来看一下。
|
||||
|
||||
### 线性渐变
|
||||
|
||||
格式：
|
||||
@ -849,7 +795,7 @@ CSS3 对盒模型做出了新的定义，即允许开发人员**指定盒子宽
|
||||
|
||||
上图中，给第二个div设置的透明度是从0到0.5。如果设置的透明度是从0到0，则样式无变化，和第一个div一样。如果设置的透明度是从1到1，则盒子是全黑的。
|
||||
|
||||
CSS3的更多属性，且听下文继续。
|
||||
CSS3的更多属性，且看下文继续。
|
||||
|
||||
## 我的公众号
|
||||
|
||||
|
||||
@ -8,13 +8,17 @@ CSS中，有很多**非布局样式**，这些样式（属性）和与布局无
|
||||
- 滚动、换行
|
||||
- 装饰性属性（粗体、斜体、下划线）等。
|
||||
|
||||
这篇文章，我们来对上面的部分样式做一个回顾。
|
||||
|
||||
## 字体
|
||||
|
||||
### 字体分类
|
||||
|
||||
常见的字体可以可以分为两类：**衬线体、无衬线体**。
|
||||
常见的字体可以分为两类：**衬线体、无衬线体**。
|
||||
|
||||
**1、serif（衬线体）**：在字的笔画开始、结束的地方有额外的装饰，而且笔画的粗细会有所不同。比如：宋体。
|
||||
|
||||
|
||||
**1、serif（衬线体）**：在字的笔画开始、结束的地方有额外的装饰，而且笔画的粗细会有所不同。比如：宋体、楷体。
|
||||
|
||||
**2、sans-serif（无衬线体）**：笔划粗细基本一致，只剩下主干，造型简明有力，起源也很晚。适用于标题、广告等，识别性高。
|
||||
|
||||
@ -25,14 +29,14 @@ CSS中，有很多**非布局样式**，这些样式（属性）和与布局无
|
||||
- Arial：Windows平台默认的英文字体
|
||||
- 苹方（PingFang SC）：Mac & iOS 平台的中文字体
|
||||
- San Francisco：Mac & iOS 平台的英文字体
|
||||
- [思源黑体](https://baike.baidu.com/item/%E6%80%9D%E6%BA%90%E9%BB%91%E4%BD%93/14919098)。是Adobe和Google 在2014年7月联合推出的一款开源字体。
|
||||
- [思源黑体](https://baike.baidu.com/item/%E6%80%9D%E6%BA%90%E9%BB%91%E4%BD%93/14919098)。是 Adobe 和 Google 在2014年7月联合推出的一款开源字体。
|
||||
|
||||
20191004_1100.png
|
||||
|
||||
补充：
|
||||
|
||||
- 海报设计、PPT不要用宋体。
|
||||
- 乔布斯
|
||||
（1）海报设计、PPT不要用宋体。
|
||||
|
||||
（2）乔布斯
|
||||
|
||||
参考链接：[如何优雅的选择字体(font-family)](https://segmentfault.com/a/1190000006110417)
|
||||
|
||||
@ -41,14 +45,14 @@ CSS中，有很多**非布局样式**，这些样式（属性）和与布局无
|
||||
css 中的字体族可以理解成是某一类字体。常见的字体族可以分为五类：
|
||||
|
||||
- serif:衬线体。
|
||||
- sans-serif：无衬线体
|
||||
- sans-serif：无衬线体。
|
||||
- monospace：等宽字体。每一个字母所占的宽度是相同的。写代码的字体尽量用等宽字体。
|
||||
- cursive：手写字体。比如徐静蕾手写体。
|
||||
- fantasy：梦幻字体。比如一些艺术字。
|
||||
|
||||
这五类字体组不代表某一个具体的字体，而是当你在 css 中指定字体族的时候，就有可能从中找出一种字体来显示。
|
||||
这五类字体族不代表某一个具体的字体，而是当你在 css 中指定字体族的时候，就有可能在字体族中找出一种字体来显示。
|
||||
|
||||
20191004_1130.png
|
||||
|
||||
|
||||
参考链接：[serif，sans-serif，monospace，cursive和fantasy](http://www.ayqy.net/blog/serif%EF%BC%8Csans-serif%EF%BC%8Cmonospace%EF%BC%8Ccursive%E5%92%8Cfantasy/)
|
||||
|
||||
@ -75,7 +79,15 @@ css 中的字体族可以理解成是某一类字体。常见的字体族可以
|
||||
|
||||
- 网络字体
|
||||
|
||||
- iconfont
|
||||
- [iconfont](https://www.iconfont.cn/)
|
||||
|
||||
## 边框
|
||||
|
||||
如何用边框画一个三角形？详见《02-CSS基础/06-CSS盒模型详解》中的最后一段。
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@ -85,7 +85,7 @@ ES6中的字符串扩展，用得少，而且逻辑相对简单。如下：
|
||||
|
||||
## 数组的扩展
|
||||
|
||||
> 下面提到的数组的几个方法，更详细的内容，可以看《03-JavaScript基础/17-数组的其他方法.md》。
|
||||
> 下面提到的数组的几个方法，更详细的内容，可以看《04-JavaScript基础/17-数组的常见方法.md》。
|
||||
|
||||
### 扩展1：Array.from()
|
||||
|
||||
|
||||
@ -197,7 +197,7 @@ html代码：
|
||||
|
||||
.child {
|
||||
display: table-cell;
|
||||
vertical-align: middle; /*来指定行内元素（inline）或表格单元格（table-cell）元素的垂直对齐方式。*/
|
||||
vertical-align: middle; /*指定行内元素（inline）或表格单元格（table-cell）元素的垂直对齐方式。*/
|
||||
height: 200px; /*此处的宽高设置无效*/
|
||||
width: 200px;
|
||||
border: 10px solid blue;
|
||||
|
||||
13
17-前端综合/CSS开发总结.md
Normal file
13
17-前端综合/CSS开发总结.md
Normal file
@ -0,0 +1,13 @@
|
||||
|
||||
### p标签里的文字溢出怎么办
|
||||
|
||||
加一个属性即可：
|
||||
|
||||
```css
|
||||
word-break: break-all;
|
||||
|
||||
```
|
||||
|
||||
### inline-block 相关
|
||||
|
||||
图片默认是 inline-block 布局，会存在经典的底部 3px 的问题。
|
||||
@ -1,10 +0,0 @@
|
||||
|
||||
### p标签里的文字溢出怎么办
|
||||
|
||||
加一个属性即可：
|
||||
|
||||
```css
|
||||
word-break: break-all;
|
||||
|
||||
```
|
||||
|
||||
Loading…
Reference in New Issue
Block a user