今天想拿百度前端学院的任务题来进行练习。正在进行阶段一,顺便将以前学习的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的表格将有这样的样式。
第六个是属性选择器:
具体参考查看属性选择器
今天就先到这里啦。