udate img
This commit is contained in:
qianguyihao
@@ -36,8 +36,7 @@ html中的单位只有一种，那就是像素px，所以单位是可以省略
|
||||
|
||||
百分比`%`这个相对单位要怎么用呢？这里也举个例子：
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## 字体属性
|
||||
|
||||
@@ -205,7 +204,7 @@ CSS样式中，常见的文本属性有以下几种：
|
||||
|
||||
这里来一张表格的图片吧，一览无遗：
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## 列表属性
|
||||
@@ -221,15 +220,15 @@ ul li{
|
||||
|
||||
我们来看一下`list-style-image`属性的效果：
|
||||
|
||||
|
||||
|
||||
|
||||
给列表前面的图片加个边距吧，不然显示不完整：
|
||||
|
||||
|
||||
|
||||
|
||||
这里来一张表格的图片吧，一览无遗：
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@@ -294,7 +293,7 @@ ul li{
|
||||
|
||||
效果：
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@@ -364,12 +363,12 @@ p:hover{
|
||||
|
||||
效果如下：（IE有效果，google浏览器无效果）
|
||||
|
||||
|
||||
|
||||
|
||||
**延伸：**
|
||||
滤镜本身是平面设计中的知识。如果你懂一点PS的话···打开PS看看吧：
|
||||
|
||||
|
||||
|
||||
|
||||
爆料一下，表示博主有两年多的平面设计经验，我做设计的时间其实比写代码的时间要长，嘿嘿···
|
||||
|
||||
@@ -378,7 +377,7 @@ p:hover{
|
||||
|
||||
现在，我们利用float浮动属性来把无序列表做成一个简单的导航栏吧，效果如下：
|
||||
|
||||
|
||||
|
||||
|
||||
代码：
|
||||
|
||||
@@ -432,7 +431,7 @@ p:hover{
|
||||
|
||||
实现效果如下：
|
||||
|
||||
|
||||
|
||||
|
||||
国庆这四天，连续写了四天的博客，白天和黑夜，从未停歇，只交替没交换，为的就是这每日一发。以后会不断更新的。
|
||||
|
||||
@@ -442,4 +441,4 @@ p:hover{
|
||||
|
||||
扫一扫，你将发现另一个全新的世界，而这将是一场美丽的意外：
|
||||
|
||||
|
||||
|
||||
@@ -161,17 +161,17 @@ PS:所有用#开头的值，都是16进制的。
|
||||
|
||||
（1）不加这个属性时：（即默认时）（背景图片会被平铺满）
|
||||
|
||||
|
||||
|
||||
|
||||
PS：padding的区域也是有背景图的。
|
||||
|
||||
（2）属性值为`no-repeat`（不要平铺）时：
|
||||
|
||||
|
||||
|
||||
|
||||
（3）属性值为`repeat-x`（横向平铺）时：
|
||||
|
||||
|
||||
|
||||
|
||||
其实这种属性的作用还是很广的。举个例子，设计师设计一张宽度只有1px、颜色纵向渐变的图片，然后我们通过这个属性将其进行水平方向的平铺，就可以看到整个页面都是渐变的了。
|
||||
|
||||
@@ -179,7 +179,7 @@ PS：padding的区域也是有背景图的。
|
||||
|
||||
（4）属性值为`repeat-y`（纵向平铺）时：
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
### `background-position`属性
|
||||
|
||||
@@ -186,7 +186,7 @@ p{color: red;}
|
||||
```
|
||||
效果：
|
||||
|
||||
|
||||
|
||||
|
||||
### css代码的注释
|
||||
|
||||
@@ -329,7 +329,7 @@ CSS和HTML的结合方式有3种：
|
||||
```
|
||||
效果：
|
||||
|
||||
|
||||
|
||||
|
||||
### 2、CSS和HTML结合方式二：内嵌样式表
|
||||
|
||||
@@ -357,7 +357,7 @@ CSS和HTML的结合方式有3种：
|
||||
</body>
|
||||
```
|
||||
|
||||
|
||||
|
||||
|
||||
### 3、CSS和HTML结合方式三：引入外部样式表css文件
|
||||
|
||||
@@ -380,7 +380,7 @@ p{
|
||||
上方的css代码中，注意像素要带上px这个单位，不然不生效。
|
||||
然后我们在html文件中通过`<link>`标签引入这个css文件就行了。效果如下：
|
||||
|
||||
|
||||
|
||||
|
||||
这里再讲一个补充的知识：link标签的rel属性
|
||||
**`<link>`标签的rel属性：**
|
||||
@@ -431,7 +431,7 @@ div{
|
||||
```
|
||||
上面引入的三个样式表中，后面两个样式表作为备选。注意备选的样式表中，title属性不要忘记写，不然显示不出来效果的。现在来看一下效果：（在IE中打开网页）
|
||||
|
||||
|
||||
|
||||
|
||||
## CSS的四种基本选择器
|
||||
|
||||
@@ -466,7 +466,7 @@ p{
|
||||
|
||||
效果：
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
再比如说，我想让“生命壹号学完了安卓，继续学前端哟”这句话中的“前端”两个变为红色字体，那么我可以用`<span>`标签把“前端”这两个字围起来，然后给`<span>`标签加一个标签选择器。
|
||||
@@ -514,7 +514,7 @@ p{
|
||||
```
|
||||
效果：
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
id选择器的选择符是“#”。
|
||||
@@ -560,7 +560,7 @@ css中用`.`来表示类。举例如下：
|
||||
|
||||
效果：
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
和id非常相似，任何的标签都可以携带id属性和class属性。class属性的特点：
|
||||
@@ -660,7 +660,7 @@ css中用`.`来表示类。举例如下：
|
||||
|
||||
效果：
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@@ -719,17 +719,17 @@ css中用`.`来表示类。举例如下：
|
||||
|
||||
效果：
|
||||
|
||||
|
||||
|
||||
|
||||
或者还有下面这种写法：
|
||||
|
||||
|
||||
|
||||
|
||||
上面的这种写法，`<h3>`标签和`<i>`标签并不是紧挨着的，但他们保持着一种后代关系。
|
||||
|
||||
还有下面这种写法：（含类选择器、id选择器都是可以的）
|
||||
|
||||
|
||||
|
||||
|
||||
我们在开头说了：**后代选择器，描述的是一种祖先结构**。我们举个例子来说明这句话：
|
||||
|
||||
@@ -847,7 +847,7 @@ p,h1,#mytitle,.one{
|
||||
|
||||
效果：
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@@ -1035,5 +1035,5 @@ div的儿子p。和div的后代p的截然不同。
|
||||
|
||||
扫一扫，你将发现另一个全新的世界，而这将是一场美丽的意外：
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@@ -276,7 +276,7 @@ a标签有4种伪类（即对应四种状态），要求背诵。如下：
|
||||
|
||||
效果：
|
||||
|
||||
|
||||
|
||||
|
||||
利用这个`hover`属性，我们同样对表格做一个样式的设置：
|
||||
表格举例：
|
||||
@@ -343,7 +343,7 @@ a标签有4种伪类（即对应四种状态），要求背诵。如下：
|
||||
|
||||
效果：
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
##我的公众号
|
||||
|
||||
@@ -164,7 +164,7 @@ PS：不进位，实际上能进位（奇淫知识点：255个标签，等于1
|
||||
|
||||
举例：如果都是内嵌样式表，优先级的顺序如下：（ID 选择器 > 类选择器 > 标签选择器）
|
||||
|
||||
|
||||
|
||||
|
||||
另外还有两个冲突的情况：
|
||||
|
||||
@@ -173,7 +173,7 @@ PS：不进位，实际上能进位（奇淫知识点：255个标签，等于1
|
||||
|
||||
例如：
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@@ -44,11 +44,11 @@
|
||||
|
||||
标准盒子模型：
|
||||
|
||||
|
||||
|
||||
|
||||
IE盒子模型：
|
||||
|
||||
|
||||
|
||||
|
||||
上图显示：
|
||||
|
||||
@@ -114,7 +114,7 @@ CSS盒模型和IE盒模型的区别：
|
||||
|
||||
上面的代码中，我们对div标签设置了边距等信息。打开google浏览器，按住F12，显示效果如下：
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@@ -498,11 +498,11 @@ body{
|
||||
|
||||
这是默认情况下的例子：（div2在上层，div1在下层）
|
||||
|
||||
|
||||
|
||||
|
||||
现在加一个`z-index`属性，要求效果如下：
|
||||
|
||||
|
||||
|
||||
|
||||
第五条分析：
|
||||
|
||||
|
||||
Reference in New Issue
Block a user