发表于: 2017-04-14 21:23:38
1 587
今天完成的事情:
1. 推倒重写了任务7的投票页面,之前的样式略丑。
2.学习了什么是css的模块化:
css模块化思想,也就是在css编写环境中,用上模块化的思想,把一个大的项目,分解成独立的组件,不同 的组件负责不同的功能,最后把模块组装,就像拼图一样的感觉。
3.设置了CSS的重置样式表,明白自己的每一条reset是用来做什么的。直接拿别人现成的反而会有隐患。
/*间距*/
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, button, textarea, p, blockquote, th, td
{ margin: 0;padding: 0; }
/*边框*/
fieldset, img { border: 0; }
abbr, acronym {
border: 0;
font-variant: normal;
}
/*列表样式*/
dl, ul, ol, menu, li{ list-style: none; }
/*上下标以及baseline*/
sup, sub {
font-size: 100%;
vertical-align: baseline;
}
/* 重置嵌套引用的引号类型 */
blockquote, q { quotes: none; }
/* 重置嵌套引用*/
blockquote:before, blockquote:after, q:before, q:after {
content: '';
content: none;
}
/*下划线*/
a, :link, :visited, ins{ text-decoration: none; }
/* 重置表单控件垂直居中*/
input,select,textarea,button { vertical-align:middle }
/* 重置表单button按钮效果 */
button {
border:0 none;
background-color:transparent;
cursor:pointer;
}
/* 重置body 页面背景为白色 */
body {
background:#fff
}
/* 取消a标签点击后的虚线框 */
a {outline: none;}
a:active { star:expression(this.onFocus=this.blur()); }
/* 重置样式标签的样式 */
address, caption, cite, code, dfn, em, strong, th, var, optgroup {
font-style: normal;
font-weight: normal;
}
/*清除浮动*/
.clear { clear: both; }
明天计划的事情:
完成一个初步的CSS框架。拆出组件库。
问题:
module.css的用法话不是特别熟悉,明天好好看一下。
收获:
学会了拆分css样式,学习了html的编码规范,初步了解Js
评论