update
This commit is contained in:
qianguyihao
parent
a6c6133bc1
commit
59d3b6bc0c
@ -4,7 +4,30 @@
|
|||||||
积累平时看到的一些好的前端文章。
|
积累平时看到的一些好的前端文章。
|
||||||
|
|
||||||
|
|
||||||
## 2017-08-01
|
|
||||||
|
|
||||||
|
### 2017-08-17
|
||||||
|
|
||||||
|
- [面试分享：一年经验初探阿里巴巴前端社招](https://github.com/jawil/blog/issues/22)
|
||||||
|
|
||||||
|
在公众号「web前端课程」上看到的文章。作者经历了4面，也是厉害了。另外，作者在gihub上的[博客](https://github.com/jawil/blog)也是出彩的。比如说下面这篇文章就值得推荐：
|
||||||
|
|
||||||
|
- [挖 "掘" 淘 "金" 之 前端闯关历险记学习资料汇总](https://github.com/jawil/blog/issues/4)
|
||||||
|
|
||||||
|
作者搜集了几百篇在掘金上看到的好文章，让人惊叹。
|
||||||
|
|
||||||
|
|
||||||
|
### 2017-08-16
|
||||||
|
|
||||||
|
- [道阻且长啊TAT(前端面试总结)](https://segmentfault.com/a/1190000010631325?_ea=2359607)
|
||||||
|
|
||||||
|
作者毕业于华科，面的是前端的实习，还拿了不少offer：百度外卖，头条，美团，狗东，其他，最终在美团实习。我最初是在[微信公众号](https://mp.weixin.qq.com/s/_clHr5a6_JzTos9bKpvKrA)上看到的文章。
|
||||||
|
|
||||||
|
|
||||||
|
hello。我看你拿了不少实习offer。有没有推荐的前端学习资料呀？比如说：网站、链接、书籍等。可否分享给我？如果内容较多，欢迎发表成博客。谢啦～～～
|
||||||
|
|
||||||
|
|
||||||
|
### 2017-08-01
|
||||||
|
|
||||||
- [资深Web技术专家曹刘阳：2016年前端技术观察](http://geek.csdn.net/news/detail/128912)
|
- [资深Web技术专家曹刘阳：2016年前端技术观察](http://geek.csdn.net/news/detail/128912)
|
||||||
|
|
||||||
@ -12,7 +35,7 @@
|
|||||||
|
|
||||||
|
|
||||||
|
|
||||||
## 2017-07-31
|
### 2017-07-31
|
||||||
|
|
||||||
- [你可能不需要 Vuex](https://github.com/chenbin92/blog/issues/1)
|
- [你可能不需要 Vuex](https://github.com/chenbin92/blog/issues/1)
|
||||||
|
|
||||||
@ -27,7 +50,7 @@
|
|||||||
|
|
||||||
|
|
||||||
|
|
||||||
## 2017-07-13
|
### 2017-07-13
|
||||||
|
|
||||||
- [前端开发面试题](https://github.com/markyun/My-blog/tree/master/Front-end-Developer-Questions)
|
- [前端开发面试题](https://github.com/markyun/My-blog/tree/master/Front-end-Developer-Questions)
|
||||||
|
|
||||||
@ -38,10 +61,10 @@
|
|||||||
|
|
||||||
|
|
||||||
|
|
||||||
## 2017-01-20
|
### 2017-01-20
|
||||||
|
|
||||||
- [阿里9年，我总结的前端架构演进3大阶段及团队管理心法](http://www.infoq.com/cn/news/2017/01/Ali-9-3)
|
- [阿里9年，我总结的前端架构演进3大阶段及团队管理心法](http://www.infoq.com/cn/news/2017/01/Ali-9-3)
|
||||||
|
|
||||||
伟明的推荐。
|
伟明的推荐，说是对前端开发的价值观形成有良好的影响。
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
@ -902,7 +902,7 @@ CSS允许对于元素的不同状态，定义不同的样式信息。伪类选
|
|||||||
|
|
||||||
**`a{}`和`a:link{}`的区别：**
|
**`a{}`和`a:link{}`的区别：**
|
||||||
|
|
||||||
- `a{}`定义的样式针对所有的超链接(包括括锚点)
|
- `a{}`定义的样式针对所有的超链接(包括锚点)
|
||||||
- `a:link{}`定义的样式针对所有写了href属性的超链接(不包括锚点)
|
- `a:link{}`定义的样式针对所有写了href属性的超链接(不包括锚点)
|
||||||
|
|
||||||
**（2）动态伪类: **
|
**（2）动态伪类: **
|
||||||
|
|||||||
696
02-CSS/02-CSS属性.md
Normal file
696
02-CSS/02-CSS属性.md
Normal file
@ -0,0 +1,696 @@
|
|||||||
|
## 主要内容
|
||||||
|
- CSS的单位
|
||||||
|
- 字体属性
|
||||||
|
- 文本属性
|
||||||
|
- 背景属性
|
||||||
|
- 列表属性
|
||||||
|
- 盒子模型
|
||||||
|
- 定位属性：position、float、overflow、z-index等
|
||||||
|
- 导航栏的制作
|
||||||
|
- 鼠标的属性cursor
|
||||||
|
- 滤镜的介绍
|
||||||
|
|
||||||
|
## CSS的单位
|
||||||
|
html中的单位只有一种，那就是像素px，所以单位是可以省略的，但是在CSS中不一样。
|
||||||
|
<font color="#0000FF">**CSS中的单位是必须要写的**，因为它没有默认单位。</font>
|
||||||
|
- **绝对单位：**1 `in`=2.54`cm`=25.4`mm`=72`pt`=6`pc`。
|
||||||
|
各种单位的含义：
|
||||||
|
`in`：英寸Inches (1 英寸 = 2.54 厘米)
|
||||||
|
`cm`：厘米Centimeters
|
||||||
|
`mm`：毫米Millimeters
|
||||||
|
`pt`：点Points，或者叫英镑 (1点 = 1/72英寸)
|
||||||
|
`pc`：皮卡Picas (1 皮卡 = 12 点)
|
||||||
|
|
||||||
|
- **相对单位：**
|
||||||
|
`px`：像素
|
||||||
|
`em`：印刷单位相当于12个点
|
||||||
|
`%`：百分比，相对周围的文字的大小
|
||||||
|
|
||||||
|
为什么说像素px是一个相对单位呢，这也很好理解。比如说，电脑屏幕的的尺寸是不变的，但是我们可以让其显示不同的分辨率，在不同的分辨率下，单个像素的长度肯定是不一样的啦。
|
||||||
|
|
||||||
|
百分比`%`这个相对单位要怎么用呢？这里也举个例子：
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
## 字体属性
|
||||||
|
|
||||||
|
css样式中，常见的字体属性有以下几种：
|
||||||
|
```html
|
||||||
|
p{
|
||||||
|
font-size:50px; /*字体大小*/
|
||||||
|
font-style:italic ; /*斜体*/
|
||||||
|
font-weight:bold; /*粗体：属性值写成bolder也可以*/
|
||||||
|
font-family:幼圆,黑体; /*字体类型：如果没有幼圆就显示黑体，没有黑体就显示默认*/
|
||||||
|
font-variant:small-caps; /*小写变大写*/
|
||||||
|
}
|
||||||
|
```
|
||||||
|
另外还有一个`font`属性，它是一个简写属性。指的是：可以将上面的多个属性写在一个声明里面，个人不太喜欢这种写法。
|
||||||
|
|
||||||
|
## 文本属性
|
||||||
|
|
||||||
|
CSS样式中，常见的文本属性有以下几种：
|
||||||
|
- `letter-spacing:0.5cm ;` 单个字母之间的间距
|
||||||
|
- `word-spacing:1cm;` 单词之间的间距
|
||||||
|
- `text-decoration:overline;` 字体修饰：underline下划线、line-through中划线、overline上划线
|
||||||
|
- `text-transform:lowercase;` 单词字体大小写。uppercase大写、lowercase小写
|
||||||
|
- `color:red;` 字体颜色
|
||||||
|
- `text-align="属性值;"` 在当前容器中的对齐的方式。属性值可以是：left、right、center（<font color="#0000FF">**在当前容器的中间**</font>）、justify
|
||||||
|
- `text-transform:lowercase;` 单词的字体大小写。属性值可以是：`uppercase`（单词大写）、`lowercase`（单词小写）、`capitalize`（每个单词的首字母大写）
|
||||||
|
|
||||||
|
这里来一张表格的图片吧，一览无遗：
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
## 背景属性
|
||||||
|
|
||||||
|
CSS样式中，常见的背景属性有以下几种：（经常用到，要记住）
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
这里来一张表格的图片吧，一览无遗：
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
现在，我们把上面的比较重要的属性挑选出来，如下：
|
||||||
|
|
||||||
|
- `background-color:#ff99ff;` 设置元素的背景颜色。
|
||||||
|
|
||||||
|
- `background-image:url(images/2.gif);` 将图像设置为背景。
|
||||||
|
|
||||||
|
- `background-position:center top;` 设置背景图片在当前容器中的位置。
|
||||||
|
|
||||||
|
- `background-attachment:scroll;` 设置背景图片是否跟着滚动条一起移动。
|
||||||
|
属性值可以是：`scroll`（背景图片不动）、`fixed`（背景图片跟着滚动条一起移动）。注意属性值的含义不要搞反了，它的含义是根据滚动条来定义的。
|
||||||
|
|
||||||
|
- 另外还有一个简写属性叫做`background`，它的作用是：将上面的多个属性写在一个声明中。
|
||||||
|
|
||||||
|
上面这几个属性经常用到，需要记住。现在我们逐个进行讲解。
|
||||||
|
|
||||||
|
|
||||||
|
### `background-repeat`属性（重要）
|
||||||
|
|
||||||
|
`background-repeat:no-repeat;`设置背景图片是否重复及如何重复，默认平铺满。属性值可以是：
|
||||||
|
|
||||||
|
- `no-repeat`（不要平铺）
|
||||||
|
- `repeat-x`（横向平铺）
|
||||||
|
- `repeat-y`（纵向平铺）
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
这个属性在开发的时候也是经常用到的。我们通过设置不同的属性值来看一下效果吧：
|
||||||
|
|
||||||
|
（1）不加这个属性时：（即默认时）（背景图片会被平铺满）
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
PS：padding的区域也是有背景图的。
|
||||||
|
|
||||||
|
（2）属性值为`no-repeat`（不要平铺）时：
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
（3）属性值为`repeat-x`（横向平铺）时：
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
其实这种属性的作用还是很广的。举个例子，设计师设计一张宽度只有1px、颜色纵向渐变的图片，然后我们通过这个属性将其进行水平方向的平铺，就可以看到整个页面都是渐变的了。在搜索引擎上搜“平铺背景”，就可以发现，周期性的图片可以采用此种方法进行平铺。
|
||||||
|
|
||||||
|
（4）属性值为`repeat-y`（纵向平铺）时：
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
### `background-position`属性
|
||||||
|
|
||||||
|
`background-position`属性指的是**背景定位**属性。公式如下：
|
||||||
|
|
||||||
|
|
||||||
|
在描述属性值的时候，有两种方式：用像素描述、用单词描述。下面分别介绍。
|
||||||
|
|
||||||
|
**1、用像素值描述属性值：**
|
||||||
|
|
||||||
|
格式如下：
|
||||||
|
|
||||||
|
```
|
||||||
|
background-position:向右偏移量 向下偏移量;
|
||||||
|
```
|
||||||
|
|
||||||
|
属性值可以是正数，也可以是负数。比如：`100px 200px`、`-50px -120px`。
|
||||||
|
|
||||||
|
举例如下：
|
||||||
|
|
||||||
|
20170812_1643.png
|
||||||
|
|
||||||
|
20170812_1645.png
|
||||||
|
|
||||||
|
|
||||||
|
**2、用单词描述属性值：**
|
||||||
|
|
||||||
|
格式如下：
|
||||||
|
|
||||||
|
```
|
||||||
|
background-position: 描述左右的词 描述上下的词;
|
||||||
|
```
|
||||||
|
|
||||||
|
- 描述左右的词：left、center、right
|
||||||
|
- 描述上下的词：top 、center、bottom
|
||||||
|
|
||||||
|
比如说，`right center`表示将图片放到右边的中间；`center center`表示将图片放到正中间。
|
||||||
|
|
||||||
|
位置属性有很多使用场景的。我们来举两个例子。
|
||||||
|
|
||||||
|
场景1：（大背景图）
|
||||||
|
|
||||||
|
打开“暗黑3 台湾”的官网<https://tw.battle.net/d3/zh/>，可以看到官网的效果是比较炫的：
|
||||||
|
|
||||||
|
20170812_1945.png
|
||||||
|
|
||||||
|
检查网页后，找到网站背景图片的url：<https://tw.battle.net/d3/static/images/layout/bg-repeat.jpg>。背景图如下：
|
||||||
|
|
||||||
|
20170812_1950.jpg
|
||||||
|
|
||||||
|
实际上，我们是通过把这张图片作为网站的背景图来达到显示效果的。只需要给body标签加如下属性即可：
|
||||||
|
|
||||||
|
```
|
||||||
|
body{
|
||||||
|
background-image: url(/Users/smyhvae/Dropbox/img/20170812_1950.jpg);
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-position: center top;
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
上方代码中，如果没加`background-position`这个属性，背景图会默认处于浏览器的左上角（显得很丑）；加了此属性之后，图片在水平方向就位于浏览器的中间了。
|
||||||
|
|
||||||
|
场景2：（通栏banner）
|
||||||
|
|
||||||
|
很多网站的首页都会有banner图（网站最上方的全屏大图叫做「**通栏banner**」），这种图要求横向的宽度特别大。比如说，设计师给你一张1920*465的超大banner图，如果我们把这个banner图作为img标签直接插入网页中，会有问题的：首先，图片不在网页的中间；其次，肯定会出现横向滚动条。如下图所示：
|
||||||
|
|
||||||
|
20170813_1102.gif
|
||||||
|
|
||||||
|
正确的做法是，将banner图作为div的背景图，这样的话，背景图超出div的部分，会自动移溢出。需要给div设置的属性如下：
|
||||||
|
|
||||||
|
```css
|
||||||
|
div{
|
||||||
|
height: 465px;
|
||||||
|
background-image: url(http://img.smyhvae.com/20170813_1053.jpg);
|
||||||
|
background-position: center top;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
上方代码中，我们给div设置height（高度为banner图的高度），不需要设置宽度（因为宽度会霸占整行）。效果如下：
|
||||||
|
|
||||||
|
20170813_1119.gif
|
||||||
|
|
||||||
|
上图可以看出，将banner图作为div的背景后，banner图会永远处于网页的正中间（水平方向）。
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
### background-attachment属性
|
||||||
|
|
||||||
|
- `background-attachment:scroll;` 设置背景图片是否固定。属性值可以是：
|
||||||
|
- `fixed`（背景就会被固定住，不会被滚动条滚走）。
|
||||||
|
- `scroll`（与fixed属性相反，默认属性）
|
||||||
|
|
||||||
|
|
||||||
|
`background-attachment:fixed;`的效果如下：
|
||||||
|
|
||||||
|
20170813_1158.gif
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
### background综合属性
|
||||||
|
|
||||||
|
background属性和border一样，是一个综合属性，可以将多个属性写在一起。
|
||||||
|
|
||||||
|
举例1:
|
||||||
|
|
||||||
|
```
|
||||||
|
background:red url(1.jpg) no-repeat 100px 100px fixed;
|
||||||
|
```
|
||||||
|
|
||||||
|
等价于：
|
||||||
|
|
||||||
|
```
|
||||||
|
background-color:red;
|
||||||
|
background-image:url(1.jpg);
|
||||||
|
background-repeat:no-repeat;
|
||||||
|
background-position:100px 100px;
|
||||||
|
background-attachment:fixed;
|
||||||
|
```
|
||||||
|
|
||||||
|
以后，我们可以用小属性层叠掉大属性。
|
||||||
|
|
||||||
|
上面的属性中，可以任意省略其中的一部分。
|
||||||
|
|
||||||
|
比如说，对于下面这样的属性：
|
||||||
|
|
||||||
|
```
|
||||||
|
background: blue url(images/wuyifan.jpg) no-repeat 100px 100px;
|
||||||
|
```
|
||||||
|
|
||||||
|
效果如下：
|
||||||
|
|
||||||
|
20170813_1515.png
|
||||||
|
|
||||||
|
|
||||||
|
PS：以后的CSS3内容中，将学习更多background属性： background-origin、background-clip、background-size（在CSS2.1背景图片是不能调整尺寸，IE9开始兼容）、多背景。
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
## 列表属性
|
||||||
|
|
||||||
|
|
||||||
|
```html
|
||||||
|
ul li{
|
||||||
|
list-style-image:url(images/2.gif) ; /*列表项前设置为图片*/
|
||||||
|
margin-left:80px; /*公有属性*/
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
另外还有一个简写属性叫做`list-style`，它的作用是：将上面的多个属性写在一个声明中。
|
||||||
|
|
||||||
|
我们来看一下`list-style-image`属性的效果：
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
给列表前面的图片加个边距吧，不然显示不完整：
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
这里来一张表格的图片吧，一览无遗：
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
## 盒子模型（重要）
|
||||||
|
|
||||||
|
之前我们是把标签看做是一个对象。从现在开始，我们要把标签理解成一个盒子。
|
||||||
|
|
||||||
|
标准盒子模型：
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
IE盒子模型：
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
上图显示：
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
- 在 CSS 盒子模型 (Box Model) 规定了元素处理元素的几种方式： <font color="#0000FF">**内容、内边距、边框、外边距**</font>。
|
||||||
|
- 在 CSS的<font color="#0000FF">**标准盒子模型**</font>中，<font color="#0000FF">**width 和 height 指的是内容区域**</font>的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸。<font color="#0000FF">**IE盒子模型**</font>中，<font color="#0000FF">**width 和 height 指的是内容区域+border+padding**</font>的宽度和高度。
|
||||||
|
注：Android中也有margin和padding的概念，意思是差不多的，如果你会一点Android，应该比较好理解吧。区别在于，Android中没有bording这个东西，而且在Android中，margin并不是控件的一部分，我觉得这样做更合理一些，呵呵。
|
||||||
|
<br>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
例如，上图所示：假设框的每个边上有10个像素的外边距和5个像素的内边距。如果希望这个元素框达到100个像素，就需要将内容的宽度设置为70像素。
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
`<body>`标签有必要强调一下。很多人以为`<body>`标签占据的是整个页面的全部区域，其实是错误的，正确的理解是这样的：整个网页最大的盒子是`<document>`，即浏览器。而`<body>`是`<document>`的儿子。浏览器给`<body>`默认的margin大小是8个像素，此时`<body>`占据了整个页面的一大部分区域，而不是全部区域。来看一段代码。
|
||||||
|
|
||||||
|
```html
|
||||||
|
<!doctype html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="Generator" content="EditPlus®">
|
||||||
|
<meta name="Author" content="">
|
||||||
|
<meta name="Keywords" content="">
|
||||||
|
<meta name="Description" content="">
|
||||||
|
<title>Document</title>
|
||||||
|
|
||||||
|
<style type="text/css">
|
||||||
|
|
||||||
|
div{
|
||||||
|
width: 100px;
|
||||||
|
height: 100px;
|
||||||
|
border: 1px solid red;
|
||||||
|
padding: 20px;
|
||||||
|
margin: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
|
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<div>有生之年</div>
|
||||||
|
<div>狭路相逢</div>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
|
|
||||||
|
```
|
||||||
|
上面的代码中，我们对div标签设置了边距等信息。打开google浏览器，按住F12，显示效果如下：
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
补充一下，如果我在css样式中这样写：
|
||||||
|
```html
|
||||||
|
padding:20 30 40 50;
|
||||||
|
```
|
||||||
|
上方代码的设置边距的顺序是：上、右、下、左（顺时针方向）。margin的道理是一样的。
|
||||||
|
|
||||||
|
|
||||||
|
## 定位属性(position,float,overflow,z-index)
|
||||||
|
|
||||||
|
在讲之前，有个概念叫顺序流，需要强调一下。
|
||||||
|
|
||||||
|
<font color="#0000FF">**顺序流**</font>：所有的标签的初始排列顺序就称为顺序流。
|
||||||
|
|
||||||
|
有两种情况会脱离本身的顺序流：
|
||||||
|
- 1、控件的位置设置为绝对定位。
|
||||||
|
- 2、设置控件的float属性。
|
||||||
|
|
||||||
|
### 1、pisition属性：
|
||||||
|
|
||||||
|
定位属性position的属性值可以是absolute、relative。
|
||||||
|
|
||||||
|
position定位分为绝对定位和相对定位：
|
||||||
|
- `position:absolute;` <font color="#0000FF">**绝对定位**</font>：定义横纵坐标，原点在父容器的左上角。<font color="#0000FF">**脱离了本身的顺序流**</font>。横坐标用left表示，纵坐标用top表示。
|
||||||
|
|
||||||
|
|
||||||
|
绝对定位的举例：
|
||||||
|
|
||||||
|
```html
|
||||||
|
<style type="text/css">
|
||||||
|
div{
|
||||||
|
position: absolute;/*绝对定位*/
|
||||||
|
left: 10px;/*横坐标*/
|
||||||
|
top: 20px;/*纵坐标*/
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
```
|
||||||
|
|
||||||
|
- `position:relative;` <font color="#0000FF">**相对定位**</font>：相对于自己原来的位置。
|
||||||
|
|
||||||
|
相对定位的举例：
|
||||||
|
|
||||||
|
```html
|
||||||
|
<!doctype html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="Generator" content="EditPlus®">
|
||||||
|
<meta name="Author" content="">
|
||||||
|
<meta name="Keywords" content="">
|
||||||
|
<meta name="Description" content="">
|
||||||
|
<title>Document</title>
|
||||||
|
|
||||||
|
<style type="text/css">
|
||||||
|
|
||||||
|
body{
|
||||||
|
margin: 0px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#div1{
|
||||||
|
width: 200px;
|
||||||
|
height: 200px;
|
||||||
|
border: 1px solid red;
|
||||||
|
}
|
||||||
|
|
||||||
|
#div2{
|
||||||
|
position: relative;/*相对定位：相对于自己原来的位置*/
|
||||||
|
left: 50px;/*横坐标：正值表示向右偏移，负值表示向左偏移*/
|
||||||
|
top: 50px;/*纵坐标：正值表示向下偏移，负值表示向上偏移*/
|
||||||
|
|
||||||
|
width: 200px;
|
||||||
|
height: 200px;
|
||||||
|
border: 1px solid red;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<div id="div1">有生之年</div>
|
||||||
|
<div id="div2">狭路相逢</div>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
|
```
|
||||||
|
|
||||||
|
效果：
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
### 2、float属性：浮动
|
||||||
|
|
||||||
|
`float`属性会让元素脱离原来的顺序流，它的属性值可以是：
|
||||||
|
- `none`：默认值，对象不漂浮
|
||||||
|
- `left`：文本流向对象的右边
|
||||||
|
- `right`：文本流向对象的左边
|
||||||
|
|
||||||
|
举例：
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
我们知道，在默认情况下，两个div标签是上下进行排列的。现在由于float属性让上图中的两个`<div>`标签出现了浮动，于是这里两个标签在另外一个层面上水平排列了。而`<p>`标签还在自己的层面上遵从顺序流进行排列。
|
||||||
|
|
||||||
|
### 3、clear属性：禁止浮动
|
||||||
|
|
||||||
|
`clear`属性的属性值可以是：
|
||||||
|
- `none`：默认值，允许两边都可以有浮动对象
|
||||||
|
- `left`：不允许左边有浮动对象
|
||||||
|
- `right`：不允许右边有浮动对象
|
||||||
|
- `both`：不允许有浮动对象
|
||||||
|
|
||||||
|
### 4、overflow属性：超出范围的内容要怎么处理
|
||||||
|
|
||||||
|
`overflow`属性的属性值可以是：
|
||||||
|
- `auto`：浏览器自己解决。在必需时裁切对象多余的内容或显示滚动条。一般采用这个属性值。
|
||||||
|
- `visible`：默认值。多余的内容不剪切也不添加滚动条，会全部显示出来。
|
||||||
|
- `hidden`：不显示超过对象尺寸的内容。
|
||||||
|
对象将以包含对象的 window 或 frame 的尺寸进行裁切，并且 clip 属性设置将失效。
|
||||||
|
- `scroll`：总是显示滚动条。
|
||||||
|
|
||||||
|
针对上面的不同的属性值，我们来看一下效果：
|
||||||
|
举例：
|
||||||
|
|
||||||
|
```html
|
||||||
|
<!doctype html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="Generator" content="EditPlus®">
|
||||||
|
<meta name="Author" content="">
|
||||||
|
<meta name="Keywords" content="">
|
||||||
|
<meta name="Description" content="">
|
||||||
|
<title>Document</title>
|
||||||
|
|
||||||
|
<style type="text/css">
|
||||||
|
|
||||||
|
div{
|
||||||
|
width: 100px;
|
||||||
|
height: 100px;
|
||||||
|
background-color: #00cc66;
|
||||||
|
margin-right: 100px;
|
||||||
|
float: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
#div1{
|
||||||
|
overflow:auto;/*超出的部分让浏览器自行解决*/
|
||||||
|
}
|
||||||
|
#div2{
|
||||||
|
overflow:visible;/*超出的部分会显示出来*/
|
||||||
|
}
|
||||||
|
|
||||||
|
#div3{
|
||||||
|
overflow:hidden;/*超出的部分将剪切掉*/
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
|
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<div id="div1">其实很简单 其实很自然 两个人的爱由两人分担 其实并不难 是你太悲观 隔着一道墙不跟谁分享 不想让你为难 你不再需要给我个答案</div>
|
||||||
|
<div id="div2">其实很简单 其实很自然 两个人的爱由两人分担 其实并不难 是你太悲观 隔着一道墙不跟谁分享 不想让你为难 你不再需要给我个答案</div>
|
||||||
|
<div id="div3">其实很简单 其实很自然 两个人的爱由两人分担 其实并不难 是你太悲观 隔着一道墙不跟谁分享 不想让你为难 你不再需要给我个答案</div>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
|
```
|
||||||
|
|
||||||
|
效果：
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
### 5、z-index属性：属性值大的位于上层，属性值小的位于下层
|
||||||
|
|
||||||
|
这句话可能比较难理解。我们来看例子吧。
|
||||||
|
|
||||||
|
这是默认情况下的例子：（div2在上层，div1在下层）
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
现在加一个`z-index`属性，要求效果如下：
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
## 鼠标的属性cursor
|
||||||
|
|
||||||
|
鼠标的属性`cursor`有以下几个属性值：
|
||||||
|
- `auto`：默认值。浏览器根据当前情况自动确定鼠标光标类型。
|
||||||
|
- `pointer`：IE6.0，竖起一只手指的手形光标。就像通常用户将光标移到超链接上时那样。
|
||||||
|
- `hand`：和`pointer`的作用一样：竖起一只手指的手形光标。就像通常用户将光标移到超链接上时那样。
|
||||||
|
|
||||||
|
比如说，我想让鼠标放在那个标签上时，光标显示手状，代码如下：
|
||||||
|
```html
|
||||||
|
p:hover{
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
另外还有以下的属性：（不用记，需要的时候查一下就行了）
|
||||||
|
all-scroll : IE6.0 有上下左右四个箭头，中间有一个圆点的光标。用于标示页面可以向上下左右任何方向滚动。
|
||||||
|
col-resize : IE6.0 有左右两个箭头，中间由竖线分隔开的光标。用于标示项目或标题栏可以被水平改变尺寸。
|
||||||
|
crosshair : 简单的十字线光标。
|
||||||
|
default : 客户端平台的默认光标。通常是一个箭头。
|
||||||
|
hand : 竖起一只手指的手形光标。就像通常用户将光标移到超链接上时那样。
|
||||||
|
move : 十字箭头光标。用于标示对象可被移动。
|
||||||
|
help : 带有问号标记的箭头。用于标示有帮助信息存在。
|
||||||
|
no-drop : IE6.0 带有一个被斜线贯穿的圆圈的手形光标。用于标示被拖起的对象不允许在光标的当前位置被放下。
|
||||||
|
not-allowed : IE6.0 禁止标记(一个被斜线贯穿的圆圈)光标。用于标示请求的操作不允许被执行。
|
||||||
|
progress : IE6.0 带有沙漏标记的箭头光标。用于标示一个进程正在后台运行。
|
||||||
|
row-resize : IE6.0 有上下两个箭头，中间由横线分隔开的光标。用于标示项目或标题栏可以被垂直改变尺寸。
|
||||||
|
text : 用于标示可编辑的水平文本的光标。通常是大写字母 I 的形状。
|
||||||
|
vertical-text : IE6.0 用于标示可编辑的垂直文本的光标。通常是大写字母 I 旋转90度的形状。
|
||||||
|
wait : 用于标示程序忙用户需要等待的光标。通常是沙漏或手表的形状。
|
||||||
|
*-resize : 用于标示对象可被改变尺寸方向的箭头光标。
|
||||||
|
w-resize | s-resize | n-resize | e-resize | ne-resize | sw-resize | se-resize | nw-resize
|
||||||
|
url ( url ) : IE6.0 用户自定义光标。使用绝对或相对 url 地址指定光标文件(后缀为 .cur 或者 .ani )。
|
||||||
|
|
||||||
|
## 滤镜
|
||||||
|
|
||||||
|
这里只举一个滤镜的例子吧。比如说让图片变成灰度图的效果，可以这样设置滤镜：
|
||||||
|
|
||||||
|
```html
|
||||||
|
<img src="3.jpg" style="filter:gray()">
|
||||||
|
```
|
||||||
|
|
||||||
|
举例代码：
|
||||||
|
|
||||||
|
```html
|
||||||
|
<body>
|
||||||
|
<table>
|
||||||
|
<tr>
|
||||||
|
<td>原始图片</td>
|
||||||
|
<td>图片加入黑白效果</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td><img src="3.jpg"></td>
|
||||||
|
<td><img src="3.jpg" style="filter:gray()"></td> /*滤镜：设置图片为灰白效果*/
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
|
</body>
|
||||||
|
```
|
||||||
|
|
||||||
|
效果如下：（IE有效果，google浏览器无效果）
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
**延伸：**
|
||||||
|
滤镜本身是平面设计中的知识。如果你懂一点PS的话···打开PS看看吧：
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
爆料一下，表示博主有两年多的平面设计经验，我做设计的时间其实比写代码的时间要长，嘿嘿···
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
## 导航栏的制作（本段内容忽略）
|
||||||
|
|
||||||
|
现在，我们利用float浮动属性来把无序列表做成一个简单的导航栏吧，效果如下：
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
代码：
|
||||||
|
|
||||||
|
```html
|
||||||
|
<!doctype html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="Generator" content="EditPlus®">
|
||||||
|
<meta name="Author" content="">
|
||||||
|
<meta name="Keywords" content="">
|
||||||
|
<meta name="Description" content="">
|
||||||
|
<title>Document</title>
|
||||||
|
|
||||||
|
<style type="text/css">
|
||||||
|
ul{
|
||||||
|
list-style: none;/*去掉列表前面的圆点*/
|
||||||
|
width: 420px;
|
||||||
|
height: 60px;
|
||||||
|
background-color: black;/*设置整个导航栏的背景为灰色*/
|
||||||
|
}
|
||||||
|
|
||||||
|
li{
|
||||||
|
float: left;/*平铺*/
|
||||||
|
margin-right: 30px;
|
||||||
|
margin-top: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
a{
|
||||||
|
text-decoration: none;/*去掉超链的下划线*/
|
||||||
|
font-size: 20px;
|
||||||
|
color: #BBBBBB;/*设置超链的字体为黑色*/
|
||||||
|
font-family:微软雅黑;
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
|
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<ul>
|
||||||
|
<li><a href="">博客园</a></li>
|
||||||
|
<li><a href="">新随笔</a></li>
|
||||||
|
<li><a href="">联系</a></li>
|
||||||
|
<li><a href="">订阅</a></li>
|
||||||
|
<li><a href="">管理</a></li>
|
||||||
|
|
||||||
|
</ul>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
```
|
||||||
|
|
||||||
|
实现效果如下：
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
国庆这四天，连续写了四天的博客，白天和黑夜，从未停歇，只交替没交换，为的就是这每日一发。以后会不断更新的。
|
||||||
|
|
||||||
|
##我的公众号
|
||||||
|
|
||||||
|
下图是我的微信公众号（生命团队id：`vitateam`），欢迎有心人关注。<font color=#0000ff>**博客园分享技术，公众号分享心智**</font>。
|
||||||
|
|
||||||
|
我会很感激第一批关注我的人。**此时，年轻的我和你，一无所有；而后，富裕的你和我，满载而归。**
|
||||||
|
|
||||||
|
|
||||||
@ -383,11 +383,6 @@ PS：! important做站的时候，不允许使用。因为会让css写的很乱
|
|||||||
选择器的写法权重，谁离的近，谁写在下面。
|
选择器的写法权重，谁离的近，谁写在下面。
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
### CSS样式表的冲突的总结
|
### CSS样式表的冲突的总结
|
||||||
|
|
||||||
- 1、对于相同的选择器，其样式表排序：行级 > 内嵌 > 外部（就近原则）
|
- 1、对于相同的选择器，其样式表排序：行级 > 内嵌 > 外部（就近原则）
|
||||||
@ -21,7 +21,11 @@
|
|||||||
无论多少个空格、换行、tab，都会折叠为一个空格。
|
无论多少个空格、换行、tab，都会折叠为一个空格。
|
||||||
|
|
||||||
比如，如果我们想让img标签之间没有空隙，必须紧密连接：
|
比如，如果我们想让img标签之间没有空隙，必须紧密连接：
|
||||||
|
|
||||||
|
```
|
||||||
<img src="images/0.jpg" /><img src="images/1.jpg" /><img src="images/2.jpg" />
|
<img src="images/0.jpg" /><img src="images/1.jpg" /><img src="images/2.jpg" />
|
||||||
|
```
|
||||||
|
|
||||||
|
|
||||||
**（2）高矮不齐，底边对齐：**
|
**（2）高矮不齐，底边对齐：**
|
||||||
|
|
||||||
@ -216,6 +220,7 @@ css中一共有三种手段，使一个元素脱离标准文档流：
|
|||||||
收缩：一个浮动的元素，如果没有设置width，那么将自动收缩为内容的宽度（这点非常像行内元素）。
|
收缩：一个浮动的元素，如果没有设置width，那么将自动收缩为内容的宽度（这点非常像行内元素）。
|
||||||
|
|
||||||
举例如下：
|
举例如下：
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
@ -223,10 +228,12 @@ css中一共有三种手段，使一个元素脱离标准文档流：
|
|||||||
|
|
||||||
|
|
||||||
### 浮动的补充（做网站时注意）
|
### 浮动的补充（做网站时注意）
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
上图所示，将para1和para2设置为浮动，它们是div的儿子。此时para1+para2的宽度小于div的宽度。效果如上图所示。可如果设置para1+para2的宽度大于div的宽度，我们会发现，para2掉下来了：
|
上图所示，将para1和para2设置为浮动，它们是div的儿子。此时para1+para2的宽度小于div的宽度。效果如上图所示。可如果设置para1+para2的宽度大于div的宽度，我们会发现，para2掉下来了：
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
@ -444,6 +451,7 @@ css中一共有三种手段，使一个元素脱离标准文档流：
|
|||||||
```
|
```
|
||||||
|
|
||||||
效果如下：
|
效果如下：
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
@ -513,6 +521,7 @@ margin失效的本质原因是：上图中的box1和box2，高度为零。
|
|||||||
|
|
||||||
|
|
||||||
我们看看例子效果就知道了：
|
我们看看例子效果就知道了：
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
上图这个例子就是隔墙法。
|
上图这个例子就是隔墙法。
|
||||||
@ -522,6 +531,7 @@ margin失效的本质原因是：上图中的box1和box2，高度为零。
|
|||||||
|
|
||||||
|
|
||||||
近些年，有演化出了“内墙法”：
|
近些年，有演化出了“内墙法”：
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
上面这个图非常重要，当作内墙法的公式，先记下来。
|
上面这个图非常重要，当作内墙法的公式，先记下来。
|
||||||
@ -575,7 +585,7 @@ overflow即“溢出”， hidden即“隐藏”。这个属性的意思是“
|
|||||||
|
|
||||||
那么对于前言中的例子，我们同样可以使用这一属性：
|
那么对于前言中的例子，我们同样可以使用这一属性：
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
@ -816,7 +826,7 @@ margin:0 auto;
|
|||||||
- （2）只有标准流的盒子，才能使用`margin:0 auto;`居中。也就是说，当一个盒子浮动了、绝对定位了、固定定位了，都不能使用margin:0 auto;
|
- （2）只有标准流的盒子，才能使用`margin:0 auto;`居中。也就是说，当一个盒子浮动了、绝对定位了、固定定位了，都不能使用margin:0 auto;
|
||||||
- （3）`margin:0 auto;`是让盒子居中，不是让盒子里的文本居中。文本的居中，要使用`text-align:center;`
|
- （3）`margin:0 auto;`是让盒子居中，不是让盒子里的文本居中。文本的居中，要使用`text-align:center;`
|
||||||
|
|
||||||
对上面的第三条总结一下：
|
对上面的第三条总结一下：（非常重要）
|
||||||
|
|
||||||
```
|
```
|
||||||
margin:0 auto; //让这个div自己在大容器中居中。
|
margin:0 auto; //让这个div自己在大容器中居中。
|
||||||
@ -858,10 +868,10 @@ text-align:right; //文本居右
|
|||||||
所以，如果要表达父子之间的距离，我们一定要善于使用父亲的padding，而不是儿子的margin。
|
所以，如果要表达父子之间的距离，我们一定要善于使用父亲的padding，而不是儿子的margin。
|
||||||
|
|
||||||
|
|
||||||
### 关于margin的IE6兼容问题
|
## 关于margin的IE6兼容问题
|
||||||
|
|
||||||
|
|
||||||
#### IE6的双倍margin的bug：
|
### IE6的双倍margin的bug：
|
||||||
|
|
||||||
当出现连续浮动的元素，携带与浮动方向相同的margin时，队首的元素，会双倍marign。
|
当出现连续浮动的元素，携带与浮动方向相同的margin时，队首的元素，会双倍marign。
|
||||||
|
|
||||||
@ -908,7 +918,7 @@ PS：双倍margin的问题，面试经常问哦。
|
|||||||
|
|
||||||
|
|
||||||
|
|
||||||
#### IE6的3px bug
|
### IE6的3px bug
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
@ -919,12 +929,36 @@ IE6，千万不要跟他死坑、较劲，它不配。 格调要高，我们讲I
|
|||||||
|
|
||||||
|
|
||||||
|
|
||||||
## Fireworks和精确盒子还原
|
## Fireworks和others
|
||||||
|
|
||||||
|
### Fireworks
|
||||||
|
|
||||||
fireworks是Adobe公司的一个设计软件。功能非常多，我们以后用啥讲啥。Fireworks的默认文件格式是png。
|
fireworks是Adobe公司的一个设计软件。功能非常多，我们以后用啥讲啥。Fireworks的默认文件格式是png。
|
||||||
|
|
||||||
|
标尺的快捷键：Ctrl + Alt+ R
|
||||||
|
|
||||||
|
|
||||||
|
### others
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
首行缩进两个汉字：
|
||||||
|
|
||||||
|
```
|
||||||
|
text-indent: 2em;
|
||||||
|
```
|
||||||
|
|
||||||
|
上方属性中，单位比较奇怪，叫做em，em就是汉字的一个宽度。indent的意思是缩进。
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
第四天：定位
|
||||||
|
|
||||||
|
第五天：背景、表格
|
||||||
|
|
||||||
|
第六天：切图
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
475
02-CSS/06-CSS属性：行高&超链接&background.md
Normal file
475
02-CSS/06-CSS属性：行高&超链接&background.md
Normal file
@ -0,0 +1,475 @@
|
|||||||
|
|
||||||
|
|
||||||
|
## 行高和字号
|
||||||
|
|
||||||
|
### 行高
|
||||||
|
|
||||||
|
CSS中，所有的行，都有行高。盒模型的padding，绝对不是直接作用在文字上的，而是作用在“行”上的。
|
||||||
|
|
||||||
|
|
||||||
|
如下图所示：
|
||||||
|
|
||||||
|
20170808_2216.png
|
||||||
|
|
||||||
|
上图中，我们设置行高为30px，30px * 5 = 150px，通过查看审查元素，这个p标签的高度果然为150px。而且我们发现，我们并没有给这个p标签设置高度，显然是内容将其撑高的。
|
||||||
|
|
||||||
|
文字，是在自己的行里面居中的。比如，现在文字字号14px，行高是24px。那么：
|
||||||
|
|
||||||
|
20170808_2220.png
|
||||||
|
|
||||||
|
为了严格保证字在行里面居中，我们的工程师有一个约定： **行高、字号，一般都是偶数**。这样可以保证，它们的差一定偶数，就能够被2整除。
|
||||||
|
|
||||||
|
|
||||||
|
### 单行文本垂直居中
|
||||||
|
|
||||||
|
小技巧：如果一段文本只有一行，如果此时设置**行高 = 盒子高**，就可以保证单行文本垂直居中。这个很好理解。
|
||||||
|
|
||||||
|
上面这个小技巧，只适用于单行文本垂直居中，不适用于多行。如果想让多行文本垂直居中，还需要设置盒子的padding。如下：
|
||||||
|
|
||||||
|
20170808_2240.png
|
||||||
|
|
||||||
|
|
||||||
|
### font字体属性
|
||||||
|
|
||||||
|
**1、字号、行高、字体三大属性：**
|
||||||
|
|
||||||
|
（1）字号：
|
||||||
|
|
||||||
|
```
|
||||||
|
font-size:14px;
|
||||||
|
```
|
||||||
|
|
||||||
|
（2）行高：
|
||||||
|
|
||||||
|
```
|
||||||
|
line-height:24px;
|
||||||
|
```
|
||||||
|
|
||||||
|
（3）字体：（font-family就是“字体”，family是“家庭”的意思）
|
||||||
|
|
||||||
|
```
|
||||||
|
font-family:"宋体";
|
||||||
|
```
|
||||||
|
|
||||||
|
上面这三个属性，我们可以使用一行代码来实现：（字号 font-size、行高 line-height、字体 font-family）
|
||||||
|
|
||||||
|
```
|
||||||
|
font: 14px/24px “宋体”;
|
||||||
|
```
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
**2、字体属性的说明：**
|
||||||
|
|
||||||
|
（1）网页中不是所有字体都能用，因为这个字体要看用户的电脑里面装没装，比如你设置：
|
||||||
|
|
||||||
|
```
|
||||||
|
font-family: "华文彩云";
|
||||||
|
```
|
||||||
|
|
||||||
|
上方代码中，如果用户电脑里面没有这个字体，那么就会变成宋体。
|
||||||
|
|
||||||
|
页面中，中文我们只使用： 微软雅黑、宋体、黑体。 如果页面中，需要其他的字体，那么需要切图。
|
||||||
|
英语：Arial 、 Times New Roman
|
||||||
|
|
||||||
|
|
||||||
|
（2）为了防止用户电脑里，没有微软雅黑这个字体。就要用英语的逗号，隔开备选字体。如下：
|
||||||
|
|
||||||
|
```
|
||||||
|
font-family: "微软雅黑","宋体";
|
||||||
|
```
|
||||||
|
|
||||||
|
上方代码表示：如果用户电脑里没有安装微软雅黑字体，那么就是宋体。
|
||||||
|
|
||||||
|
备选字体可以有无数个，用逗号隔开。
|
||||||
|
|
||||||
|
|
||||||
|
（3）我们要将英语字体放在最前面，这样所有的中文，就不能匹配英语字体，就自动的变为后面的中文字体：
|
||||||
|
|
||||||
|
```
|
||||||
|
font-family: "Times New Roman","微软雅黑","宋体";
|
||||||
|
```
|
||||||
|
|
||||||
|
上方代码的意思是，英文会采用Times New Roman字体，而中文会采用微软雅黑字体（因为美国人设计的Times New Roman字体并不针对中文，所以中文会采用后面的微软雅黑）。比如说，对于`smyhvae哈哈哈`这段文字，`smyhvae`会采用Times New Roman字体，而`哈哈哈`会采用微软雅黑字体。
|
||||||
|
|
||||||
|
可是，如果我们把中文字体写在前面：(错误写法)
|
||||||
|
|
||||||
|
```
|
||||||
|
font-family: "微软雅黑","Times New Roman","宋体";
|
||||||
|
```
|
||||||
|
|
||||||
|
上方代码会导致，中文和英文都会采用微软雅黑字体。
|
||||||
|
|
||||||
|
|
||||||
|
（4）所有的中文字体，都有英语别名。
|
||||||
|
|
||||||
|
微软雅黑的英语别名：
|
||||||
|
|
||||||
|
```
|
||||||
|
font-family: "Microsoft YaHei";
|
||||||
|
```
|
||||||
|
|
||||||
|
宋体的英语别名：
|
||||||
|
|
||||||
|
```
|
||||||
|
font-family: "SimSun";
|
||||||
|
```
|
||||||
|
|
||||||
|
于是，当我们把字号、行高、字体这三个属性合二为一时，也可以写成：
|
||||||
|
|
||||||
|
```
|
||||||
|
font:12px/30px "Times New Roman","Microsoft YaHei","SimSun";
|
||||||
|
```
|
||||||
|
|
||||||
|
|
||||||
|
（5）行高可以用百分比，表示字号的百分之多少。
|
||||||
|
|
||||||
|
一般来说，百分比都是大于100%的，因为行高一定要大于字号。
|
||||||
|
|
||||||
|
比如说， `font:12px/200% “宋体”`等价于`font:12px/24px “宋体”;`。`200%`可以理解成word里面的2倍行高。
|
||||||
|
|
||||||
|
反过来， `font:16px/48px “宋体”;`等价于`font:16px/300% “宋体”`。
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
## 超级链接的美化
|
||||||
|
|
||||||
|
|
||||||
|
> 超级链接就是a标签。
|
||||||
|
|
||||||
|
### 伪类
|
||||||
|
|
||||||
|
**伪类**：同一个标签，根据用户的某种状态不同，有不同的样式。这就叫做“伪类”。
|
||||||
|
|
||||||
|
类是工程师加的，比如div属于box类，很明确，就是属于box类。但是a属于什么类？不明确。因为需要看用户有没有点击、有没有触碰。所以，就叫做“伪类”。
|
||||||
|
伪类用冒号来表示。
|
||||||
|
|
||||||
|
a标签有4种伪类，要求背诵。如下：
|
||||||
|
|
||||||
|
```
|
||||||
|
a:link{
|
||||||
|
color:red;
|
||||||
|
}
|
||||||
|
a:visited{
|
||||||
|
color:orange;
|
||||||
|
}
|
||||||
|
a:hover{
|
||||||
|
color:green;
|
||||||
|
}
|
||||||
|
a:active{
|
||||||
|
color:black;
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
上方代码解释如下：
|
||||||
|
|
||||||
|
- `:link` 表示“链接”，用户没有点击过这个链接的样式。
|
||||||
|
- `:visited` 表示“访问过的”， 用户访问过了这个链接之后的样式。
|
||||||
|
- `:hover` 表示“悬停”，用户鼠标悬停的时候链接的样式。
|
||||||
|
- `:active` 表示“激活”， 用户用鼠标点击这个链接，但是不松手，此刻的样式。
|
||||||
|
|
||||||
|
上面的代码，看一下动图的效果：
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
记住，这四种状态，在css中，必须按照固定的顺序写：
|
||||||
|
|
||||||
|
> a:**l**ink 、a:visited 、a:hover 、a:active
|
||||||
|
|
||||||
|
如果不按照顺序，那么将失效。“爱恨准则”：love hate。必须先爱，后恨。
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
### 超链接的美化
|
||||||
|
|
||||||
|
超链接a标签在使用的时候，比较难。因为不仅仅要控制a这个盒子，也要控制它的伪类。
|
||||||
|
|
||||||
|
我们一定要将a标签写在前面，将`:link、:visited、:hover、:active`这些伪类写在后面。
|
||||||
|
|
||||||
|
举个例子。如果效果：
|
||||||
|
|
||||||
|
20170810_2235.gif
|
||||||
|
|
||||||
|
为了实现上面这个效果，完整版代码如下：
|
||||||
|
|
||||||
|
```html
|
||||||
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
||||||
|
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
|
||||||
|
<head>
|
||||||
|
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
|
||||||
|
<title>Document</title>
|
||||||
|
<style type="text/css">
|
||||||
|
*{
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
.nav{
|
||||||
|
width: 960px;
|
||||||
|
height: 50px;
|
||||||
|
border: 1px solid red;
|
||||||
|
margin: 100px auto;
|
||||||
|
}
|
||||||
|
.nav ul{
|
||||||
|
/*去掉小圆点*/
|
||||||
|
list-style: none;
|
||||||
|
}
|
||||||
|
.nav ul li{
|
||||||
|
float: left;
|
||||||
|
width: 120px;
|
||||||
|
height: 50px;
|
||||||
|
/*让内容水平居中*/
|
||||||
|
text-align: center;
|
||||||
|
/*让行高等于nav的高度，就可以保证内容垂直居中*/
|
||||||
|
line-height: 50px;
|
||||||
|
}
|
||||||
|
.nav ul li a{
|
||||||
|
display: block;
|
||||||
|
width: 120px;
|
||||||
|
height: 50px;
|
||||||
|
}
|
||||||
|
/*两个伪类的属性，可以用逗号隔开*/
|
||||||
|
.nav ul li a:link , .nav ul li a:visited{
|
||||||
|
text-decoration: none;
|
||||||
|
background-color: purple;
|
||||||
|
color:white;
|
||||||
|
}
|
||||||
|
.nav ul li a:hover{
|
||||||
|
background-color: orange;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="nav">
|
||||||
|
<ul>
|
||||||
|
<li><a href="#">网站栏目</a></li>
|
||||||
|
<li><a href="#">网站栏目</a></li>
|
||||||
|
<li><a href="#">网站栏目</a></li>
|
||||||
|
<li><a href="#">网站栏目</a></li>
|
||||||
|
<li><a href="#">网站栏目</a></li>
|
||||||
|
<li><a href="#">网站栏目</a></li>
|
||||||
|
<li><a href="#">网站栏目</a></li>
|
||||||
|
<li><a href="#">网站栏目</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
```
|
||||||
|
|
||||||
|
上方代码中，我们发现，当我们在定义`a:link`和 `a:visited`这两个伪类的时候，如果它们的属性相同，我们其实可以写在一起，用逗号隔开就好，摘抄如下：
|
||||||
|
|
||||||
|
```css
|
||||||
|
.nav ul li a{
|
||||||
|
display: block;
|
||||||
|
width: 120px;
|
||||||
|
height: 50px;
|
||||||
|
}
|
||||||
|
/*两个伪类的属性，可以用逗号隔开*/
|
||||||
|
.nav ul li a:link , .nav ul li a:visited{
|
||||||
|
text-decoration: none;
|
||||||
|
background-color: purple;
|
||||||
|
color:white;
|
||||||
|
}
|
||||||
|
.nav ul li a:hover{
|
||||||
|
background-color: orange;
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
如上方代码所示，最标准的写法，就是把link、visited、hover这三个伪类都要写。但是前端开发工程师在大量的实践中，发现不写link、visited也挺兼容。写法是：
|
||||||
|
|
||||||
|
> a:link、a:visited都是可以省略的，简写在a标签里面。也就是说，a标签涵盖了link、visited的状态（前提是都具有了相同的属性）。写法如下：
|
||||||
|
|
||||||
|
|
||||||
|
```css
|
||||||
|
.nav ul li a{
|
||||||
|
display: block;
|
||||||
|
width: 120px;
|
||||||
|
height: 50px;
|
||||||
|
text-decoration: none;
|
||||||
|
background-color: purple;
|
||||||
|
color:white;
|
||||||
|
}
|
||||||
|
.nav ul li a:hover{
|
||||||
|
background-color: orange;
|
||||||
|
}
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
当然了，在写`a:link`、`a:visited`这两个伪类的时候，要么同时写，要么同时不写。如果只写`a`属性和`a:link`属性，不规范。
|
||||||
|
|
||||||
|
|
||||||
|
## background系列属性
|
||||||
|
|
||||||
|
### background-color背景颜色属性
|
||||||
|
|
||||||
|
css2.1中，背景颜色的表示方法有三种：单词、rgb表示法、十六进制表示法。
|
||||||
|
|
||||||
|
比如红色可以有下面的三种表示方法：
|
||||||
|
|
||||||
|
```
|
||||||
|
background-color: red;
|
||||||
|
background-color: rgb(255,0,0);
|
||||||
|
background-color: #ff0000;
|
||||||
|
```
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
下面分别介绍。
|
||||||
|
|
||||||
|
**1、用英语单词来表示：**
|
||||||
|
|
||||||
|
能够用英语单词来表述的颜色，都是简单颜色。比如红色：
|
||||||
|
|
||||||
|
```
|
||||||
|
background-color: red;
|
||||||
|
```
|
||||||
|
|
||||||
|
|
||||||
|
**2、rgb表示法：**
|
||||||
|
|
||||||
|
rgb表示三原色“红”red、“绿”green、“蓝”blue。
|
||||||
|
|
||||||
|
光学显示器中，每个像素都是由三原色的发光原件组成的，靠明亮度不同调成不同的颜色的。r、g、b的值，每个值的取值范围0~255，一共256个值。
|
||||||
|
|
||||||
|
比如红色：
|
||||||
|
|
||||||
|
```
|
||||||
|
background-color: rgb(255,0,0);
|
||||||
|
```
|
||||||
|
|
||||||
|
黑色：
|
||||||
|
|
||||||
|
```
|
||||||
|
background-color: rgb(0,0,0);
|
||||||
|
```
|
||||||
|
|
||||||
|
颜色可以叠加，比如黄色就是红色和绿色的叠加：
|
||||||
|
|
||||||
|
```
|
||||||
|
background-color: rgb(255,255,0);
|
||||||
|
```
|
||||||
|
|
||||||
|
|
||||||
|
**3、十六进制表示法：**
|
||||||
|
|
||||||
|
比如红色：
|
||||||
|
|
||||||
|
```
|
||||||
|
background-color: #ff0000;
|
||||||
|
```
|
||||||
|
|
||||||
|
|
||||||
|
PS:所有用#开头的值，都是16进制的。
|
||||||
|
|
||||||
|
这里，我们就要学会16进制与10进制之间的转换。下面举几个例子。
|
||||||
|
|
||||||
|
问：16进制中28等于10进制多少？
|
||||||
|
答：2*16+8 = 40。
|
||||||
|
|
||||||
|
|
||||||
|
16进制中的af等于10进制多少？
|
||||||
|
答：10 * 16 + 15 = 175
|
||||||
|
|
||||||
|
|
||||||
|
所以，#ff0000就等于rgb(255,0,0)。
|
||||||
|
|
||||||
|
`background-color: #123456;`等价于`background-color: rgb(18,52,86);`
|
||||||
|
|
||||||
|
|
||||||
|
**十六进制可以简化为3位，所有#aabbcc的形式，能够简化为#abc**。举例如下：
|
||||||
|
|
||||||
|
比如：
|
||||||
|
|
||||||
|
```
|
||||||
|
background-color:#ff0000;
|
||||||
|
```
|
||||||
|
|
||||||
|
等价于：
|
||||||
|
|
||||||
|
```
|
||||||
|
background-color:#f00;
|
||||||
|
```
|
||||||
|
|
||||||
|
比如：
|
||||||
|
|
||||||
|
```
|
||||||
|
background-color:#112233;
|
||||||
|
```
|
||||||
|
|
||||||
|
等价于：
|
||||||
|
|
||||||
|
```
|
||||||
|
background-color:#123;
|
||||||
|
```
|
||||||
|
|
||||||
|
但是，比如下面这个是无法简化的：
|
||||||
|
|
||||||
|
```
|
||||||
|
background-color:#222333;
|
||||||
|
```
|
||||||
|
|
||||||
|
再比如，下面这个也是无法简化的：
|
||||||
|
|
||||||
|
```
|
||||||
|
background-color:#123123;
|
||||||
|
```
|
||||||
|
|
||||||
|
几种常见的颜色简写可以记住。如下：
|
||||||
|
|
||||||
|
```
|
||||||
|
#000 黑
|
||||||
|
#fff 白
|
||||||
|
#f00 红
|
||||||
|
#222 深灰
|
||||||
|
#333 灰
|
||||||
|
#ccc 浅灰
|
||||||
|
```
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
### background-image属性
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
### background-repeat属性
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
### background-position属性
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
**CSS精灵：**
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
###
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
48
02-CSS/06-CSS案例讲解：博雅互动.md
Normal file
48
02-CSS/06-CSS案例讲解：博雅互动.md
Normal file
@ -0,0 +1,48 @@
|
|||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
## 前言
|
||||||
|
|
||||||
|
> CSS已经学了一些基础内容了，我们来讲解一个小案例吧。以[博雅互动](http://www.boyaa.com/)的官网首页举例。
|
||||||
|
|
||||||
|
### 版心
|
||||||
|
|
||||||
|
首页的**版心**如下：
|
||||||
|
|
||||||
|
20170813_1535.png
|
||||||
|
|
||||||
|
这里我们要普及一个概念，叫“[版心](https://baike.baidu.com/item/%E7%89%88%E5%BF%83)”。**版心是页面中主要内容所在的区域。**
|
||||||
|
|
||||||
|
比如说，网站左上角的logo，设计图给出的左边距是143像素，此时，我们先玩不要以为，logo的左边距真的是143像素。因为设计图只是一个版心；而整个页面是处于浏览器的中间，浏览器的宽度是可以随时调整的。
|
||||||
|
|
||||||
|
我们量一下中间四个方形图的width，是1000px，所以，网页版心的宽度是1000px。
|
||||||
|
|
||||||
|
|
||||||
|
### 网页的结构
|
||||||
|
|
||||||
|
从结构上来看，网页分为头部（导航栏）、banner区、内容区、底部。
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
## 导航栏的制作
|
||||||
|
|
||||||
|
在此我们只讲基础知识的使用，不涉及浏览器的优化。
|
||||||
|
|
||||||
|
|
||||||
|
`class==header`这个div是顶部的通栏，我们在里面放一个1000px宽的div，作为通栏的版心，我一般把这个版心称为`class=inner_c`，c指的是center。
|
||||||
|
|
||||||
|
`class=inner_c`不需要给高，因为它可以被内容撑高。
|
||||||
|
|
||||||
|
现在我们需要在`class=inner_c`里放三个东西：左侧的logo、中间的导航栏、右侧的“加入我们”。
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
接下来我们开始做右侧的「加入我们」，「加入我们」的背景是带圆角的矩形，这个圆角，实现的方式有两种：要么切图，要么用CSS3实现（IE 7、IE 8不兼容）。我们暂时使用切图来实现。
|
||||||
|
|
||||||
|
我们最好把「加入我们」这个超链接`<a>`放到`div`里，然后设置div的margin和padding，而不是直接设置`<a>`的边距。
|
||||||
|
|
||||||
|
我们起个名字叫`class=jrwm`是没有问题的，这在工作当中很常见，如果写成`class=join_us`反倒很别扭。
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
@ -1,53 +1,29 @@
|
|||||||
|
|
||||||
|
|
||||||
## 浏览器的兼容性问题
|
我们在div里放一个img，发现：
|
||||||
|
|
||||||
IE： 微软的浏览器，随着操作系统安装的。所以每个windows都有IE浏览器。各版本如下：
|
|
||||||
|
|
||||||
- windows xp 操作系统安装的IE6
|
|
||||||
- windows vista 操作系统安装的IE7
|
|
||||||
- windows 7 操作系统安装的IE8
|
|
||||||
- windows 8 操作系统安装的IE9
|
|
||||||
- windows10 操作系统安装的edge
|
|
||||||
|
|
||||||
浏览器兼容问题，要出，就基本上就是出在IE6、7身上，这两个浏览器是非常低级的浏览器。
|
|
||||||
|
|
||||||
为了测试浏览器CSS 3的兼容性，我们可以在网上搜"css3 机器猫"关键字，然后在不同的浏览器中打开如下链接：
|
|
||||||
|
|
||||||
- <http://www1.pconline.com.cn/pcedu/specialtopic/css3-doraemon/>
|
|
||||||
|
|
||||||
测试结果如下：
|
|
||||||
|
|
||||||
20170711_1939.png
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
我们可以在[百度统计](http://tongji.baidu.com/data/)里查看浏览器的市场占有率：
|
|
||||||
|
|
||||||
IE9 5.94%
|
|
||||||
IE8 21.19%
|
|
||||||
IE7 4.79%
|
|
||||||
IE6 4.11%
|
|
||||||
|
|
||||||
我们可以在<http://html5test.com/results/desktop.html>中查看
|
|
||||||
|
|
||||||
20170711_1948.png
|
|
||||||
|
|
||||||
我们要知道典型的IE6兼容问题（面试要问），但是做项目我们兼容到IE8即可。不解决IE8以下的兼容问题，目的在于：培养更高的兴趣和眼光，别天天的跟IE6较劲。
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
### IETester软件
|
|
||||||
|
|
||||||
我们可以用
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
在html和html5中，div的长宽是不同的，后者的高度要超过几个像素。
|
||||||
|
|
||||||
|
比如说，下面这个是html的。
|
||||||
|
|
||||||
|
```html
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>Document</title>
|
||||||
|
<style type="text/css">
|
||||||
|
*{
|
||||||
|
margin: 0px;
|
||||||
|
padding: 0px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div>
|
||||||
|
<img src="/Users/smyhvae/Dropbox/img/20170813_1143.jpg" alt="">
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
```
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user