DIV+CSS 页面布局--固定宽度且居中的版式-白红宇

DIV+CSS 页面布局--固定宽度且居中的版式

阅读量：6858 次

发布时间：2019-06-26

本文共 2511 字，大约阅读时间需要 8 分钟。

排版思路：固定宽度且居中的版式是网络中最常见的排版方式之一，首先将所有页面内容用一个大<div>包裹起来，指定该<div>的ID为container，这个ID在整个页面中是唯一的。部分代码如下：

body{    margin:0px;    padding:0px;    text-align:center;    background:#e9fbff;}

解释：margin:0px;指定页面四周的空隙都为0。text-align:center；这是整个排版的关键语句，将页面<body>中的所有元素都设置为居中。

#container{    position:relative;    margin:0 auto;    padding:0px;    width:700px;    text-align:left;    background:url(container_bg.jpg)  repeat-y;}

解释：position:relative,相对定位，设置块相对于原来的位置。由于<body>已经设置了居中，因此这里不需要在调整，只是考虑到浏览器的兼容性，加上这句代码。

margin:0 auto; 非常关键的一句，它使得该块与页面的上下边界距离为0，左右则自动调整。这一句代码的完整写法为margin：0 auto 0 auto; 这里采用了简写。

width:700px;设定固定宽度为700px;

text-align:left;用来覆盖<body>中设置的对齐方式，使得#container中的所有内容恢复左对齐。

   固定宽度且居中的格式  
    
       
     
        
      
         
       
          
        
         	body{		margin:0px;		padding:0px;		text-align:center;		background:#e9fbff;	}	#container{		position:relative;		margin:0 auto;		padding:0px;		width:900px;		text-align:left;		background:url(container_bg.jpg)  repeat-y;	}	#banner{		margin:0px;		padding:0px;		width:900px;	}	#banner img{		height:50px;		width:900px;	}	#links{		font-size:20px;		margin:-15px 0px 0px 0px;		padding:0px;		position:relative;		background-color:#afdcff;	}	#links li{		list-style:none;/*无列表符号*/		float:left;/*向右伸展*/		margin:0px 60px 0px 0px;/*相邻列表之间的距离*/	}	/*左侧部分之超链接*/	#links a:link, #nav a:visited{		text-decoration:none;		color:#2a4f6f;		background-color:transparent;	}	#content{		margin:50px 0px 0px 0px;		width:900px;	}	#content_left{		width:150px;		position:absolute;		top:80px;		left:0px;		background-color:#afdcff;	}	#content_left img{		width:100px;		height:100px;				border:1px solid #0073cc;		margin-bottom:5px;		text-align:center;	}	#content_left h3{		text-align:center;		margin-top:0px;	}	#content_left p{		text-align:justify;		padding:0px 10px 0px 10px;	}	#content_right{		position:absolute;		top:80px;		right:0px;		width:750px;		background-color:#afdcff;	}	#content_right h3{		margin-top:10px;		text-align:left;	}	#footer{		width:900px;		text-align:center;	}      
          
          
             
             
            
               
             
                 
              
               
                首页
               
   
              
               
                心情日记
               
   
              
               
                放松
               
   
              
               
                一起走
               
   
              
               
                从明天起
               
   
              
               
                纸飞机
               
   
              
               
                下一站
               
  
             
  
              
               
               
                
                 
                 我的日记本
                
 
               过完整个夏天，忧伤并没有好一些。开车行驶在公路无际无边。唱不完一首歌，疲倦还剩下黑眼圈，感情的世界的伤害在所难免...
 
               
                
                 
                 心情轨迹
                
 
               带走美好的一天,风吹过大地。炫美的世界，霞光点亮星辰，燃起辽远的梦幻，流星划过夜空，忆起逝夜的歌声。
  
                
                依然爱你
 
                过完整个夏天，忧伤并没有好一些。开车行驶在公路无际无边。唱不完一首歌，疲倦还剩下黑眼圈，感情的世界的伤害在所难免...过完整个夏天，忧伤并没有好一些。开车行驶在公路无际无边。唱不完一首歌，疲倦还剩下黑眼圈，感情的世界的伤害在所难免...
 
                旅程
 
                带走  美好的一天
风  吹过大地
炫美的世界
  霞光 点亮星辰
燃起 辽远的梦幻
流星 划过夜空
忆起 逝夜的歌声
 
                诗歌
 
                带走  美好的一天
风  吹过大地
炫美的世界
  霞光 点亮星辰
燃起 辽远的梦幻
流星 划过夜空
忆起 逝夜的歌声
   
                
                 版权所有   @一别经年

转载于:https://my.oschina.net/u/1014520/blog/222161

你可能感兴趣的文章