今天是来实训的第六天,感觉虽然实训比较枯燥和累,但是我的制作网页的技术却增长了不少。我可以仿照案例,不用看书,就能写出一个较完整的页面了,感觉还是挺开心的。但是,只做好页面是不够的,还要熟练掌握javascript,实现后台操作。我还需努力,不能骄傲,加油!!
我相信,今天的累与付出,明天就一定会有回报的!
页面样式:
代码实现:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>前台</title>
<script type="text/javascript"></script>
<script src="前台js.js"></script>
<style type="text/css">
.first{
width:920px;
height:18px;
margin:auto;
color:gray;
margin-bottom:3px;
}
.first a{
font-size:11px;
color:gray;
text-decoration:none;
}
.first a:hover{
color:blue;
}
.second{
width:920px;
height:56px;
float:left;
margin-left:171px;
}
.second_left{
float:left;
}
.second_right{
float:left;
background-image:url("都市生活+ 泳池素材/02_图片素材/images/menu.gif");
width:700px;
height:56px;
}
.second_right_count td a{
color:white;
font-size:13px;
text-decoration:none;
margin-left:25px;
line-height:22px;
}
.third{
background-image:url("都市生活+ 泳池素材/02_图片素材/images/pcard1.jpg");
width:920px;
margin-left:171px;
height:112px;
margin-top:50px;
}
.main{
width:920px;
height:458px;
margin-left:171px;
float:left;
}
.main_left{
float:left;
}
.main_left_top,.main_left_bottom{
}
.main_left_bottom_02{
background-color:#D3D3D3;
width:232px;
height:115px;
margin-left:5px;
margin-top:10px;
}
.main_left_bottom_02 td{
font-size:13px;
}
.main_right{
float:left;
margin-left:10px;
width:660px;
height:450px;
}
.main_right_top_02{
background-color:#F4F4EA;
margin-top:7px;
}
.main_right_top_02 a{
text-decoration:none;
color:black;
font-size:13px;
}
.main_right_top_02 a:hover{
color:blue;
text-decoration:underline;
}
.main_right_second{
background-image:url("都市生活+ 泳池素材/02_图片素材/images/pcard2.jpg");
width:660px;
height:84px;
}
.main_right_last_left,.main_right_last_right{
width:325px;
height:163px;
border:1px black solid;
float:left;
margin-right:3px;
}
.main_right_last_left_bottom a:hover{
color:blue;
text-decoration:underline;
}
.bottom{
background-image:url("images/end.jpg");
width:920px;
height:39px;
margin-top:460px;
margin-left:171px;
}
</style>
</head>
<body>
<div class="first">
<a href="#">[发布信息]</a> <a href="#">[进入后台]</a>
<a href="#">设为本页</a> -<a href="#">收藏本页 </a>-<a href="#">联系我们</a>
</div>
<div class="second">
<div class="second_left"><img src="都市生活+ 泳池素材/02_图片素材/images/logo.gif"></div>
<div class="second_right">
<div class="second_right_count">
<table>
<tr>
<td><a href="#" style="margin-left:120px;">首 页</a></td>
<td><a href="#">暂时没有信息</a></td>
<td><a href="#">招商信息</a></td>
<td><a href="#">培训信息</a></td>
<td><a href="#">房屋信息</a></td>
<td><a href="#">求购信息</a></td>
<td></td>
</tr>
<tr>
<td><a href="#" style="margin-left:120px;">招商引资</a></td>
<td><a href="#">公寓信息</a></td>
<td><a href="#">求职信息</a></td>
<td><a href="#">家教信息</a></td>
<td><a href="#">车辆信息</a></td>
<td><a href="#">出售信息</a></td>
<td><a href="#">寻找启示</a></td>
</tr>
</table>
</div>
</div>
</div>
<div class="third"></div>
<!--中间最主要的-->
<div class="main">
<div class="main_left">
<div class="main_left_top" style="color:#0F15BD;font-size:16px;font-weight:bold;padding-top:15px;">
♥日历<br/>
<img src="都市生活+ 泳池素材/02_图片素材/images/rili.png" style="margin-left:28px;">
</div>
<div class="main_left_bottom">
<div class="main_left_bottom_01" style="color:#0F15BD;font-size:16px;font-weight:bold;padding-top:15px;">♥信息快递搜索</div>
<div class="main_left_bottom_02">
<form method="post" name="form1" action="">
<table>
<tr><td></td></tr>
<tr><td></td></tr>
<tr>
<td>关键字:</td>
<td><input type="text" name="keyword" size="15px"></td>
<td></td>
</tr>
<tr>
<td>条 件:</td>
<td>
<select>
<option value="1" selected="selected">--请选择--</option>
<option value="2">百度搜索</option>
<option value="3">Google搜索</option>
</select>
</td>
<td></td>
</tr>
<tr>
<td>搜索类型:</td>
<td>
<input type="radio" name="find">全字匹配<br/>
<input type="radio" name="find">模糊搜索
</td>
<td><input type="button" name="check" value="搜索"></td>
</tr>
</table>
</form>
</div>
</div>
</div>
<div class="main_right" style="float:left;">
<div class="main_right_top">
<div class="main_right_top_01" style="color:#0F15BD;font-size:16px;font-weight:bold;padding-top:15px;">
♥推荐信息 <font size="2" color="#1C81CE">⌈缴费专区⌋</font>
</div>
<div class="main_right_top_02">
<table>
<tr>
<td>⌈求职信息⌋ <a href="#">求职信息标题</a></td>
<td>
</td>
<td>⌈招聘信息⌋ <a href="#">招聘信息标题</a></td>
</tr>
<tr>
<td>⌈培训信息⌋ <a href="#">培训信息标题</a></td>
<td></td>
<td>⌈求购信息⌋ <a href="#">求购信息标题</a></td>
</tr>
<tr>
<td>⌈求职信息⌋ <a href="#">求职信息标题</a></td>
<td></td>
<td>⌈招聘信息⌋ <a href="#">招聘信息标题</a></td>
<tr>
<td>⌈培训信息⌋ <a href="#">培训信息标题</a></td>
<td></td>
<td>⌈求购信息⌋ <a href="#">求购信息标题</a></td>
</tr>
</table>
</div>
</div>
<div class="main_right_second"></div>
<div class="main_right_third"></div>
<div class="main_right_forth" style="color:#0F15BD;font-size:16px;font-weight:bold;padding-top:15px;">
♥最新信息 <font size="2" color="#1C81CE">⌈免费专区⌋</font>
</div>
<div class="main_right_last" style="float:left;">
<div class="main_right_last_left">
<div class="main_right_last_left_top" style="color:white;background-color:#67DC78;height:35px;">
培训信息
</div>
<div class="main_right_last_left_bottom" style="background-color:#F4F4EA;height:128px;font-size:13px;">
<br/><br/><br/>Δ 发布培训信息标题<br/><br/><br/><br/>
<a href="#" style="text-decoration:none;color:black;">更多...</a>
</div>
</div>
<div class="main_right_last_right">
<div class="main_right_last_right_top" style="color:white;background-color:#67DC78;height:35px;">
求职信息
</div>
<div class="main_right_last_right_bottom" style="background-color:#F4F4EA;height:128px;font-size:13px;">
<br/><br/><br/>Δ 发布求职信息标题<br/><br/><br/><br/>
<a href="#" style="text-decoration:none;color:black;">更多...</a>
</div>
</div>
</div>
</div>
</div>
<div class="bottom"></div>
</body>
</html>