课程回顾
目前上了9课程,回顾一下之前学的内容,以及核心知识点
第一课开班,主要是要记住记笔记写博客
第二课计算机基础,主要记得计算机如何存储0,1数字 汉字的就行了
第三课软件安装,其中主要的是gitbash安装
第四课命令行,记住基本的增删改查命令就行了
第五课讲得是脚本,其实就是程序中的宏命令,就像一个函数里面封装几句代码
第六课http :请求+响应 4部分怎么写 和状态码 意思就可以了
第七课nodejs server :服务器如何展示一个html页面的
第八课html 简历架构的思路过程
css的学习资源
- Google: 关键词 MDN
- CSS Tricks
- Google: 阮一峰 css
- 张鑫旭的 240 多篇 CSS 博客
- Codrops 炫酷 CSS 效果
- CSS揭秘
- CSS 2.1 中文 spec
- Magic of CSS 免费在线书
学习思路:学css就像学自行车, 你是先研究完力学原理再骑车,还是直接骑?直接上手摔几次不就会了么~~~ 最后要学组织css,然后自己写一个cssUI库,当然这些都是后话
- 写html架构的时候,记住给每个标签id 或者class //di给JavaScript用,class给css用这样代码会清晰一点
- 李爵士发明了html,他的同事在一年之后发明了css 那么在这个一年之间的空档期,页面样式是由html标签的属性,来做一些简单的展示的//其外还有一些专门来表达样式的标签,不过现在基本弃用了~~~因为后来有了css嘛
- css的引入方法:有四种,但是其中一种不常用,因此可以说是三种
//pwd命令 是查看当前位置
1.用style属性,也就是内联样式
2.用style标签
3.用link标签引入外部css文件//<link rel='stylesheet' href='./XXX'>rel是relationship 意思是当前页面和引入文档的关系,href就是引入地址
4.用@import url(./XXX.css) 这是css引入另外一个css,不常用这个 - 在git bash 里面输出 http-server -c-1 就可以在当下文件建立起一个简易server 来调试页面用
制作导航栏
- 让ul li标签内容横向,有很多种方法,这里先用浮动实践float
- 用内联style属性,用list-style:none ;margin:0;padding:0;来去掉浏览器默认样式
- 去掉之后还发现有bug就用border大法来调试
- 发现原来是因为用了浮动属性,却没有清浮动//记住一句话:用了浮动,父元素就得清浮动
.clearfix{
content:'';
display:block
clear:both; //clear属性是可以选择清除上下任一方向,也可以双向都清浮动
//这里明显是创作一个空的伪类,来clear :both;这种方法最好,也成为业界公认方式
}
- css选择器知识topbar>ul>li 大于号和空格都可以表示子类,css选择器知识除了课堂内容还有很多,要自学补缺/注意,大于号和空格 之间也是有点区别的,以后遇到再说
- 注意,开发者工具里面的styles computed两者功能是不同的,前者是展示所有样式,后者是展示计算之后的样式
- 还有字体,由不同的操作系统,渲染出来的字体颜色也是有微笑差别的,取色的时候要注意别弄到虚边上
- 用到了text-decoration:none 文字装饰属性,把下划线取消
- 遇到不知道的的css属性,要搜索MDN,或者用开发者工具不断试
- li标签之间有间隔用到了margin属性
- 用到了伪类:hover就是鼠标悬停到一个标签上时候,出现的效果
- a标签字体默认蓝色,可以用color:inherit;代码继承它的父亲的颜色
- 这里牵涉到选择器的问题,当一个元素有多个重叠样式,只会执行最具体那个
- 当遇到class同名的情况下,我们可以具体它的范围,来避免渲染了多个对象样式
// .topBar.car 这个意思是topbar里面的car染色,根据选择器具体原则,它更加具体,所以它的染色不受.car代码影响
//.car 所有car染色
遇到第一个小bug:在做导航栏的时候,给ul下的li标签都右浮动起来了,而且他们之间都有固定的marin值,现在需求是,给每个li加一个红色杠,我们想到的是用border实现,这时候就出现问题了,一点加了border,li元素就会出现抖动,因为,原来的li元素大小产生了变化,要给border腾出空间~~~~
//如何解决呢???//这里就要用到小套路了~~
我们可以在一开始的时候就给li一个border边框,但是属性显示是隐藏的!!!
当我们再hover的时候展示颜色,不就不会抖动了吗~~是不是很鸡贼啊~哈哈哈哈哈哈哈哈
遇到的第二个小bug: li包裹的a标签,它的高度比li标签还要高
//解决方法就是把a标签 display为block
第三个小bug对齐:导航栏,或者遇到哪些横向布局的界面,为了更美观需要左右中线对齐~~//
思路是这样滴:左右部分 高度一样,各自在元素上下居中,满足这两个条件 左右两个部分自然对齐~~~!! 不过因为大小文本不一样,居中对齐可能不美观,可以选着底部对齐,这样就要微调一下,用padding
具体实现:
写css的时候存在很多属性是可以继承的,继承机制可以存在父子级关系的,重复的代码省略
html会把回车/空格 都统一转化成一个空格,所以在调试css的时候注意,空格和回车
注意:会用开发者工具,或者说会用工具,是前端很重要的职业技能,不会工具,难做好前端
疑惑:
1.margin 距离是计算bfc的边框为距离标准,还是文本内容距离标准?目前的看法应该是文本内容,因为老师在操作的时候就是测量文本内容
//这个问题可能牵涉到盒模型的具体计算,margin padding border 三者之间是什么关系,他们三者和bfc又是什么关系?
