百度前端技术学院是一个为大学生创办的免费的前端技术实践、分享、交流平台。由百度校园招聘组、百度校园品牌部、百度前端技术部以及多个百度的前端团队联合创办。学院组织了一批百度在职工程师,精心编写了数十个实践编码任务,将技术知识点系统有机地串联在各个充满趣味与挑战的任务中,同学们通过实际地编码练习来掌握知识,再辅以互相评价、学习笔记等方式,加深对于学习内容的理解。在过去的三年中,百度前端技术学院累积吸引了上万名同学参加,并且有数十名同学在学习后,顺利加入了百度,成为了百度的前端工程师。

第四天,背景边框列表链接和更复杂的选择器

普通

人数1369人在学习该课程,有972人已经完成该课程

时间平均用时2.4

关键词css

课程概述

作业提交截止时间:09-01

第四天,背景边框列表链接和更复杂的选择器

课程目标

掌握 CSS 稍微复杂的一些选择器,还有背景,边框等一些 CSS 样式属性

课程描述

复习

昨天我们学习了CSS的基本概念,基本的选择器,以及关于字体的一些样式设置,今天我们会进一步学习CSS的其它知识,但在开始之前,推荐你把昨天的阅读材料和自己写的代码花上半小时时间,回顾一下。

阅读

在学习枯燥难懂的盒模型之前,我们先学习一些简单的

编码

打开你的简历代码,练习背景样式设置,比如把“简历”这两个大字标题加上一个背景色吧。多多实践,尽量把以下样式都实践一遍:

  • background
  • background-color
  • background-image
  • background-repeat
  • background-position

阅读

编码

在你的简历代码中,尝试实践以下边框相关属性的CSS代码编写

  • border
  • border-color
  • border-style
  • border-width
  • border的上下左右

阅读

接下来我们看看列表相关的样式设计

编码

不知道你在你的简历里是否使用了列表元素,如果没有的话,不妨看看哪里适合改造为列表,或者增加一些列表。然后在这些列表上尝试使用各种列表相关的样式:

  • list-style
  • list-style-type
  • list-style-image

阅读

最后一个简单的内容是链接的样式设置

编码

我估计你的简历里暂时没有用到链接元素,但你肯定留下了一个电子邮箱或者是个人主页之类的内容,没有的话,不妨加上这两个内容。然后给这两个链接设置样式,来练习链接四种状态的样式设置方法:

  • a:link
  • a:visited
  • a:hover
  • a:active

阅读

接下来,我们暂时不学习新的属性设置,我们回头来看看选择器的问题,昨天我们学习了简单选择器和属性选择器,我们今天学习剩余的其他选择器及相关语法

编码

对目前简历的 CSS 代码进行审视,优化选择器的应用

提交

把你的 codepen 地址提交到作业里,因为是codepen,所以代码地址和预览地址一样即可。

验证

今天代码部分其实比较简单,主要是多尝试,学习之后,回顾以下自己是否已经掌握以下概念:

  • 背景,边框,列表,链接相关属性
  • CSS 各种选择器的概念,使用方法及使用场景
  • CSS 选择器的优先级

总结

依然把今天的学习用时,收获,问题进行记录

明天预告

明天的任务是一个跨天的任务,我们将开始学习非常重要的内容:CSS的盒模型及定位,并且要开始做第一个复杂的练习作业。

学员提交的作业 (-)
学员名称提交时间提交的代码预览效果评价数平均得分操作
课程优秀学习笔记
标题发布时间浏览量点赞量
第四天的笔记2018-04-27 20:42145955
ife-032018-04-27 15:035326
第四天2018-04-27 15:274373
点击查看更多课程优秀笔记