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

其他 2018-09-23 01:48:11 阅读次数: 0

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

在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";
				}
				
			}
	}

猜你喜欢

转载自blog.csdn.net/zhangqling/article/details/82387915
今日推荐
基于大语言模型的开源知识库问答系统 MaxKB GitHub Star 数量突破 5,000 个！
美国拟限制 AI 大模型出口中国和俄罗斯
苹果将与 OpenAI 达成协议，将 ChatGPT 应用于 iPhone
openKylin 社区生态委员会第六次会议圆满召开
阿里云正式发布通义千问 2.5
Python 3.13 发布首个 Beta：实验性自由线程模式和 JIT、改进交互式解释器
Stack Overflow 拿我的代码去训练 AI 大模型，还封了我的账号
Pop!_OS 的 COSMIC 桌面完成 App Store 上架工作
《2024 年一季度互联网投融资运行情况》研究报告
报告：Django 仍然是 74% 开发者的首选
15 年前上了“FFmpeg 耻辱柱”，今天他还得谢谢咱——腾讯QQPlayer一雪前耻？
TIOBE 5 月榜单：Fortran “复活”进入 Top 10
周排行
记一下去大梅沙的准备（2018-05-26）
Spring 注解 事务
基于HTTP协议的客户端缓存
阿里云rds 备份和还原
[PHP] 几个拖慢 PHP 程序/API 运行速度的点
python 代码风格------------PEP8规则
js控制json生成菜单——自制菜单（一）
将字符串: 'k:1|k1:2|k2:3|k3:4 ' ,处理成 python 字典: {'k':1, 'k1':2, ...}
微信小程序转支付宝小程序
Qt551.窗口滚动条
每日归档
更多
2024-05-13(18)
2024-05-12(0)
2024-05-11(38)
2024-05-10(38)
2024-05-09(35)
2024-05-08(42)
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)
2024-05-04(7)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022