html:
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Document</title> | |
| <style> | |
| *{ | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| } | |
| #bg{ | |
| margin: 0px auto; | |
| padding: 50px 0 0 100px; | |
| width: 1120px; | |
| height: 630px; | |
| background: url(./images/bg.png); | |
| } | |
| .logo{ | |
| background: url(./images/logo.png) no-repeat; | |
| height: 50px; | |
| padding-left: 150px; | |
| } | |
| .logo span{ | |
| line-height: 60px; | |
| padding-right: 50px; | |
| color: #685649; | |
| font-size: 16px; | |
| } | |
| .logo .ss{ | |
| width: 260px; | |
| height: 40px; | |
| border: 5px solid gray; | |
| border-radius: 20px; | |
| background: url(./images/f.png) no-repeat center; | |
| background-position: left; | |
| display: inline-block; | |
| line-height: 40px; | |
| padding-bottom: 40px; | |
| } | |
| .rm{ | |
| margin: 0 auto; | |
| background: url(./images/dongtai.jpg) no-repeat center; | |
| width: 1200px; | |
| height: 100px; | |
| } | |
| .one,.two,.three { | |
| margin-left: 265px; | |
| width: 200px; | |
| display: inline-block; | |
| } | |
| .shadow{ | |
| margin: 0 auto; | |
| width: 300px; | |
| height: 5px; | |
| background: url(./images/yinying.jpg); | |
| } | |
| h2{ | |
| width: 284px; | |
| height: 50px; | |
| } | |
| p{ | |
| width: 300px; | |
| font-size: 14px; | |
| color: gray; | |
| } | |
| hr{ | |
| font-size: 5px; | |
| } | |
| .foot{ | |
| margin: 50px auto; | |
| padding: 100px; | |
| width: 1100px; | |
| height: 600px; | |
| background: url(./images/shenghuo.png) no-repeat ; | |
| background-position: center top; | |
| background-image: radial-gradient(ellipse at center,#fff,#d6e4ed); | |
| } | |
| .pic1{ | |
| margin-left: 300px; | |
| margin-bottom: 24px; | |
| } | |
| .foot .pic img{ | |
| padding-right: 20px; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="bg"> | |
| <div class="logo"> | |
| <span>网站首页</span> | |
| <span>床和床垫</span> | |
| <span>卧室纺织品</span> | |
| <span>灯具照明</span> | |
| <span class="ss"> 请输入商品名称</span> | |
| </div> | |
| </div> | |
| <div class="rm"></div> | |
| <div class="one"> | |
| <img src="./images/news1.jpg" alt=""> | |
| <h2>BEST 贝达</h2> | |
| <hr> | |
| <p>将杂乱无章的物品受拿到视线之外，在玻璃柜门后展示自己的心爱之物</p> | |
| <br> | |
| <p class="shadow"></p> | |
| </div> | |
| <div class="two"> | |
| <img src="./images/news2.jpg" alt=""> | |
| <h2>PONG 波昂</h2> | |
| <hr> | |
| <p>当孩子能做大人的事，他们会觉得自己很特别也很重要。这就是我们打造PONG波昂儿童扶手椅 | |
| 的原因。现在你们可以并排坐在一起尽情享受了 | |
| </p> | |
| <p class="shadow"></p> | |
| </div> | |
| <div class="three"> | |
| <img src="./images/news3.jpg" alt=""> | |
| <h2>GUNDE 冈德尔</h2> | |
| <hr> | |
| <p>一把椅子蕴含多少亮点？之一款，就只得以多看几眼。他可以折叠，但也很安全。他可以承受100 | |
| 公斤的重量，但是本身却很轻盈 | |
| </p> | |
| <p class="shadow"></p> | |
| </div> | |
| <div class="foot"> | |
| <img src="./images/shenghuo.png" alt="" class="pic1"> | |
| <div class="pic"> | |
| <img src="./images/img1.jpg" alt=""> | |
| <img src="./images/img2.jpg" alt=""> | |
| <img src="./images/img3.jpg" alt=""> | |
| </div> | |
| </div> | |
| <div> | |
| </div> | |
| <div> | |
| <img src="./images/erweima.png" alt=""> | |
| </div> | |
| </body> | |
| </html> |
css:
style
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
#bg{
margin: 0px auto;
padding: 50px 0 0 100px;
width: 1120px;
height: 630px;
background: url(./images/bg.png);
}
.logo{
background: url(./images/logo.png) no-repeat;
height: 50px;
padding-left: 150px;
}
.logo span{
line-height: 60px;
padding-right: 50px;
color: #685649;
font-size: 16px;
}
.logo .ss{
width: 200px;
border: 5px solid gray;
border-radius: 10px;
background: url(./images/f.png) no-repeat center;
}
