|
|
@@ -5,7 +5,7 @@
|
|
|
<meta charset="UTF-8">
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
<title>Document</title>
|
|
|
- <link rel="stylesheet" href="https://at.alicdn.com/t/c/font_4974983_eksisevw5uf.css">
|
|
|
+ <link rel="stylesheet" href="https://at.alicdn.com/t/c/font_4974983_6u58bd9gz25.css">
|
|
|
<style>
|
|
|
/* css reset 样式重置 把浏览器自带的标签样式去掉 */
|
|
|
* {
|
|
|
@@ -29,6 +29,9 @@
|
|
|
width: 1226px;
|
|
|
margin: 0 auto;
|
|
|
}
|
|
|
+ .gray-bg{
|
|
|
+ background-color: #f5f5f5;
|
|
|
+ }
|
|
|
|
|
|
/* 字体库 */
|
|
|
/* 声明字体 */
|
|
|
@@ -341,21 +344,25 @@
|
|
|
|
|
|
/* 轮播图区域 结束 */
|
|
|
/* 广告区域开始 */
|
|
|
- .ad-content{
|
|
|
+ .ad-content {
|
|
|
height: 170px;
|
|
|
}
|
|
|
- .ad-content .ad-nav{
|
|
|
+
|
|
|
+ .ad-content .ad-nav {
|
|
|
float: left;
|
|
|
}
|
|
|
- .ad-content .ad-img{
|
|
|
+
|
|
|
+ .ad-content .ad-img {
|
|
|
float: right;
|
|
|
}
|
|
|
- .ad-content .ad-nav ul{
|
|
|
+
|
|
|
+ .ad-content .ad-nav ul {
|
|
|
background-color: rgb(95, 87, 80);
|
|
|
width: 234px;
|
|
|
height: 170px;
|
|
|
}
|
|
|
- .ad-content .ad-nav li{
|
|
|
+
|
|
|
+ .ad-content .ad-nav li {
|
|
|
float: left;
|
|
|
font-size: 12px;
|
|
|
color: #fff;
|
|
|
@@ -367,17 +374,19 @@
|
|
|
box-sizing: border-box;
|
|
|
position: relative;
|
|
|
}
|
|
|
- .ad-content .ad-nav li::before{
|
|
|
+
|
|
|
+ .ad-content .ad-nav li::before {
|
|
|
content: "";
|
|
|
display: block;
|
|
|
width: 64px;
|
|
|
height: 1px;
|
|
|
background: rgb(102, 94, 87);
|
|
|
position: absolute;
|
|
|
- top:0;
|
|
|
+ top: 0;
|
|
|
left: 6px;
|
|
|
}
|
|
|
- .ad-content .ad-nav li::after{
|
|
|
+
|
|
|
+ .ad-content .ad-nav li::after {
|
|
|
content: "";
|
|
|
display: block;
|
|
|
width: 1px;
|
|
|
@@ -388,19 +397,46 @@
|
|
|
top: 6px;
|
|
|
|
|
|
}
|
|
|
- .ad-content .ad-nav img{
|
|
|
+
|
|
|
+ .ad-content .ad-nav img {
|
|
|
width: 24px;
|
|
|
height: 24px;
|
|
|
}
|
|
|
- .ad-content .ad-img img{
|
|
|
+
|
|
|
+ .ad-content .ad-img img {
|
|
|
width: 316px;
|
|
|
height: 170px;
|
|
|
}
|
|
|
- .ad-content .ad-img .ad-img-item{
|
|
|
+
|
|
|
+ .ad-content .ad-img .ad-img-item {
|
|
|
float: left;
|
|
|
margin-left: 12px;
|
|
|
}
|
|
|
+
|
|
|
/* 广告区域结束 */
|
|
|
+ /* 工具栏区域 开始 */
|
|
|
+ .tool-content{
|
|
|
+ position: fixed;
|
|
|
+
|
|
|
+ bottom: 30px;
|
|
|
+ left: 50%;
|
|
|
+ margin-left: 613px;
|
|
|
+ }
|
|
|
+ .tool-content ul{
|
|
|
+ border:1px solid black
|
|
|
+ }
|
|
|
+ .tool-content ul li{
|
|
|
+ border-bottom: 1px solid black;
|
|
|
+ }
|
|
|
+ .tool-content ul li:last-child{
|
|
|
+ border-bottom: 0;
|
|
|
+ }
|
|
|
+ /* 工具栏区域结束 */
|
|
|
+ /* 大图广告区域开始 */
|
|
|
+ .big-img img{
|
|
|
+ width: 1226px;
|
|
|
+ }
|
|
|
+ /* 大图广告区域结束 */
|
|
|
</style>
|
|
|
</head>
|
|
|
|
|
|
@@ -566,6 +602,38 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
<!-- 广告区域结束 -->
|
|
|
+ <!-- 工具栏区域 开始 -->
|
|
|
+ <div class="tool-content">
|
|
|
+ <ul>
|
|
|
+ <li>
|
|
|
+ <i class="iconfont icon-phone"></i>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <i class="iconfont icon-user"></i>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <i class="iconfont icon-editor2"></i>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <i class="iconfont icon-kefu"></i>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <i class="iconfont icon-gouwuchekong"></i>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ <!-- 工具栏区域 结束 -->
|
|
|
+
|
|
|
+ <!-- 有背景色区域开始 -->
|
|
|
+ <div class="gray-bg">
|
|
|
+ <!-- 大图广告区域 开始 -->
|
|
|
+ <div class="big-img main-width">
|
|
|
+ <img src="./image/bg3.jpg" alt="">
|
|
|
+ </div>
|
|
|
+ <!-- 大图广告区域 结束 -->
|
|
|
+
|
|
|
+ </div>
|
|
|
+ <!-- 有背景色区域结束 -->
|
|
|
</div>
|
|
|
</body>
|
|
|
|
