Web页面成效

最新推荐文章于 2018-06-08 15:23:42 发布

原创最新推荐文章于 2018-06-08 15:23:42 发布 · 318 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#web

Web 专栏收录该内容

5 篇文章

订阅专栏

通过六天的实训，掌握了网页制作技巧，能独立完成页面设计，接下来的目标是精通JavaScript以实现后台操作。

今天是来实训的第六天，感觉虽然实训比较枯燥和累，但是我的制作网页的技术却增长了不少。我可以仿照案例，不用看书，就能写出一个较完整的页面了，感觉还是挺开心的。但是，只做好页面是不够的，还要熟练掌握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>