zoukankan      html  css  js  c++  java
  • DIV+CSS页面布局中注意的问题以及常用的CSS使用方法

    本文假定你了解基本的DIV+CSS知识.

    DIV布局整理:

    1、对于布局要使用DIV+CSS,使页面中的结构与表现完全分离,结构位于html文件中,表现位于css文件中

    2、对于要显示数据,特别是表格的列表形状数据的地方可以使用表格,此时用DIV可能更不好.

    3、CSS里多使用Class少使用id(对于特定元素可以使用ID)

    4.对于门户型(163.com),访问量大的地方(比如首页)CSS直接写在页面上(JS脚本也如此),而不是包含一个CSS文件。

    5.对于CSS文件的大小要控制,不能太大.可以对页面进行分类,来选择要包含的.CSS文件.

    6.DIV布局,宽度如果设置了百分比而不是绝对值,那要考虑页面被人为变小的时候,布局是否会发生混乱.

    7.DIV布局要考虑浏览器兼容的问题,要保证主流浏览器都支持,比如ie6和firefox

    CSS使用整理:

    (1).AA{}表示伪类,使用的时候使用class="AA"
    (2)Table{} 表示为表格设置默认样式
    (3)table.table1{} 表格样式使用的时候,在<table>元素里 class="table1" 在其他HTML标签里不可用.(4)div#Search 表示为ID为Search的div设置样式 使用的时候该DIV不需要设置class属性
    (5)div#HeadTop li 表示为id为HeadTop的DIV里的<li>元素设置样式,该元素无须设置class属性
    (6)div#HeadTop li.left表示为id为HeadTop的DIV里的class="left"的<li>元素设置样式
    (7).rightContent li a,.rightContent h3 a {color:#1f3a87; } 表示为CLASS="rightContent"的元素里的<li>里面的<a>设置颜色属性; class="rightContent"元素的<h3>元素里的<a>的颜色属性亦如此.(8).rightContent .theTip{ clear:both; padding:9px 0 0;} 表示为calss="rightContent" 里的子元素中class="theTip"设置样式.
    (9)div#Head ul#GlobalNav div.NavAll li a:hover{}表示为id为Head的DIV元素里的id为GlobalNav里的UL元素里的id为NavAll的div元素里的的Li元素设置a的样式.(10)#ListPathLinks ul{float:left;} 表示为id为ListPathLinks里的ul元素设置样式.(11)#dl_centerlist {}表示为ID="dl_centerlist"的元素设置样式
    (12)div#dl_centerlist和#dl_centerlist的区别:DIV元素指定了id="dl_centerlis";如果存在"div#dl_centerlist" 则该样式起作用,否则#dl_centerlist的样式将起作用.(13)标签潜套层次不能很深
    (14)显示大文本块的话使用P
    (15)使用CSS简写.
    如:
    border-1px;
    border-style:solid;
    border-color:#000; 
    可简写为
    border:1px solid #000;
    (16)CSS元素是支持继承的,所以要减少CSS里的冗余样式.减少CSS文件的大小.
    如body里面的样式在很多HTML标签里是默认被继承的.
    (17)使用子选择器和组选择器,这样可以减少Class的定义原来的冗余:
    <div id="subnav">
    <ul>
    <li class="subnavitem"> <a href="http://gss:7000/pages/editpage.action#" class="subnavitem">Item 1</a></li>>
    <li class="subnavitemselected"> <a href="http://gss:7000/pages/editpage.action#" class="subnavitemselected"> Item 1</a> </li>
    <li class="subnavitem"> <a href="http://gss:7000/pages/editpage.action#" class="subnavitem"> Item 1</a> </li>
    </ul>
    </div>
    CSS定义是:
    div#subnav ul { /* Some styling */ }
    div#subnav ul li.subnavitem { /* Some styling */ }
    div#subnav ul li.subnavitem a.subnavitem { /* Some styling */ }
    div#subnav ul li.subnavitemselected { /* Some styling */ }
    div#subnav ul li.subnavitemselected a.subnavitemselected { /* Some styling */ } 新的:
    <ul id="subnav">
    <li> <a href="http://gss:7000/pages/editpage.action#"> Item 1</a> </li>
    <li class="sel"> <a href="http://gss:7000/pages/editpage.action#"> Item 1</a> </li>
    <li> <a href="http://gss:7000/pages/editpage.action#"> Item 1</a> </li>
    </ul>
    CSS定义是:
    #subnav { /* Some styling */ }
    #subnav li { /* Some styling */ }
    #subnav a { /* Some styling */ }
    #subnav .sel { /* Some styling */ }
    #subnav .sel a { /* Some styling */ }

  • 相关阅读:
    格式化数字,将字符串格式的数字,如:1000000 改为 1 000 000 这种展示方式
    jquery图片裁剪插件
    前端开发采坑之安卓和ios的兼容问题
    页面消息提示,上下滚动
    可以使用css的方式让input不能输入文字吗?
    智慧农村“三网合一”云平台测绘 大数据 农业 信息平台 应急
    三维虚拟城市平台测绘 大数据 规划 三维 信息平台 智慧城市
    农业大数据“一张图”平台测绘 大数据 房产 国土 农业 信息平台
    应急管理管理局安全生产预警平台应急管理系统不动产登记 测绘 大数据 规划 科教 三维 信息平台
    地下综合管廊管理平台测绘 大数据 地下管线 三维 信息平台
  • 原文地址:https://www.cnblogs.com/adandelion/p/757141.html
Copyright © 2011-2022 走看看