自个儿相信来优质论坛学习规范的朋友,99%都不是为了进W3C,不是为了形成正式的探讨人士,那么大家来的指标是如何呢?相当的轻便,其实都是想经过标准的就学让本身多扩大一项技术而已,让协调在找工作的时候不会在被“必要熟稔精晓web标准”而难倒,在底下的实例中xhtml并不曾什么语意,小说的指标只是让然我们能更加好的垄断(monopoly卡塔尔国CSS中绝对、相对定位的用法(生手问此主题材料的真正过多卡塔尔,及如何有效的三结合背景,完毕比较复杂的布局。白玉微瑕还望前辈们能指点一二,多谢!

————————————————–第一步——————————————-

先来随意设计二个布局复杂点的(布局不整理卡塔尔demo:
韦德国际bv1946 1

————————————————–第二步——————————————-
大家来张开代码的编辑
<HTML>
<HEAD>
<TITLE>model</TITLE>
<META HTTP-EQUIV=”Content-Type” CONTENT=”text/html;
charset=gb2312″>
<style>
html,body{

    

margin:0;

    

padding:0;

    

background:#A1A9B6 url(images/allbg.jpg);

    

text-align:center;

    

}
#main{

    

margin:0 auto;

    

position:relative; ——————————–>笔者是对峙固定

    

width:780px;

    

height:659px;

    

background:url(images/model.jpg) no-repeat;

    

}
#main #menu{

    

position:absolute;

    

right:12px;

    

width:354px;

    

height:115px;

    

background:url(images/menu.gif) no-repeat;

    

}
#main #menu a,#main #menu a#page{

    

float:left;

    

width:112px;

    

height:30px;

    

}
#main #menu a#about{

    

width:80px;

    

height:55px;

    

}
#main #menu a#services{

    

width:70px;

    

height:80px;

    

}
#main #menu a#contacts{

    

width:80px;

    

height:115px;

    

}
#main #menu a:hover{

    

background: url(images/menu.gif) no-repeat;

    

}
#main #menu a#page:hover{

    

background-position: 0px -115px;

    

}
#main #menu a#about:hover{

    

background-position: -112px -115px;

    

}
#main #menu a#services:hover{

    

background-position: -192px -115px;

    

}
#main #menu a#contacts:hover{

    

background-position: -262px -115px;

    

}
#main h1{

    

position:absolute;——–>小编是相对定位,笔者相对与自家的上一流#main来扩充定位,因为他设置了position:relative;假设在自个儿的父拔尖中从未找到position:relative;那小编就绝对与body来稳定了…

    

top:0;left:1px;

    

width:151px;

    

height:56px;

    

background:url(images/logo.jpg) no-repeat;

    

}
#main h2{

    

position:absolute;——————>小编也是纯属定位
小编和方面提到的用法同样

    

top:133px;

    

right:7px;

    

width:404px;

    

height:190px;

    

background:url(images/about.gif) no-repeat;

    

}
#main h6{

    

position:absolute;——————>作者也是相对定位
笔者和下面提到的用法相近

    

bottom:75px;

    

right:10px;

    

width:265px;

    

height:44px;

    

background:url(images/cars-logo.gif) no-repeat;

    

}
</style>
</HEAD>
<BODY>
<div id=”main”>
<div id=”menu”>
——————————————————————————>这几个菜单是怎么工作的吗?
一张图是怎能促成背景切换呢?
呵呵,其实也很简短?大家领悟背景图象中有:图像横纵坐标地方设置,此例子也就是利用那么些特点,将具有不相同ID的链接A的背景展开偏移,以完毕背景切换的指标。

<a href=”#” id=”page” title=”page”></a>
<a href=”#” id=”about” title=”about”></a>
<a href=”#” id=”services” title=”services”></a>
<a href=”#” id=”contacts” title=”contacts”></a>
</div>
<h1></h1>
<h2></h2>
<h6></h6>
</div>
</BODY>
</HTML>
———————————————–实际页面效果:—————————————

<html><head><title>model</title><meta http-equiv="Content-Type" content="text/html; charset=gb2312"/><div cdata_tag="style" cdata_data="html,body{ 

    margin:0; 

    padding:0; 

    background:#A1A9B6 url(
http://www.okrmt.com/demo7.8/images/allbg.jpg
); 

    text-align:center; 

    } 

#main{ 

    margin:0 auto; 

    position:relative; 

    width:780px; 

    height:659px; 

    background:url(
http://www.okrmt.com/demo7.8/images/model.jpg
) no-repeat; 

    } 

#main #menu{ 

    position:absolute; 

    right:12px; 

    width:354px; 

    height:115px; 

    background:url(
http://www.okrmt.com/demo7.8/images/menu.gif
) no-repeat; 

    } 

#main #menu a,#main #menu a#page{ 

    float:left; 

    width:112px; 

    height:30px; 

    } 

#main #menu a#about{ 

    width:80px; 

    height:55px; 

    } 

#main #menu a#services{ 

    width:70px; 

    height:80px; 

    } 

#main #menu a#contacts{ 

    width:80px; 

    height:115px; 

    } 

#main #menu a:hover{ 

    background: url(
http://www.okrmt.com/demo7.8/images/menu.gif
) no-repeat; 

    } 

#main #menu a#page:hover{ 

    background-position: 0px -115px; 

    } 

#main #menu a#about:hover{ 

    background-position: -112px -115px; 

    } 

#main #menu a#services:hover{ 

    background-position: -192px -115px; 

    } 

#main #menu a#contacts:hover{ 

    background-position: -262px -115px; 

    } 

#main h1{ 

    position:absolute; 

    top:0;left:1px; 

    width:151px; 

    height:56px; 

    background:url(
http://www.okrmt.com/demo7.8/images/logo.jpg
) no-repeat; 

    } 

#main h2{ 

    position:absolute; 

    top:133px; 

    right:7px; 

    width:404px; 

    height:190px; 

    background:url(
http://www.okrmt.com/demo7.8/images/about.gif
) no-repeat; 

    } 

#main h6{ 

    position:absolute; 

    bottom:75px; 

    right:10px; 

    width:265px; 

    height:44px; 

    background:url(
http://www.okrmt.com/demo7.8/images/cars-logo.gif
) no-repeat; 

    }" _ue_custom_node_="true"></div></head><body><p><a href="#" id="page" title="page" _href="#"></a> <a href="#" id="about" title="about" _href="#"></a> <a href="#" id="services" title="services" _href="#"></a> <a href="#" id="contacts" title="contacts" _href="#"></a> </p><h1></h1><h2></h2><h6></h6></body></html>

好了,本次的实例教程就与世长辞了,希望对我们以往举行xhtml网页的希图,构造能有所扶助!后会有期.

相关文章