1. 说明

网上下载的模板，用DIV实现页面模块之间的分隔（不是用frameset/frame）。可以选择有无header/menu/footer，主体如何等等。删除了几个我认为重复的。重新命名而已。这样看文件夹就知道该目录是何种风格的模板。

附件中的文件夹命名规则：

  • l-表示左边有内容
  • r-表示右边有内容
  • h-表示有Head（头部，一般用于网站的Banner）
  • m-表示有Menu（菜单，一般用于功能选项）
  • b-表示有Body（主体，网站主体）
  • f-表示有Footer（底部，版本信息类）
  • bx-表示主体大小会随窗口的变化而自适应。
  • ()-表示括号内的为一行

2. 模板下载地址

http://files.cnblogs.com/nayitian/htmltemplate1.rar

模板图一（35.h-(bx-r)）：

模板图二（36.h-(l-bx)-f），有footer，画面小，看不到：

3. 参考源代码

index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>2列右侧固定左侧自适应宽度+头部——<a href="http://www.aa25.cn">标准之路www.aa25.cn</a></title>

<link href="layout.css" rel="stylesheet" type="text/css" />

<meta name="Keywords" content="标准之路,www.aa25.cn,网页标准布局,DIV+CSS" />

<meta name="" content="标准之路,www.aa25.cn,网页标准布局,DIV+CSS" />

<meta name="author" content"×××,有问题请到www.68css.cn网站留言" />

<meta name="Description" content="本套网页标准布局模板是由标准之路（www.aa25.cn）制作完成，如果您要转载，请保留版权" />

</head>

<body>

<div id="container">

  <div id="header">This is the Header</div>

  <div id="mainContent">

    <div id="sidebar">This is the sidebar</div>

    <div id="content">2列右侧固定左侧自适应宽度+头部——<a href="http://www.aa25.cn">标准之路www.aa25.cn</a></div>

  <span style="display:none"><script language="javascript" type="text/javascript" src="http://js.users.51.la/1967272.js"></script></span></div>

</div>

</body>

</html>

layout.css

/*本模板是由标准之路(www.aa25.cn)的×××制作完成*/

/*本人水平有限，使用自愿，不对因使用此模板造成的任何后果负任何责任*/

/*如果您想转载此资源，请保留“<a href="http://www.aa25.cn">标准之路www.aa25.cn</a>”的链接及版权标识*/

/*如有更好的建议或意见，请到www.aa25.cn留言，本人尽力解决*/

/*2008-8-28*/

body { font-family:Verdana; font-size:14px; margin:;}

#container {margin:0 auto; width:100%;}

#header { height:100px; background:#9c6; margin-bottom:5px;}

#mainContent { height:500px; margin-bottom:5px;}

#sidebar { float:right; width:200px; height:500px; background:#cf9;}

#content { margin-right:205px !important; margin-right:202px; height:500px; background:#ffa;}

HTML常用模板：用DIV实现网站首页、后台管理首页（整理）的更多相关文章

  1. Tomcat 配置 项目 到tomcat目录外面 和 域名绑定访问(api接口、前端网站、后台管理网站)

    先停止tomcat服务 1.进入apache-tomcat-7.0.68/conf/Catalina/localhost(如果之前还都没有启动过tomcat,是不会有此目录的,先启动一次再关闭,会自动 ...

  2. 蓝色简洁的企业cms网站权限后台管理模板——后台

    链接:http://pan.baidu.com/s/1pKUqbBd 密码:nink

  3. 权限管理系统之SpringBoot集成LayUI实现后台管理首页

    万事开头难,昨天一直在构思用户权限管理系统怎么实现,实现哪些需求,采用什么技术等,也在网上百度了好多,计划使用SpringBoot + Mybatis + thymeleaf  + LayUI + S ...

  4. nginx配置一、二级域名、多域名对应(api接口、前端网站、后台管理网站)

    前提:安装好nginx,如果已经启动nginx,先停止,命令: ./usr/local/nginx/sbin/nginx -s stop 修改nginx配置 vi /usr/local/nginx/c ...

  5. html5常用模板下载网站

    html5常用模板下载网站 开创者素材.站长素材.模板之家 推荐葡萄家园素材网,他们网页模板栏目有个HTML模板,很多静态源码.应该是你所需要的. html静态页面模板 还是服饰素材啊 朋友 设计云 ...

  6. Vue常用模板语法

    常用模板语法   本篇将在上一篇的基础上记录文本渲染.表达式.过滤器以及常用指令的简单用法. 一.文本渲染 Vue支持动态渲染文本,即在修改属性的同时,实时渲染文本内容.同时为了提高渲染效率,也支持只 ...

  7. NDK(10)Android.mk各属性简介，Android.mk 常用模板

    参考 : http://blog.csdn.net/hudashi/article/details/7059006 本文内容: Android.mk简介, 各属性表, 常用Android.mk模板 1 ...

  8. 常用HTML meta 标签属性(网站兼容与优化需要)，meta标签

    常用HTML meta 标签属性(网站兼容与优化需要),meta标签 标签提供关于HTML文档的元数据.元数据不会显示在页面上,但是对于机器是可读的.它可用于浏览器(如何显示内容或重新加载页面),搜索 ...

  9. IDEA学习——模板及其常用模板

    模板及其常用模板 (1)psvm (2)sout sout / soutp / soutv / 变量.sout (3)fori iter增强for循环 itar普通for循环 (4)list.for ...

随机推荐

  1. 代码实现分析mpeg-2文件

    1.概述 把上一篇文章中讲到的mpeg-2文件结构分析用代码实现,结合mpeg-2文件分析.才easy看懂. 2.代码 /* *本程序主要分析MPEG-2文件 *作者:缪国凯(MK) *8214860 ...

  2. edit-distance-动态规划，计算两词之间变换的最小步数

    Given two words word1 and word2, find the minimum number of steps required to convert word1 to word2 ...

  3. JS 拦截/捕捉 全局错误 全局Error onerror

    移动Web开发过程中,在真机测试时,往往会遇到一些PC调试无法重现的问题,这时候我们需要在手机上拦截错误,并有相应的输出. 公司和网上都有类似的工具/类库,但如果纯粹一个简单的调试,或许不需要引入工具 ...

  4. css 如何使图片与文字在div中居中展示？

      1.情景展示 如何将图片与文字在div中一起居中展示? HTML片段 <div style="background: #fff;padding-top: 5px;border:1p ...

  5. 另一鲜为人知的单例写法-ThreadLocal

    另一鲜为人知的单例写法-ThreadLocal 源代码范例 当我阅读FocusFinder和Choreographer的时候,我发现这两类的单例实现和我们寻经常使用双重检查锁非常不一样.而是用来一个T ...

  6. Red Hat7.2 上安装 MySQL5.5.58

    1.首先查看linux版本:cat /etc/redhat-release Red Hat Enterprise Linux Server release 7.2 (Maipo) 2.Linux查看版 ...

  7. GCD 容易让人迷惑的几个问题

    写在开头: 本文旨在阐述一些大家容易产生迷惑的GCD相关内容,如果是需要了解一些GCD概念或者基础用法,可以看看这两篇文章:GCD 扫盲篇.巧谈GCD . 目录: 迷惑一:队列和线程的关系 迷惑二:G ...

  8. 双链表实现Queue

    算法导论第10章的东西,感觉用双链表真心简单,就是有点浪费空间,但是时间复杂度O(1): #include <stdio.h> struct LinkNode { LinkNode(): ...

  9. 【转】Kafka 之 中级

    摘要: Kafka配置介绍,原理介绍及生产者,消费者Java基本使用方法. 1.    配置 Ø  Broker主要配置 参数 默认值 说明(解释) broker.id =0   每一个broker在 ...

  10. C语言连接MySQL数据库（转）

    c++连接MySQL有两种方式,1是原始的方法,2是用 Connector c++ .Connector c++  只是一种封装,使之更加方便. 1.原始方法 这里归纳了C API可使用的函数,并在下 ...