web前端学习（一）

今天想拿百度前端学院的任务题来进行练习。正在进行阶段一，顺便将以前学习的web知识捡起来，并且深入。

以下是效果图，主要实现三栏式布局。

最先开始的思路：将左、中、右三栏用div装起来，命名为left，middle，right等。对left的部分设置为float left，对right的 部分设置为float right。

结果出现了以下：

笑哭，当时查找了网上的一些三栏式布局的代码。发现实现方式和我差不多。可是也不是很适用于这次的任务题目。

本人身上有伸手党的特质，于是跑去参考了一下别人已完成的代码。

于是运用到 box-sizing这些方面的知识。

当时我的心情是瑟瑟发抖的。

想想以前在进行web课程的学习时，进行得非常快，后来又没有给自己一个比较好的回馈，现在基础知识非常不扎实。

只能恶补css布局方面的相关知识。

就继续说下去啦。

不急，就慢慢地记录我的学习过程就好了哈哈哈。

首先，需要说明的是，在学习web前端开发的时候，CSS样式表均采用外部样式表，即单独的CSS文件来连接相应的html文件。这样我们排除一些由于优先级带来的问题。

同时，学习的重点将会集中的CSS布局知识。

接着是CSS独特的选择器语法，可以这样：

h1 { color:red; }

其中h1为选择器，color为属性，red为值；花括号内为声明语句（即属性：值）。

也可以这样：

h1,h2,h3,h4,h5,h6 {
  color: green;
  }

需要注意的地方就是在CSS中，有些属性是可以继承的，而同时，后面的属性设置会覆盖前面的。

更为高级的选择器用法有：

第一个是后代选择器：

h1 em {color:red;}

他将在 所有h1中 所有em内的字体设置为红色， 不管嵌套有多深。

第二个是子元素选择器：

h1 > em{color:red;}

空格无影响。他将 所有h1中的 所有em元素内的字体设置为红色。但是假如em元素在嵌套得比较深，比如h1>strong>em，则不会受影响。

第三个是相邻兄弟选择器：

h1+p{color:red;}

空格无影响。这里的h1和p在同一个父元素下，然后是相邻的。

意味着假如h1下有三个p的声明，且属于同一个父元素的话，那么代码只会作用最后一个“+”之后的元素，比如h1+p+p则会作用于第二个p声明。（注意它不会对h1进行设置）

第四个是id选择器：（id是独一无二的）

用棋盘号或者成为井号显示

#red {color:red;}
#green {color:green;}

在这里注意一下id的命名，假如id用纯数字来命名的话，或者用数字开头，在Mozilla和Firefox中无法识别。

第五个是类选择器：

用点号来显示

.center {text-align: center}

类也可被用作派生选择器，元素亦可基于它们的类而被选择。

.fancy td {
	color: #f60;
	background: #666;
	}

指fancy这个类内部的所有表格将有这样的样式。

td.fancy {
	color: #f60;
	background: #666;
	}

类名为fancy的表格将有这样的样式。

第六个是属性选择器：

具体参考查看属性选择器

今天就先到这里啦。