收藏本站投递资讯前端导航

前端资讯

 找回密码
 立即注册

QQ登录

只需一步,快速开始

搜索
查看: 1532|回复: 7

常用html&css基础页面代码分享

[复制链接]
发表于 2013-1-18 14:45:58 | 显示全部楼层 |阅读模式
以下代码可以直接复制,方便大家快速书写

html申明
对ie6-8在html中添加no-css3这个class和各个版本的class,对ie7以下添加lte7这个class,然后根据我们目前使用浏览器的比例,把第一的ie6放在判断第一位。
  1. <!DOCTYPE HTML>
  2. <!--[if IE 6]><html class="ie6 lte9 lte7 no-css3" lang="zh-cn"><![endif]-->
  3. <!--[if IE 8]><html class="ie8 lte9 no-css3" lang="zh-cn"><![endif]-->
  4. <!--[if IE 9]><html class="ie9 lte9 no-css3" lang="zh-cn"><![endif]-->
  5. <!--[if IE 7]><html class="ie7 lte9 lte7 no-css3" lang="zh-cn"><![endif]-->
  6. <!--[if !(IE 6) | !(IE 7) | !(IE 8) | !(IE 9)  ]><!--><html lang="zh-cn"><!--<![endif]-->
  7. <head>
  8. <meta charset="UTF-8">
  9. <title>无标题文档</title>
  10. </head>

  11. <body>

  12. </body>
  13. </html>
复制代码
判断浏览器,添加所需文件

为ie6-8添加一个ie.css文件
  1. <!--[if lte IE 8]><link href="css/ie.css" type="text/css" rel="stylesheet" media="all"><![endif]-->
复制代码
为ie6添加处理png的js文件
  1. <!--[if IE 6]>
  2.       <script type="text/javascript" src="js/DD_belatedPNG_0.0.8a-min.js?_v=<%=JS_VERSION%>"></script>
  3.       <script type="text/javascript">
  4.           //给所有需要处理的png图片加上dd-pngifx这个class,就可以处理了
  5.           DD_belatedPNG.fix(".dd-pngfix");
  6.       </script>
  7. <![endif]-->
复制代码
常规布局
这个布局的特点是border,margin,padding由里面的inner部分来完成,所以左中右三个加起来就是总的宽度,而不用考虑左中右的margin,border,padding之类的,当然之所有选择这个布局,还有其他的一些变化,详细请参看布局。这里列出左右边栏布局的代码以供参考。
  1. <div class="page asides-two">
  2.     <div class="wrap-header">
  3.         <div id="header">
  4.             <div class="inner clearfix"></div>
  5.         </div>
  6.     </div><!--wrap-header-->
  7.     <div class="wrap-container">
  8.         <div id="container" class="clearfix">
  9.             <div id="aside_left" class="aside">
  10.                 <div class="inner"></div>
  11.             </div><!--aside_left-->

  12.             <div id="main">
  13.                 <div class="inner clearfix"></div>
  14.             </div><!--main-->

  15.             <div id="aside_right" class="aside">
  16.                 <div class="inner"></div>
  17.             </div><!--aside_right-->
  18.         </div>
  19.     </div><!--wrap-container-->
  20.     <div class="wrap-footer">
  21.         <div id="footer">
  22.             <div class="inner clearfix"></div>
  23.         </div>
  24.     </div><!--wrap-footer-->
  25. </div>
复制代码
关于H1
在首页的时候,网站的h1标题为站点名字,当网站在内页的时候,内页标题为h1。所以对站点名字输出进行判断,以jsp为例:
  1. <% if(isFront) { %>
  2.   <h1 class="ele-invisible">天涯游戏</h1>
  3. <% }else { %>
  4.   <strong class="ele-invisible">天涯游戏</strong>
  5. <% } %>
复制代码
当然大多数时候其实我们一般是显示logo,而网站名称我们也许是需要隐藏的,那样我们添加了个ele-invisible的class,这个class的样式为:
  1. /*ele-invisible  */
  2. .ele-invisible{
  3.     position: absolute;
  4.     clip:rect(1px 1px 1px 1px);/* ie6,7*/
  5.     clip: rect(1px, 1px, 1px, 1px);
  6. }
复制代码
边栏区块
边栏一般加有aside-block这个class,然后每个区块有一个属于自己的id,以方便协作查阅及日后修改。内容由block-content这个class包括起来,如果标题右侧有更多等信息,使用head-title结构。当然如果边栏区块足够简单如就一张图片,那就根本就不需要这个结构了。
  1. <div id="" class="aside-block">
  2.   <h2></h2>
  3.   <div class="block-content"></div>
  4. </div>
复制代码
标题右侧如果有更多等文字信息
  1. <div id="" class="aside-block">
  2.   <div class="head-title clearfix">
  3.     <h2></h2>
  4.     <a href="#" class="more"></a>
  5.   </div>
  6.   <div class="block-content"></div>
  7. </div>
复制代码
tabs选项卡
对所有的选项卡提供一个相同的class结构以方便js操作,标题用tabs-nav包裹起来,tabs-content里面放切换的内容,所有的内容用tabs-content-wrap包裹。如果项目本来就一种tabs,那么可以直接在这三个class上面定义样式,如果有多种tabs样式,建议样式由其他class来控制。
  1. <h2 class="tabs-nav"><a class="active" href="#">title1</a><a href="#">title2</a></h2>
  2. <div class="tabs-content-wrap">
  3.   <div class="tabs-content">content1</div>
  4.   <div class="tabs-content">content2</div>
  5. </div>
复制代码
多列
这里的多列指的是二等分,三等分或四等分的情况,二等分的时候class为col-two,三等分的class为col-three,四等分的class为col-four,当然因为子元素并列排行所以一般也得配合clearfix用,然后子元素有一个共同的class为col。对于最后一栏margin的处理,可以采用加个class为last,或者使用父元素的负margin来撑大容器。

两列
  1. <div class="col-two clearfix">
  2.   <div class="col">
  3.     <h2></h2>
  4.     <div class="col-content"></div>
  5.   </div>
  6.   <div class="col">
  7.     <h2></h2>
  8.     <div class="col-content"></div>
  9.   </div>
  10. </div>
复制代码
三列
  1. <div class="col-three clearfix">
  2.   <div class="col">
  3.     <h2></h2>
  4.     <div class="col-content"></div>
  5.   </div>
  6.   ...
  7. </div>
复制代码
四列
  1. <div class="col-four clearfix">
  2.   <div class="col">
  3.     <h2></h2>
  4.     <div class="col-content"></div>
  5.   </div>
  6.   ...
  7. </div>
复制代码

评分

参与人数 2人气 +1 金币 +10 贡献 +10 收起 理由
Tommy + 5 赞一个!
admin + 1 + 10 + 5 很给力!

查看全部评分

回复

使用道具 举报

发表于 2013-1-21 16:05:18 | 显示全部楼层
好东西 谢谢了  很有用
回复 支持 反对

使用道具 举报

头像被屏蔽
发表于 2013-1-27 14:14:48 | 显示全部楼层
很好!很强大!












混沌剑神
都市少帅
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则