这个网页今天用了我将近3个小时写出来，其他的后面再修改

index部分

<html>
<head>
<link href="first.css" type="text/css" rel="stylesheet">
</head>
<body>
   <div id="top">
    <div id="top_left">

      <p><img src="image/h3.png">
          <br>idusfidfuisfisjdksjfjs<br>
          jfgjfhgjfdshgjdfhodsfi<br>
          skajdakfjdkjfidjfkdsjf<br>

          kdsjfksdjfksdjfksdjfks<br>
          kshfskdfjkajsfkdasjdla<br>
          skldflfkdsjfksjkfdjfkf<br></p>

          <h4>更多>></h4>
    </div>
    <div id="top_right">
      <img src="image/pic1.jpg">
      <img src="image/pic2.jpg">
      <img src="image/pic3.jpg"><br>
      <img src="image/pic4.jpg">
      <img src="image/pic5.jpg">
      <img src="image/pic6.jpg">
    </div>
   </div>

   <div id="main">
      <div id="main_top_left">
         <h2>NEWS新闻动态</h2>
          <ul>
            <li>2104年以来柜子风格的改变</li>
            <li>2104年以来柜子风格的改变</li>
            <li>2104年以来柜子风格的改变</li>
            <li>2104年以来柜子风格的改变</li>
            <li>2104年以来柜子风格的改变</li>
            <li>2104年以来柜子风格的改变</li>
            <li>2104年以来柜子风格的改变</li>
            <li>2104年以来柜子风格的改变</li>
          </ul>
      </div>

     <div id="main_top_middle">
         <h2>Active 活动动态</h2>
         <img src="image/pp1.jpg">
                <h3>7折优惠活动</h3>
                <p>2014年3月-5月之间所有商品给老顾客7折优惠</p>
        <br><br> <img src="image/pp1.jpg">
                <h3>7折优惠活动</h3>
                <p>2014年3月-5月之间所有商品给老顾客7折优惠</p>
      </div>

      <div id="main_top_right">
        <h2>联系我们</h2>
          <img src="image/tel.png"><br>
          dfhjdshfjs <span>世家专业营店</span>
          <br>TEL 00000000
          <br>MAX 0000000000
          <br>ADD **********
      </div>
   </div>

       <div id="footer">
          <p>dagjhjfhdskjfk</p>
          <p>dagjhjfhdskjfkslhafahfjdshafj</p>
     <p>dagjhjfhdskjfkslhafahfjdshafjdasgjdfjdshdfds</p>
       </div>

</body>

</html>

css部分：

*{margin:0px; padding:0px;}
#top{
     width:1110px;
     height:360px;}
#top_left{background-image:url(image/left_bg.jpg);
          background-repeat:no-repeat;
          background-position:0px 0px;
          width:400px;
          height:340px;float:left;
           }

#top_left p{position:absolute;
            left:40px;
            top:50px;}
#top_left h4{float:right;
             position:absolute;
             left:290px;
             top:290px;
             color:red;}

#top_right{float:left;
           width:700px;
           height:340px;
          background-image:url(image/right_bg.jpg);
          background-repeat:no-repeat;
          background-position:right bottom;
          }

#top_right image{padding:5px 50px 5px 50px;}

#middle{
        width:1110px;
        height:190px;
        }
#middle p img{width:1100px;
              }
#middle img a{margin-left:50px}

#main_top_left{border:1px solid red;
               width:300px;
               height:300px;
               margin-top:5px;
               float:left;}
#main_top_left h2{color:red;
                  padding-top:10px;
                  }
#main_top_left ul{margin-top:10px;}
#main_top_left ul li{
                  border:1px dashesd black;
                  }
#main_top_middle{float:left;
                 margin-left:5px;
                 border:1px solid red;
                 margin-top:5px;
                 width:400px;
                 height:300px; }

#main_top_middle img{float:left;
}

#main_top_right {float:left;
                 margin-left:5px;
                 border:1px solid red;
                 margin-top:5px;
                 width:397px;
                 height:300px; }

#main_top_right span{font-size:18px;
                     font-weight:bold;
                     font-family:Arial;
                     }

#footer{witdh:1100px;
        height:70px;
        margin-top:315px;
        background:grey;}
#footer p{text-align:center;}

这个网页今天用了我将近3个小时写出来，其他的后面再修改

猜你喜欢