diff --git a/00-前端工具/02-推荐链接.md b/00-前端工具/02-推荐链接.md new file mode 100644 index 0000000..3dce331 --- /dev/null +++ b/00-前端工具/02-推荐链接.md @@ -0,0 +1,10 @@ + + + +积累平时看到的一些好的前端文章。 + +## 2017-07-13 + +- [前端开发面试题](https://github.com/markyun/My-blog/tree/master/Front-end-Developer-Questions) + +在逛公众号「前端大全」的时候发现的,然后顺着找到了对应的GitHub链接。面试题有答案哦。 \ No newline at end of file diff --git a/01-html/01-html标签图文详解(一).md b/01-html/01-html标签图文详解(一).md index d6577a9..408c8e8 100644 --- a/01-html/01-html标签图文详解(一).md +++ b/01-html/01-html标签图文详解(一).md @@ -969,6 +969,7 @@ img: 代表的就是一张图片。是单边标记。 - `src`属性:指图片的路径。 在写**图片的路径**时,有两种写法: + 写法一:**相对路径**。相对当前页面所在的路径。两个标记.和.. ,分表代表当前目录和父路径。 举例1: @@ -1035,6 +1036,37 @@ aaa/../bbb/1.jpg ``` 各位自己打开上面的网络连接看看是啥。 + + +**相对路径和绝对路径的总结:** + +相对路径的好处:站点不管拷贝到哪里,文件和图片的相对路径关系都是不变的。 +相对路径使用有一个前提,就是网页文件和你的图片,必须在一个服务器上。 + +问题:我的网页在C盘,图片却在D盘,能不能插入呢? + +答案: 用相对路径不能,用绝对路径也不能。 + +注意:可以使用file://来插入,但是这种方法,没有任何意义!因为服务器上没有所谓c盘、d盘。 + +下面的方法是行的,但是没有任何工程上的意义,这是因为服务器没有盘符,linux系统没有盘符: + +```html + +``` + +总结一下: + +- 我们现在无论是在a标签、img标签,如果要用路径。只有两种路径能用,就是相对路径和绝对路径。 + +- 相对路径,就是../ image/ 这种路径。从自己出发,找到别人; + +- 绝对路径,就是http://开头的路径。 + +- 绝对不允许使用file://开头的东西,这个是完全错误的! + + + 再来看看img标签的其他属性: diff --git a/02-CSS/01-CSS图文详解(一)----CSS选择器介绍.md b/02-CSS/01-CSS图文详解(一)----CSS选择器介绍.md new file mode 100644 index 0000000..b57c01e --- /dev/null +++ b/02-CSS/01-CSS图文详解(一)----CSS选择器介绍.md @@ -0,0 +1,1038 @@ + + +文件名:01-CSS图文详解(一):css样式表和选择器 + + + + + +## 主要内容 + + - CSS概述 + - CSS和HTML结合的三种方式:`行内样式表`、`内嵌样式表`、`外部样式表` + - CSS四种基本选择器:`标签选择器`、`类选择器`、`ID选择器`、`通用选择器` + - CSS三种扩展选择器:`组合选择器`、`后代选择器`、`伪类选择器` + - CSS样式优先级 + + + + +## 前言 + +现在的互联网前端分三层: + +- HTML:超文本标记语言。从**语义**的角度描述页面**结构**。 +- CSS:层叠样式表。从**审美**的角度负责页面**样式**。 +- JS:JavaScript 。从**交互**的角度描述页面**行为**。 + + + + +## CSS 概述 + +CSS:Cascading Style Sheet,层叠样式表。CSS的作用就是给HTML页面标签添加各种样式,**定义网页的显示效果**。简单一句话:CSS将网页**内容和显示样式进行分离**,提高了显示功能。 + +css的最新版本是css3,我们学习的是css2.1。 因为css3和css2.1不矛盾,必须先学2.1然后学3。 + + +接下来我们要讲一下为什么要使用CSS。 + +**HTML的缺陷:** + +1. 不能够适应多种设备 +2. 要求浏览器必须智能化足够庞大 +3. 数据和显示没有分开 +4. 功能不够强大 + +**CSS 优点:** + +1. 使数据和显示分开 +2. 降低网络流量 +3. 使整个网站视觉效果一致 +4. 使开发效率提高了(耦合性降低,一个人负责写html,一个人负责写css) + +比如说,有一个样式需要在一百个页面上显示,如果是html来实现,那要写一百遍,现在有了css,只要写一遍。现在,html只提供数据和一些控件,完全交给css提供各种各样的样式。 + + + +### CSS 整体感知 + + +我们先来看一段简单的css代码: + +```html + + +
+ ++ 我是内容 +
+ + + +``` + +解释如下: + +20170710_1604.png + + +我们写css的地方是style标签,就是“样式”的意思,写在head里面。后面的课程中我们将知道,css也可以写在单独的文件里面,现在我们先写在style标签里面。 + +如果在sublime中输入`洗白白
+你懂得
+我不会就这样轻易的狗带
+ +``` +效果: + +![](http://7sby7r.com1.z0.glb.clouddn.com/2015-10-03-css-01.png) + +### css代码的注释 + +**格式:** + +```html + +``` + +注意:只有`/* */`这种注释,没有`//`这种注释。而且注释要写在` + + + + +洗白白
+你懂得
+ +``` + +![](http://7sby7r.com1.z0.glb.clouddn.com/2015-10-03-css-03.png) + +### 3、CSS和HTML结合方式三:引入外部样式表css文件 + +**引入样式表文件**的方式又分为两种: + - (1)**采用``标签**。例如:`` + + - (2)**采用import**,必须写在` + + +生命壹号学完了安卓,继续学前端哟
+ +