web课时作业

• 首页
• 日志
• 相册
• 留言板
• 关于我

   		<div id="left">
        	<!--划分3个区域-->
            <div id="guanyuwo">
           <b><u> >>关于我</u></b>
           
                           </div>
            
            <div id="zuozhe">
            	<img src="../images/109395CF4-7.jpg" alt="我的照片"/>
                <!--文字,span方便对文字的样式修改，一行，不换行-->
                <img src="../images/girl.gif" alt="我的照片"/>
                <span>张梅</span>
            </div>
            <div id="dizhi">
            	重庆市 南岸区
            </div>
            <div id="wenzi">
            	<p>天微明，冬天的光透过窗，印在左手的无名指上。 回忆的颜色是透明的冷，于是，用窗口透入的薄薄的光暖一暖心。</p>
            </div>
        </div>
        
        <div id="right">
        	<!--先分为2个div-->
            <div class="rizhi">
            	<h3><a href="#">>>日志</a></h3>
              
                <p><img1 src="../images/ico4.gif"/>IMAX加长版《变形金刚》（Transformers）亲历简报  <n>2007-09-25</n></p> 

《变形金刚》发烧友的看图说话（多图） 2007-09-22

《反恐王国》（The Kingdom）：生猛的空心弹 2007-09-22

《东方承诺》（Eastern Primises）：不动如山，暗流汹涌 2007-09-20

《妖精的旋律》（Elfen Lied）：日式YY的经典案例 2007-09-20

            </div>
        <div class="xiangce">
        <h3><a href="#">>>相册</a></h3>
        <img src="../images/1.jpg"/><img src="../images/2.jpg"/><img src="../images/3.jpg" />
        </div>
    </div>
    <div id="footer">
		<span>BLOG公司版权所有 1997-2010</span>            
	</div>

@charset "utf-8"; /* CSS Document */ *{/*通配符选择器*/ margin:0px; padding:0px; } #box{

width:950px;
height:255px;

margin:0 auto 0 auto;/*上 右 下 左*/

}
#banner{
background-color:#FFF;
height:255px;
}
#menu{
background-color:#FCEBA5;/用颜色取色器取的/
height:50px;
}
#menu ul{
list-style:none;/去掉点/
float:left;
height:50px;
width:355px;
}

#menu li{
line-height:50px;/设置行居中/
float:left;/可以使列表竖着变横着/
margin-left:20px;/li距离左边那个li的距离/
}
#menu a{
color:#060;/字体颜色/
text-decoration:none;/去掉下划线/
font-size:16px;/字体大小/
font-weight:bold;
font-family:“微软雅黑”;/word中常见字体一般都可以写/
}

#menu a:hover{/当鼠标滑过超链接标签时的样式/
color:#F60;
}

#main{
/background-color:#6F0;/
height:1000px;
}
#left{
/background-color:#33C;/
height:1000px;
width:250px;
float:left;/可以使div横向排排坐/
}
.rizhi{
padding-top:15px;
padding-right:15px;
}

.rizhi h3{
background-color:#CECA9A;
text-decoration:none;
color:#000 !important;
font-weight:bolder;
}

.rizhi p{
color:#666;
border:1px dashed #999;/加边dashed虚线/
}

.rizhi p n{
float:right;
padding-left:2px !important;
}

.xiangce{
padding-top:15px;
padding-right:15px;
}
.xiangce h3{
background-color:#CECA9A;
text-decoration:none;
color:#000 !important;
font-weight:bolder;
}

.xiangce h3 img{
width:180px;
hight:230px;
}

#zuozhe{
padding-top:15px;
padding-left:15px;/上边和左边留点空/
padding-down:15px;
text-align:center;/整个内容水平居中/
}

#guanyuwo{
padding-top:15px;
padding-left:15px;/上边和左边留点空/
}

#dizhi{
padding-top:15px;
color:#000;/字体颜色/
text-decoration:none;/去掉下划线/
font-size:16px;/字体大小/
text-align:center;/整个内容水平居中/
font-family:“黑体”;/word中常见字体一般都可以写/
}
#wenzi{
padding-top:15px;
color:#C00;/字体颜色/
text-decoration:none;/去掉下划线/
font-size:15px;/字体大小/
text-align:left;/整个内容水平居中/
font-family:“黑体”;/word中常见字体一般都可以写/
letter-spacing:3px;
line-height:20px;
}

#right{
background-color:#F3F;
height:1000px;
width:600px;
float:right;/可以使div横向排排坐/
}

#footer{
background-color:#FCEBA5;
height:80px;
}
#footer span{
text-align:center;/水平居中/
display:block;/盒子模型，不然居中属性不管用/
color:#000;
line-height:80px;/垂直居中/
background-image:url(…/images/footer.gif);
}