layui布局实现一个养老科技公司官网首页效果代码
代码语言：html
所属分类：布局界面
代码描述：layui布局实现一个养老科技公司官网首页效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script>
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/js/layui/css/layui.css">
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/layui/layui.all.js"></script>
<style>
@charset "utf-8";
/* CSS Document*/
blockquote,
body,
button,
dd,
dl,
dt,
fieldset,
form,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
iframe,
input,
legend,
li,
ol,
p,
pre,
td,
textarea,
th,
ul {
margin: 0;
padding: 0;
vertical-align: baseline
}
.clearfix:after,
.clearfix:before {
display: table;
content: ''
}
.clearfix:after {
clear: both;
overflow: hidden
}
.clearfix {
zoom: 1
}
.hidden {
display: none;
}
img {
max-width: 100%;
}
select {
border: none;
-webkit-appearance: none;
-moz-appearance: none
}
iframe {
border: 0
}
input {
box-shadow: none;
}
a,
button,
img,
input,
select {
outline: 0 none
}
input:focus,
textarea:focus,
.layui-input:focus,
.layui-select:focus,
.layui-textarea:focus {
outline: 0;
border: 1px solid #16C09C!important;
box-shadow: 0 0 0 2px rgba(22, 192, 156, 0.2);
}
img {
border: 0 none;
vertical-align: top;
max-width: 100%;
}
em,
i {
font-style: normal
}
ol,
ul {
list-style: none
}
button,
h1,
h2,
h3,
h4,
h5,
h6,
input,
select {
font-size: 100%;
font-family: inherit
}
table {
border-collapse: collapse;
border-spacing: 0
}
input[type='text'] {
-webkit-appearance: none;
}
a {
text-decoration: none;
color: #000;
}
a:hover {
cursor: pointer
}
.fl {
float: left;
}
.fr {
float: right;
}
.padding10 {
padding: 10px;
}
.padding15 {
padding: 15px;
}
.padding20 {
padding: 20px;
}
.padding30 {
padding: 30px;
}
.margin10 {
margin: 10px;
}
.margin15 {
margin: 15px;
}
.margin20 {
margin: 20px;
}
.margin30 {
margin: 30px;
}
.margin40 {
margin: 40px;
}
.margin60 {
margin: 60px;
}
.mtop20 {
margin-top: 20px;
}
.mtop30 {
margin-top: 30px;
}
.paddingTB40 {
padding: 40px 0;
}
::-webkit-scrollbar {
width: 8px;
height: 8px
}
::-webkit-scrollbar-button {
height: 0;
width: 0
}
::-webkit-scrollbar-track {
background-color: #f1f1f1;
-webkit-box-shadow: inset 0 0 1px rgba(0, 0, 0, .1);
box-shadow: inset 0 0 1px rgba(0, 0, 0, .1);
}
::-webkit-scrollbar-thumb {
background: #ccc;
border-radius: 8px;
}
.wzb_flex {
display: -webkit-box;
display: -webkit-flex;
display: flex;
}
.wzb_flex_item {
-webkit-box-flex: 1;
-webkit-flex: 1;
flex: 1;
}
body {
overflow-x: hidden;
color: #000;
/*font-size: 14px;*/
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-style: normal;
font-variant-ligatures: normal;
font-variant-caps: normal;
font-variant-numeric: normal;
font-variant-east-asian: normal;
font-weight: normal;
font-stretch: normal;
font: 14px/1.5 "PingFang SC", "Lantinghei SC", "Microsoft YaHei", "HanHei SC", "Helvetica Neue", "Open Sans", Arial, "Hiragino Sans GB", "微软雅黑", STHeiti, "WenQuanYi Micro Hei", SimSun, sans-serif;
/*font-family: Helvetica Neue, Helvetica, "PingFang SC", "Microsoft YaHei", "Lantinghei SC", "HanHei SC", "Helvetica Neue", "Open Sans", Arial, SimSun, sans-serif;*/
}
#header {
height: 70px;
background: #fff;
}
#header .logo {
position: absolute;
top: 10px;
left: 20px;
}
#header .layui-nav {
position: absolute;
top: 0;
right: 200px;
}
#header .side-nav {
position: absolute;
top: 18px;
right: 20px;
}
#header .side-nav span {
margin: 0 10px;
color: #ccc;
}
#header .layui-nav .layui-nav-item {
line-height: 70px;
height: 70px;
}
#header .logo img {
height: 50px;
}
.layui-nav .layui-this:after,
.layui-nav-bar,
.layui-nav-tree .layui-nav-itemed:after {
height: 0px;
}
#header .layui-nav * {
font-size: 16px;
color: #333
}
#header .layui-nav .layui-this a {
color: #333;
}
#header .layui-nav-child {
background: #fff;
border: 0;
box-shadow: none;
padding: 20px;
}
#header .layui-nav .layui-nav-item .layui-nav-child a {
height: 50px;
line-height: 50px;
}
#header .layui-nav-child a:link,
#header .layui-nav-child a:visited {
background: none;
color: #333;
}
#header .layui-nav-child a:hover,
#header .layui-nav-child a:active {
background: none;
color: #16C09C;
}
#header .layui-nav .layui-nav-item a {
padding: 0 30px;
display: block;
height: 70px;
}
#header .layui-nav .layui-nav-item a:hover {
color: #16C09C;
background: #fff;
}
.banner {
height: 500px;
width: 100%;
overflow: hidden;
}
.banner .layui-carousel {
height: 100%;
}
.description h3 {
font-size: 20px;
color: #000;
}
.description p {
margin-top: 10px;
color: #999;
font-size: 12px;
}
.title {
text-align: center;
font-size: 40px;
padding: 60px 0;
}
.greyBg {
background: rgb(251, 251, 251);
}
.des-info h3 {
font-size: 42px;
padding-top: 100px;
font-weight: bold;
}
.des-info p {
margin-top: 10px;
font-size: 16px;
color: #777;
line-height: 30px;
}
.des-info a {
display: inline-block;
margin-top: 20px;
}
.cell {
border: 1px solid #ebebeb;
/*padding: 20px;*/
position: relative;
border-radius: 2px;
transition: all .3s;
/*text-align: center;*/
}
.cell-top {
background: #fafafa;
padding: 20px 15px;
/*border-left: 2px solid #16C09C;*/
position: relative;
}
.cell-top a {
position: absolute;
right: 10px;
top: 20px;
color: #16C09C;
}
.cell-content li {
padding: 20px 10px;
border-bottom: 1px solid #f9f9f9;
margin: 0 10px;
}
.ico {
margin-right: 10px;
}
.cell-content li:last-child {
border-bottom: none;
}
.cell-content li h4 {
font-size: 16px;
}
.description div.cell-content li img {
height: 60px;
}
.cell:hover {
cursor: pointer;
box-shadow: 0 7px 15px 0 rgba(22, 64, 135, .1);
border: 1px solid #16C09C;
transform: translateY(-10px)
}
.cell span {
font-size: 54px;
color: #16C09C;
}
/*.cell h3{margin-top: 15px;}*/
.layui-tab-brief>.layui-tab-title .layui-this {
color: #16C09C;
}
.con {
margin-right: 30px;
height: 196px;
position: relative;
border-top: 1px solid #ebebeb;
border-bottom: 1px solid #ebebeb;
transition: .3s ease-in-out;
box-sizing: border-box;
}
.step-container .layui-col-md3 {
box-sizing: border-box;
}
.pro:first-child .con {
border-left: 1px solid #ebebeb;
}
.step-container .layui-col-md3:first-child .con {
border-left: 1px solid #ebebeb;
}
.con .lefttop {
position: absolute;
left: -14px;
top: -1px;
width: 27px;
height: 99px;
background: #fff;
border-top: 1px solid #ebebeb;
border-left: 1px solid #ebebeb;
transform: skew(15deg, 0deg);
transition: .3s ease-in-out;
}
.step-container .layui-col-md3:first-child .con .lefttop,
.step-container .layui-col-md3:first-child .con .leftbottom {
display: none;
}
.con .leftbottom {
position: absolute;
left: -14px;
bottom: -1px;
width: 27px;
height: 99px;
background: #fff;
border-bottom: 1px solid #ebebeb;
border-left: 1px solid #ebebeb;
transform: skew(-15deg, 0deg);
transition: .3s ease-in-out;
}
.con .incon {
height: 194px;
overflow: hidden;
position: relative;
z-index: 3;
background: #fff;
padding: 26px 0 0 32px;
box-sizing: border-box;
}
.con .incon .titarea {
overflow: hidden;
height: 26px;
font-size: 0;
margin-bottom: 17px;
}
.con .incon .titarea .step {
display: inline-block;
vertical-align: middle;
width: 45px;
height: 26px;
overflow: hidden;
margin-right: 8px;
}
.con .incon .titarea .tit {
display: inline-block;
height: 26px;
line-height: 26px;
font-size: 18px;
color: #4b5154;
overflow: hidden;
vertical-align: middle;
}
.con .incon .exp {
height: 63px;
font-size: 14px;
color: #73777a;
line-height: 21px;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
margin-bottom: 10px;
}
.con .incon .downarea {}
.con .rightjiao {
position: absolute;
background: #fff;
z-index: 2;
right: -44px;
top: 53px;
display: inline-block;
width: 87px;
height: 87px;
border-top: 1px solid #ebebeb;
border-right: 1px solid #ebebeb;
transform: rotate(45deg) skew(30deg, 30deg);
transition: .3s ease-in-out;
}
.con:hover,
.con:hover .leftbottom,
.con:hover .lefttop,
.con:hover .rightjiao,
.step-container .layui-col-md3:first-child .con:hover {
box-shadow: 0 1px 20px 0 rgba(0, 0, 0, .16);
border-color: #16C09C;
cursor: pointer;
}
.footer {
background: #181818;
width: 100%;
height: auto;
box-sizing: border-box;
font-size: 12px;
color: #9b9ea0;
padding-top: 40px;
}
.footer h3 {
font-size: 14px;
color: #fff;
margin-bottom: 10px;
}
.footer a {
color: #9b9ea0;
}
.footer a:hover {
color: #16C09C
}
.copyright {
text-align: center;
line-height: 40px;
border-top: 1px solid rgba(255, 255, 255, 0.1);
margin-top: 30px;
}
.footer li {
line-height: 26px;
}
.description div img {
height: 70px;
}
.description1 .layui-col-md3 {
padding: 40px 20px;
}
.description1 .layui-col-md3 h3 {
margin-top: 20px;
}
.aboutBanner {
height: 340px;
}
.aboutMe {
margin: 0;
}
.aboutMe .layui-tab-title li {
height: 50px;
line-height: 50px;
font-size: 16px;
padding: 0 40px;
border-radius: 25px;
}
.aboutMe .layui-tab-title {
border-bottom: none;
background: #f2f2f2;
height: 50px;
padding: 50px 0;
}
.aboutMe.layui-tab-brief>.layui-tab-title .layui-this {
background: #16C09C;
box-shadow: 0 2px 8px rgba(22, 192, 156, 0.3);
color: #fff;
}
.aboutMe.layui-tab-brief>.layui-tab-title .layui-this:after {
height: 0;
border: 0;
}
.cover-info {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.5);
text-align: center;
color: #fff;
letter-spacing: 2px;
}
.cover-info h3 {
font-size: 24px;
font-weight: 500;
margin-bottom: 20px;
margin-top: 100px;
}
.cover-info p {
font-size: 34px;
margin-top: 10px;
}
.des-about {
font-size: 16px;
color: #454545;
margin-bottom: 40px;
line-height: 24px;
letter-spacing: 1px;
text-indent: 2em;
}
.erweima {
border: 1px solid #ebebeb;
/*background: #fbfbfb;*/
text-align: center;
padding: 40px 20px;
margin: 0 20px 20px;
}
.erweima img {
width: 160px;
}
.erweima p {
color: #777;
margin-top: 10px;
}
.contact-ads .wzb_flex {
border-bottom: 1px solid #000;
padding: 15px 0;
}
.contact-ads h3 {
font-weight: 700;
font-size: 14px;
}
.contact-ads p {
margin-top: 5px;
font-size: 13px;
color: #999;
}
.ico-contanc {
margin-right: 10px;
}
</style>
</head>
<body>
<div class="layui-layout layui-layout-admin">
<div class="layui-header" id="header">
<div class="logo">
<a><img src="//repo.bfw.wiki/bfwrepo/icon/60ecf359eb0c5.png"></a>
</div>
<div class="side-nav">
<a class="layui-btn layui-btn-primary" href="/admin">登录</a>
<a class="layui-btn layui-btn-normal" href="/reg">免费注册</a>
</div>
<ul class="layui-nav">
<li class="layui-nav-item">
<a href="index.html">首页</a>
</li>
<li class="layui-nav-item">
<a href="#">产品与服务<span class="layui-nav-more"></span></a>
<dl class="layui-nav-child layui-anim layui-anim-upbit">
<dd>
<a href="/admin">控制端APP</a>
</dd>
<dd>
<a href="index">云</a>
</dd>
<dd>
<a href="/smartIndex">增值服务</a>
</dd>
</dl>
</li>
<li class="layui-nav-item">
<a href="#" target="_blank">解决方案</a>
</li>
<li class="layui-nav-item">
<a href="#">开发文档</a>
</li>
<li class="layui-nav-item">
<a href="about.html">关于</a>
</li>
</ul>
</div>
<div class="banner">
<div class="layui-carousel" id="carousel">
<div carousel-item="">
<div style="background: url(//repo.bfw.wiki/bfwrepo/image/5e20635e06347.png) no-repeat center center /cover;"></div>
<div style="background: url(//repo.bfw.wiki/bfwrepo/image/5e2063e79119f.png) no-repeat center center /cover;"></div>
</div>
</div>
</div>
<div class="" style="padding-bottom: 60px;">
<div class="title">
一站式智慧养老智能化平台
</div>
<div class="layui-container">
<div class="layui-row layui-col-space15 description">
<div class="layui-col-md3">
<div class="cell">
<div class="cell-top">
<h3>硬件选配</h3>
<p>
多种硬件解决方案
</p>
<a>更多»</a>
</div>
<div class="cell-content">
<ul>
<li class="wzb_flex">
<div class="ico">
<img src="//repo.bfw.wiki/bfwrepo/images/yanglao/ico1.png">
</div>
<div class="wzb_flex_item">
<h4>智能对讲</h4>
<p>
护士台、床头机、门口机双向通话
</p>
</div>
</li>
<li class="wzb_flex">
<div class="ico">
<img src="//repo.bfw.wiki/bfwrepo/images/yanglao/ico2.png">
</div>
<div class="wzb_flex_item">
<h4>分区报警</h4>
<p>
分区域布置呼叫按钮，报警信息多端推送
</p>
</div>
</li>
<li class="wzb_flex">
<div class="ico">
<img src="//repo.bfw.wiki/bfwrepo/images/yanglao/ico3.png">
</div>
<div class="wzb_flex_item">
<h4>室内定位</h4>
<p>
关键位置布置蓝牙信标，实时定位长者位置，地图展示
</p>
</div>
</li>
<li class="wzb_flex">
<div class="ico">
<img src="//repo.bfw.wiki/bfwrepo/images/yanglao/ico4.png">
</div>
<div class="wzb_flex_item">
<h4>智能居家</h4>
<p>
多种智能安防硬件接入，保障居家安全
</p>
</div>
</li>
</ul>
</div>
</div>
</div>
<div class="layui-col-md3">
<div class="cell">
<div class="cell-top">
<h3>云平台</h3>
<p>
设备管理、运营监管、OEM定制开发等
</p>
<a>更多»</a>
</div>
<div class="cell-content">
<ul>
<li class="wzb_flex">
<div class="ico">
<img src="//repo.bfw.wiki/bfwrepo/images/yanglao/ico5.png">
</div>
<div class="wzb_flex_item">
<h4>设备管理</h4>
<p>
在线设备接入与管理，也可自定义自己的设备
</p>
</div>
</li>
<li class="wzb_flex">
<div class="ico">
<img src="//repo.bfw.wiki/bfwrepo/images/yanglao/ico6.png">
</div>
<div class="wzb_flex_item">
<h4>数据运营</h4>
<p>
设备运营数据、APP运营数据、订单数据等统计分析
</p>
</div>
</li>
<li class="wzb_flex">
<div class="ico">
<img src="//repo.bfw.wiki/bfwrepo/images/yanglao/ico7.png">
</div>
<div class="wzb_flex_item">
<h4>设备采购</h4>
<p>
针对不同的应用场景，一站式智能硬件采购平台
</p>
</div>
</li>
<li class="wzb_flex">
<div class="ico">
<img src="//repo.bfw.wiki/bfwrepo/images/yanglao/ico8.png">
</div>
<div class="wzb_flex_item">
<h4>标准API</h4>
<p>
标准API开发文档，满足您硬件与平台业务对接需求
</p>
</div>
</li>
</ul>
</div>
</div>
</div>
<div class="layui-col-md3">
<div class="cell">
<div class="cell-top">
<h3>智能APP</h3>
<p>
不同业务场景的APP配套使用
</p>
<a>更多»</a>
</div>
<div class="cell-content">
<ul>
<li class="wzb_flex">
<div class="ico">
<img src="//repo.bfw.wiki/bfwrepo/images/yanglao/ico9.png&q.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0