关注前端开发微信微信号web007007

天涯html&css基础框架

作者 管理员 发布时间 2012-12-11 09:35 文章分类 前端文档 文章评论 4条评论 阅读次数

html申明

对ie6-8在html中添加no-css3这个class和各个版本的class,对ie7以下添加lte7这个class,然后根据我们目前使用浏览器的比例,把第一的ie6放在判断第一位。

<!DOCTYPE HTML>
<!--[if IE 6]><html lang="zh-cn"><![endif]-->
<!--[if IE 8]><html lang="zh-cn"><![endif]-->
<!--[if IE 9]><html lang="zh-cn"><![endif]-->
<!--[if IE 7]><html lang="zh-cn"><![endif]-->
<!--[if !(IE 6) | !(IE 7) | !(IE 8) | !(IE 9)  ]><!--><html lang="zh-cn"><!--<![endif]-->
<head>
<meta charset="UTF-8">
<title>无标题文档</title>
</head>

<body>

</body>
</html>

判断浏览器,添加所需文件

//为ie6-8添加一个ie.css文件
<!--[if lte IE 8]><link href="css/ie.css" type="text/css" rel="stylesheet" media="all"><![endif]-->
//为ie6添加处理png的js文件
<!--[if IE 6]>
      <script type="text/javascript" src="js/DD_belatedPNG_0.0.8a-min.js?_v=<%=JS_VERSION%>"></script>
      <script type="text/javascript">
          //给所有需要处理的png图片加上dd-pngifx这个class,就可以处理了
          DD_belatedPNG.fix(".dd-pngfix");
      </script>
<![endif]-->

常规布局

这个布局的特点是border,margin,padding由里面的inner部分来完成,所以左中右三个加起来就是总的宽度,而不用考虑左中右的margin,border,padding之类的,当然之所有选择这个布局,还有其他的一些变化,详细请参看布局。这里列出左右边栏布局的代码以供参考。

<div>
    <div>
        <div id="header">
            <div></div>
        </div>
    </div><!--wrap-header-->
    <div>
        <div id="container">
            <div id="aside_left">
                <div></div>
            </div><!--aside_left-->

            <div id="main">
                <div></div>
            </div><!--main-->

            <div id="aside_right">
                <div></div>
            </div><!--aside_right-->
        </div>
    </div><!--wrap-container-->
    <div>
        <div id="footer">
            <div></div>
        </div>
    </div><!--wrap-footer-->
</div>

关于H1

在首页的时候,网站的h1标题为站点名字,当网站在内页的时候,内页标题为h1。所以对站点名字输出进行判断,以jsp为例:

<% if(isFront) { %>
  <h1>天涯游戏</h1>
<% }else { %>
  <strong>天涯游戏</strong>
<% } %>

当然大多数时候其实我们一般是显示logo,而网站名称我们也许是需要隐藏的,那样我们添加了个ele-invisible的class,这个class的样式为:

/*ele-invisible  */
.ele-invisible{
    position: absolute;
    clip:rect(1px 1px 1px 1px);/* ie6,7*/
    clip: rect(1px, 1px, 1px, 1px);
}

边栏区块

边栏一般加有aside-block这个class,然后每个区块有一个属于自己的id,以方便协作查阅及日后修改。内容由block-content这个class包括起来,如果标题右侧有更多等信息,使用head-title结构。当然如果边栏区块足够简单如就一张图片,那就根本就不需要这个结构了。

<div id="">
  <h2></h2>
  <div></div>
</div>

<!-- 标题右侧有更多等文字信息 -->
<div id="">
  <div>
    <h2></h2>
    <a href="#"></a>
  </div>
  <div></div>
</div>

tabs选项卡

对所有的选项卡提供一个相同的class结构以方便js操作,标题用tabs-nav包裹起来,tabs-content里面放切换的内容,所有的内容用tabs-content-wrap包裹。如果项目本来就一种tabs,那么可以直接在这三个class上面定义样式,如果有多种tabs样式,建议样式由其他class来控制。

<h2><a href="#">title1</a><a href="#">title2</a></h2>
<div>
  <div>content1</div>
  <div>content2</div>
</div>

多列

这里的多列指的是二等分,三等分或四等分的情况,二等分的时候class为col-two,三等分的class为col-three,四等分的class为col-four,当然因为子元素并列排行所以一般也得配合clearfix用,然后子元素有一个共同的class为col。对于最后一栏margin的处理,可以采用加个class为last,或者使用父元素的负margin来撑大容器。

<!-- 两列 -->
<div>
  <div>
    <h2></h2>
    <div></div>
  </div>
  <div>
    <h2></h2>
    <div></div>
  </div>
</div>

<!-- 三列 -->
<div>
  <div>
    <h2></h2>
    <div></div>
  </div>
  ...
</div>

<!-- 四列 -->
<div>
  <div>
    <h2></h2>
    <div></div>
  </div>
  ...
</div>

本文固定链接: http://www.web92.net/807.html | WEB前端开发

该日志由 于2012年12月11日发表在 前端文档 分类下, 你可以发表评论,并在保留原文地址及作者的情况下引用到你的网站或博客。
原创文章转载请注明: 天涯html&css基础框架 | WEB前端开发
关键字: