Demo entry 6644341

1

   

Submitted by 1 on Oct 03, 2017 at 16:00
Language: HTML. Code size: 7.5 kB.

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>梅兰</title>
	<style type="text/css">
     body,ol,ul,h1,h2,h3,h4,h5,h6,p,th,td,dl,dd,form,fieldset,legend,input,textarea,select{margin:0;padding:0; font:12px simsun;} 
    li{list-style:none;} 
    input{
    border:0 none;
    outline-style: none;
    }
    a{
    	text-decoration: none;
    }
    .clearfix:after{
		content: ".";
		display: block;
		height: 0;
		line-height: 0;
		visibility: hidden;
		clear:both;
	}
	.clearfix{
		zoom: 1;
	}
	.fr{
		float:right;
	}
	.fl{
		float: left;
	}
    .nav{
    	height:26px ;
    	border-top:1px solid #D8D8D8 ;
    	border-bottom:1px solid #D8D8D8;
    	background: #F7F7F7;
    }
    .nav-con{
        width: 970px;
    	margin:0 auto;
    }
    .nav-con .nav-con-l{
    	line-height: 26px;
    }
    .nav-con-r ul li{
    	height: 26px;
    	line-height: 26px;
    	float:left;
    	background: url("images/sj.png") no-repeat right;
    }
    .nav-con-r ul li  a{
    	height: 26px;
    	padding:0px 10px;
    	color: #000;
    }
    .header{
    	height: 84px;
    	width: 970px;
    	margin:0 auto;
    }
    .header .logo{
    	height: 84px;

    }
    .header .search{
    	height: 40px;
    	width:528px;
    	border:1px solid #C9C9C9;
    	background: #f5f5f5;
    	margin-top: 30px;
    }
    .search input[type="text"]{
    	height: 26px;
    	border:1px solid #A6A6A6;
    	width:419px;
    	margin:5px 0 0 4px;
    }
    .search input[type="button"]{
        height: 28px;
        width:99px;
        background:url("images/serch.png") no-repeat right;
        vertical-align: center;
    }
    .nav-bottom{
    	height: 28px;
    	width: 970px;
    	margin: 12px auto;
    	border-bottom: 3px solid #0266A2;
    }
    .nav-bottom ul{
    	color:#2F6CAD;
    }
    .nav-bottom ul li{
    	float: left;
    }
    .nav-bottom ul li a{
    	display: inline-block;
    	height:25px;
    	line-height: 25px;
    	padding:0 16px;

    }
    .nav-bottom ul li a:hover{
    	background: #2F6CAD;
	    color: #fff;
    }
    .banner {
        width: 970px;
    	height: 212px;
    	margin:10px auto 15px; 
    }
    .banner .left{
    	width: 200px;
    	height: 210px;
    	background: #EBF0F6;

    }
    .banner .center{
    	width: 520px;
    	height: 210px;
    }
    .left .title {
    	height: 30px;
        line-height: 30px;
    	color: #fff;
    	padding-left: 30px;
    	background: #0266A2;

    }
   
    .left ul li{
    	height: 28px;
    	padding-left: 38px;
    	margin-left:10px;
    }
   
     .left ul li a{
    	color:#000;
    	line-height: 28px;
    	
    }
    
    .left ul li.icon1{
     margin-top: 10px;
     background: url("images/icon_1.png") no-repeat left;
    }
    .left ul li.icon2{
     
     background: url("images/icon_2.png") no-repeat left;
    }
  
 .left ul li.icon3{
    
     background: url("images/icon_3.png") no-repeat left;
    }
  .left ul li.icon4{
  
     background: url("images/icon_4.png") no-repeat left;
    }
  .left ul li.icon5{
    
     background: url("images/icon_5.png") no-repeat left;
    }
  
  .left ul li.icon6{
    
     background: url("images/icon_6.png") no-repeat left;
    }
    .right	.pic1-r{
    width: 229px;
    height: 95px;
    margin-bottom: 10px;
    border-right: 1px solid #DFE6F0;
    }
    .right .pic2-r{
    	width: 229px;
        height: 95px;
       margin-bottom: 10px;
       border-right: 1px solid #DFE6F0;
    }
    .bub{
    	width: 948px;
        height: 34px;
        text-align:left;
        background: #EBF0F6;
        border-top: 2px solid #C3D6E4;
        font-weight: 700;
        font-size: 14px;
        line-height: 34px;
        margin:0 auto 10px;
        padding-left: 22px;
    }
    .pro{
    	width:970px ;
    	height:344px;
    	margin:0 auto;
    }
    
   .pro .pro-l{
   	width: 729px;
   	height: 344px;
       border:1px solid #DFE6F0;
   }
   .pro .pro-l-t{
   	width: 662px;
   	height: 142px;
   	margin: 15px 0 15px 26px;
   }
   .pro-l-t-l{
   	width: 331px;
   	height: 142px;
   }
   .pro-l-t-l-l{
   	width: 99px;
   	height: 143px;
   } 
    .pro-l-t-l-l-i{
    	width: 97px;
    	height: 63px;
    	border:1px solid #CACACA;
    	text-align: center;
    	padding: 19px 0 18px 0;
        }
     .pro-l-t-l-l input[type="button"]{
     	width: 99px;
        height: 26px;
        background: url("images/buy.png");
        margin-top: 12px;
     }

     .pro-l-t-l-r{
     	width:220px ;
     	height:142px;
     	margin-left: 8px;
       
     }
    
     .pro-l-t-l-r .one{
     	height: 38px;
        line-height: 38px;
        
     }
      .pro-l-t-l-r .two{
     	height: 45px;
       
     }
      .pro-l-t-l-r .three{
     	height: 41px;
        
     }
      .pro-l-t-l-r .four{
     	height: 14px;
      
     }
     .pro-l-t-l-r .one,.two,.three,.four{
     	font-size: 14px;
     }
     .pro-l-t-l-r span{
     	color: #FF0000;
     	font-weight: bold;
     }
	</style>
</head>
<body>
<div class="nav">
	<div class="nav-con">
		<div class="nav-con-l fl">
		你好,欢迎来到素材网
		</div>
			<div class="nav-con-r fr">
            <ul>
            		<li> <a href="#">网站导航</a></li>
            		<li><a href="#">客服中心</a></li>
            		<li><a href="#">建材服务</a></li>
            		<li><a href="#">我的收藏</a></li>
            		<li><a href="#">我的商务室</a></li>
            		<li><a href="#">素材网首页</a></li>
            	</ul>	
			</div>
	</div>
</div>
<div class="header">
	<div class="logo fl">
		<img src="images/1.png">
		</div>
			<div class="search fr"><input type="text"><input type="button"></div>
		</div>
		<div class="clearfix"></div>
<div class="nav-bottom">
    <ul>
    	<li><a href="#">首页</a></li>
    	<li><a href="#">建筑材料</a></li>
    	<li><a href="#">儿童安全座椅</a></li>
    	<li><a href="#">工艺美术品</a></li>
    </ul>
</div>
<div class="banner">
	<div class="left fl">
	<div class="title">市场商机</div>
    <ul>
    	<li class="icon1"><a href="#">建筑材料</a></li>
    	<li class="icon2"><a href="#">工艺美术品</a></li>
    	<li class="icon3"><a href="#">建筑材料</a></li>
    	<li class="icon4"><a href="#">儿童安全座椅</a></li>
    	<li class="icon5"><a href="#">工艺美术品</a></li>
    	<li class="icon6"><a href="#">工艺美术品</a></li>
    </ul>
	</div>
		<div class="center fl">
        <img src="images/center.png" alt="">
		</div>
			<div class="right fr">
            <div class="pic1-r">
            <img src="images/center-r.png" alt="">
            </div>
            <div class="pic2-r">
            <img src="images/center-r2.png" alt="">
            </div>
			</div>
</div>
<div class="bub">建筑材料</div>
<div class="pro">
	<div class="pro-l">
	    <div class="pro-l-t">
	    <div class="pro-l-t-l">
	    <div class="pro-l-t-l-l fl">
        <div class="pro-l-t-l-l-i">
        <img src="images/c1.png" alt="">
        </div>
    <input type="button">
    </div>
         <div class="pro-l-t-l-r fl">
         <p class="one">好太太晾衣架 铝钛合金 升降双杆</p>
         <p class="two">自动换挡 安全耐用 <br>稳定性好 抗氧化强	</p>
         <p class="three"><span>239.00</span> <del>¥386.00</del></p>
         <p class="four">限量<span>99</span>件已售出<span>20</span></p>
         </div>
    </div>
    </div>
    </div>
    </div> 
<div class="prol">这是怎么回事呢</div>
</div>
</body>
</html>

This snippet took 0.01 seconds to highlight.

Back to the Entry List or Home.

Delete this entry (admin only).