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

基石不积何以大厦起

作者秦小亮课程任务二:零基础HTML及CSS编码(一)2922次浏览172017-03-06 00:32

一定要重视基础,一定要重视基础,一定要重视基础!

一、关于常用知识点的总结!

例子不多借以抛砖引玉,后面就不加等等了

  1. 对于常用以及不常用标签的掌握熟练度,如比较少用的:
    box-shadow:5px 5px 2px #888888渲染边角阴影
    text-indent: 32px;用来首行缩进
    border-radius: 15px;还有类似按钮的边角角度变化

2.对于便签选择器的灵活运用。
  .SideBar>h1;子选择器
  .Gallery img包含选择器
  .pic01,.pic02,.pic03分组选择器

3.命名规范与否。
    对于常见的便签我们是否命名规范还有便签匹配是否恰当。比如什么时候我该用id什么时候用class,都需要经过一定思考选择。至于命名不能根据个人喜好而是要根据习惯标准进行自我规范。

4.相对定位与绝对定位概念理解并能熟练运用有否。
其实虽然不推荐使用,但是确实能带来很多方便。

5.对于像素把握情况。
分享一个小技巧,很多人应该知道,就是利用QQ聊天的Ctrl+Alt+A组合键能够很好精确到自己想要的像素而且还能知道所在区域RGB值。

二、关于重构页面所遇问题及解决办法

1.首先是导航如何与标题对齐问题?

想了很久,提供一个思路给后来人:将ul套进一个div,另外(网站)H1标题在另一个Div中或者大的DIV中。

#navigation{
    position: absolute;
    top: 0;
    right: 0;
    background: #2B2B2B;
}
#navigation li{
    margin: 10px;
    float: left;
}

2.如何将图片缩小并居中对齐?

每个DIV套用一个图片,DIV宽度和图片大小可以设定为自己想要的值。

.pic01,.pic02,.pic03{
    border: 3px solid #EEEEEE;
    margin: 10px 20px;
    text-align: center;
    width: 150px;
    height: 150px;
}
.Gallery img{
    width: 100px;
    height: 80px;
}

3.input与textarea等对齐的问题?

利用vertical-align: middle;属性先将他们居中,然后利用像素多少设置每行的偏移量。
(此方法我是迫不得已才用的,应该有更好的方法,希望大家一起给点意见。)

三、自认为留有的几大缺点

1.并不能很好的在PC端缩放适配和移动端适配。

2.不能很好的兼容各大浏览器(虽然我写了两套兼容的代码在需要调试的地方),但是不尽满意。

3.CSS3和HTML5标签掌握不熟练。

以上。

本人仅提供了些许思路,还望大家踊跃交流,Everyone Coding Happy!

6条评论