HTML与CSS笔记

部分非原创,代码自己的.算是自己归纳的笔记.望温故而知新.
元旦我竟然在搞这个,淡淡的忧桑
如果也有要学的,推荐这本书:

.png

学习网站:http://www.w3cschool.cn/html/
IDE:WebStorm

---

简单提一下制作一个网页,就是要搭建一个房子,要有门,床,窗户,马桶,灯等等...
HTML的标签或者元素就是这些基本的必需品,比如

容器,< a >连接,< li >表格以及各自的属性...太多了这个我就没必要写了...
但是这些东西全都堆在门口,马桶边就是床,窗户全在一堵墙上,功能虽然有,但是用起来很难受,CSS就是把这些东西装饰好,摆放好,才能像一个家的样子.
JavaScript就是屋子里看不见的比如下水道,地热,电线,网线之类的,可以操作HTML元素,响应用户的操作,使房子的功能更加强大.
ps:一打开文件,看到一堆堆的"><",感觉HTML的代码特别的萌,我认为是最萌代码O(∩_∩)O哈哈~

---

HTML:

Snip20170115_7.png

Snip20170115_9.png

Snip20170115_10.png

CSS:

css三大特性

Snip20170116_8.png

console打印字体码

Snip20170116_9.png

最重要的浮动:

Snip20170117_1.png

Snip20170117_2.png

Snip20170116_10.png

Snip20170119_1.png

行内样式:

Snip20170101_25.png

页内样式:

Snip20170101_19.png

外部样式:

Snip20170101_7.png

Snip20170101_26.png

Snip20170106_1.png

---

CSS选择器:

Snip20170101_8.png

Snip20170101_9.png

Snip20170101_10.png

Snip20170101_11.png

Snip20170101_12.png

Snip20170101_13.png

Snip20170101_14.png

Snip20170101_15.png

Snip20170101_16.png

Snip20170101_18.png

优先级别准则:
相同类型的:就近原则 叠加原则
不同类型的:范围越小,针对性越强 优先级越高
行内样式优先级别仅次于important

---

伪类:

Snip20170101_17.png

Snip20170101_4.png

---

Snip20170101_20.png

Snip20170101_21.png

Snip20170101_22.png

Snip20170101_23.png

Snip20170101_2.png

---

还有最重要的自适应布局了,与移动端开发关系很大:

#nav ul li a{
  display: inline-block;
  width: 200px;
  height: 45px;
  /*垂直居中*/
  line-height: 50px;
  /*文字的大小*/
  font-size: 35px;
  margin: 5px;
}
/*自适应布局*/
/*监听匀速滑动时屏幕的属性*/
/*在宽度达到1069px时,id为nav的ul li 中的a宽度变化为150px*/
@media screen and (max-width:1069px) {
  #nav ul li a{
    width: 150px;
  }
}
/*在宽度达到817px时,id为nav的ul li 中的a宽度变化为150px,字体缩小为25px*/
@media screen and (max-width:817px) {
  #nav ul li a{
    width: 100px;
    font-size: 25px;
  }
}

---

2.13更新

3872F03C-C324-488F-8CF6-0A516F85390F.png

Snip20170120_2.png

Snip20170120_3.png