响应式网页-我的商城作品展示

65 阅读 0 评论 43 点赞

我是靠谱客的博主清脆大神，最近开发中收集的这篇文章主要介绍响应式网页-我的商城作品展示，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

成品展示，在不同设备下显示不同的样式，截图如下图所示，代码见截图之后。

在pad下显示图片

在手机界面下显示结果：

1.html文件

<!DOCTYPE html>
<html lang="en" class="html">
<head>
<meta charset="UTF-8">
<title>微软中国-响应式网页制作</title>
<meta name="viewport" id="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
<link rel="stylesheet" href="reset.css">
<link rel="stylesheet" href="commen.css" type="text/css">
<link rel="stylesheet" href="pad.css" type="text/css" media="(min-width:768px)">
<link rel="stylesheet" href="pc.css" type="text/css" media="(min-width:1000px)">
<script src="commen.js"></script>
</head>
<body>
<div class="gg">
OPPO R17热销机型销售中 <a href="#">立即购买></a>
</div>
<div class="g_header">
<div class="cw clearfix">
<a href="" class="u_logo fl"></a>
<div class="m_header_ico fr">
<a href="#" class="u_help pcshow">支持与帮助</a>
<a href="#" class="u_search iconfont pchiden">&#xe62f;</a>
<span class="u_search_input pcshow"><input type="text" class="iconfont" value="&#xe62f;搜索领哥试试"></span>
<a href="#" class="u_shop iconfont">&#xe622;</a>
<a href="#" class="u_user iconfont pchiden">&#xe633;</a>
<a href="#" class="u_logoin pcshow">登陆</a>
</div>
</div>
</div>
<div class="g_nav">
<div class="g_nav_bd cw clearfix">
<a href="#" class="u_wrlink fl">领哥官方商城</a>
<a href="#" class="u_menu_btn iconfont fr pchiden" id="u_menu_btn" id="u_mb_active">&#xe612;</a>
<div class="g_nav_list" id="g_nav_list">
<ul class="m_nav_list">
<li class="m_drong_menu" id="m_drong_menu"><a href="#" class="iconfont bef">硬件 <span id="de">&#xe62d;</span></a>
<ul class="hide" id="hide">
<li><a href="#">领哥的光辉网页</a></li>
<li><a href="#">电脑与平板</a></li>
<li><a href="#">配件</a></li>
<li><a href="#">虚拟域混合现实</a></li>
<li><a href="#">Xbox+游戏</a></li>
</ul>
</li>
<li class="m_drong_menu" id="m_drong_menu1"><a href="#" class="iconfont">软件 <span id="de1">&#xe62d;</span id="de"></a>
<ul class="hide" id="hide1">
<li><a href="#">领哥简介</a></li>
<li><a href="#">Apps and Windows 10 游戏</a></li>
<li><a href="#">Windows</a></li>
<li><a href="#">Office</a></li>
</ul>
</li>
<li><a href="#">商务教育</a></li>
<li><a href="#">以旧换新</a></li>
<li class="pchiden"><a href="#">支持与帮助</a></li>
<li class="pchiden"><a href="#">客服热线</a></li>
<li class="pcshow fr"><a href="#">订单跟踪</a></li>
<li><a href="#">30天退换货</a></li>
</ul>
</div>
</div>
</div>
<div class="g_banner">
<div class="m_banner">
<div class="cw clearfix">
<div class="m_banner_text">
<h3>6期免息，想购就Go</h3>
<h4>领哥信用卡尊享6期分期免息</h4>
<p>开学季,就要开心购,你还在犹豫什么,赶紧拿起手中的手机订购吧</p>
<p>详情请咨询400-XXXXXX</p>
</div>
<img src="2.jpg" alt="" class="img_auto">
</div>
</div>
<div class="m_banner">
<div class="cw"></div>
</div>
<div class="m_banner">
<div class="cw"></div>
</div>
</div>
<div class="count_nave clearfix">
<div class="gg_1"><a href="#">领哥QQ</a><a href="#">领哥微博</a><a href="#">领哥微信</a><a href="#">关于领哥</a><a href="#">领哥博客</a><a href="#" class="twoline">领哥钱库&<br>广告位招租</a></div>
</div>
<div class="u_tit_info utl">
<div class="u_tit_c1">
<i></i>
<h4>入门精选</h4>
<p>特别适用于刚刚入门的新手</p>
<p>七天包退换，一年保修换</p>
</div>
</div>
<div class="g_list clearfix">
<div class="m_item">
<img src="9.jpg" alt="" class="m_img_auto">
<h5>领哥匠心键盘</h5>
<p>领哥品质，源自古老匠人精神，追溯到3000年前</p>
<div class="m_item_fb">
<span class="u_money">&yen;999</span><a href="#" class="u_buy">立即购买</a>
</div>
</div>
<div class="m_item">
<img src="13.jpg" alt="" class="m_img_auto">
<h5>领哥匠心水杯</h5>
<p>领哥品质，源自古老匠人精神，追溯到3000年前</p>
<div class="m_item_fb">
<span class="u_money">&yen;699</span><a href="#" class="u_buy">立即购买</a>
</div>
</div>
<div class="m_item">
<img src="11.jpg" alt="" class="m_img_auto">
<h5>领哥匠心品质</h5>
<p>领哥品质，源自古老匠人精神，追溯到3000年前</p>
<div class="m_item_fb">
<span class="u_money">&yen;900</span><a href="#" class="u_buy">立即购买</a>
</div>
</div>
<div class="m_item">
<img src="15.jpg" alt="" class="m_img_auto">
<h5>领哥匠心背包</h5>
<p>领哥品质，源自古老匠人精神，追溯到3000年前</p>
<div class="m_item_fb">
<span class="u_money">&yen;678</span><a href="#" class="u_buy">立即购买</a>
</div>
</div>
</div>
<div class="u_tit_info ut2 clearfix">
<div class="u_tit_c2 fr">
<i></i>
<h4>高手必备神器</h4>
<p>特别适用于高手</p>
<p>七天包退换，一年保修换</p>
<p>100年匠心制造</p>
</div>
</div>
<div class="g_list clearfix">
<div class="m_item">
<img src="16.jpg" alt="" class="m_img_auto">
<h5>OPPO匠心手机</h5>
<p>领哥品质，源自古老匠人精神，追溯到3000年前，高手键盘经过99天匠心打磨，让你打字更加顺心，亲民价您值得拥有！</p>
<div class="m_item_fb">
<span class="u_money">&yen;6000</span><a href="#" class="u_buy">立即购买</a>
</div>
</div>
<div class="m_item">
<img src="10.jpg" alt="" class="m_img_auto">
<h5>领哥高手匠心键盘</h5>
<p>领哥品质，源自古老匠人精神，追溯到3000年前，高手键盘经过99天匠心打磨，让你打字更加顺心，亲民价您值得拥有！</p>
<div class="m_item_fb">
<span class="u_money">&yen;8000</span><a href="#" class="u_buy">立即购买</a>
</div>
</div>
<div class="m_item">
<img src="17.jpg" alt="" class="m_img_auto">
<h5>领哥高手匠心笔记本</h5>
<p>领哥品质，源自古老匠人精神，追溯到3000年前，高手键盘经过99天匠心打磨，让你打字更加顺心，亲民价您值得拥有！</p>
<div class="m_item_fb">
<span class="u_money">&yen;12000</span><a href="#" class="u_buy">立即购买</a>
</div>
</div>
<div class="m_item">
<img src="12.jpg" alt="" class="m_img_auto">
<h5>领哥高手匠心水杯</h5>
<p>领哥品质，源自古老匠人精神，追溯到3000年前，高手键盘经过99天匠心打磨，让你打字更加顺心，亲民价您值得拥有！</p>
<div class="m_item_fb">
<span class="u_money">&yen;100</span><a href="#" class="u_buy">立即购买</a>
</div>
</div>
</div>
<div class="g_footer">
<div class="clearfix g_footer_m">
<div class="g_footer_hd">
<dl>
<dt>商品类型<i class="iconfont">&#xe726;</i></dt>
<dd>办公</dd>
<dd>休闲</dd>
<dd>酒水</dd>
<dd>厨房</dd>
</dl>
<dl>
<dt>个人信息<i class="iconfont" id="add2">&#xe726;</i></dt>
<dd>登陆日志</dd>
<dd>购买记录</dd>
<dd>修改密码</dd>
</dl>
<dl>
<dt>关于购买<i class="iconfont" id="add3">&#xe726;</i></dt>
<dd>售后服务</dd>
</dl>
<dl>
<dt>关注我们<i class="iconfont" id="add4">&#xe726;</i></dt>
<dd>微博</dd>
<dd>微信公众号</dd>
</dl>
</div>
</div>
<div class="g_footer_bd clearfix">
<a href="#" class="u_tab_select">中国</a>
<ul class="u_about_info">
<li><a href="#">隐私声明</a></li>
<li><a href="#">商标</a></li>
<li><a href="#">京公安备2018XXXXXXXX号</a></li>
<li><a href="#">2018领哥网</a></li>
</ul>
</div>
</div>
</body>
</html>

2.commen。css文件（phone端）

@charset "utf-8";
*{
margin:0;
padding: 0;
}
body{
font-family: punctuation,PingFangSC-Regular,"Microsoft YaHei","微软雅黑";/*前两个字体为了在苹果界面显示，苹果端用微软雅黑比较难看*/
}
@font-face {
font-family: 'iconfont';
src: url('font/iconfont.eot');
src: url('font/iconfont.eot?#iefix') format('embedded-opentype'),
url('font/iconfont.woff') format('woff'),
url('font/iconfont.ttf') format('truetype'),
url('font/iconfont.svg#iconfont') format('svg');
}
.iconfont{
font-family:"iconfont" !important;
font-size:16px;font-style:normal;
-webkit-font-smoothing: antialiased;
-webkit-text-stroke-width: 0.2px;
-moz-osx-font-smoothing: grayscale;
}
/*顶部广告条*/
.g_header{
background: #f5f5f5;
padding: 12px;
}
.gg{
margin:0 auto;
text-align: center;
height: 33px;
line-height: 33px;
background: #002050;
color: #fff;
font-size: 12px;
}
.gg a{
text-decoration: line-through;
}
.u_logo{
width: 95px;
height: 20px;
background: url(1.jpg) center center / cover no-repeat;
}
.m_header_ico a{
line-height: 20px;
font-size: 20px;
color: #000;
display: inline-block;
margin-left: 25px;
}
.header{
margin:6px 26px 0;
}
html .pcshow{
display: none;
}
/*导航*/
.g_nav{
border-bottom: solid 1px #666;
}
.g_nav .g_nav_bd{
padding: 0 0 0 12px;
height: 50px;
line-height: 50px;
position: relative;
}
.u_wrlink{
font-size: 14px;
}
.u_menu_btn{
width: 48px;
height: 48px;
line-height: 48px;
text-align: center;
border:solid 1px #fff;
font-size: 30px;
}
.u_mb_active{
border-left-color: #666;
border-right-color: #666;
border-bottom: solid 1px #fff;
position: relative;
height: 51px;
}
.g_nav_list{
position: absolute;
left: 0;
top: 100%;
width: 100%;
z-index: 6;
}
.m_nav_list a{
padding-left: 20px;
}
.m_drong_menu a{
display: block;
}
.m_drong_menu span{
display: inline-block;
transition: 0.1s;
}
.g_nav_list{
display: none;
background: #fff;
}
.m_nav_list ul{
display: none;
}
.m_nav_list ul a{
padding-left: 40px;
}
.m_nav_list ul a:hover{
background-color:#67c8f3;
}
/*焦点图部分*/
.m_banner{
background: #EDEDED;
}
.img_auto{
max-width: 100%;
}
.m_banner_text{
padding-left:14px;
}
.m_banner_text h3{
font-size: 24px;
margin-bottom: 0.5em;
}
.m_banner_text h4{
font-size: 20px;
margin-bottom: 0.5em;
}
.m_banner_text p{
font-size: 14px;
line-height: 2;
}
.count_nave{
text-align: center;
margin-top: 10px;
}
.count_nave a{
display: inline-block;
height: 40px;
width: 32%;
margin-left: 1%;
line-height: 40px;
text-align: center;
font-size: 14px;
color: #fff;
background:#0f64ce;
vertical-align: middle;
}
.count_nave a{
margin-bottom: 1%;
}
.count_nave .twoline{
line-height: 20px;
background-color: orange;
}
.u_tit_info{
height: 200px;
background-repeat: no-repeat;
background-position:center right;
}
.utl{
background-image: url(3.jpg);
}
.ut2{
background-image: url(6.jpg);
}
.u_tit_info{
margin-bottom:6px;
}
.u_tit_c1,.u_tit_c2{
height: 100%;
width: 210px;
position: relative;
background: red;
text-align: center;
padding-top:20px;
font-size: 16px;
line-height: 2;
color: #ddd;
}
.u_tit_c2{
background: orange;
}
.u_tit_c1 i{
position: absolute;
top: 0;
left:210px;
width: 0;
height: 0;
border-style: solid;
border-width: 200px 0 0 100px;
border-color: transparent transparent transparent red;
}
.u_tit_c2 i{
position: absolute;
top: 0;
left:-100px;
width: 0;
height: 0;
border-style: solid;
border-width: 0 0 200px 100px;
border-color: transparent transparent orange transparent;
}
/*商品区*/
.g_list{
padding: 40px 20px 20px;
}
.m_item{
border:solid 1px #ccc;
background-color: #fbefec;
text-align: center;
margin-bottom: 20px;
}
.m_item h5{
margin:20px 0;
font-size: 24px;
}
.m_item h5,.m_item p{
padding:0 20px
}
.m_item p{
margin:20px 0;
}
.u_money{
font-size: 24px;
color: #ec5411;
}
.m_item_fb{
padding-bottom:16px;
}
.u_buy{
display: inline-block;
width: 126px;
height: 45px;
line-height: 45px;
font-size: 20px;
color: #fff;
background-color: #ec5411;
margin-left: 10px;
}
.m_img_auto{
max-width: 100%;
}
/*底部*/
.g_footer{
padding: 0 20px 20px;
background-color: #414141;
color: #fff;
}
.g_footer_hd{
margin-bottom: 20px;
}
.g_footer_hd dl{
font-size: 16px;
}
.g_footer_hd dt{
height: 45px;
line-height: 45px;
border-bottom: solid 1px #737373;
}
.g_footer_hd dl dt i{
float: right;
}
.g_footer_hd dl dd{
line-height: 30px;
height: 30px;
margin-left: 25px;
display: none;
}
.u_tab_select{
display: inline-block;
height: 24px;
width: 86px;
background-color: #fff;
line-height: 24px;
text-align: center;
}
.u_about_info{
padding-top:20px;
}
.u_about_info li{
display: block;
line-height: 30px;
}
.u_about_info a{
color: #c8c8c8;
}

3.pad端css

@charset "utf-8";
/*轮播图*/
.img_auto{
width: 53%;
float: left;
}
.m_banner_text{
width: 47%;
float: right;
padding-top:26px;
}
.count_nave div{
float: left;
width: 100%;
}
.count_nave a{
display: inline-block;
height: 40px;
width: 15.5%;
margin-left: 1%;
line-height: 40px;
text-align: center;
font-size: 14px;
color: #fff;
background:#0f64ce;
vertical-align: middle;
}
.count_nave .gg_1{
padding: 12px;
display: inline-block;
margin:0 auto;
}
.g_list{
margin:0 auto;
}
.m_item{
float: left;
width: 48%;
display: inline-block;
box-sizing:border-box;
margin:1%;
}

4.pc端css

@charset "utf-8";
/*输入框*/
.u_search_input{
width: 460px;
height: 28px;
margin-left: 16px;
border: solid 1px #666;
display: inline-block;
}
.u_search_input input{
display: inline-block;
padding: 0 10px;
width: 100%;
height: 100%;
line-height: 28px;
}
html .u_help,html .u_logoin{
font-size: 14px;
}
html .pcshow{
display: inline-block;
}
html .pchiden{
display: none;
}
/*导航*/
.g_nav_list{
margin-left: 155px;
position: static;/*定位方式为默认*/
display: block;
width: auto;
}
.g_nav_list li{
float: left;
}
.g_nav_list a{
padding:0 20px;
}
.m_nav_list li{
position: relative;
margin-right: 10px;
}
.m_drong_menu ul{
position: absolute;
top: 100%;
left: 0;
border:solid 1px #666;
border-top-color: #fff;
background: #fff;
}
.m_drong_menu ul a{
color: #000;
}
.m_nav_list ul{
display: block;
}
.m_nav_list ul a{
white-space: nowrap;
padding: 0 20px;
}
.m_drong_menu li{
float: none;
width: 100%;
}
.cw{
width: 900px;
margin-right: auto;
margin-left: auto;
}
.html .hide{
display: none;
}
.m_banner_text{
padding-top:30px;
}
.m_banner_text h3{
font-size: 26px;
margin-bottom: 0.5em;
}
.m_banner_text h4{
font-size: 22px;
margin-bottom: 0.5em;
}
.m_banner_text p{
font-size: 16px;
line-height: 2;
}
.m_item{
float: left;
width: 24%;
display: inline-block;
box-sizing:border-box;
margin:0.5%;
}
.m_item h5{
font-size: 20px;
}
/*底部样式*/
.g_footer_hd{
text-align: center;
}
.g_footer_hd dl{
float: left;
width: 25%;
}
.g_footer_hd dl dd{
display: block;
}
.g_footer_hd dl i{
display: none;
}
.g_footer_bd{
line-height: 1;
}
.g_footer_hd dt{
border-bottom: none;
font-size: 20px;
}
.g_footer_hd dl dd{
margin-left: 0;
}
.g_footer_m{
padding-bottom: 26px;
}
.u_tab_select{
float: left;
margin-left: 20px;
}
.u_about_info{
float: right;
}
.u_about_info li{
display: inline-block;
margin:0 30px;
}

5.js文件

window.onload=function(){
var cli=document.getElementById("m_drong_menu");
var hide=document.getElementById("hide");
var de=document.getElementById("de");
var cli1=document.getElementById("m_drong_menu1");
var hide1=document.getElementById("hide1");
var de1=document.getElementById("de1");
var cli2=document.getElementById("u_menu_btn");
var de2=document.getElementById("g_nav_list");
cli.onclick=function(){
if (hide.style.display=="none") {
hide.style.display="block";
de.style.transform="rotate(90deg)";
}else{
hide.style.display="none";
de.style.transform="rotate(0deg)";
}
}
cli1.onclick=function(){
if (hide1.style.display=="none") {
hide1.style.display="block";
de1.style.transform="rotate(90deg)";
}else{
hide1.style.display="none";
de1.style.transform="rotate(0deg)";
}
}
cli2.onclick=function(){
if (de2.style.display=="none") {
de2.style.display="block";
cli2.className="u_menu_btn iconfont fr u_mb_active";
}else{
de2.style.display="none";
cli2.className="u_menu_btn iconfont fr pchiden";
}
}
}