您现在的位置: 365建站网 > 365学习 > CSS布局及常见问题

CSS布局及常见问题

文章来源:365jz.com     点击数:189    更新时间:2009-12-14 23:28   参与评论

@charset "utf-8";
/* CSS样式重置*/
/*重置margin,padding,对齐方式,字体样式
----------------------------------*/
HTML, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dd, dl, dt, li, ol, ul, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td
{
 margin: 0;
 padding: 0;
 border: 0;
 outline: 0;
 font-weight: inherit;
 font-style: inherit;
 font-family: inherit;
 font-size:100%;
 text-align: left;
 vertical-align: baseline;
}

/*图片边框清空*/
img,a img {border:none;}

/*表格重置*/
table {border-collapse: collapse; border-spacing: 0;}

/*引号*/
q:before, q:after, blockquote:before, blockquote:after {content: "";}

/*global
----------------------------------*/
body, p, td, th, li
{
 font-family: 'Lucida Grande', 'Lucida Sans Unicode',sans-serif;/*字体样式*/
 font-size:12px;/*字体大小*/
 line-height:2;/*字体行高*/
 color:#000000;/*字体颜色*/
}
ul{list-style-type:none;}
a:link,a:visited { text-decoration:none;}
strong  {font-weight:bold;}
em  {font-style:italic;}

/*公用样式
---------------------------------*/
.left   {float:left;}
.right   {float:right;}
.clearThis  {clear:both;}
.small  {font-size:.625em;}
.large  {font-size:1.25em;}
.hide  {display:none;}

/*公用 Margin
---------------------------------*/
.ma5 { margin:5px;}
.mt5 { margin-top:5px;}
.mr5 { margin-right:5px;}
.mb5 { margin-bottom:5px;}
.ml5 { margin-left:5px;}
.ma10 { margin:10px;}
.mt10 { margin-top:10px;}
.mr10 { margin-right:10px;}
.mb10 { margin-bottom:10px;}
.ml10 { margin-left:10px;}
.ma20 { margin:20px;}
.mt20 { margin-top:20px;}
.mr20 { margin-right:20px;}
.mb20 { margin-bottom:20px;}
.ml20 { margin-left:20px;}

/*公用 padding
---------------------------------*/
.pa5 { padding:5px;}
.pt5 { padding-top:5px;}
.pr5 { padding-right:5px;}
.pb5 { padding-bottom:5px;}
.pl5 { padding-left:5px;}
.pa10 { padding:10px;}
.pt10 { padding-top:10px;}
.pr10 { padding-right:10px;}
.pb10 { padding-bottom:10px;}
.pl10 { padding-left:10px;}
.pa20 { padding:20px;}
.pt20 { padding-top:20px;}
.pr20 { padding-right:20px;}
.pb20 { padding-bottom:20px;}
.pl20 { padding-left:20px;}

/* 自定义布局 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
/*background
--------------------------------*/
.bg1 {}
.bg2 {}
.bg3 {}

/*borde
--------------------------------*/
.border {}

/* 布局代码
          网页总体宽度
--------------------------------*/
.w960 { display:block; overflow:hidden; margin:0 auto; _height:1%;  width:960px;}
.w660 { display:block; overflow:hidden; _height:1%; width:660px;}
.w270 { display:block; overflow:hidden; _height:1%; width:270px;}
.mainbox { display:block; overflow:hidden; clear:both; _height:1%;} /*解决IE FF 自身长的问题,用于box内有浮动的层,无浮动不用*/

/* 基本布局
--------------------------------*/
.top {}
.header {}
.mainnav {}
.main {}
.footer {}
.link{}
/* top
--------------------------------*/
.top {}

/* header
--------------------------------*/
.header {}

/* mainnav
--------------------------------*/
.mainnav {}

/* main
--------------------------------*/
.main {}

/* 标 题
--------------------------------*/
.titlebox {}
.title {}

/* 列 表
--------------------------------*/
ul.list {}
ul.list li {}
ul.list li a {}

/* 栏目
--------------------------------*/

如对本文有疑问,请提交到交流论坛,广大热心网友会为你解答!! 点击进入论坛


发表评论 (189人查看0条评论)
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
用户名: 验证码: 点击我更换图片
最新评论
------分隔线----------------------------