DIV+CSS网页模板开发初始化CSS的好处

为什么要初始化CSS呢,有什么作用?

每次新开发网站或新网页时候我们通过初始化CSS样式的属性,为我们将用到的CSS或html标签更加方便准确。假如我们不初始化CSS样式属性,将会增大CSS代码量,为我们节约网页代码,节约网页下载时间;还会使得我们开发网页内容时更加方便简洁,不用考虑很多。如果不初始化CSS我们在开发比较复杂的网页时候就不会知道自己是否已经设置了此处的CSS属性,是否和前面的CSS属性相同,是否统一整个网页的风格和样式。

需要初始化地方有哪些:

大致一般需要初始化有h1到h4标签、table、文字大小、文字没有链接颜色、超链接样式、DIV、居中、ol、 ul、li、img等等的样式,这里我们总结了初始化后CSS文件或叫CSS模板供大家参考使用,可根据自己实际增减。

CSS模板与HTML模板实用于每次新开发页面使用

首先给大家分享我的及CSS网页使用的开头CSS模板;HTML+CSS模板divcss5初始化XHTML(DIV+CSS初始化模板)

此处提供DIVCSS5每次开发项目时候使用的DIV+CSS模板初始化最基本的模板模块。

暂时展示UTF-8版模板代码

每次新开发页面的共同可用的CSS代码模板如下:

@charset "utf-8";
body, div,iframe, ul, ol, dl, dt, dd, li, dl,
h1, h2, h3, h4, table,th, td, input, button, select,
 textarea {margin:0; padding:0;
font-style: normal;font:12px/22px "5B8B4F53",Arial, Helvetica, sans-serif;}
/* 5B8B4F53 宋体 更多中文字体 */
ol, ul ,li{list-style: none;}
img {border: 0; vertical-align:middle;}
body{color:#000000;background:#FFF; text-align:center;}
.clear{clear:both;height:1px;width:100%;
 overflow:hidden; margin-top:-1px;}
a{color:#000000;text-decoration:none; } 
a:hover{color:#F00;}
 
.red ,.red a{ color:#F00;}
.blue ,.blue a{ color:#1E51A2;}
 
.lf{float:left;}
.rt{float:right;}
 
.pt5{padding-top:5px;}
.pb5{padding-bottom:5px;}
 
#header ,#main ,#footer{ margin:0 auto;
 width:980px; overflow:hidden}
 
#main_left{ float:left;}
#main_right{ float:right;}

 

说明下这个首先是对全站的CSS进行一次初始化,并重新赋予新属于,这样来统一整站样式。

每次新开发页面的HTML代码模板如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>HTML模板 UTF-8 </title>
<meta name="keywords" content="关键词" />
<meta name="description" content="关键词描述" />
<link rel="stylesheet" href="images/style.css" />
<script src="JS文件路径地址" type="text/javascript"></script>
</head>
<body>
<a href="http://www.baidu.com/">111cn.com </a>
欢迎您使用初始化的HTML+CSS模板!<br />
学习网址: www.111cn.com
<div class="clear"></div>
<span style="display:none">DIVCSS5提示这里可以放置网站统计代码</span>
</body>
</html>

时间: 2024-10-23 00:40:27

DIV+CSS网页模板开发初始化CSS的好处的相关文章

12款精美的免费 CSS 网页模板下载

这篇文章收集了12款精美的免费CSS网页模板分享给大家,您可以免费下载使用.相信这些漂亮的免费 CSS网页模板 既能够帮助您节省大量的时间和精力,又能有很满意的效果.希望这些免费的CSS网页模板能帮助到您. Coffee ( 演示 | 下载 ) CleanBusiness ( 演示 | 下载 ) WesternShop ( 演示 | 下载 ) Light House ( 演示 | 下载 ) Blue Motion ( 演示 | 下载 ) Ancient ( 演示 | 下载 ) 梦想天空博客关注前

实践DIV+CSS网页布局入门指南

css|网页 你正在学习CSS布局吗?是不是还不能完全掌握纯CSS布局?通常有两种情况阻碍你的学习: 第一种可能是你还没有理解CSS处理页面的原理.在你考虑你的页面整体表现效果前,你应当先考虑内容的语义和结构,然后再针对语义.结构添加CSS.这篇文章将告诉你应该怎样把HTML结构化. 另一种原因是你对那些非常熟悉的表现层属性(例如:cellpadding,.hspace.align="left"等等)束手无策,不知道该转换成对 应的什么CSS语句. 当你解决了第一种问题,知道了如何结构

HTML结构化:DIV+CSS网页布局入门指南

css|网页  你正在学习CSS布局吗?是不是还不能完全掌握纯CSS布局?通常有两种情况阻碍你的学习: 第一种可能是你还没有理解CSS处理页面的原理.在你考虑你的页面整体表现效果前,你应当先考虑内容的语义和结构,然后再针对语义.结构添加CSS.这篇文章将告诉你应该怎样把HTML结构化. 另一种原因是你对那些非常熟悉的表现层属性(例如:cellpadding,.hspace.align="left"等等)束手无策,不知道该转换成对 应的什么CSS语句. 当你解决了第一种问题,知道了如何结

HTML结构化:实践DIV+CSS网页布局入门指南

css|网页 你正在学习CSS布局吗?是不是还不能完全掌握纯CSS布局?通常有两种情况阻碍你的学习: 第一种可能是你还没有理解CSS处理页面的原理.在你考虑你的页面整体表现效果前,你应当先考虑内容的语义和结构,然后再针对语义.结构添加CSS.这篇文章将告诉你应该怎样把HTML结构化. 另一种原因是你对那些非常熟悉的表现层属性(例如:cellpadding,.hspace.align="left"等等)束手无策,不知道该转换成对 应的什么CSS语句. 当你解决了第一种问题,知道了如何结构

DIV CSS网页布局兼容性的要点与诀窍总结

css|网页 IE vs FF CSS 兼容要点:DOCTYPE 影响 CSS 处理 FF: div 设置 margin-left, margin-right 为 auto 时已经居中, IE 不行 FF: body 设置 text-align 时, div 需要设置 margin: auto(主要是 margin-left,margin-right) 方可居中 FF: 设置 padding 后, div 会增加 height 和 width, 但 IE 不会, 故需要用 !important

DIV CSS网页布局兼容性有哪些要点与诀窍?

css|网页 IE vs FF CSS 兼容要点:DOCTYPE 影响 CSS 处理 FF: div 设置 margin-left, margin-right 为 auto 时已经居中, IE 不行 FF: body 设置 text-align 时, div 需要设置 margin: auto(主要是 margin-left,margin-right) 方可居中 FF: 设置 padding 后, div 会增加 height 和 width, 但 IE 不会, 故需要用 !important

CSS网页布局学习过程中选择什么软件来辅助?

css|过程|网页 CSS网页布局开发应该使用什么软件呢?这是一个非常常见的问题.往往会令新手朋友感觉迷茫,今天就这个问题我们来说一说吧.如果你有什么想法可以参与评论,大家集思广议吧. 有很多朋友是用DreamWeaver进行开发,DreamWeaver是三剑客之一,在传统的table布局中,可视化的环境让我们编辑网页非常轻松,各项功能面板进行设置即可达到想要的效果.虽然简化了操作,方便了我们的制作,但我们丢掉了很多东西,以至于有朋友从业几年了,却完全看不懂HTML代码,看不明白那些标签的真正含

总结:CSS网页布局兼容性有哪些要点与诀窍?

css|网页 IE vs FF CSS 兼容要点:DOCTYPE 影响 CSS 处理 FF: div 设置 margin-left, margin-right 为 auto 时已经居中, IE 不行 FF: body 设置 text-align 时, div 需要设置 margin: auto(主要是 margin-left,margin-right) 方可居中 FF: 设置 padding 后, div 会增加 height 和 width, 但 IE 不会, 故需要用 !important

CSS网页制作技巧:DIV+CSS网页布局常犯错误汇总

文章简介:随着CSS网页布局越来越普及,国内大部分网站已经采用CSS网页布局的制作方法.在应用DIV+CSS编码时很容易犯一些错误,这里列举一些常见的错误,帮助新手朋友更好的学习与进步. 随着CSS网页布局越来越普及,国内大部分网站已经采用CSS网页布局的制作方法.在应用DIV+CSS编码时很容易犯一些错误,这里列举一些常见的错误,帮助新手朋友更好的学习与进步. 一.检查HTML元素是否有拼写错误 是否忘记结束标记 即使是老手也经常会弄错div的嵌套关系.可以用dreamweaver的验证功能检