web实训第六课，随堂检测

最新推荐文章于 2021-12-02 15:51:19 发布

chengqiaoim653576

最新推荐文章于 2021-12-02 15:51:19 发布

阅读量172

点赞数

原文链接：https://my.oschina.net/u/4090663/blog/3035701

版权

一、目标样图：

二、思路分析：

HTML中div分块

网页分为头部、菜单、主体、尾部；
主体分为左、右；
右分为日志、相册；

2.进行css样式编辑

3.发布

代码

HTML：

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<link href="zhangxin.css" type="text/css" rel="stylesheet" />
</head>

<body>
	<div id="box">
    
    	<div id="head">
        	<img src="images/banner.gif" alt="我的图片不见了" />
        </div>
    	
        <div id="caidan">
        	<ul>
            	<li><a href="http://www.baidu.com" target="_blank">首页</a></li>
                <li><a href="#">日志</a></li>
                <li><a href="#">相册</a></li>
                <li><a href="#">留言板</a></li>
                <li><a href="#">关于我</a></li>
            </ul>
        </div>
        
        <div id="main">
        	<div id="left">
            	<h3 class="guanyuwo">>>关于我</h3>
                
                <div id="zuozhe">
                	<img src="images/109395CF4-7.jpg" alt="我的照片"/>
                    <h5 class="zhangmei">张梅</h5>
                    <span>重庆市&nbsp海安区</span>
                    <p>
                    	天微明，冬天的光透过窗，印在左手的无名指上。 回忆的颜色是透明
                        的冷，于是，用窗口透入的薄薄的光暖一暖心。
                    </p>
                </div>
                
            </div>
            	<div id="right">
                	<div id="rizhi">
                    	<h5 class="biaoti">>>日志</h5>  
                        <ul>
                        	<li>&nbspIMAX加长版《变形金刚》（Transformers）亲历简报</li><span>2007-09-25</span>
                            <li>《变形金刚》发烧友的看图说话（多图）</li><span>2007-09-22</span>
                            <li>《反恐王国》（The Kingdom）：生猛的空心弹</li><span>2007-09-22</span>
                            <li>《东方承诺》（Eastern Primises）：不动如山，暗流汹涌</li><span>2007-09-20</span>
                            <li>《妖精的旋律》（Elfen Lied）：日式YY的经典案例</li><span>2007-09-20</span>
                        </ul>
                    </div>
                	 
                     <div id="xiangce">
                    	<h5 class="biaoti">>>相册</h5>  
                        <img src="images/1.jpg"/>
                        <img src="images/2.jpg"/>
                        <img src="images/3.jpg"/>
                       
                    </div> 
	            </div>
        </div>
        
        <div id="wei">
	        
            <span>BLOG公司版权所有 1997-2010</span>
        </div>
            
    </div>
</body>
</html>

css代码：

@charset "utf-8";
/* CSS Document */
*{/*通配符选择器*/
	margin:0px;
	padding:0px;
}
#box{
	/*background-color:#F00;*/
	width:950px;
	height:1000px;
	/*margin:0 auto;*/
	margin:0 auto 0 auto;/*上 右 下 左*/
}
#head{
	background-color:#66F;
	height:255px;
}

#caidan{
	background-color:#FFC;
	height:30px;
}
#caidan ul{
	list-style:none;/*去掉点*/
	float:left;
	height:30px;	
	width:450px;
}
#caidan li{
	line-height:30px;/*设置行居中*/
	float:left;/*可以使列表竖着变横着*/
	margin-left:20px;/*li距离左边那个li的距离*/
}
#caidan a{
	color:#0F0;/*字体颜色*/
	text-decoration:none;/*去掉下划线*/
	font-size:16px;/*字体大小*/
	font-family:"微软雅黑";/*word中常见字体一般都可以写*/
}

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

#left{
	/*background-color:#33C;*/
	height:620px;
	width:300px;
	float:left;/*可以使div横向排排坐*/
}
.guanyuwo{
	height:40px;
	width:290px;
	line-height:40px;/*设置垂直居中，值要和height的值一样*/
	font-size:16px;
	font-weight:bolder;/*加粗，h5本来就是标题，已经加粗过了，不加也可以*/
	border-bottom:#963 solid 2px;
}

#zuozhe img{
	text-align:center;
	border:1px solid #999;/*加边solid实线*/
	padding:8px;/*边与图片有个空白，类似相框*/
	border-radius:10px;/*圆角，值越大，角越园*/
	margin-top:5px;
	margin-left:20px;
}
	
#zuozhe span{
	text-align:center;
	margin:10px;/*一圈的距离*/
	display:block;/*改成盒子元素，可以识别盒子元素的一些属性：margin、border\padding*/ 
	
	font-size:18px;/*字号*/
	padding-top:5px;/*内容距离边的距离-上面的*/
	
}
.zhangmei{
	text-align:center;
	margin:10px;/*一圈的距离*/
	font-size:18px;/*字号*/
	padding-top:5px;/*内容距离边的距离-上面的*/
	background:url(images/girl.gif)   no-repeat;/*不重复的话，变成背景*/
	/*background-image:url(images/icon1.gif) ;
	background-repeat:repeat-x;*/
	background-position:100px center;/*背景点的位置*/
}
#zuozhe p{
	font-family:"微软雅黑";
	font-size:14px;
	color:#C06;
	line-height:35px;/*行高*/
	text-indent:2em;/*首行缩进2字符，em单位随着字的大小占2个字符空*/
}

#right{
	/*background-color:#F3F;*/
	height:620px;
	width:650px;
	float:right;/*可以使div横向排排坐*/
}
#rizhi{
	height:250px;
	margin-top:10px;
	border:#963 solid 1px;
}

#rizhi li{
	line-height:35px;/*设置行居中*/
	float:left;/*可以使列表竖着变横着*/
	width:450px;
	border-bottom:#000 dashed 1px;
	margin-left:10px;/*li距离左边那个li的距离*/
	
	background:url(images/ico4.gif)   no-repeat;/*不重复的话，变成背景*/
	background-position:0px center;/*背景点的位置*/
	padding-left:9px;
	
}
#rizhi span{
	text-align:right;
	display:block;
	line-height:35px;/*设置行居中*/
	float:left;/*可以使列表竖着变横着*/
	width:130px;
	border-bottom:#000 dashed 1px;
	margin-left:1px;/*li距离左边那个li的距离*/
}

.biaoti{
	color:#000;
	background-color:#963;
	height:30px;
	line-height:30px;/*设置垂直居中，值要和height的值一样*/
	font-size:16px;
	font-weight:bolder;/*加粗，h5本来就是标题，已经加粗过了，不加也可以*/
	
}
#rizhi ul{
	list-style:none;/*去掉点*/
	float:left;
	height:200px;	
	width:600px;
}
#rizhi li{
	
}

#xiangce{
	height:330px;
	margin-top:10px;
	border:#963 solid 1px;
}
#xiangce img{
	text-align:center;
	
	padding-right:1px;/*边与图片有个空白，类似相框*/
	margin-top:1px;
}

#wei{
	text-align:center;
	/*background-color:#328048;*/
	height:55px;
	clear:both;/*清空其他的div的float的影响*/
	background:url(images/footer.gif)   no-repeat;/*不重复的话，变成背景*/
	/*background-image:url(images/icon1.gif) ;
	background-repeat:repeat-x;*/
	background-position:center;/*背景点的位置*/
}
#wei span{
	text-align:center;

	display:block;/*改成盒子元素，可以识别盒子元素的一些属性：margin、border\padding*/ 
	
	font-size:19px;/*字号*/
	padding-top:27px;/*内容距离边的距离-上面的*/
}

转载于:https://my.oschina.net/u/4090663/blog/3035701

chengqiaoim653576

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
web实训第六课，随堂检测

一、目标样图：二、思路分析： HTML中div分块网页分为头部、菜单、主体、尾部；主体分为左、右；右分为日志、相册； 2.进行css样式编辑 3.发布代码 HTML： <!DOCTYPE HTML>...
复制链接

扫一扫