Skip to content

梁建民 / xinhot

Go to a project
Commit 7ca008a7 by 梁建民
Options

css

parent 194154e4
Expand all
Inline Side-by-side
Showing with 466 additions and 20 deletions
about.html
......@@ -50,11 +50,77 @@
</ul>
</div>
</div>
<div class="pc-about-banner">
<div class="pc-banner-bg">
<i></i>
</div>
<div class="pc-about-con">
<div class="page-width lbBox">
<div class="lineBlock l va-t">
<img src="images/i-9.png" alt="">
</div>
<div class="lineBlock r va-t">
<p class="tit"></p>
<p class="t1">深圳市信宏泰电子有限公司是元器件集成供应商，专业代理全球各大品牌的全系列产品（主推被动器件）;</p>
<p class="t1">主营业务代理销售风华、国巨、华科以及三星等电容器件；厚声、风华、国巨等电阻器件；长电、LRC等二三极管；</p>
<p class="t1">产品主要应用于医疗军工航空设备、电源管理、电脑电器、便携式通讯设备、安防监控等市场领域;</p>
<p class="t1"> 宗旨是：只做<em>&nbsp;原包正品！价格优！服务好！交货快！</em></p>
</div>
<div class="show">
<i class="bg"></i>
<div class="lineBlock mr">
<img src="images/i-10.jpg" alt="" class="im1">
</div>
<div class="lineBlock">
<img src="images/i-11.jpg" alt="" class="im2">
</div>
</div>
</div>
</div>
<div class="pc-about-con-a">
<div class="page-width">
<p class="tit"></p>
</div>
</div>
<div class="pc-about-con-b">
<div class="page-width">
<ul class="clr">
<li>
<i class="icn icn-1 lineBlock va-m"></i>
<p class="lineBlock va-m">原装正品</p>
<b></b>
</li>
<li>
<i class="icn icn-2 lineBlock va-m"></i>
<p class="lineBlock va-m">行业低价</p>
<b></b>
</li>
<li>
<i class="icn icn-3 lineBlock va-m"></i>
<p class="lineBlock va-m">优质服务</p>
<b class="lineBlock va-m"></b>
</li>
<li>
<i class="icn icn-4 lineBlock va-m"></i>
<p class="lineBlock va-m">快速交货</p>
</li>
</ul>
</div>
</div>
<div class="footer">
<div class="page-width clr">
<div class="fl l">
<i class="icn-1 lineBlock va-m"></i>
<span class="va-m">合作商场</span>
<span class="line va-m lineBlock"></span>
<span class="va-m">联系方式：0755-21001152</span>
<b class="lineBlock emptys"></b>
</div>
<div class="fr r">
<p class="lineBlock va-m">@ 深圳市信宏泰电子有限公司 ICP111124154364</p>
<b class="lineBlock emptys"></b>
</div>
</div>
</div>
<script type="text/javascript" src="./js/jquery.min.js"></script>
<script type="text/javascript" src="./js/layui/layui.all.js"></script>
<script type="text/javascript" src="./js/wow.min.js"></script>
......
css/style.scss
......@@ -10,12 +10,12 @@
zoom: 1;
}
@media only screen and (min-width: 1024px) {
.page-width {
width: 80%;
.page-width {
width: 1190px;
margin: 0 auto;
}
.pc-index-head {
}
.pc-index-head {
width: 100%;
height: 80px;
.head-wrap {
......@@ -48,8 +48,9 @@
}
}
}
}
.pc-index-nav {
}
.pc-index-nav {
width: 100%;
height: 40px;
background-color: #07275b;
......@@ -103,8 +104,9 @@
}
}
}
}
.index-banner {
}
.index-banner {
position: relative;
width: 100%;
height: 660px;
......@@ -137,8 +139,9 @@
display: block;
}
}
}
.pc-index-content {
}
.pc-index-content {
.section-1 {
padding: 86px 0 100px 0;
.tit {
......@@ -255,8 +258,9 @@
}
}
}
}
.footer {
}
.footer {
width: 100%;
height: 86px;
background-color: #232323;
......@@ -292,15 +296,15 @@
}
}
}
}
}
.pc-about-banner{
.pc-banner-bg {
position: relative;
width: 100%;
height: 255px;
background: url("../images/banner-2.jpg") no-repeat center;
background-size: cover;
i{
i {
position: absolute;
left: 0;
right: 0;
......@@ -311,10 +315,239 @@
background-size: contain;
margin: -42px auto 0;
}
}
.pc-banner-bg-1 {
position: relative;
width: 100%;
height: 255px;
background: url("../images/banner-3.jpg") no-repeat center;
background-size: cover;
.page-width {
position: relative;
height: 100%;
i {
position: absolute;
left: 8%;
top: 50%;
width: 347px;
height: 84px;
background: url("../images/tit-4.png") no-repeat center;
background-size: contain;
margin: -42px auto 0;
}
}
}
@media only screen and (max-width: 1024px) {
.pc-about-con {
padding: 76px 0 253px 0;
.page-width {
position: relative;
text-align: center;
white-space: nowrap;
.l {
width: 500px;
height: 604px;
border-radius: 2px;
img {
width: 100%;
height: 100%;
}
}
.r {
margin-left: 97px;
white-space: normal;
.tit {
width: 175px;
height: 63px;
background: url("../images/tit-3.jpg") no-repeat center;
background-size: cover;
margin-bottom: 53px;
}
.t1 {
width: 486px;
font-size: 18px;
color: #666666;
line-height: 30px;
margin-bottom: 38px;
text-align: justify;
text-indent: 2em;
em {
color: #0b367e;
font-weight: bold;
}
}
}
.show {
position: absolute;
bottom: -195px;
left: 50%;
margin-left: -139px;
white-space: nowrap;
.im1 {
width: 456px;
height: 248px;
}
.im2 {
width: 318px;
height: 248px;
}
.mr {
margin-right: 12px;
}
.bg {
position: absolute;
top: -23px;
left: -15px;
width: 32px;
height: 116px;
background-color: #c81e1d;
border-radius: 2px;
display: block;
}
}
}
}
.pc-about-con-a {
background-color: #07275a;
padding: 28px 0 45px 0;
.page-width {
.tit {
width: 199px;
height: 61px;
background: url("../images/i-8.png") no-repeat center;
background-size: cover;
margin: 0 auto;
}
}
}
.pc-about-con-b {
.page-width {
ul {
width: 100%;
padding: 97px 0 118px 0;
li {
position: relative;
width: 25%;
float: left;
text-align: center;
margin: 0 auto;
.icn-1 {
background-position: 0 0;
width: 94px;
height: 94px;
}
.icn-2 {
background-position: -111px 0;
width: 95px;
height: 94px;
}
.icn-3 {
background-position: -237px 0;
width: 94px;
height: 94px;
}
.icn-4 {
background-position: -361px 0;
width: 95px;
height: 94px;
}
p {
font-size: 21px;
color: #07275a;
line-height: 18px;
margin-left: 15px;
}
b {
position: absolute;
top: 50%;
margin-top: -23px;
right: 0;
width: 28px;
height: 47px;
background: url("../images/line.png") no-repeat center;
background-size: contain;
display: block;
}
}
}
}
}
.pc-product {
padding: 77px 0 0 0;
.page-width {
.section-a {
.tit {
width: 177px;
height: 63px;
background: url("../images/tit-5.png") no-repeat center;
background-size: contain;
margin: 0 auto;
}
ul {
margin: 100px auto 135px;
li {
width: 150px;
height: 98px;
background-color: #ffffff;
box-shadow: 0px 0px 16px 0px rgba(161, 163, 166, 0.38);
border-radius: 2px;
margin-right: 20px;
float: left;
a {
display: block;
}
}
}
}
.section-b {
.tit {
width: 199px;
height: 61px;
background: url("../images/tit-6.png") no-repeat center;
background-size: contain;
margin: 0 auto;
}
ul {
margin: 66px auto 100px;
white-space: nowrap;
li {
a {
display: block;
.im1 {
width: 390px;
height: 276px;
}
.im2 {
position: relative;
left: -42px;
width: 440px;
height: 276px;
}
.im3 {
position: relative;
left: -84px;
width: 440px;
height: 276px;
}
}
}
}
}
.section-c {
.tit {
width: 175px;
height: 61px;
background: url("../images/tit-7.png") no-repeat center;
background-size: contain;
margin: 0 auto;
}
}
}
}
.layui-carousel-ind {
......
images/ico.png
images/ico.png

5.36 KB | W: | H:

images/ico.png

25.5 KB | W: | H:

images/ico.png
images/ico.png
images/ico.png
images/ico.png
  • 2-up
  • Swipe
  • Onion skin
product.html 0 → 100644
<!DOCTYPE HTML>
<html lang="zh-CN">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta name="keywords" content=""/>
<meta name="description" content=""/>
<meta name="viewport" content="width=device-width; initial-scale=1; maximum-scale=1; user-scalable=0;"/>
<title>关于我们-信宏泰电子</title>
<link rel="stylesheet" type="text/css" href="./css/animate.css">
<link rel="stylesheet" type="text/css" href="./js/layui/css/layui.css">
<link rel="stylesheet" type="text/css" href="./css/style.min.css">
</head>
<body>
<div class="pc-index-head clr">
<div class="head-wrap page-width">
<div class="fl l">
<a href="/" class="lineBlock va-m logo"><img src="./images/logo.png" alt=""></a>
<span class="lineBlock va-m">只做原装正品</span>
<b class="lineBlock emptys"></b>
</div>
<div class="fr r">
<div class="text lineBlock va-m">
<p>信宏泰欢迎您！</p>
<p>7*24h 联系电话：0755-21001152</p>
</div>
<b class="lineBlock emptys"></b>
</div>
</div>
</div>
<div class="pc-index-nav">
<div class="pc-nav-wrap page-width">
<ul class="parent lbBox">
<li class="lineBlock"><a href="javascript:;">首页</a></li>
<li class="lineBlock"><a href="javascript:;">关于我们</a></li>
<li class="lineBlock">
<a href="javascript:;">产品展示</a>
<dl>
<dd><a href="javascript:;">华新</a></dd>
<dd><a href="javascript:;">三星</a></dd>
<dd><a href="javascript:;">厚生</a></dd>
<dd><a href="javascript:;">长电</a></dd>
<dd><a href="javascript:;">乐山</a></dd>
<dd><a href="javascript:;">风华</a></dd>
<dd><a href="javascript:;">国巨</a></dd>
</dl>
</li>
<li class="lineBlock"><a href="javascript:;">联系我们</a></li>
</ul>
</div>
</div>
<div class="pc-banner-bg-1">
<div class="page-width">
<i></i>
</div>
</div>
<div class="pc-product">
<div class="page-width">
<div class="section-a">
<p class="tit"></p>
<ul class="clr">
<li>
<a href="javascript:;">
<img src="images/p1.jpg" alt="">
</a>
</li>
<li>
<a href="javascript:;">
<img src="images/p2.jpg" alt="">
</a>
</li>
<li>
<a href="javascript:;">
<img src="images/p3.jpg" alt="">
</a>
</li>
<li>
<a href="javascript:;">
<img src="images/p4.jpg" alt="">
</a>
</li>
<li>
<a href="javascript:;">
<img src="images/p5.jpg" alt="">
</a>
</li>
<li>
<a href="javascript:;">
<img src="images/p6.jpg" alt="">
</a>
</li>
<li>
<a href="javascript:;">
<img src="images/p7.jpg" alt="">
</a>
</li>
</ul>
</div>
<div class="section-b">
<p class="tit"></p>
<ul class="lbBox">
<li class="lineBlock">
<a href="javascript:;">
<img src="images/pc1.png" alt="" class="im1">
</a>
</li>
<li class="lineBlock">
<a href="javascript:;">
<img src="images/pc2.png" alt="" class="im2">
</a>
</li>
<li class="lineBlock">
<a href="javascript:;">
<img src="images/pc3.png" alt="" class="im3">
</a>
</li>
</ul>
</div>
<div class="section-c">
<p class="tit"></p>
</div>
</div>
</div>
<div class="footer">
<div class="page-width clr">
<div class="fl l">
<i class="icn-1 lineBlock va-m"></i>
<span class="va-m">合作商场</span>
<span class="line va-m lineBlock"></span>
<span class="va-m">联系方式：0755-21001152</span>
<b class="lineBlock emptys"></b>
</div>
<div class="fr r">
<p class="lineBlock va-m">@ 深圳市信宏泰电子有限公司 ICP111124154364</p>
<b class="lineBlock emptys"></b>
</div>
</div>
</div>
<script type="text/javascript" src="./js/jquery.min.js"></script>
<script type="text/javascript" src="./js/layui/layui.all.js"></script>
<script type="text/javascript" src="./js/wow.min.js"></script>
<script type="text/javascript" src="./js/global.js"></script>
</body>
</html>
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment