CSS切图

通用部分

css.css

@charset "utf-8";
/* CSS Document */

/*头部部分*/
*{margin:0; padding:0; border:none;}
body{
font-size:12px; line-height:24px; font-family:"新宋体"; background:#ffffff; text-decoration: none; margin: 0px; padding: 0px;border-top-style: none;border-right-style: none; border-bottom-style: none; border-left-style: none;
background:url(../images/bg.jpg); 
color:#333333;
}
img{border:none; vertical-align:top;}
ul,li{list-style-type:none;}
a{text-decoration:none; color:#333333;}
a:hover{color:#C60; text-decoration:underline;}

p{line-height:30px; text-indent:30px; font-size:12px; }
.left{float:left;}
.clear{clear:both;}
.right{float:right;}
.center{text-align:center;}

 

----------------------------------------------------------------------------------------------------------

学习资源：http://v.pps.tv/play_3BLINY.html    第三讲和第四讲  讲解基本切图和div+css布局    第8讲开始

 

---

css里的相对路劲   是相对（该css的）文件    而php文件的include是针对入口文件的相对路径

 li{position:relative;}   li span{}

span便签不占一行（一般如more字样）       p标签占一行（一般是一段文字）

dt dd中可以加入ul li    ul 无序列表
<dl>……</dl> 创建一个定义列表 
<dt> 放在每个定义术语词之前 
<dd>  放在每个定义之前 

<ol>……</ol> 创建一个标有数字的列表  
<li>  放在每个数字列表项之前，并加上一个数字  
<ul>……</ul> 创建一个标有圆点的列表 

 字体颜色：color:red;

background:url(../images/main_2_bg.jpg) no-repeat 920px 0px;}   //对应相对左边920px  相对顶部0px    还可以写成  right top

<div> display属性一般设置为block  

-----------

CSS切图尽量使用background:url() 100px 20px //100px 是相对于左边  20相对于头部

<div style="overflow:hidden; display:block;">//清楚浮动方式二
　　<div style="float:left;"></div>
　　<div style="float:right;"></div>
　　<div style="clear:both;"></div>  //清楚浮动方式一
</div>

----------

先写好HTML div代码   再在当前html页面中使用style="" 的方式定义样式 ，   最后切完图后再并入css.css样式中

在CSS页面中加入<style type="text/css"></style>

再切入css.css中

---------

热点链接  图片的某区域加超链接

<img src="images/main_7_2.jpg" border="0" usemap="#Map2"/>

<map name="Map2" id="Map2"><area shape="rect" coords="592,15,697,36"   href="#kp" /></map>  //coords 是相对图片的（左、上）、（右、下）2个点的 位置      href="http://a.com"

----

<h2 class="title" id="kp"><b class="itemKp"></b><span></span></h2>

----------

做切换效果时候的CSS写法

#main1_lf_tab3{background:url(../images/main_1_sy1.jpg) no-repeat left; width:188px; height:128px;}

#main1_lf_tab3.focus{background:url(../images/main_1_sy2.jpg) no-repeat left; width:188px; height:128px;}

-------------------

z-index:999   越大越靠前  必须要配合加一句 position:absolute;  才能生效