码迷,mamicode.com
首页 > 其他好文 > 详细

仿souhu页面设计

时间:2015-03-17 17:25:51      阅读:125      评论:0      收藏:0      [点我收藏+]

标签:

仿搜狐页面设计

 技术分享

Html页面设计代码:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

  <head>

    <title>sohu.html</title>

      

    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">

    <meta http-equiv="description" content="this is my page">

    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

   

    <link rel="stylesheet" type="text/css" href="./sohu.css">

 

  </head>

 

  <body>

    <!-- 最上面的DIV -->

        <div   class="top1">

          <div  class="login">登陆部分</div>

          <div class="indexpage">设为首页部分</div>

          <div  class="lianjie">超链接</div>     

        </div>

     <!-- 中间的DIV -->

          <!-- logo  div -->

     <div   class="headlogo">logo</div>

          <!-- 导航 div -->

     <div class="daohang">daohang</div>

     <!-- 下面的DIV -->

     <div  class="dibu0">

               <div  class="dibu1">1</div>

           <div  class="dibu2">2</div>

           <div  class="dibu3">3</div>    

    </div>

            <div  class="dibu4">4</div>

  </body>

</html>

CSS代码设计

@CHARSET "UTF-8";

body{

       width: 960px;

       margin: 0  auto;

       /*background-color: pink;*/

       border: 1px  solid  red;     

       font-size: 12px;

}

 

 

.top1{

       width: 960px;

       height: 22px;

       background-color: blue;

}

 

/*登陆部分*/

.login{

       width: 416px;

       height: 22px;

       background-color: pink;

       float: left;

}

 

.indexpage{

       width: 105px;

       height: 22px;

       background-color: yellow;

       float: left;

       margin-left: 50px;

}

 

 

.lianjie{

  width: 200px;

  height: 22px;

  float: right;

  background-color: green

}

 

 

.headlogo{

       width: 137px;

       height: 76px;

       background-color: black;

       float: left;

       margin-top: 5px;

}

 

.daohang{

       width: 813px;

       height: 76px;

       background-color: orange;

       float: left;

       margin-left: 10px;

       margin-top: 5px;

}

 

.dibu0{

       width: 770px;

       height: 231px;

       border: 1px  solid  black;

       float: left;

       margin-top: 3px;

}

 

.dibu1{

       width: 135px;

       height: 217px;

       background-color: green;

       float: left;

       margin-left: 2px;

       margin-top: 6px;

}

 

.dibu2{

       width: 452px;

       height: 217px;

       background-color: orange;

       float: left;

       margin-left: 10px;

       margin-top: 6px;

}

 

.dibu3{

       width: 135px;

       height: 217px;

       background-color: green;

       float: left;

       margin-left: 10px;

       margin-top: 6px;

}

 

.dibu4{

       width: 181px;

       height: 231px;

       float: left;

       margin-top: 3px;

       margin-left: 3px;

       border: 1px  solid black;

}

 

仿souhu页面设计

标签:

原文地址:http://www.cnblogs.com/backfish/p/4344588.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!