11-1.html



CSS排版

  
  

    

      
date

      

content content content content content content content content content content

content content content content content content content content content content

content content content content content content content content content content

content content content content content content content content content content

content content content content content content content content content content

content content content content content content content content content content

content content content content content content content content content content

content content content content content content content content content content

content content content content content content content content content content

content content content content content content content content content content

content content content content content content content content content content

content content content content content content content content content content

content content content content content content content content content content

content content content content content content content content content content

      

    

    
others

  

  
  


11-2.html


个人主页

    


  
  
  

    


    
我的日记本


    

秋天过半的时候,我搭上了一列火车。我不知道它将要去往的方向,那铁路看上去无休无止地延伸着。


    


    
心情轨迹


    

无意间发见,白云的上面,长着许许多多的蒲公英。它在我面前迅速的长大,风吹过的时候,纷纷升起,飞向无数的远方。


  

  

    

介绍


    

火车经过一个又一个站台,窗外漫卷的蒲公英向我微笑着。我逐渐记起了自己旅行的目的,一直都在下一站的前方。火车缓缓地驶入站台,汽笛声响的那一瞬间,车厢变得透明,我看见,自己和这长长的列车一起,正在漫天飘舞着的蒲公英中飞行。


    

转播设备


    

我现在是在万泉河附近,我们的转播车就在旁边不远的地方,师傅马上将会把车开过来。我们的转播设备非常的先进,具体怎么先进我也说不清,师傅比我清楚,总之就是特别特别先进。好,现在师傅已经把转播车开过来了。……
    


    

旅程


    

夕阳 染红蓝天

    带走 美好的一天

    风 吹过大地

    炫美的世界

    

    霞光 点亮星辰

    燃起 辽远的梦幻

    流星 划过夜空

    忆起 逝夜的歌声

    

    是谁昨夜背上行囊

    唱一首满载风尘的歌

    今夜才又想起拥抱的时刻

    

    独自走的一段旅程

    是否还装满苦涩

    一路风雨飘摇 那坎坷对谁说

    

    来吧看这远处亮起的点点星火

    伸手触摸那写在匆匆旅程的歌

    谁在转过的街口从容挥手

    谁用欢笑和拥抱

    记住这一刻
    


  

  


11-3.html


个人主页

    


  
  
  

    


    
我的日记本


    

秋天过半的时候,我搭上了一列火车。我不知道它将要去往的方向,那铁路看上去无休无止地延伸着。


    


    
心情轨迹


    

无意间发见,白云的上面,长着许许多多的蒲公英。它在我面前迅速的长大,风吹过的时候,纷纷升起,飞向无数的远方。


  

  

    

介绍


    

火车经过一个又一个站台,窗外漫卷的蒲公英向我微笑着。我逐渐记起了自己旅行的目的,一直都在下一站的前方。火车缓缓地驶入站台,汽笛声响的那一瞬间,车厢变得透明,我看见,自己和这长长的列车一起,正在漫天飘舞着的蒲公英中飞行。


    

转播设备


    

我现在是在万泉河附近,我们的转播车就在旁边不远的地方,师傅马上将会把车开过来。我们的转播设备非常的先进,具体怎么先进我也说不清,师傅比我清楚,总之就是特别特别先进。好,现在师傅已经把转播车开过来了。……
    


    

旅程


    

夕阳 染红蓝天

    带走 美好的一天

    风 吹过大地

    炫美的世界

    

    霞光 点亮星辰

    燃起 辽远的梦幻

    流星 划过夜空

    忆起 逝夜的歌声

    

    是谁昨夜背上行囊

    唱一首满载风尘的歌

    今夜才又想起拥抱的时刻

    

    独自走的一段旅程

    是否还装满苦涩

    一路风雨飘摇 那坎坷对谁说

    

    来吧看这远处亮起的点点星火

    伸手触摸那写在匆匆旅程的歌

    谁在转过的街口从容挥手

    谁用欢笑和拥抱

    记住这一刻
    


  

  


11-4.html


左中右

    



  

left






 
     
body{
  margin:0px; padding:0px;
  font-family:arial;
  color:#060;
  background-color:#CCC;
}
#left{
  position:absolute;
  top:0px;
  left:0px;
  margin:0px;
  background:#FFF;
  width:190px;/* 固定宽度 */
}
#middle{
  padding:10px;
  background:#FFF;
  margin:0px 190px 0px 190px;/* 左右空190px */
  margin-top:0px;
}
#right{
  position:absolute;
  top:0px;
  right:0px;
  margin:0px;
  background:#FFF;
  width:190px;/* 固定宽度 */
}
p{
  font-size:12px;
  line-height:22px;
  margin:20px 0px 10px 0px;
  padding:10px;
}
pre{
  font-size:12px;
  line-height:20px;
  margin:20px 0px 10px 0px;
  font-family:arial;
}





11-5.html


块的背景色问题

    


  

    

      
      

经典推荐


      
    

    

      

转播设备


      

我现在是在万泉河附近,我们的转播车就在旁边不远的地方,师傅马上将会把车开过来。我们的转播设备非常非常的先进,具体怎么先进我也说不清,师傅比我清楚,总之就是特别特别的先进。好,现在师傅已经来了。……
      


      

旅程


      

夕阳 染红蓝天

      带走 美好的一天

      风 吹过大地

      炫美的世界

      

      霞光 点亮星辰

      燃起 辽远的梦幻

      流星 划过夜空

      忆起 逝夜的歌声

      

      是谁昨夜背上行囊

      唱一首满载风尘的歌

      今夜才又想起拥抱的时刻

      

      独自走的一段旅程

      是否还装满苦涩

      一路风雨飘摇 那坎坷对谁说

      

      来吧看这远处亮起的点点星火

      伸手触摸那写在匆匆旅程的歌

      谁在转过的街口从容挥手

      谁用欢笑和拥抱

      记住这一刻
      


    

    
  

  


11-6.html


电子相册

    

  

    
    

          
  • 鸣沙山

  •       
  • Trip01

  •       
  • ¥79.9

  •     

  

  

    
    

          
  • 鸣沙山的植被

  •       
  • Trip02

  •       
  • ¥59.7

  •     

  

  

    
    

          
  • 莫高窟的花

  •       
  • Trip03

  •       
  • ¥48.6

  •     

  

  

    
    

          
  • 影子

  •       
  • Trip04

  •       
  • ¥90.5

  •     

  

  

    
    

          
  • 高昌古城

  •       
  • Trip06

  •       
  • ¥74.1

  •     

  

  

    
    

          
  • 磕头机

  •       
  • Trip07

  •       
  • ¥88.2

  •     

  

  

    
    

          
  • 魔鬼城

  •       
  • Trip07

  •       
  • ¥79.9

  •     

  

  

    
    

          
  • 路边的狗尾巴草

  •       
  • Trip08

  •       
  • ¥52.9

  •     

  

  

    
    

          
  • 217国道

  •       
  • Trip09

  •       
  • ¥78.4

  •     

  

  

    
    

          
  • 国道旁的羊

  •       
  • Trip10

  •       
  • ¥76.3

  •     

  

  

    
    

          
  • 217国道的天

  •       
  • Trip11

  •       
  • ¥49.9

  •     

  

  

    
    

          
  • 石头堆

  •       
  • Trip12

  •       
  • ¥50.2

  •     

  

  

    
    

          
  • 喀纳斯河

  •       
  • Trip13

  •       
  • ¥82.5

  •     

  

  

    
    

          
  • 卧龙湾

  •       
  • Trip14

  •       
  • ¥95.6

  •     

  

  

    
    

          
  • 禾木桥

  •       
  • Trip15

  •       
  • ¥82.4

  •     

  

  

    
    

          
  • 禾木的晨光

  •       
  • Trip16

  •       
  • ¥89.5

  •     

  

  

    
    

          
  • 朵朵葵花向太阳

  •       
  • Trip17

  •       
  • ¥83.4

  •     

  

  

    
    

          
  • 额尔齐斯河

  •       
  • Trip18

  •       
  • ¥72.1

  •     

  

  

    
    

          
  • 火烧石

  •       
  • Trip19

  •       
  • ¥73.3

  •     

  

  

    
    

          
  • 甜就一个字

  •       
  • Trip20

  •       
  • ¥69.5

  •     

  


11-6catalog.css
body{
  margin
: 0.8em;
  padding
: 0px;
}
div.pic
{
  width
: 450px; height: 160px;       /* 块的大小 */
  margin
: 6px;
  padding
: 0px;
}
div.pic img
{
  border
: 1px solid #82c3ff;
}
div.pic a.tn
{
  float
: left;              /* 超链接全部环绕 */
}
div.ls
{
  background
: url(framels.jpg) no-repeat left;  /* 水平相片的背景 */
}
div.pt
{
  background
: url(framept.jpg) no-repeat left;  /* 竖直相片的背景 */
}
div.ls img
{                     /* 水平相片 */
  margin
: 0px;
  height
: 90px; width: 135px;
}
div.pt img
{                     /* 竖直相片 */
  margin
: 0px;
  height
: 135px; width: 90px;
}
div.ls a
{
  display
: block;
  padding
: 34px 14px 36px 11px;  /* 将超链接区域扩大到整个背景块 */
}
div.pt a
{
  display
: block;
  padding
: 11px 36px 14px 34px;  /* 将超链接区域扩大到整个背景块 */
}
div.ls a:hover
{
  background
: url(framels_hover.jpg) no-repeat center;
}
div.pt a:hover
{
  background
: url(framept_hover.jpg) no-repeat center;
}
div.pic ul
{               /* 设置相片信息的样式 */
  margin
: 3px 0 0 170px;
  padding
: 0 0 0 0.5em;
  background
: #dceeff;
  border
: 2px solid #a7d5ff;
  font-size
: 12px;
  list-style
: none;
  font-family
: Arial, Helvetica, sans-serif;
}
div.pic li
{
  line-height
: 1.2em;
  margin
: 0;
  padding
: 0;
}
div.pic li.title
{   
  font-weight
: bold;
  padding-top
: 0.4em;
  padding-bottom
: 0.2em;
  border-bottom
: 1px solid #a7d5ff;
  color
: #004586;
}
div.pic li.catno
{
  color
: #0068c9;
  margin
: 0 2px 0 13em;
  padding-left
: 5px;
  border-left
: 1px solid #a7d5ff;  
}
div.pic li.price
{
  color
: #0068c9;
  font-style
: italic;
  margin
: -1.2em 2px 0 18em;
  padding-left
: 5px;
  border-left
: 1px solid #a7d5ff;
  float
: left;
}
11-6ppt.css
body{
  margin
: 0.8em;
  padding
: 0px;
}
div.pic
{
  float
: left;             /* 向左浮动 */
  height
: 160px; width: 160px;     /* 每幅图片块的大小 */
  margin
: 6px;
  padding
: 0px;
}
div.pic img
{
  border
: 1px solid #82c3ff;
}
div.ls
{
  background
: url(framels.jpg) no-repeat center;  /* 水平图片的背景 */
}
div.pt
{
  background
: url(framept.jpg) no-repeat center;  /* 竖直图片的背景 */
}
div.ls img
{                       /* 水平图片 */
  margin
: 0px;
  height
: 90px; width: 135px;
}
div.pt img
{                       /* 竖直图片 */
  margin
: 0px;
  height
: 135px; width: 90px;
}
div.pic ul
{
  display
: none;          /* 幻灯片模式,不显式图片信息 */
}
div.ls a
{
  display
: block;           /* 定义为块元素 */
  padding
: 34px 14px 36px 11px;  /* 将超链接区域扩大到整个背景块 */
}
div.pt a
{
  display
: block;
  padding
: 11px 36px 14px 34px;  /* 将超链接区域扩大到整个背景块 */
}
div.ls a:hover
{             /* 鼠标经过时修改背景图片 */
  background
: url(framels_hover.jpg) no-repeat center;
}
div.pt a:hover
{
  background
: url(framept_hover.jpg) no-repeat center;
}

来源:《精通CSS+DIV网页样式与布局