文档章节

我的html5网站架构(针对drupal7)

inerds
 inerds
发布于 2013/01/23 00:00
字数 529
阅读 175
收藏 0
<!DOCTYPE html>
<!--[if IE 8]><html class="no-js lt-ie9" lang="en" > <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en" > <!--<![endif]-->

<head>
<meta charset="utf-8">
<title>cdltwl</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="At5" content="">

<!-- styles -->
<link rel="stylesheet" type="text/css" href="css/reset.css"><!--重置css-->
<link rel="stylesheet" type="text/css" href="css/layout.css"><!--布局css-->
<link rel="stylesheet" type="text/css" href="css/text.css"><!--字体文章css-->
<link rel="stylesheet" type="text/css" href="css/form.css"><!--表单css-->
<link rel="stylesheet" type="text/css" href="css/module.css"><!--模块css-->
<link rel="stylesheet" type="text/css" href="css/navigation.css"><!--菜单css-->
<link rel="stylesheet" type="text/css" href="css/style.css"><!--总样式css-->
<!--最后记得合并css-->
<!--//为mobile添加一个mobile.css文件-
<!--[if IEMobile ]><link href="css/mobile.css" type="text/css" rel="stylesheet" media="all"><![endif]-->


<!-- script -->
<!-- HTML5使IE6-8支持HTML5元素 -->
<!--[if lt IE 9]>
      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
<!--[if IE 6]>
    <script type="text/javascript" src="js/DD_belatedPNG_0.0.8a-min.js"></script>
    <script type="text/javascript">
    //给所有需要处理的png图片加上dd-pngifx这个class,就可以处理了
          DD_belatedPNG.fix(".dd-pngfix");
    </script><![endif]-->


<!-- Fav and touch icons -->
    <link rel="apple-touch-icon-precomposed" sizes="144x144" href="">
    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="">
    <link rel="apple-touch-icon-precomposed" sizes="72x72" href="">
    <link rel="apple-touch-icon-precomposed" href="">
    <link rel="shortcut icon" href="">
</head>

<body>
<!-- header -->
<header class="navbar navbar-fixed">
<div class="wrapper">
    <hgroup id="logo" class="pull-left">
<h1><a href="index.html" title="">标题1</a></h1>
            <h1 class="site_title">副标题</h1>
        </hgroup>
        <nav>
        <ul>
              <li class="active"><a href="#">首页</a></li>
              <li><a href="#">导航1</a></li>
              <li><a href="#">导航2</a></li>
          </ul>
    </nav>
</div><!--.wrapper-->
</header>
<!-- content -->
<section role="content">
<div role="main">
        <div class="wrapper">
        </div><!--.wrapper-->
    </div>
    <aside>
    <div class="wrapper">
        </div><!--.wrapper-->
    </aside>
</section>
<!--footer-->
<footer>
<div class="wrapper">
    </div><!--.wrapper-->

</footer>

<!--script-->

</body>

</html>

整体布局模块化的思想,整个网站是以区块为单位组装的

css进行了大量的拆分,目的是使各个区块分工更加明确。

整体要兼容ie6+、Firefox 3.0+、Chrome 2.0+、Opera 9.64+、Safari 3.1+

在移动终端和电脑桌面端要有良好的显示效果

reset是改良的yahoo的reset
layout改良的是bootstrap中的布局方式,可以以响应式布局和固定宽度布局两种
text是改良的960的文章字体样式
form是改良的bootstrap的表单样式

module  navigation style分别控制独立的模块 导航 整体样式

© 著作权归作者所有

inerds
粉丝 6
博文 27
码字总数 15512
作品 0
成都
部门经理
私信 提问
07.HTML 5 Web 存储

(来自W3CSchool) 在客户端存储数据 HTML5 提供了两种在客户端存储数据的新方法: localStorage - 没有时间限制的数据存储 sessionStorage - 针对一个 session 的数据存储 之前,这些都是由 ...

黑夜路口
2018/03/08
0
0
Google Flash 转换 HTML5 工具 Swiffy 测试版发布

Google今年六月推出的Flash转换HTML5工具已经从实验室转为测试版,并新增一个Flash Professional扩充模组,可以直接将档案储存为HTML5格式。一开始Swiffy仅以网站方式,让使用者上传Flash的....

红薯
2011/11/24
1K
7
2012年技术图书大盘点

文:@图灵郭志敏 又将是一年的结束,13年即将到来,大家可以跟随我的图书列表,看一下: 这年里你们一共买了多少书? 读了多少本书? 读完的又有多少本书? 反复读的有几本? 收获最大的是哪...

生气的散人
2012/12/13
703
7
开发时间缩短90% Amaze UI助H5梦工场响应式网站快速上线

近日,HTML5梦工场使用云适配开源HTML5跨屏前端框架Amaze UI对自身网站进行了重新开发。开发完成的新网站,用户无论通过任何终端访问,网站内容都能保持实时同步,并能以最佳的展现方式呈现出...

云适配
2016/05/17
0
0
JS 详解 Cookie、 LocalStorage 与 SessionStorage

基本概念 Cookie Cookie 是小甜饼的意思。顾名思义,cookie 确实非常小,它的大小限制为4KB左右。它的主要用途有保存登录信息,比如你登录某个网站市场可以看到“记住密码”,这通常就是通过...

飞翔的熊blabla
01/14
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Android ANR原理分析

一、概述 ANR(Application Not responding),是指应用程序未响应,Android系统对于一些事件需要在一定的时间范围内完成,如果超过预定时间能未能得到有效响应或者响应时间过长,都会造成ANR...

天王盖地虎626
11分钟前
1
0
IT兄弟连 Java语法教程 Java开发环境 安装JDK

因为我们要开发Java程序,所以必须在我们的计算机中安装Sun(Oracle)公司提供给我们的JDK。目前最新版本的JDK是JDK 10,但是我们以学习JDK 8为主,所以我们要安装的版本是JDK 8。安装步骤如...

老码农的一亩三分地
17分钟前
0
0
Spring Boot Repository查询条件关键字

查询条件关键字 Keyword Sample JPQL snippet And findByLastnameAndFirstname … where x.lastname = ?1 and x.firstname = ?2 Or findByLastnameOrFirstname … where x.lastname = ?1 or......

兜兜毛毛
23分钟前
0
0
[js]closeure闭包

// // closure 1 function func() { var count = 0; function cal(){ count += 2; console.log(count); return count; ......

Danni3
23分钟前
0
0
centos 设置hostname

1、centos 6 hostname配置文件为 /etc/sysconfig/network 内容为 NETWORKING=yesHOSTNAME=test_hostname hostname是Linux系统下的一个内核参数,它保存在 /proc/sys/kernel/hostname 下,但......

燃犀
49分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部