前端_建材网
预览效果：
源码：
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>建材市场</title>
<link rel="stylesheet" href="css/cssReset.css">
<link rel="stylesheet" href="css/index.css">
<link rel="stylesheet" href="css/common.css">
<link rel="stylesheet" href="css/iconfont.css">
</head>
<body>
<!-- S= 页面的顶部-->
<div class="top">
<div class="top_page">
<div class="top_page_l fl">您好！欢迎来到建材网</div>
<div class="top_page_r fr">
<!-- ul>li*4>a[href='#']-->
<ul>
<li><a href="">建材网首页</a></li>
<li><a href="">我的商务室</a><span class="iconfont icon-xiala"></span></li>
<li><a href="">我的收藏</a><span class="iconfont icon-xiala"></span></li>
<li><a href="">建材服务</a><span class="iconfont icon-xiala"></span></li>
<li><a href="">客服中心</a></li>
<li><a href="">网站导航</a><span class="iconfont icon-xiala"></span></li>
</ul>
</div>
</div>
</div>
<!--E= 页面的顶部-->
<!--S=logo -->
<div class="logo">
<h1 class="logo_l fl">虎康建材</h1><!--把文字和图片放到h1标签中可以更好的向浏览器展示，对浏览器友好 -->
<div class="logo_r fr">
<div class="logo_r_content">
<input type="input" placeholder="请输入关键字" class="logo_r_search fl">
<input type="button" value="搜索" class="logo_r_btn fl">
</div>
</div>
</div>
<!--E=logo -->
<!--S=导航 -->
<div class="nav">
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">建筑材料</a></li>
<li><a href="#">儿童安全座椅</a></li>
<li><a href="#">工艺美术品</a></li>
</ul>
</div>
<!--E=导航 -->
<!--S=banner -->
<div class="banner">
<div class="subNav fl">
<h2>商机市场</h2>
<ul>
<li><img src="image/home-h.png" width="15" height="13"><a href="#">建筑材料</a></li>
<li><img src="image/list-h.png" width="15" height="13"><a href="#">儿童安全座椅</a></li>
<li><img src="image/user-h.png" width="15" height="13"><a href="#">工艺美术品</a></li>
<li><img src="image/home-h.png" width="15" height="13"><a href="#">建筑材料</a></li>
<li><img src="image/list-h.png" width="15" height="13"><a href="#">儿童安全座椅</a></li>
<li><img src="image/user-h.png" width="15" height="13"><a href="#">工艺美术品</a></li>
</ul>
</div>
<div class="ad fl ">
<!-- <img src="image/ad.jpg" width="520" height="210">-->
<div class="images-container">
<img src="image/桌面壁纸1.jpg" width="520" height="210">
<img src="image/桌面壁纸2.jpg" width="520" height="210">
<img src="image/ad.jpg" width="520" height="210">
</div>
<div class="number-list">
<button>1</button>
<button>2</button>
<button>3</button>
</div>
</div>
<script>
let btnlist = document.querySelectorAll(".number-list button");
let container = document.querySelector(".images-container");
for (let i in btnlist) {
btnlist[i].onclick = function (){
container.style.transform = `translate(${-520 * i}px)`;
}
}
</script>
<div class="message fr">
<div class="message_top">
<p class="fw">建材通大众版</p>
<img src="image/pub.png" width="40" height="40" class="fl">
<p class="fl cheap">价格实惠，量身为预算不<br/>多的供应商所设。
<a href="">了解详情</a>
</p>
</div>
<div class="message_bottom">
<p>找信息或者发信息遇到问题</p>
<p class="tel"><img src="image/Tel.svg" width="14" height="20">
0571-89938887</p>
<p class="zixun">
<img src="image/zixun.svg" width="25" height="27">
<span>留言咨询</span>
</p>
</div>
</div>
</div>
<!--E=banner -->
<div class="material">建筑材料</div>
<!--S=具体信息-->
<div class="product">
<div class="product_l fl">
<div class="product_l_top">
<div class="p_l_t_product1 fl">
<div class="buy fl">
<div class="img">
<img src="https://img.alicdn.com/bao/uploaded//i1/2210635202971/i5/O1CN01hSJ9gR2MabXmYS5uj_!!0-item_pic.jpg_468x468q75.jpg_.webp" width="90" height="62">
</div>
<input type="button" value="立即购买" class="btn">
</div>
<div class="explain fl">
<p class="goodWife">好太太晾衣架 铝钛合金 升降双杆</p>
<p class="auto">自动换挡 安全耐用<br/>
稳定性好 抗氧化强</p>
<p class="money">
<span>239.00</span>
<del>￥386.00</del>
</p>
<p class="buyed">
限量
<span>99</span>
件
已售
<span>20</span>
件</p>
</div>
</div>
<div class="p_l_t_product1 fl">
<div class="buy fl">
<div class="img">
<img src="https://img.alicdn.com/bao/uploaded//i2/2211972768042/O1CN01SV3LeU1jC5GgTOxhI_!!0-item_pic.jpg_468x468q75.jpg_.webp" width="90" height="62">
</div>
<input type="button" value="立即购买" class="btn">
</div>
<div class="explain fl">
<p class="goodWife">威尔舒木地板12px厚超级地板</p>
<p class="auto">防滑抗污 清理简单<br/>
扣型紧密 环保健康</p>
<p class="money">
<span>10.00</span>
<del>￥68.00</del>
</p>
<p class="buyed">
限量
<span>100</span>
件
已售
<span>8</span>
件</p>
</div>
</div>
</div>
<div class="product_l_line"></div>
<div class="product_l_top">
<div class="p_l_t_product1 fl">
<div class="buy fl">
<div class="img">
<img src="https://img.alicdn.com/bao/uploaded/i2/45659262/O1CN01QXdACy2II33rOKmLQ_!!45659262.jpg_468x468q75.jpg_.webp" width="90" height="62">
</div>
<input type="button" value="立即购买" class="btn">
</div>
<div class="explain fl">
<p class="goodWife">好艺达高档太空铝三件套3500</p>
<p class="auto">经典的设计风格<br/>
优质的产品品质</p>
<p class="money">
<span>99.00</span>
<del>￥477.00</del>
</p>
<p class="buyed">限量
<span>100</span>
件
已售
<span>251</span>
件</p>
</div>
</div>
<div class="p_l_t_product1 fl">
<div class="buy fl">
<div class="img">
<img src="https://img.alicdn.com/bao/uploaded/i4/2995328284/O1CN01fWdb3m2B47XO8BADx_!!2995328284.jpg_468x468q75.jpg_.webp" width="90" height="62">
</div>
<input type="button" value="立即购买" class="btn">
</div>
<div class="explain fl">
<p class="goodWife">好太太晾衣架 铝钛合金 升降双杆</p>
<p class="auto">自动换挡 安全耐用<br/>
稳定性好 抗氧化强</p>
<p class="money">
<span>239.00</span>
<del>￥386.00</del>
</p>
<p class="buyed">限量
<span>99</span>
件
已售
<span>20</span>
件</p>
</div>
</div>
</div>
<!-- <div class="product_l_bottom"></div>-->
</div>
<div class="product_r fr">
<h2>建材资讯</h2>
<!-- ul>li*12>a[href='#']{贵阳钢材市场7月17日价格行情}-->
<ul>
<li><a href="#">贵阳钢材市场7月17日价格行情</a></li>
<li><a href="#">石家庄钢材市场7月17日价格行情</a></li>
<li><a href="#">南京钢材市场7月17日价格行情</a></li>
<li><a href="#">重庆钢材市场7月17日价格行情</a></li>
<li><a href="#">杭州钢材市场7月17日价格行情</a></li>
<li><a href="#">广州钢材市场7月17日价格行情</a></li>
<li><a href="#">上海钢材市场7月17日价格行情</a></li>
<li><a href="#">鞍山钢材市场7月17日价格行情</a></li>
<li><a href="#">济南钢材市场7月17日价格行情</a></li>
<li><a href="#">贵阳钢材市场7月17日价格行情</a></li>
<li><a href="#">深圳钢材市场7月17日价格行情</a></li>
<li><a href="#">福建钢材市场7月17日价格行情</a></li>
</ul>
</div>
</div>
<!--E=具体信息-->
<!-- <div class="char"></div>-->
<!--S=友情链接-->
<div class="link">
<p class="link_p1">友情链接：中央网盟 9355开心创业网 连锁店加盟 就爱加盟网 百度 谷歌 雅虎 新浪 网易 搜狐 西瓜 凤凰网 新华网 科技网 信息网 渠道网 生意街 连锁加盟网</p>
<p class="link_p2">中央网盟 9355开心创业网 连锁店加盟 就爱加盟网 百度 谷歌 雅虎 新浪 网易 搜狐 西瓜 凤凰网 新华网 科技网 信息网 渠道网 生意街 连锁加盟网</p>
</div>
<!--E=友情链接-->
<!--S=关于我们-->
<div class="about">
<p>关于我们 | 建材通服务 | 网站建设 | 诚聘英才 | 友情链接 | 联系方式 | 隐私声明 | 版权声明 </p>
<p>| 中国建材网 版权所有2000-2022 服务热线：0571-89938887 请与我们联系: Servic@BMlink.com| 建材网会员互动群：153120106 </p>
<p>本站网络实名：中建网本站通用网址：| 中国建材网 | 浙B2-20210159</p>
</div>
<!--E=关于我们-->
</body>
</html>
index.css
@charset "utf-8";
html{
font: 12px '宋体';
}
a{
color: #000;
}
.top{
background-color: #F7F7F7;
height: 26px;
border-bottom: 1px solid #D8D8D8;
}
/*设置版心*/
.top_page{
width: 970px;
height: 26px;
margin: 0 auto;
}
.top_page_l{
line-height: 26px;
}
.top_page_r ul li{
line-height: 26px;
float: left;
padding-right: 10px;
}
.top_page_r ul li span {
/*width: 14px;*/
/*height: 12px;*/
/*background: url("../image/sprite.svg");*/
/*display: inline-block;*/
vertical-align: middle;
}
.logo{
width: 970px;
height: 98px;
margin: 0 auto;
}
.logo_l{
width: 200px;
height: 55px;
margin: 24px 0 19px 9px;
/*background-image: url(../image/01.png);*/
background: url(../image/sprite.jpg) -200px 0;
text-indent: -1000em; /*设置文字相对于图片来说看不见*/
}
.logo_r{
width: 530px;
height: 42px;
border: 1px solid #C9C9C9;
margin-top: 29px;
}
.logo_r_content{
margin: 5px 5px 5px 4px;
}
.logo_r_search{
width: 418px;
height: 28px;
border: 1px solid #C9C9C9;
color: #999999;
}
.logo_r_btn{
width: 99px;
height: 30px;
color: white;
background-color: #2F70D0;
}
.nav{
width: 970px;
height: 25px;
margin: 0 auto;
border-bottom: 2px solid #0266A3;
}
.nav li{
padding: 0 15px;
line-height: 25px;
float: left;
font-size: 14px;
font-weight: bold;/*加粗显示*/
}
.nav li a{
color: #0266A3;
}
.nav li:hover{
background-color: #0266A3;
}
.nav li:hover a {
color: white;
}
.banner{
width: 970px;
height: 210px;
margin: 0 auto;
margin-top: 10px;
}
.subNav{
width: 200px;
height: 210px;
margin-right: 11px;
}
.ad{
width: 520px;
height: 210px;
overflow: hidden;
position: relative;
}
.images-container{
width: 1920px;
height: 320px;
display: flex;
transition: transform 0.3s;
}
/*.images-container img{
width: 640px;
height: 320px;
}*/
/*.images-container:hover{*/
/* transform: translate(-640px);*/
/*}*/
.number-list{
position: absolute;
bottom: 0;
right: 0;
}
.message{
width: 230px;
height: 210px;
}
.subNav h2{
padding-left: 20px;
height: 30px;
line-height: 30px;
font-size: 14px;
font-weight: bold;
background-color: #0266A3;
color: white;
}
.subNav ul{
background-color: #EBF0F6;
height: 180px;
}
.subNav img{
vertical-align: middle;
}
.subNav li{
font-size: 15px;
padding-top: 11px;
margin-left: 9px;
}
.subNav li a{
padding-left: 15px;
}
.message_top{
height: 95px;
border: 1px solid #DDDDDD;
background: #F7FAFF;
margin-bottom: 21px;
}
.message_top .fw{
padding: 7px 0 0 18px;
font-weight: bold;
}
.message_top img{
margin: 20px 10px 0 10px;
}
.message_top .cheap{
margin-top: 25px;
}
.message_bottom{
height: 92px;
background: #F7F7F7;
text-align: center;
}
.message_bottom p:first-child{
font-size: 14px;
padding-top: 11px;
font-weight: bold;
}
.message_bottom .tel{
margin-top: 8px;
color: #3F9CE0;
}
.message_bottom .zixun span{
position: relative;
top: -5px;
}
.material{
width: 950px;
height: 34px;
border-top: 2px solid #C3D7E4;
margin: 0 auto;
margin-top: 14px;
line-height: 34px;
background: #ECF1F7;
font-weight: bold;
padding-left: 20px;
}
.product{
width: 970px;
height: 345px;
margin: 0 auto;
margin-top: 12px;
}
.product .product_l{
width: 738px;
height: 345px;
border: 1px solid #D8D8D8;
}
.product .product_l .product_l_top{
/*width: 738px;因为可以继承父类的宽度，所以此处可设可不设*/
height: 155px;
width: 712px;
padding: 17px 0 0 26px;
}
.product_l_top .p_l_t_product1{
width: 350px;
height: 146px;
}
.product .buy{
width: 99px;
height: 143px;
}
.product .buy .img{
height: 100px;
border: 1px solid #CACACA;
}
.product .buy .img img{
width: 90px;
height: 62px;
margin: 20px 4px 0 3px;
}
.product .buy .btn{
width: 99px;
height: 26px;
background-color: #0A84E3;
color: white;
margin-top: 15px;
}
.product .explain{
width: 250px;
height: 143px;
}
.product .explain .goodWife{
font-size: 14px;
padding:10px 0 0 10px;
}
.product .explain .auto{
color: #863E01;
padding:13px 0 0 15px;
}
.product .explain .money{
padding:23px 0 0 11px;
}
.product .explain .money span{
color: red;
}
.product .explain .buyed{
font-size: 14px;
padding: 22px 0 0 11px;
}
.product .explain .buyed span{
color: firebrick;
}
.product .product_r{
width: 220px;
height: 345px;
border: 1px solid #CCC;
}
.product_l_line{
margin: 0 4px 0 4px;
border-top: 1px solid #CCC;
}
.product_r h2{
height: 28px;
line-height: 28px;
padding-left: 15px;
border-bottom: 1px solid #E0E6F0;
}
.product_r ul{
padding-top: 11px;
padding-left: 26px;
}
.product_r li{
list-style:square;
line-height: 23px;
}
/*.char{*/
/* width: 970px;*/
/* height: 500px;*/
/* */
/*}*/
.link{
width: 970px;
height: 103px;
margin: 0 auto;
margin-top: 11px;
border-top: 1px solid #DDDDDD;
border-bottom: 3px solid #0A7EC3;
color: #666666;
}
.link_p1{
margin-top: 30px;
}
.link_p2{
margin-top: 14px;
margin-left: 61px;
}
.about{
height: 91px;
width: 970px;
margin: 0 auto;
}
.about p{
margin-top: 14px;
text-align: center;
}
common.css
.fl{
float: left;
}
.fr{
float: right;
}
cssReset.css
@charset "utf-8";
html{
color: #000;
background: #FFF;
}
body,
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
form,
fieldset,
input,
textarea,
p,
blockquote,
th,
td {
margin :0;
padding:0;
}
table{
border-collapse: collapse;
border-spacing: 0;
}
a{
text-decoration: none;
}
em,
strong,
b,
i,
u{
font-style: normal;
font-weight: normal;
}
ol,
ul{
list-style: none;
}
h1,
h2,
h3{
font-size: 100%;
font-weight: normal;
}
input,
textarea,
select{
font-family: inherit;
font-size: inherit;
font-weight: inherit;
*font-size:100%;/* to enable resizing for IE*/
}
img{
border: 0 none;
}
input{
border: none;
}
<script>
let btnlist = document.querySelectorAll(".number-list button");
let container = document.querySelector(".images-container");
for (let i in btnlist) {
btnlist[i].onclick = function (){
container.style.transform = `translate(${-520 * i}px)`;
}
}
</script>
把最实用的经验，分享给最需要的读者，希望每一位来访的朋友都能有所收获！
