注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

小刹

诚心诚意

 
 
 

日志

 
 
关于我

对电影、镜头、文学、画面、表达、视觉感兴趣,最近对交际、关系、性格、建筑也感兴趣,混于游戏行业,学习并成长。

网易考拉推荐

CSS+DIV实例体会一  

2008-11-08 17:50:52|  分类: 平时练习(原创) |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
CSS+DIV实例体会一 - 啊刹 - lovforyourlifeCSS+DIV实例体会一 - 啊刹 - lovforyourlife 


这个页面是标注的CSS+DIV页面————————在CSS编辑器中可以选择部分为内容部分,图片,字体,颜色,背景 
实现了内容与结构的分离———————————都有另外的CSS文件控制 
———————————————————————————————————————————————————— 
CSS+DIV实例体会一 - 啊刹 - lovforyourlife 
文件开头 <!DOCTYPE>元素 该元素用来定义文档类型 
指明 XHTML 1.0 提供的3种文档类型 
· 过渡型(Transitional) 
·严格型(Strict)  表示不能使用任何描述性的元素和属性; 
·框架型(Frameset)页面包含框架需要使用的类型 

xmlns 表示 声明命名空间 
使用命名空间的技术思路大致是: 
                        在文档的跟元素中通过一个xmlns属性,为该文档指定一个URL地址。当打开网页时候, 
                        浏览器会首先找到这个指定的地址,再这个文档中纤细的定义了每个元素的类型,属性, 
                        和使用规范等。浏览器读取了这些数据后,根据指令逐条解析文档,然后显示网页。 
———————————————————————————————————————————————————— 
CSS+DIV实例体会一 - 啊刹 - lovforyourlife 
#表示的是 ID 选择符 
使用范例                                             
<div id="header"><!--头部模块-->                      #header 
     <div id="logo"></div><!--网站标志-->            { background: url(images/nav_bg.gif) repeat-x;} 
     <div id="banner"></div><!--头部广告条>          ... 
     <div id="nav"></div><!--导航条-->       
</div><!--头部部分结束--> 
<div id="main"><!--主体模块--> 
     <div id="left"></div><!--左边侧栏--> 
... 
</div> 
<div id="footer"><!--脚步模块--> 
... 
</div> 
________________________________________________________________________________________________________
.(即点)为class类型的选择符 使用class可以简化CSS代码的编写,class可以把XHTML文档中具有相同元素合并为一体,这样就大大减少了工作量。 
_______________________________________________________________________________________________________
div 的命名多以网页中多占的结构命名, class 则多以它所描述的属性命名,
div 有比class 更高的权限,即两者定义同一个对象的同一个属性,则以div 定义的为准
————————————————————————————————————————————————————
 
 
代码解析: 

CSS+DIV实例体会一 - 啊刹 - lovforyourlife 

<div id="outer">                         整个外部       
<div id="wrapper">                       主体层结构 
  <div id="nav">                           导航 
    <div id="nav-left">                     导航——左(左边的小图片) 
      <div id="nav-right">                     导航——右(右边的小图片) 
       <ul> 
         <li><a href="http://www.freewebsitetemplates.com">ABOUT US</a></li> 
         <li><a href="http://www.freewebsitetemplates.com">PRODUCTS</a></li> 
         <li><a href="http://www.freewebsitetemplates.com">SERVICES</a></li> 
         <li><a href="http://www.freewebsitetemplates.com">SHOPPING CART</a></li> 
         <li><a href="http://www.freewebsitetemplates.com">NEW GADGETS</a></li> 
         <li><a href="http://www.freewebsitetemplates.com">REGISTER</a></li> 
       </ul> 
      </div> 
    </div> 
   <div class="clear"></div> 

对应的CSS结构 
#outer { 
background: url(images/bg_top.jpg) repeat-x; 
min-height: 757px; 
padding: 67px 0px; 
text-align: center; 

#wrapper { 
text-align: left; 
margin: auto; 
position: relative; 
width: 563px; 

#nav { 
  background: url(images/nav_bg.gif) repeat-x; 

#nav-left { 
  background: url(images/nav_left.gif) no-repeat; 
  width: 100%; 

#nav-right { 
  background: top right url(images/nav_right.gif) no-repeat; 
  height: 33px; 

———————————————————————————————————————————————————— 
头部部分 
CSS+DIV实例体会一 - 啊刹 - lovforyourlife 

<div id="head"> 
   <div id="head-left"></div>     左边部分 
   <div id="head-right"></div>       右边部分 
   <div id="head-1"></div>            右边人像部分 
   <h1><span class="logo"><span class="top">top</span><span class="gadgets">gadgets</span></span></h1> 
   <div id="navb"> 
     <ul> 
      <li><a href="http://www.freewebsitetemplates.com">HOME</a></li>     HOME链接 
      <li><a href="http://www.freewebsitetemplates.com">CONTACT</a></li>    CONTACT链接 
     </ul> 
   </div> 
  </div> 

调用的CSS部分 
#head { 
position: relative; 
height: 157px; 
background: url(images/head_bg.gif); 

#head h1 { 
margin: 0px; 
padding: 0px; 
position: absolute; 
top: 45px; 
left: 29px; 

.logo { 
  display: block; 
  float: left; 
  border: 2px solid #B3B79E; 
  border-top: none; 
  border-bottom: none; 
  padding: 0px 5px; 
  font: 20px "arial narrow", arial, sans-serif; 
  height:55px; 

.logo .top { 
  display: block; 
  color: #303228; 

.logo .gadgets { 
  display: block; 
  color: #6C7376; 
  font-size: 28px; 
  margin-top: 0px; 
  line-height: 32px; 
   

#head-left { 
position: absolute; 
top: 0px; 
left: -16px; 
width: 16px; 
height: 200px; 
background: url(images/head_left.gif) no-repeat; 

#head-right { 
position: absolute; 
top: 0px; 
left: 562px; 
width: 16px; 
height: 200px; 
background: url(images/head_right.gif) no-repeat; 

———————————————————————————————————————————————————— 
次头部部分 
CSS+DIV实例体会一 - 啊刹 - lovforyourlife 

<div id="head-2"></div> 
  <div id="login"> 
   <div id="login-bot"> 
    <div id="login-box"> 
     <h2 class="login"><em>user</em>login</h2> 
     <form action=""> 
      <div id="login-username"> 
       <div><label for="username">username</label>: <input type="text" name="username" value="" id="username" /></div> 
       <div><label for="password">password</label>: <input type="password" name="password" value="" id="password" /></div> 
      </div> 
      <div id="login-button"> 
       <input type="image" src="images/btn_login.gif" name="l" value="h" id="l" /> 
      </div> 
      <div class="clear"> 
       <div class="reg"> 
        New User? <a href="http://www.freewebsitetemplates.com">REGISTER for FREE</a> 
       </div> 
      </div> 
     </form> 
    </div> 
    <div id="login-welcome"> 
     <div> 
      <h2>Welcome</h2> 
      <p>Don't forget to check <a href="http://www.freewebsitetemplates.com">free website templates</a> every day, because we add  a new free website template almost daily.</p> 
     </div> 
    </div> 
    <div class="clear"></div> 
   </div> 
  </div> 


调用的CSS部分 

#head-2 { 
height: 184px; 
background: url(images/head_2.jpg) no-repeat;   

#login { 
background: url(images/login_bg.jpg) repeat-y; 
font-weight: bold; 
color: #E1E1D5; 

#login-bot { 
background: bottom url(images/login_bot.jpg) no-repeat; 
padding: 6px 0px 19px 0px; 

#login-box { 
float: left; 
width: 260px; 

#login h2 { 
margin: 0px; 
padding: 0px 0px 3px; 

#login a { 
color: #303228; 

#login a:hover { 
color: #1C1D10; 

#login-box h2 { 
padding: 0px 0px 3px 30px; 
margin-left: 45px; 
margin-bottom: 3px; 
  color: #303228; 
  font: 18px "arial narrow", arial, sans-serif; 
  background: url(images/h_login.gif) no-repeat; 

#login-box h2 em { 
  font-style: normal; 
  color: #ECEEE4; 

#login-username { 
float: left; 
width: 195px; 
text-align: right; 
color: #303228; 

#login-username input { 
width: 120px; 
background: #FFFFFF; 
color: #303228; 
font-size: 10px; 
border: 1px solid #60654E; 

#login-username div { 
padding-bottom: 1px; 

#login-button { 
float: left; 
width: 45px; 
margin: 2px 10px; 

#login-box .reg { 
text-align: right; 
padding: 6px 27px 0px 0px; 

#login-welcome { 
float: right; 
width: 278px; 

#login-welcome div { 
padding-right: 23px; 

#login-welcome h2 { 
  color: #4E523F; 
  font: 20px "arial narrow", arial, sans-serif; 
  margin-bottom: 0.3em; 
  padding-bottom: 0px; 

#login-welcome p { 
  margin-top: 0px; 


——————————————————————————————————————————————————— 
这样看来 CSS+DIV的结构的代码较长 而且 开始不习惯这种编写方式 
但它体现了一种结构 
看它的代码很清晰 
结构明确 


To Be Countiue... 
11.8
  评论这张
 
阅读(213)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017