发表于: 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


返回列表 返回列表
评论

    分享到