今天做了一个学生感言的模块,刚开始是自己去设计的结构,但是结构设计的不是很合理,以至于后面排版的时候比较乱,自己都搞得有点晕头转向的,排了半天,排出了一边的效果:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-cn">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title>网页标题</title>
<meta name="keywords" content="关键字列表" />
<meta name="description" content="网页描述" />
<link rel="stylesheet" type="text/css" href="" />
<style type="text/css">
/*css初始化*/
body,img,ul,li{margin:0px; padding:0px;}
ul,li{list-style:none;}
a:link,a:visited{color:#000;text-decoration:none;}
a:hover{color:red;}
body{font-size:12.5px;background-color:gray;}
/*整个大框架box设置样式*/
.box{
width:630px;
margin:30px auto;
background-color:#fff;
}
.clear{
clear:both;
}
/*设置title的样式*/
.title{
height:34px;
background:url("images/bg01.gif") no-repeat;
font-size:20px;
line-height:34px;
}
.title1{
padding-left:20px;
color:blue;
}
/*设置content1的样式*/
.content1{
width:295px;
}
li{
float:left;
padding:5px 0px;
width:295px;
}
.content1 img,.content .span1{
float:left;
}
.content1 img{
padding:0px 5px;
}
</style>
<script type="text/javascript"></script>
</head>
<body>
<div class="box">
<div class="title">
<span class="title1">学员</span>感言
</div>
<div class="content1">
<ul>
<li class="li1">
<img src="images/img08.jpg" />
<span class="span1">
<img src="images/li06.gif" />
<a href="#">[php学员]钟玲玉:传智,我人生中重要的一站</a>
</span>
</li>
<li class="li2">
<img src="images/li07.gif" />
<a href="#">[php学员]李久扬:90后,月薪10k,一封迟..</a><br /><br />
<a href="#">[php学员]杜宏海:同学到其它机构学完..</a><br /><br />
<a href="#">[php学员]杨*斌:一个小学生的奋斗史..</a><br /><br />
<a href="#">[php学员]黄超:传智播客,让我月薪增长到..</a><br /><br />
<a href="#">[php学员]刘传华:传智,我人生中的转折点..</a>
</li>
</ul>
<div class="clear"></div>
</div>
<div class="content2"></div>
</div>
</body>
</html>
效果图:
后面看了老师的思路,深受启发,后面自己又按照老师的思路重新排了一次,感觉思路清晰了很多:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-cn">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title>网页标题</title>
<meta name="keywords" content="关键字列表" />
<meta name="description" content="网页描述" />
<link rel="stylesheet" type="text/css" href="" />
<style type="text/css">
/*css初始化*/
body,p,ul,li,img{margin:0px;padding:0px;}
ul,li{list-style:none;}
a:link,a:visited{color:#444;text-decoration:none;}
a:hover{color:red;}
body{font-size:12px;background-color:#ccc;}
.blue{color:blue;}
.clear{clear:both;}
.floatL{float:left;}
.floatR{float:right;}
.red{color:red;}
.bold{font-weight:bold;}
/*标题模块*/
.box{
margin:30px auto;
width:630px;
background-color:#fff;
}
.box .title{
width:610px;
height:34px;
background:url("images/bg01.gif") no-repeat;
line-height:34px;
font-size:18px;
padding-left:20px;
}
.box .title .span1{float:left;}
.box .title .span2{float:right;padding-right:10px;}
/*内容模块*/
.box .content{
width:300px;
padding-top:10px;
padding-left:10px;
}
.box .content img{float:left;}
.box .content p{
float:right;
width:180px;
background:url("images/li06.gif") no-repeat 0px 3px;
padding-right:8px;
text-indent:15px;
height:20px;
line-height:20px;
}
.box .content ul{background:url("images/li07.gif") no-repeat 0px 6px;padding-left:20px;}
.box .content li{height:29px;line-height:29px;}
</style>
<script type="text/javascript"></script>
</head>
<body>
<div class="box">
<div class="title">
<span class="span1"><span class="blue">学生</span>感言</span>
<span class="span2"><a href="#">+More</a></span>
</div>
<div class="content floatL">
<img src="images/img08.jpg" />
<p><a href="#">[php学员]钟玲玉:传智,我人生中重要的一站</a></p>
<div class="clear"></div>
<ul>
<li><a href="#"><span class="red">[php学员]</span>杜宏海:同学到其它机构学完..</a></li>
<li><a href="#"><span class="red">[php学员]</span>杨*斌:一个小学生的奋斗史..</a></li>
<li><a href="#"><span class="red">[php学员]</span>黄超:传智播客,让我月薪增长到..</a></li>
<li><a href="#"><span class="red">[php学员]</span>刘传华:传智,我人生中的转折点..</a></li>
</ul>
</div>
<div class="content floatR">
<img src="images/img09.jpg" />
<p><a href="#">[php学员]王艳:美女网编,毕业薪水6500</li></p>
<div class="clear"></div>
<ul>
<li><a href="#"><span class="red">[php学员]</span>吴思阳:传智之旅-真正的升华..</a></li>
<li><a href="#"><span class="red">[php学员]</span>郝建设:短暂时光的改变..</a></li>
<li><a href="#"><span class="red">[php学员]</span>李玉宝:零基础学员,刚毕业就拿..</a></li>
<li><a href="#"><span class="red bold">查看更多学员感言</span></a></li>
</ul>
</div>
<div class="clear"></div>
</div>
</body>
</html>
效果图:
刚开始排版没什么经验,看来还是要多去联系,排的多了就知道怎么做最方便了,要争当一个老司机...
时间： 2024-10-10 06:13:59