消息关闭
    暂无新消息!
根据提供的素材制作网页的内容,要求自己根据图片效果制作CSS文件,以在网页中达到相同的效果。

10个回答

︿ 3
<head>
<title>京东秒杀</title>
<style type="text/css">
div{
width:100%;
height:600px;
}
div .container{
width:200px;
height:200px;
float:left;
border:1px solid #CCC;
overflow:hidden;
}
div .Top{
width:1001px;
height:50px;
float:left;
overflow:hidden;
}
.Top img{
 width:100%;
 height:100%;
}
.container  img{
width:55%;
height:55%;
position:relative;
right:-40px;
}
.container .container_top{
text-align:center;
width:25px;
height:25px;
font-size:10px;
color:#000;
background-color:#FF0;
position:relative;
border: 1px solid #000;
right:-10px;

}
.container .container_bottom{
margin:15px 25px;
font-size:10px;
color:#CCC;
}
p{
display:inline;
margin:0px;
text-decoration:line-through;
}
span{
font-size:14px;
color:#F00;
}
</style>
</head>

<body>
<div>
     <div class="Top">
            <img src="t1素材/sprite.png" />
         </div>
     <div class="container">
         <div class="container_top">
             最新装
            </div>
         <img src="t1素材/1.jpg" />
            <div class="container_bottom">
              京东超市 多力 玉米油5L<br />
               <span>$59.8</span><p><$82.00</p>
            </div>
        </div>
        <div class="container">
         <div class="container_top">
             好货
            </div>
         <img src="t1素材/2.jpg" />
            <div class="container_bottom">
              联想(lenovo)F308原装小黑1T移动硬盘 小巧轻薄USB3.0高L<br />
                <span>$379.00</span> <p>$449.00</p>
            </div>
        </div>
        <div class="container">
         <div class="container_top">
             大牌秒
            </div>
         <img src="t1素材/3.jpg" />
            <div class="container_bottom">
             飞利浦(PHILIPS)家用净水器净水机智能显示屏RO反渗透5级过<br />
                  <span>$2499.00</span><p>$3148.00</p>
            </div>
        </div>
        <div class="container">
         <img src="t1素材/4.jpg"  style="position:relative; top:30px;"/>
             <div class="container_bottom"  style="position:relative; top:30px;">
              【京东超市】农夫山泉 引用天然水4L透明装1*6瓶 整箱<br />
                <span>$39.00</span> <p>$49.00</p>
            </div>
        </div>
        <div  style="width:200px;height:200px; float:left;">
         <img src="t1素材/5.jpg" style="width:100%; height:100%; margin:0px;" />
            </div>
        </div>
    </div>
</body>
   
大概就是这样  怎么加上图  最好再给我讲讲设计的思路和实现原理越详细越好  谢谢