发表于: 2017-04-14 23:51:09

1 557


一、今天完成的事情

1、完成任务13,第二个页面和第三个页面的重构: module.cssheaderfooter)还是很好用的。

2、完成任务14 module.cssheaderfooter)的拆分。

二、明天计划的事情

1、看了任务1415,打算把两个任务一起做了:拆分样式,用less重写任务9

2、学习js语法。

三、遇到的问题

1、对于不用bootstrap重写响应式导航栏,看了bootstrap源码也没看出所以然来,明天继续研究。

2、任务13的深度思考:

1)    如何做默认样式重置?resetting normalizing 之间有什么区别?

   因为各大浏览器存在兼容性问题,同一个CSS属性在不同浏览器下的表现不一定相同,大家最为熟悉的也许就是*{margin:0 0}了,其实这是最简单照顾兼容性的代码,一般情况下,仅有这个是不够的,我建议大家自己写一个reset.css代码,在每个页面中引入即可。

/* 重置样式 start */

/* 清除内外边距 */

body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, /* structural

elements 结构元素 */

dl, dt, dd, ul, ol, li, /* list elements 列表元素 */

pre, /* text formatting elements 文本格式元素 */

fieldset, lengend, button, input, textarea, /* form elements 表单元素

*/

th, td { /* table elements 表格元素 */

margin: 0;

padding: 0;

}

ol, ul {

margin: 0;

padding: 0;

list-style: none;

}

body, button, input, select, textarea {

font: 12px/1.5 "Microsoft Yahei", Helvetica Neue, Helvetica,

STHeiTi, sans-serif;

}

a {

text-decoration: none;

}

h1, h2, h3, h4, h5, h6{ font-weight: normal;}

address, cite, dfn, em, var { font-style: normal; } /* 将斜体扶正 */

 

img,input{border:0 none;}

div,a{outline:none}

a{text-decoration:none;}

.clear{ clear:both}

.hide{ display:none}

/* 重置样式 end */


resetting:直接重置所有格式,没有任何前提性质的。

normalizing:重置部分格式的。

所以建议在设置的时候使用 normalizing进行重置,避免造成所有数据丢失。resetting 这个需要谨慎使用

2)    移动端有哪些常见布局方式?

固定布局、流动布局、浮动布局、Flexbox布局、混合布局、定位布局。


四、收获

    1、更好的运用拆分css样式。

2、学习了js的语法。

3、规范自己css的样式。



返回列表 返回列表
评论

    分享到