宽度计算一定是包括自己设置宽度+边框宽度+padding宽度+margin宽度组成,因为一些组件默认含有一定的样式,开发前如不进行原有格式清除,很容易造成结构错位。
首先给大家分享我的及CSS网页使用的开头CSS模板;HTML+CSS模板divcss5初始化XHTML(DIV+CSS初始化模板)
此处提供DIVCSS5每次开发项目时候使用的DIV+CSS模板初始化最基本的模板模块。
暂时展示UTF-8版模板代码
每次新开发页面的共同可用的CSS代码模板如下:
@charset "utf-8";
/* DIVCSS5 - www.divcss5.com */
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 "\5B8B\4F53",Arial, Helvetica, sans-serif;
}
/* \5B8B\4F53 宋体 更多中文字体
转换Unicode编码表网址 http://www.divcss5.com/jiqiao/j325.shtml */
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>DIVCSS5-HTML模板 UTF-8 - www.divcss5.com </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.divcss5.com/">DIVCSS5</a>
欢迎您使用初始化的HTML+CSS模板!<br />
学习网址: www.divcss5.com
<div class="clear"></div>
<span style="display:none">DIVCSS5提示这里可以放置网站统计代码</span>
</body>
</html>
希望divcss5整理的div+css模板对你有用!希望您也把你的经验分享给大家!
推荐大家下载打包文件进行使用以免乱码。
为大家节约每次开发CSS项目时候准备时间。
1、本模板包括了UTF-8版和GB2321(GBK)版编码的HTML文件模板+CSS文件模板
2、模板html中已经做好了link引入CSS文件
3、使用时候选择需要编码版本初始化模板,推荐与你使用程序编码一致,避免乱码
4、下载地址: (压缩文件包括了UTF-8编码模板和GBK2312编码模板)