zoukankan      html  css  js  c++  java
  • 怎么着手写DIV+CSS

    拿到页面后,先进行分析。

    1、必须了解页面的布局结构,所谓的布局模块(如大的版块,如头部、导航、搜索模块、主内容区、页脚等)。
    2、对布局模块进行化分命名:参考CSS命名规范;
    3、观察模块共同点,分析CSS是否可以模块化;先搭大致结构;
    4、初始化CSS:不要抄大公司网站的,自己量身定制;自己用到的标签,就去除标签本身的样式,没有用到的标签就可以不设置。
      常见的重置标签有:
        用到的标签 {margin:0; padding:0; }
        em {font-style:nomal;}         //默认是斜的,需要先扶正。
        li { list-style:none; }    //默认会出现小点或数字,去掉。
        a { text-decoration:none; }    //默认会出现下划线,去掉。
        img { border:none;}    //图片在a链接里时,会出现边框,去掉。
        input,textarea { outline:none; }    //默认会出现外虚线,去掉。
        table { border-collapse:collapse; }    //表格单元格间的间距去掉。
        body {font-size:XXpx; font-family:XXXX; }    //根据实际情况设置默认字体、大小。
    5、共公样式的准备:
      常见公共样式:
        wrap:包裹层,常用来包裹模块,设置居中;
        fl:左浮动;
        fr:右浮动;
        clear:清除浮动;
        ……   写代码过程中,遇到随时添加到公共样式表;
    6、按照css分析 开始div布局,大块布局、独立模块推荐用id,重用的样式推荐用class。
      先大块,再慢慢填充小细节;
      先横排,后竖排;
    7、将大块布局的id和class名,挨个复制到编辑器,开始看着效果图来一点一点写样式。

    模块化布局的思路:
    找出公共的部份,按照大的类,先提练出来,再写私有的。
      

    更多思考:
    CSS样式表规划与管理

  • 相关阅读:
    软件工程(2019)第二次作业
    软件工程(2019)第一次作业
    Java基础篇之Java特性
    软件工程(2019)结对编程第二次作业
    软件工程(2019)结对编程第一次作业
    软件工程(2019)第三次作业
    软件工程(2019)第二次作业
    软件工程(2019)第一次作业
    结对编程作业 2
    结对编程作业 1
  • 原文地址:https://www.cnblogs.com/newh5/p/4503047.html
Copyright © 2011-2022 走看看