标签：实战 banner top 必学 height content 案例 margin left
项目首页.psd
项目设计图
头部导航条的制作
资源：
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video{
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
font-weight: normal;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section{
display: block;
}
ol, ul, li{
list-style: none;
}
blockquote, q{
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after{
content: '';
content: none;
}
table{
border-collapse: collapse;
border-spacing: 0;
}
/* custom */
a{
color: #7e8c8d;
text-decoration: none;
-webkit-backface-visibility: hidden;
}
::-webkit-scrollbar{
width: 5px;
height: 5px;
}
::-webkit-scrollbar-track-piece{
background-color: rgba(0, 0, 0, 0.2);
-webkit-border-radius: 6px;
}
::-webkit-scrollbar-thumb:vertical{
height: 5px;
background-color: rgba(125, 125, 125, 0.7);
-webkit-border-radius: 6px;
}
::-webkit-scrollbar-thumb:horizontal{
width: 5px;
background-color: rgba(125, 125, 125, 0.7);
-webkit-border-radius: 6px;
}
html, body{
width: 100%;
font-family: "Arial", "Microsoft YaHei", "黑体", "宋体", "微软雅黑", sans-serif;
}
body{
line-height: 1;
-webkit-text-size-adjust: none;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
html{
overflow-y: scroll;
}
/*清除浮动*/
.clearfix:before,
.clearfix:after{
content: " ";
display: inline-block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix{
*zoom: 1;
}
/*隐藏*/
.dn{
display: none;
}
  |
|
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" type="text/css" href="css/reset.css" />
<style>
/*top 头部模块start*/
.top {
height: 138px;
background: #1483ff;
}
.top_content {
width: 1400px;
height: 100%;
margin: 0 auto;
}
.top_content .logo {
float: left;
margin: 39px 0 0 1px;
}
.top_content .top_link_lists {
height: 100%;
float: left;
margin-left: 209px;
}
.top_content .top_link_lists li {
float: left;
margin: 0 23px;
font-size: 15px;
line-height: 138px;
height: 100%;
}
.top_content .top_link_lists li a {
color: #ffffff;
}
.top_content .top_search {
width: 219px;
height: 51px;
float: right;
margin-right: 5px;
margin-top: 47px;
background: #47adf2;
border-radius: 25.5px;
}
.top_content .top_search input {
width: 141px;
height: 100%;
float: left;
margin-left: 21px;
border: none;
outline: none;
padding: 0;
background: none;
text-indent: 2px;
line-height: 51px;
font-size: 15px;
color: #fff;
}
.top_content .top_search .search_btn {
float: left;
margin-left: 7px;
margin-top: 12px;
}
/*top 头部模块end*/
</style>
</head>
<body>
<!-- top 头部模块 -->
<div class="top">
<div class="top_content">
<a href="#" class="logo">
<img src="img/logo_icon.png">
</a>
<ul class="top_link_lists">
<li>
<a href="#">
首页介绍
</a>
</li>
<li>
<a href="#">产品说明</a>
</li>
<li>
<a href="#">合作发展</a>
</li>
<li>
<a href="#">关于我们</a>
</li>
<li>
<a href="#"> 联系我们</a>
</li>
</ul>
<div class="top_search">
<input value="请输入搜索内容">
<a href="#" class="search_btn">
<img src="img/search_icon.png" />
</a>
</div>
</div>
</div>
<!-- top 头部模块end -->
</body>
</html>
banner切换面板模块制作
资源：
css就是第一章的那个
图片
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" type="text/css" href="css/reset.css" />
<style>
/*top 头部模块start*/
.top {
height: 138px;
background: #1483ff;
}
.top_content {
width: 1400px;
height: 100%;
margin: 0 auto;
}
.top_content .logo {
float: left;
margin: 39px 0 0 1px;
}
.top_content .top_link_lists {
height: 100%;
float: left;
margin-left: 209px;
}
.top_content .top_link_lists li {
float: left;
margin: 0 23px;
font-size: 15px;
line-height: 138px;
height: 100%;
}
.top_content .top_link_lists li a {
color: #ffffff;
}
.top_content .top_search {
width: 219px;
height: 51px;
float: right;
margin-right: 5px;
margin-top: 47px;
background: #47adf2;
border-radius: 25.5px;
}
.top_content .top_search input {
width: 141px;
height: 100%;
float: left;
margin-left: 21px;
border: none;
outline: none;
padding: 0;
background: none;
text-indent: 2px;
line-height: 51px;
font-size: 15px;
color: #fff;
}
.top_content .top_search .search_btn {
float: left;
margin-left: 7px;
margin-top: 12px;
}
/*top 头部模块end*/
/* <!-- banner 横幅 start --> */
.banner {
width: 100%;
height: 818px;
background: url(img/banner_bg.png) no-repeat center center, #1b9ffc;
;
}
.banner .banner_content {
height: 100%;
width: 1400px;
margin: 0 auto;
position: relative;
}
.banner .banner_content .banner_title {
font-size: 50px;
height: 50px;
line-height: 50px;
color: white;
margin-top: 127px;
float: left;
width: 100%;
text-indent: 6px;
}
.banner .banner_content .banner_text {
font-size: 57px;
height: 57px;
line-height: 57px;
color: white;
float: left;
width: 100%;
text-indent: 6px;
margin-top: 21px;
font-weight: bold;
}
.banner .banner_content .banner_line {
height: 4px;
width: 505px;
float: left;
background: white;
margin: 28px 0 0 3px;
}
.banner .banner_content .banner_bottom_title {
font-size: 33px;
line-height: 33px;
height: 33px;
color: white;
float: left;
width: 100%;
text-indent: 6px;
margin-top: 50px;
}
.banner .banner_content .banner_bottom_text {
font-size: 20px;
color: white;
line-height: 32px;
width: 745px;
float: left;
margin-left: 6px;
margin-top: 40px;
}
.banner .banner_content .banner_btn_outNode {
width: 100%;
float: left;
height: 70px;
margin-top: 95px;
margin-left: 4px;
}
.banner .banner_content .banner_btn_outNode .banner_btn {
width: 213px;
height: 100%;
float: left;
border-radius: 107px;
background: url(img/btn_bg.png) repeat-y;
font-size: 23px;
line-height: 70px;
color: white;
text-align: center;
cursor: pointer;
margin-right: 27px;
}
.banner .banner_content .banner_btn_outNode .btn_one {
margin-left: 4px;
}
.banner .banner_content .banner_lists {
width: 100%;
float: left;
height: 27px;
margin-top: 69px;
text-indent: -1px;
}
.banner .banner_content .banner_lists li {
float: left;
height: 20px;
line-height: 20px;
font-size: 20px;
color: white;
margin-left: 43px;
cursor: pointer;
position: relative;
/* 用最高的做定位，默认往下4px */
top: 4px;
}
.banner .banner_content .banner_lists .active {
font-size: 27px;
line-height: 27px;
color: #fdc235;
height: 27px;
top: 0;
}
.banner .banner_content .banner_position {
width: 80px;
height: 10px;
position: absolute;
left: 50%;
bottom: 29px;
margin-left: -40px;
}
.banner .banner_content .banner_position li {
width: 10px;
height: 10px;
float: left;
background: #f0f0f0;
border-radius: 50%;
margin-right: 13px;
cursor: pointer;
}
.banner .banner_content .banner_position li.active {
background: #fe672d;
}
.banner .banner_content .banner_position .end {
margin-right: 0;
}
/* <!-- banner 横幅 end --> */
</style>
</head>
<body>
<!-- top 头部模块 -->
<div class="top">
<div class="top_content">
<a href="#" class="logo">
<img src="img/logo_icon.png">
</a>
<ul class="top_link_lists">
<li>
<a href="#">
首页介绍
</a>
</li>
<li>
<a href="#">产品说明</a>
</li>
<li>
<a href="#">合作发展</a>
</li>
<li>
<a href="#">关于我们</a>
</li>
<li>
<a href="#"> 联系我们</a>
</li>
</ul>
<div class="top_search">
<input value="请输入搜索内容">
<a href="#" class="search_btn">
<img src="img/search_icon.png" />
</a>
</div>
</div>
</div>
<!-- top 头部模块end -->
<!-- banner 横幅 start -->
<div class="banner">
<div class="banner_content">
<div class="banner_title">
MUKE WANG
</div>
<div class="banner_text">
商务金融数据分析
</div>
<div class="banner_line"></div>
<div class='banner_bottom_title'>
财经报道/第一手股市新闻资讯
</div>
<div class="banner_bottom_text">
I AM A FREELANCE DESIGNER, AND OFTEN RECEIVE SOME OUTSOURCING SERVICES. BEFORE I MEET THE PHOTOGRAPHER, I NEED TO CREATE EACH PICTURE BY MYSELF, WHICH IS TIME-CONSUMING.
</div>
<div class="banner_btn_outNode">
<div class="banner_btn btn_one">
立即注册
</div>
<div class="banner_btn">
申请合作
</div>
</div>
<ul class='banner_lists'>
<li>
01
</li>
<li class='active'>
02
</li>
<li>
03
</li>
<li>
04
</li>
</ul>
<ol class='banner_position'>
<li class='active'></li>
<li></li>
<li></li>
<li class='end'></li>
</ol>
</div>
</div>
<!-- banner 横幅 end -->
</body>
</html>
功能性图标文字模块制作
资源
css：第一章相同
图片：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" type="text/css" href="css/reset.css" />
<style>
/*top 头部模块start*/
.top {
height: 138px;
background: #1483ff;
}
.top_content {
width: 1400px;
height: 100%;
margin: 0 auto;
}
.top_content .logo {
float: left;
margin: 39px 0 0 1px;
}
.top_content .top_link_lists {
height: 100%;
float: left;
margin-left: 209px;
}
.top_content .top_link_lists li {
float: left;
margin: 0 23px;
font-size: 15px;
line-height: 138px;
height: 100%;
}
.top_content .top_link_lists li a {
color: #ffffff;
}
.top_content .top_search {
width: 219px;
height: 51px;
float: right;
margin-right: 5px;
margin-top: 47px;
background: #47adf2;
border-radius: 25.5px;
}
.top_content .top_search input {
width: 141px;
height: 100%;
float: left;
margin-left: 21px;
border: none;
outline: none;
padding: 0;
background: none;
text-indent: 2px;
line-height: 51px;
font-size: 15px;
color: #fff;
}
.top_content .top_search .search_btn {
float: left;
margin-left: 7px;
margin-top: 12px;
}
/*top 头部模块end*/
/* <!-- banner 横幅 start --> */
.banner {
width: 100%;
height: 818px;
background: url(img/banner_bg.png) no-repeat center center, #1b9ffc;
;
}
.banner .banner_content {
height: 100%;
width: 1400px;
margin: 0 auto;
position: relative;
}
.banner .banner_content .banner_title {
font-size: 50px;
height: 50px;
line-height: 50px;
color: white;
margin-top: 127px;
float: left;
width: 100%;
text-indent: 6px;
}
.banner .banner_content .banner_text {
font-size: 57px;
height: 57px;
line-height: 57px;
color: white;
float: left;
width: 100%;
text-indent: 6px;
margin-top: 21px;
font-weight: bold;
}
.banner .banner_content .banner_line {
height: 4px;
width: 505px;
float: left;
background: white;
margin: 28px 0 0 3px;
}
.banner .banner_content .banner_bottom_title {
font-size: 33px;
line-height: 33px;
height: 33px;
color: white;
float: left;
width: 100%;
text-indent: 6px;
margin-top: 50px;
}
.banner .banner_content .banner_bottom_text {
font-size: 20px;
color: white;
line-height: 32px;
width: 745px;
float: left;
margin-left: 6px;
margin-top: 40px;
}
.banner .banner_content .banner_btn_outNode {
width: 100%;
float: left;
height: 70px;
margin-top: 95px;
margin-left: 4px;
}
.banner .banner_content .banner_btn_outNode .banner_btn {
width: 213px;
height: 100%;
float: left;
border-radius: 107px;
background: url(img/btn_bg.png) repeat-y;
font-size: 23px;
line-height: 70px;
color: white;
text-align: center;
cursor: pointer;
margin-right: 27px;
}
.banner .banner_content .banner_btn_outNode .btn_one {
margin-left: 4px;
}
.banner .banner_content .banner_lists {
width: 100%;
float: left;
height: 27px;
margin-top: 69px;
text-indent: -1px;
}
.banner .banner_content .banner_lists li {
float: left;
height: 20px;
line-height: 20px;
font-size: 20px;
color: white;
margin-left: 43px;
cursor: pointer;
position: relative;
/* 用最高的做定位，默认往下4px */
top: 4px;
}
.banner .banner_content .banner_lists .active {
font-size: 27px;
line-height: 27px;
color: #fdc235;
height: 27px;
top: 0;
}
.banner .banner_content .banner_position {
width: 80px;
height: 10px;
position: absolute;
left: 50%;
bottom: 29px;
margin-left: -40px;
}
.banner .banner_content .banner_position li {
width: 10px;
height: 10px;
float: left;
background: #f0f0f0;
border-radius: 50%;
margin-right: 13px;
cursor: pointer;
}
.banner .banner_content .banner_position li.active {
background: #fe672d;
}
.banner .banner_content .banner_position .end {
margin-right: 0;
}
/* <!-- banner 横幅 end --> */
/* mukeText 文字功能性模板start */
.mukeText {
width: 1400px;
height: 221px;
margin: 0 auto;
}
.mukeText .mukeText_lists {
width: 100%;
height: 100%;
}
.mukeText .mukeText_lists li {
float: left;
width: 466.5px;
height: 100%;
}
.mukeText .mukeText_lists li .mukeText_lists_img {
float: left;
margin-top: 74px;
}
.mukeText .mukeText_lists li .mukeText_lists_img_two {
margin-top: 82px;
margin-left: 39px;
}
.mukeText .mukeText_lists li .mukeText_lists_img_three {
margin-top: 80px;
margin-left: 40px;
}
.mukeText .mukeText_lists li .mukeText_lists_rightNode {
float: left;
height: 100%;
width: 346.5px;
}
.mukeText .mukeText_lists li .mukeText_lists_rightNode_three {
width: 319.5px;
}
.mukeText .mukeText_lists li .mukeText_lists_rightNode .top_title {
height: 22px;
font-size: 22px;
line-height: 22px;
color: #333333;
font-weight: bold;
margin-top: 47px;
text-indent: 26px;
margin-bottom: 42px;
}
.mukeText .mukeText_lists li .mukeText_lists_rightNode .top_text {
font-size: 19px;
height: 19px;
line-height: 19px;
color: #666666;
text-indent: 26px;
margin-top: 16px;
}
/* mukeText 文字功能性模板end */
</style>
</head>
<body>
<!-- top 头部模块 -->
<div class="top">
<div class="top_content">
<a href="#" class="logo">
<img src="img/logo_icon.png">
</a>
<ul class="top_link_lists">
<li>
<a href="#">
首页介绍
</a>
</li>
<li>
<a href="#">产品说明</a>
</li>
<li>
<a href="#">合作发展</a>
</li>
<li>
<a href="#">关于我们</a>
</li>
<li>
<a href="#"> 联系我们</a>
</li>
</ul>
<div class="top_search">
<input value="请输入搜索内容">
<a href="#" class="search_btn">
<img src="img/search_icon.png" />
</a>
</div>
</div>
</div>
<!-- top 头部模块end -->
<!-- banner 横幅 start -->
<div class="banner">
<div class="banner_content">
<div class="banner_title">
MUKE WANG
</div>
<div class="banner_text">
商务金融数据分析
</div>
<div class="banner_line"></div>
<div class='banner_bottom_title'>
财经报道/第一手股市新闻资讯
</div>
<div class="banner_bottom_text">
I AM A FREELANCE DESIGNER, AND OFTEN RECEIVE SOME OUTSOURCING SERVICES. BEFORE I MEET THE PHOTOGRAPHER, I NEED TO CREATE EACH PICTURE BY MYSELF, WHICH IS TIME-CONSUMING.
</div>
<div class="banner_btn_outNode">
<div class="banner_btn btn_one">
立即注册
</div>
<div class="banner_btn">
申请合作
</div>
</div>
<ul class='banner_lists'>
<li>
01
</li>
<li class='active'>
02
</li>
<li>
03
</li>
<li>
04
</li>
</ul>
<ol class='banner_position'>
<li class='active'></li>
<li></li>
<li></li>
<li class='end'></li>
</ol>
</div>
</div>
<!-- banner 横幅 end -->
<!-- mukeText 文字功能性模块start -->
<div class="mukeText">
<ul class="mukeText_lists">
<li>
<img class="mukeText_lists_img" src="img/mukeText_01.png">
<div class="mukeText_lists_rightNode">
<p class="top_title">我要借款</p>
<p class="top_text">无抵押、担保信用贷</p>
<p class="top_text">资金快至当天到帐，可申请20万</p>
</div>
</li>
<li>
<img class="mukeText_lists_img mukeText_lists_img_two" src="img/mukeText_02.png">
<div class="mukeText_lists_rightNode">
<p class="top_title">安全保障</p>
<p class="top_text">无抵押、担保信用贷</p>
<p class='top_text'>
资金快至当天到账，可申请20万
</p>
</div>
</li>
<li>
<img class="mukeText_lists_img mukeText_lists_img_three" src="img/mukeText_03.png">
<div class='mukeText_lists_rightNode mukeText_lists_rightNode_three'>
<p class='top_title'>我要出借</p>
<p class='top_text'>
无抵押、担保信用贷。
</p>
<p class='top_text'>
资金快至当天到账，可申请20万
</p>
</div>
</li>
</ul>
</div>
<!-- mukeEnd 文字功能性模块start -->
</body>
</html>
产品优势模块制作
资源：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" type="text/css" href="css/reset.css" />
<style>
/*top 头部模块start*/
.top {
height: 138px;
background: #1483ff;
}
.top_content {
width: 1400px;
height: 100%;
margin: 0 auto;
}
.top_content .logo {
float: left;
margin: 39px 0 0 1px;
}
.top_content .top_link_lists {
height: 100%;
float: left;
margin-left: 209px;
}
.top_content .top_link_lists li {
float: left;
margin: 0 23px;
font-size: 15px;
line-height: 138px;
height: 100%;
}
.top_content .top_link_lists li a {
color: #ffffff;
}
.top_content .top_search {
width: 219px;
height: 51px;
float: right;
margin-right: 5px;
margin-top: 47px;
background: #47adf2;
border-radius: 25.5px;
}
.top_content .top_search input {
width: 141px;
height: 100%;
float: left;
margin-left: 21px;
border: none;
outline: none;
padding: 0;
background: none;
text-indent: 2px;
line-height: 51px;
font-size: 15px;
color: #fff;
}
.top_content .top_search .search_btn {
float: left;
margin-left: 7px;
margin-top: 12px;
}
/*top 头部模块end*/
/* <!-- banner 横幅 start --> */
.banner {
width: 100%;
height: 818px;
background: url(img/banner_bg.png) no-repeat center center, #1b9ffc;
;
}
.banner .banner_content {
height: 100%;
width: 1400px;
margin: 0 auto;
position: relative;
}
.banner .banner_content .banner_title {
font-size: 50px;
height: 50px;
line-height: 50px;
color: white;
margin-top: 127px;
float: left;
width: 100%;
text-indent: 6px;
}
.banner .banner_content .banner_text {
font-size: 57px;
height: 57px;
line-height: 57px;
color: white;
float: left;
width: 100%;
text-indent: 6px;
margin-top: 21px;
font-weight: bold;
}
.banner .banner_content .banner_line {
height: 4px;
width: 505px;
float: left;
background: white;
margin: 28px 0 0 3px;
}
.banner .banner_content .banner_bottom_title {
font-size: 33px;
line-height: 33px;
height: 33px;
color: white;
float: left;
width: 100%;
text-indent: 6px;
margin-top: 50px;
}
.banner .banner_content .banner_bottom_text {
font-size: 20px;
color: white;
line-height: 32px;
width: 745px;
float: left;
margin-left: 6px;
margin-top: 40px;
}
.banner .banner_content .banner_btn_outNode {
width: 100%;
float: left;
height: 70px;
margin-top: 95px;
margin-left: 4px;
}
.banner .banner_content .banner_btn_outNode .banner_btn {
width: 213px;
height: 100%;
float: left;
border-radius: 107px;
background: url(img/btn_bg.png) repeat-y;
font-size: 23px;
line-height: 70px;
color: white;
text-align: center;
cursor: pointer;
margin-right: 27px;
}
.banner .banner_content .banner_btn_outNode .btn_one {
margin-left: 4px;
}
.banner .banner_content .banner_lists {
width: 100%;
float: left;
height: 27px;
margin-top: 69px;
text-indent: -1px;
}
.banner .banner_content .banner_lists li {
float: left;
height: 20px;
line-height: 20px;
font-size: 20px;
color: white;
margin-left: 43px;
cursor: pointer;
position: relative;
/* 用最高的做定位，默认往下4px */
top: 4px;
}
.banner .banner_content .banner_lists .active {
font-size: 27px;
line-height: 27px;
color: #fdc235;
height: 27px;
top: 0;
}
.banner .banner_content .banner_position {
width: 80px;
height: 10px;
position: absolute;
left: 50%;
bottom: 29px;
margin-left: -40px;
}
.banner .banner_content .banner_position li {
width: 10px;
height: 10px;
float: left;
background: #f0f0f0;
border-radius: 50%;
margin-right: 13px;
cursor: pointer;
}
.banner .banner_content .banner_position li.active {
background: #fe672d;
}
.banner .banner_content .banner_position .end {
margin-right: 0;
}
/* <!-- banner 横幅 end --> */
/* mukeText 文字功能性模板start */
.mukeText {
width: 1400px;
height: 221px;
margin: 0 auto;
}
.mukeText .mukeText_lists {
width: 100%;
height: 100%;
}
.mukeText .mukeText_lists li {
float: left;
width: 466.5px;
height: 100%;
}
.mukeText .mukeText_lists li .mukeText_lists_img {
float: left;
margin-top: 74px;
}
.mukeText .mukeText_lists li .mukeText_lists_img_two {
margin-top: 82px;
margin-left: 39px;
}
.mukeText .mukeText_lists li .mukeText_lists_img_three {
margin-top: 80px;
margin-left: 40px;
}
.mukeText .mukeText_lists li .mukeText_lists_rightNode {
float: left;
height: 100%;
width: 346.5px;
}
.mukeText .mukeText_lists li .mukeText_lists_rightNode_three {
width: 319.5px;
}
.mukeText .mukeText_lists li .mukeText_lists_rightNode .top_title {
height: 22px;
font-size: 22px;
line-height: 22px;
color: #333333;
font-weight: bold;
margin-top: 47px;
text-indent: 26px;
margin-bottom: 42px;
}
.mukeText .mukeText_lists li .mukeText_lists_rightNode .top_text {
font-size: 19px;
height: 19px;
line-height: 19px;
color: #666666;
text-indent: 26px;
margin-top: 16px;
}
/* mukeText 文字功能性模板end */
/* project 产品优势模块 start */
.project {
width: 100%;
height: 277px;
background: #1b9ffc;
}
.project .project_content {
width: 1400px;
margin: 0 auto;
height: 100%;
}
.project .project_content .project_content_left {
float: left;
width: 663px;
height: 260px;
padding-top: 17px;
}
.project .project_content .project_content_left p {
font-size: 34px;
line-height: 34px;
height: 34px;
font-weight: bold;
color: #ffffff;
margin-top: 16px;
}
.project .project_content .project_content_left .line {
height: 4px;
width: 66px;
background: #ff902d;
margin-top: 37px;
}
.project .project_content .project_content_right {
width: 737px;
height: 260px;
float: left;
font-size: 17px;
line-height: 31px;
padding-top: 17px;
color: #ffffff;
background: url(img/project_icon.png) no-repeat left 123px;
}
/* project 产品优势模块 end */
</style>
</head>
<body>
<!-- top 头部模块 -->
<div class="top">
<div class="top_content">
<a href="#" class="logo">
<img src="img/logo_icon.png">
</a>
<ul class="top_link_lists">
<li>
<a href="#">
首页介绍
</a>
</li>
<li>
<a href="#">产品说明</a>
</li>
<li>
<a href="#">合作发展</a>
</li>
<li>
<a href="#">关于我们</a>
</li>
<li>
<a href="#"> 联系我们</a>
</li>
</ul>
<div class="top_search">
<input value="请输入搜索内容">
<a href="#" class="search_btn">
<img src="img/search_icon.png" />
</a>
</div>
</div>
</div>
<!-- top 头部模块end -->
<!-- banner 横幅 start -->
<div class="banner">
<div class="banner_content">
<div class="banner_title">
MUKE WANG
</div>
<div class="banner_text">
商务金融数据分析
</div>
<div class="banner_line"></div>
<div class='banner_bottom_title'>
财经报道/第一手股市新闻资讯
</div>
<div class="banner_bottom_text">
I AM A FREELANCE DESIGNER, AND OFTEN RECEIVE SOME OUTSOURCING SERVICES. BEFORE I MEET THE PHOTOGRAPHER, I NEED TO CREATE EACH PICTURE BY MYSELF, WHICH IS TIME-CONSUMING.
</div>
<div class="banner_btn_outNode">
<div class="banner_btn btn_one">
立即注册
</div>
<div class="banner_btn">
申请合作
</div>
</div>
<ul class='banner_lists'>
<li>
01
</li>
<li class='active'>
02
</li>
<li>
03
</li>
<li>
04
</li>
</ul>
<ol class='banner_position'>
<li class='active'></li>
<li></li>
<li></li>
<li class='end'></li>
</ol>
</div>
</div>
<!-- banner 横幅 end -->
<!-- mukeText 文字功能性模块start -->
<div class="mukeText">
<ul class="mukeText_lists">
<li>
<img class="mukeText_lists_img" src="img/mukeText_01.png">
<div class="mukeText_lists_rightNode">
<p class="top_title">我要借款</p>
<p class="top_text">无抵押、担保信用贷</p>
<p class="top_text">资金快至当天到帐，可申请20万</p>
</div>
</li>
<li>
<img class="mukeText_lists_img mukeText_lists_img_two" src="img/mukeText_02.png">
<div class="mukeText_lists_rightNode">
<p class="top_title">安全保障</p>
<p class="top_text">无抵押、担保信用贷</p>
<p class='top_text'>
资金快至当天到账，可申请20万
</p>
</div>
</li>
<li>
<img class="mukeText_lists_img mukeText_lists_img_three" src="img/mukeText_03.png">
<div class='mukeText_lists_rightNode mukeText_lists_rightNode_three'>
<p class='top_title'>我要出借</p>
<p class='top_text'>
无抵押、担保信用贷。
</p>
<p class='top_text'>
资金快至当天到账，可申请20万
</p>
</div>
</li>
</ul>
</div>
<!-- mukeEnd 文字功能性模块start -->
<!-- project 产品优势模块 start -->
<div class="project">
<div class="project_content">
<div class="project_content_left">
<p>慕课金融</p>
<p>产品特点以及优势</p>
<div class='line'></div>
</div>
<div class="project_content_right">
我是一个自由设计师，经常会接一些外包服务，在没有遇见慕课之前每一张图都需要自己创作，很费时。现在用图有授权，客户放心，我也更省心。
</div>
</div>
</div>
<!-- project 产品优势模块 end -->
</body>
</html>
产品特点模块制作
资源：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" type="text/css" href="css/reset.css" />
<style>
/*top 头部模块start*/
.top {
height: 138px;
background: #1483ff;
}
.top_content {
width: 1400px;
height: 100%;
margin: 0 auto;
}
.top_content .logo {
float: left;
margin: 39px 0 0 1px;
}
.top_content .top_link_lists {
height: 100%;
float: left;
margin-left: 209px;
}
.top_content .top_link_lists li {
float: left;
margin: 0 23px;
font-size: 15px;
line-height: 138px;
height: 100%;
}
.top_content .top_link_lists li a {
color: #ffffff;
}
.top_content .top_search {
width: 219px;
height: 51px;
float: right;
margin-right: 5px;
margin-top: 47px;
background: #47adf2;
border-radius: 25.5px;
}
.top_content .top_search input {
width: 141px;
height: 100%;
float: left;
margin-left: 21px;
border: none;
outline: none;
padding: 0;
background: none;
text-indent: 2px;
line-height: 51px;
font-size: 15px;
color: #fff;
}
.top_content .top_search .search_btn {
float: left;
margin-left: 7px;
margin-top: 12px;
}
/*top 头部模块end*/
/* <!-- banner 横幅 start --> */
.banner {
width: 100%;
height: 818px;
background: url(img/banner_bg.png) no-repeat center center, #1b9ffc;
;
}
.banner .banner_content {
height: 100%;
width: 1400px;
margin: 0 auto;
position: relative;
}
.banner .banner_content .banner_title {
font-size: 50px;
height: 50px;
line-height: 50px;
color: white;
margin-top: 127px;
float: left;
width: 100%;
text-indent: 6px;
}
.banner .banner_content .banner_text {
font-size: 57px;
height: 57px;
line-height: 57px;
color: white;
float: left;
width: 100%;
text-indent: 6px;
margin-top: 21px;
font-weight: bold;
}
.banner .banner_content .banner_line {
height: 4px;
width: 505px;
float: left;
background: white;
margin: 28px 0 0 3px;
}
.banner .banner_content .banner_bottom_title {
font-size: 33px;
line-height: 33px;
height: 33px;
color: white;
float: left;
width: 100%;
text-indent: 6px;
margin-top: 50px;
}
.banner .banner_content .banner_bottom_text {
font-size: 20px;
color: white;
line-height: 32px;
width: 745px;
float: left;
margin-left: 6px;
margin-top: 40px;
}
.banner .banner_content .banner_btn_outNode {
width: 100%;
float: left;
height: 70px;
margin-top: 95px;
margin-left: 4px;
}
.banner .banner_content .banner_btn_outNode .banner_btn {
width: 213px;
height: 100%;
float: left;
border-radius: 107px;
background: url(img/btn_bg.png) repeat-y;
font-size: 23px;
line-height: 70px;
color: white;
text-align: center;
cursor: pointer;
margin-right: 27px;
}
.banner .banner_content .banner_btn_outNode .btn_one {
margin-left: 4px;
}
.banner .banner_content .banner_lists {
width: 100%;
float: left;
height: 27px;
margin-top: 69px;
text-indent: -1px;
}
.banner .banner_content .banner_lists li {
float: left;
height: 20px;
line-height: 20px;
font-size: 20px;
color: white;
margin-left: 43px;
cursor: pointer;
position: relative;
/* 用最高的做定位，默认往下4px */
top: 4px;
}
.banner .banner_content .banner_lists .active {
font-size: 27px;
line-height: 27px;
color: #fdc235;
height: 27px;
top: 0;
}
.banner .banner_content .banner_position {
width: 80px;
height: 10px;
position: absolute;
left: 50%;
bottom: 29px;
margin-left: -40px;
}
.banner .banner_content .banner_position li {
width: 10px;
height: 10px;
float: left;
background: #f0f0f0;
border-radius: 50%;
margin-right: 13px;
cursor: pointer;
}
.banner .banner_content .banner_position li.active {
background: #fe672d;
}
.banner .banner_content .banner_position .end {
margin-right: 0;
}
/* <!-- banner 横幅 end --> */
/* mukeText 文字功能性模板start */
.mukeText {
width: 1400px;
height: 221px;
margin: 0 auto;
}
.mukeText .mukeText_lists {
width: 100%;
height: 100%;
}
.mukeText .mukeText_lists li {
float: left;
width: 466.5px;
height: 100%;
}
.mukeText .mukeText_lists li .mukeText_lists_img {
float: left;
margin-top: 74px;
}
.mukeText .mukeText_lists li .mukeText_lists_img_two {
margin-top: 82px;
margin-left: 39px;
}
.mukeText .mukeText_lists li .mukeText_lists_img_three {
margin-top: 80px;
margin-left: 40px;
}
.mukeText .mukeText_lists li .mukeText_lists_rightNode {
float: left;
height: 100%;
width: 346.5px;
}
.mukeText .mukeText_lists li .mukeText_lists_rightNode_three {
width: 319.5px;
}
.mukeText .mukeText_lists li .mukeText_lists_rightNode .top_title {
height: 22px;
font-size: 22px;
line-height: 22px;
color: #333333;
font-weight: bold;
margin-top: 47px;
text-indent: 26px;
margin-bottom: 42px;
}
.mukeText .mukeText_lists li .mukeText_lists_rightNode .top_text {
font-size: 19px;
height: 19px;
line-height: 19px;
color: #666666;
text-indent: 26px;
margin-top: 16px;
}
/* mukeText 文字功能性模板end */
/* project 产品优势模块 start */
.project {
width: 100%;
height: 277px;
background: #1b9ffc;
}
.project .project_content {
width: 1400px;
margin: 0 auto;
height: 100%;
}
.project .project_content .project_content_left {
float: left;
width: 663px;
height: 260px;
padding-top: 17px;
}
.project .project_content .project_content_left p {
font-size: 34px;
line-height: 34px;
height: 34px;
font-weight: bold;
color: #ffffff;
margin-top: 16px;
}
.project .project_content .project_content_left .line {
height: 4px;
width: 66px;
background: #ff902d;
margin-top: 37px;
}
.project .project_content .project_content_right {
width: 737px;
height: 260px;
float: left;
font-size: 17px;
line-height: 31px;
padding-top: 17px;
color: #ffffff;
background: url(img/project_icon.png) no-repeat left 123px;
}
/* project 产品优势模块 end */
/* <!-- 产品特点模块制作 start --> */
.pointer {
height: 648px;
background: #f5f6f9;
}
.pointer .pointer_center {
width: 1400px;
height: 100%;
margin: 0 auto;
}
.pointer .pointer_center .pointer_fl {
float: left;
width: 100%;
height: 100%;
}
.pointer .pointer_center .pointer_title {
height: 35px;
line-height: 35px;
font-size: 35px;
margin-top: 108px;
text-align: center;
}
.pointer .pointer_center .pointer_title .en {
position: relative;
top: -3px;
color: #989898;
font-weight: bold;
margin-right: 15px;
}
.pointer .pointer_center .pointer_title .cn {
font-weight: bold;
color: #2a77de;
}
.pointer .pointer_center .pointer_text {
margin-top: 25px;
font-size: 17px;
line-height: 17px;
height: 17px;
color: #989898;
text-align: center;
}
.pointer .pointer_center .pointer_en_text {
font-size: 14px;
line-height: 14px;
height: 14px;
color: #989898;
margin: 10px auto 0;
text-align: center;
position: relative;
z-index: 3;
}
.pointer .pointer_center .pointer_en_text span {
background: #f5f6f9;
}
.pointer .pointer_center .line {
width: 1354px;
height: 2px;
margin-left: 24px;
background: #cacacc;
position: relative;
top: -7px;
}
.pointer .pointer_center .line .pot {
width: 2px;
height: 2px;
background: #f5f6f9;
float: left;
margin-left: 33px;
}
.pointer .pointer_center .center_lists {
width: 1308px;
height: 227px;
margin: 68px auto 0;
}
.pointer .pointer_center .center_lists dl {
float: left;
height: 100%;
width: 168px;
margin-right: 117px;
}
.pointer .pointer_center .center_lists dl.last {
margin-right: 0px;
}
.pointer .pointer_center .center_lists dl dt {
width: 168px;
height: 168px;
float: left;
}
.pointer .pointer_center .center_lists dl dd {
width: 168px;
height: 23px;
font-size: 23px;
line-height: 23px;
float: left;
margin-top: 36px;
text-align: center;
color: #909091;
}
/* 产品特点模块制作 end */
</style>
</head>
<body>
<!-- top 头部模块 -->
<div class="top">
<div class="top_content">
<a href="#" class="logo">
<img src="img/logo_icon.png">
</a>
<ul class="top_link_lists">
<li>
<a href="#">
首页介绍
</a>
</li>
<li>
<a href="#">产品说明</a>
</li>
<li>
<a href="#">合作发展</a>
</li>
<li>
<a href="#">关于我们</a>
</li>
<li>
<a href="#"> 联系我们</a>
</li>
</ul>
<div class="top_search">
<input value="请输入搜索内容">
<a href="#" class="search_btn">
<img src="img/search_icon.png" />
</a>
</div>
</div>
</div>
<!-- top 头部模块end -->
<!-- banner 横幅 start -->
<div class="banner">
<div class="banner_content">
<div class="banner_title">
MUKE WANG
</div>
<div class="banner_text">
商务金融数据分析
</div>
<div class="banner_line"></div>
<div class='banner_bottom_title'>
财经报道/第一手股市新闻资讯
</div>
<div class="banner_bottom_text">
I AM A FREELANCE DESIGNER, AND OFTEN RECEIVE SOME OUTSOURCING SERVICES. BEFORE I MEET THE PHOTOGRAPHER, I NEED TO CREATE EACH PICTURE BY MYSELF, WHICH IS TIME-CONSUMING.
</div>
<div class="banner_btn_outNode">
<div class="banner_btn btn_one">
立即注册
</div>
<div class="banner_btn">
申请合作
</div>
</div>
<ul class='banner_lists'>
<li>
01
</li>
<li class='active'>
02
</li>
<li>
03
</li>
<li>
04
</li>
</ul>
<ol class='banner_position'>
<li class='active'></li>
<li></li>
<li></li>
<li class='end'></li>
</ol>
</div>
</div>
<!-- banner 横幅 end -->
<!-- mukeText 文字功能性模块start -->
<div class="mukeText">
<ul class="mukeText_lists">
<li>
<img class="mukeText_lists_img" src="img/mukeText_01.png">
<div class="mukeText_lists_rightNode">
<p class="top_title">我要借款</p>
<p class="top_text">无抵押、担保信用贷</p>
<p class="top_text">资金快至当天到帐，可申请20万</p>
</div>
</li>
<li>
<img class="mukeText_lists_img mukeText_lists_img_two" src="img/mukeText_02.png">
<div class="mukeText_lists_rightNode">
<p class="top_title">安全保障</p>
<p class="top_text">无抵押、担保信用贷</p>
<p class='top_text'>
资金快至当天到账，可申请20万
</p>
</div>
</li>
<li>
<img class="mukeText_lists_img mukeText_lists_img_three" src="img/mukeText_03.png">
<div class='mukeText_lists_rightNode mukeText_lists_rightNode_three'>
<p class='top_title'>我要出借</p>
<p class='top_text'>
无抵押、担保信用贷。
</p>
<p class='top_text'>
资金快至当天到账，可申请20万
</p>
</div>
</li>
</ul>
</div>
<!-- mukeEnd 文字功能性模块start -->
<!-- project 产品优势模块 start -->
<div class="project">
<div class="project_content">
<div class="project_content_left">
<p>慕课金融</p>
<p>产品特点以及优势</p>
<div class='line'></div>
</div>
<div class="project_content_right">
我是一个自由设计师，经常会接一些外包服务，在没有遇见慕课之前每一张图都需要自己创作，很费时。现在用图有授权，客户放心，我也更省心。
</div>
</div>
</div>
<!-- project 产品优势模块 end -->
<!-- 产品特点模块制作 start -->
<div class="pointer">
<div class="pointer_center">
<!-- 避免margin-top 出现意外 -->
<div class="pointer_fl">
<div class="pointer_title">
<span class="en">SOFA AUTUMN DISCOUNT</span>
<span class="cn">
超强五包服务
</span>
</div>
<div class="pointer_text">
著作权及相关权利归本网站所有，慕课网学习
</div>
<div class="pointer_en_text">
<span>
Photo network/European sofa autumn discount
</span>
</div>
<div class="line">
<div class='pot'></div>
<div class='pot'></div>
<div class='pot'></div>
<div class='pot'></div>
<div class='pot'></div>
<div class='pot'></div>
<div class='pot'></div>
<div class='pot'></div>
<div class='pot'></div>
<div class='pot'></div>
<div class='pot'></div>
<div class='pot'></div>
<div class='pot'></div>
<div class='pot'></div>
<div class='pot'></div>
<div class='pot'></div>
<div class='pot'></div>
<div class='pot'></div>
<div class='pot'></div>
<div class='pot'></div>
<div class='pot'></div>
<div class='pot'></div>
<div class='pot'></div>
<div class='pot'></div>
<div class='pot'></div>
<div class='pot'></div>
<div class='pot'></div>
<div class='pot'></div>
<div class='pot'></div>
<div class='pot'></div>
<div class='pot'></div>
<div class='pot'></div>
<div class='pot'></div>
<div class='pot'></div>
<div class='pot'></div>
<div class='pot'></div>
<div class='pot'></div>
<div class='pot'></div>
</div>
<div class="center_lists">
<dl>
<dt>
<img src="img/pointer_icon_01.png"/>
</dt>
<dd>
慕课原创作品
</dd>
</dl>
<dl>
<dt>
<img src="img/pointer_icon_02.png"/>
</dt>
<dd>
慕课原创作品
</dd>
</dl>
<dl>
<dt>
<img src="img/pointer_icon_03.png"/>
</dt>
<dd>
慕课原创作品
</dd>
</dl>
<dl>
<dt>
<img src="img/pointer_icon_04.png"/>
</dt>
<dd>
慕课原创作品
</dd>
</dl>
<dl class="last">
<dt>
<img src="img/pointer_icon_05.png"/>
</dt>
<dd>
慕课原创作品
</dd>
</dl>
</div>
</div>
</div>
</div>
<!-- 产品特点模块制作 end -->
</body>
</html>
产品服务模块制作
资源：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" type="text/css" href="css/reset.css" />
<style>
/*top 头部模块start*/
.top {
height: 138px;
background: #1483ff;
}
.top_content {
width: 1400px;
height: 100%;
margin: 0 auto;
}
.top_content .logo {
float: left;
margin: 39px 0 0 1px;
}
.top_content .top_link_lists {
height: 100%;
float: left;
margin-left: 209px;
}
.top_content .top_link_lists li {
float: left;
margin: 0 23px;
font-size: 15px;
line-height: 138px;
height: 100%;
}
.top_content .top_link_lists li a {
color: #ffffff;
}
.top_content .top_search {
width: 219px;
height: 51px;
float: right;
margin-right: 5px;
margin-top: 47px;
background: #47adf2;
border-radius: 25.5px;
}
.top_content .top_search input {
width: 141px;
height: 100%;
float: left;
margin-left: 21px;
border: none;
outline: none;
padding: 0;
background: none;
text-indent: 2px;
line-height: 51px;
font-size: 15px;
color: #fff;
}
.top_content .top_search .search_btn {
float: left;
margin-left: 7px;
margin-top: 12px;
}
/*top 头部模块end*/
/* <!-- banner 横幅 start --> */
.banner {
width: 100%;
height: 818px;
background: url(img/banner_bg.png) no-repeat center center, #1b9ffc;
;
}
.banner .banner_content {
height: 100%;
width: 1400px;
margin: 0 auto;
position: relative;
}
.banner .banner_content .banner_title {
font-size: 50px;
height: 50px;
line-height: 50px;
color: white;
margin-top: 127px;
float: left;
width: 100%;
text-indent: 6px;
}
.banner .banner_content .banner_text {
font-size: 57px;
height: 57px;
line-height: 57px;
color: white;
float: left;
width: 100%;
text-indent: 6px;
margin-top: 21px;
font-weight: bold;
}
.banner .banner_content .banner_line {
height: 4px;
width: 505px;
float: left;
background: white;
margin: 28px 0 0 3px;
}
.banner .banner_content .banner_bottom_title {
font-size: 33px;
line-height: 33px;
height: 33px;
color: white;
float: left;
width: 100%;
text-indent: 6px;
margin-top: 50px;
}
.banner .banner_content .banner_bottom_text {
font-size: 20px;
color: white;
line-height: 32px;
width: 745px;
float: left;
margin-left: 6px;
margin-top: 40px;
}
.banner .banner_content .banner_btn_outNode {
width: 100%;
float: left;
height: 70px;
margin-top: 95px;
margin-left: 4px;
}
.banner .banner_content .banner_btn_outNode .banner_btn {
width: 213px;
height: 100%;
float: left;
border-radius: 107px;
background: url(img/btn_bg.png) repeat-y;
font-size: 23px;
line-height: 70px;
color: white;
text-align: center;
cursor: pointer;
margin-right: 27px;
}
.banner .banner_content .banner_btn_outNode .btn_one {
margin-left: 4px;
}
.banner .banner_content .banner_lists {
width: 100%;
float: left;
height: 27px;
margin-top: 69px;
text-indent: -1px;
}
.banner .banner_content .banner_lists li {
float: left;
height: 20px;
line-height: 20px;
font-size: 20px;
color: white;
margin-left: 43px;
cursor: pointer;
position: relative;
/* 用最高的做定位，默认往下4px */
top: 4px;
}
.banner .banner_content .banner_lists .active {
font-size: 27px;
line-height: 27px;
color: #fdc235;
height: 27px;
top: 0;
}
.banner .banner_content .banner_position {
width: 80px;
height: 10px;
position: absolute;
left: 50%;
bottom: 29px;
margin-left: -40px;
}
.banner .banner_content .banner_position li {
width: 10px;
height: 10px;
float: left;
background: #f0f0f0;
border-radius: 50%;
margin-right: 13px;
cursor: pointer;
}
.banner .banner_content .banner_position li.active {
background: #fe672d;
}
.banner .banner_content .banner_position .end {
margin-right: 0;
}
/* <!-- banner 横幅 end --> */
/* mukeText 文字功能性模板start */
.mukeText {
width: 1400px;
height: 221px;
margin: 0 auto;
}
.mukeText .mukeText_lists {
width: 100%;
height: 100%;
}
.mukeText .mukeText_lists li {
float: left;
width: 466.5px;
height: 100%;
}
.mukeText .mukeText_lists li .mukeText_lists_img {
float: left;
margin-top: 74px;
}
.mukeText .mukeText_lists li .mukeText_lists_img_two {
margin-top: 82px;
margin-left: 39px;
}
.mukeText .mukeText_lists li .mukeText_lists_img_three {
margin-top: 80px;
margin-left: 40px;
}
.mukeText .mukeText_lists li .mukeText_lists_rightNode {
float: left;
height: 100%;
width: 346.5px;
}
.mukeText .mukeText_lists li .mukeText_lists_rightNode_three {
width: 319.5px;
}
.mukeText .mukeText_lists li .mukeText_lists_rightNode .top_title {
height: 22px;
font-size: 22px;
line-height: 22px;
color: #333333;
font-weight: bold;
margin-top: 47px;
text-indent: 26px;
margin-bottom: 42px;
}
.mukeText .mukeText_lists li .mukeText_lists_rightNode .top_text {
font-size: 19px;
height: 19px;
line-height: 19px;
color: #666666;
text-indent: 26px;
margin-top: 16px;
}
/* mukeText 文字功能性模板end */
/* project 产品优势模块 start */
.project {
width: 100%;
height: 277px;
background: #1b9ffc;
}
.project .project_content {
width: 1400px;
margin: 0 auto;
height: 100%;
}
.project .project_content .project_content_left {
float: left;
width: 663px;
height: 260px;
padding-top: 17px;
}
.project .project_content .project_content_left p {
font-size: 34px;
line-height: 34px;
height: 34px;
font-weight: bold;
color: #ffffff;
margin-top: 16px;
}
.project .project_content .project_content_left .line {
height: 4px;
width: 66px;
background: #ff902d;
margin-top: 37px;
}
.project .project_content .project_content_right {
width: 737px;
height: 260px;
float: left;
font-size: 17px;
line-height: 31px;
padding-top: 17px;
color: #ffffff;
background: url(img/project_icon.png) no-repeat left 123px;
}
/* project 产品优势模块 end */
/* <!-- 产品特点模块制作 start --> */
.pointer {
height: 648px;
background: #f5f6f9;
}
.pointer .pointer_center {
width: 1400px;
height: 100%;
margin: 0 auto;
}
.pointer .pointer_center .pointer_fl {
float: left;
width: 100%;
height: 100%;
}
.pointer .pointer_center .pointer_title {
height: 35px;
line-height: 35px;
font-size: 35px;
margin-top: 108px;
text-align: center;
}
.pointer .pointer_center .pointer_title .en {
position: relative;
top: -3px;
color: #989898;
font-weight: bold;
margin-right: 15px;
}
.pointer .pointer_center .pointer_title .cn {
font-weight: bold;
color: #2a77de;
}
.pointer .pointer_center .pointer_text {
margin-top: 25px;
font-size: 17px;
line-height: 17px;
height: 17px;
color: #989898;
text-align: center;
}
.pointer .pointer_center .pointer_en_text {
font-size: 14px;
line-height: 14px;
height: 14px;
color: #989898;
margin: 10px auto 0;
text-align: center;
position: relative;
z-index: 3;
}
.pointer .pointer_center .pointer_en_text span {
background: #f5f6f9;
}
.pointer .pointer_center .line {
width: 1354px;
height: 2px;
margin-left: 24px;
background: #cacacc;
position: relative;
top: -7px;
}
.pointer .pointer_center .line .pot {
width: 2px;
height: 2px;
background: #f5f6f9;
float: left;
margin-left: 33px;
}
.pointer .pointer_center .center_lists {
width: 1308px;
height: 227px;
margin: 68px auto 0;
}
.pointer .pointer_center .center_lists dl {
float: left;
height: 100%;
width: 168px;
margin-right: 117px;
}
.pointer .pointer_center .center_lists dl.last {
margin-right: 0px;
}
.pointer .pointer_center .center_lists dl dt {
width: 168px;
height: 168px;
float: left;
}
.pointer .pointer_center .center_lists dl dd {
width: 168px;
height: 23px;
font-size: 23px;
line-height: 23px;
float: left;
margin-top: 36px;
text-align: center;
color: #909091;
}
/* 产品特点模块制作 end */
/* serve 产品服务模块 */
.serve {
height: 520px;
background: #f5f6f9;
}
.serve .serve_center {
height: 100%;
width: 1400px;
margin: 0 auto;
}
.serve .serve_center .serve_fl {
width: 100%;
height: 100%;
float: left;
}
.serve .serve_center .serve_fl .serve_left {
width: 868px;
height: 100%;
float: left;
}
.serve .serve_center .serve_fl .serve_left .serve_left_one {
float: left;
}
.serve .serve_center .serve_fl .serve_left .serve_left_two {
float: right;
}
.serve .serve_center .serve_fl .serve_right {
width: 488px;
height: 100%;
float: left;
padding-left: 44px;
}
.serve .serve_center .serve_fl .serve_right .serve_right_title {
font-size: 34px;
font-weight: bold;
color: #2a77de;
line-height: 34px;
height: 34px;
margin-top: 44px;
}
.serve .serve_center .serve_fl .serve_right .serve_right_sm_title {
font-size: 34px;
font-weight: bold;
color: #2a77de;
line-height: 34px;
height: 34px;
margin-top: 44px;
}
.serve .serve_center .serve_fl .serve_right .serve_right_text {
font-size: 17px;
line-height: 28px;
color: #989898;
margin-top: 39px;
}
.serve .serve_center .serve_fl .serve_right .serve_right_iconlink {
height: 70px;
margin-top: 52px;
position: relative;
}
.serve .serve_center .serve_fl .serve_right .serve_right_iconlink a {
float: left;
margin-right: 47px;
}
.serve .serve_center .serve_fl .serve_right .serve_right_iconlink a.icon_two {
position: relative;
top: 3px;
}
.serve .serve_center .serve_fl .serve_right .serve_right_iconlink a.icon_three {
position: relative;
top: 3px;
}
.serve .serve_center .serve_fl .serve_right .serve_right_iconlink .icon_link_text {
font-size: 23px;
line-height: 23px;
height: 23px;
color: #fe7963;
position: absolute;
right: 33px;
top: 19px;
}
/* serve 产品服务模块 end */
</style>
</head>
<body>
<!-- top 头部模块 -->
<div class="top">
<div class="top_content">
<a href="#" class="logo">
<img src="img/logo_icon.png">
</a>
<ul class="top_link_lists">
<li>
<a href="#">
首页介绍
</a>
</li>
<li>
<a href="#">产品说明</a>
</li>
<li>
<a href="#">合作发展</a>
</li>
<li>
<a href="#">关于我们</a>
</li>
<li>
<a href="#"> 联系我们</a>
</li>
</ul>
<div class="top_search">
<input value="请输入搜索内容">
<a href="#" class="search_btn">
<img src="img/search_icon.png" />
</a>
</div>
</div>
</div>
<!-- top 头部模块end -->
<!-- banner 横幅 start -->
<div class="banner">
<div class="banner_content">
<div class="banner_title">
MUKE WANG
</div>
<div class="banner_text">
商务金融数据分析
</div>
<div class="banner_line"></div>
<div class='banner_bottom_title'>
财经报道/第一手股市新闻资讯
</div>
<div class="banner_bottom_text">
I AM A FREELANCE DESIGNER, AND OFTEN RECEIVE SOME OUTSOURCING SERVICES. BEFORE I MEET THE PHOTOGRAPHER, I NEED TO CREATE EACH PICTURE BY MYSELF, WHICH IS TIME-CONSUMING.
</div>
<div class="banner_btn_outNode">
<div class="banner_btn btn_one">
立即注册
</div>
<div class="banner_btn">
申请合作
</div>
</div>
<ul class='banner_lists'>
<li>
01
</li>
<li class='active'>
02
</li>
<li>
03
</li>
<li>
04
</li>
</ul>
<ol class='banner_position'>
<li class='active'></li>
<li></li>
<li></li>
<li class='end'></li>
</ol>
</div>
</div>
<!-- banner 横幅 end -->
<!-- mukeText 文字功能性模块start -->
<div class="mukeText">
<ul class="mukeText_lists">
<li>
<img class="mukeText_lists_img" src="img/mukeText_01.png">
<div class="mukeText_lists_rightNode">
<p class="top_title">我要借款</p>
<p class="top_text">无抵押、担保信用贷</p>
<p class="top_text">资金快至当天到帐，可申请20万</p>
</div>
</li>
<li>
<img class="mukeText_lists_img mukeText_lists_img_two" src="img/mukeText_02.png">
<div class="mukeText_lists_rightNode">
<p class="top_title">安全保障</p>
<p class="top_text">无抵押、担保信用贷</p>
<p class='top_text'>
资金快至当天到账，可申请20万
</p>
</div>
</li>
<li>
<img class="mukeText_lists_img mukeText_lists_img_three" src="img/mukeText_03.png">
<div class='mukeText_lists_rightNode mukeText_lists_rightNode_three'>
<p class='top_title'>我要出借</p>
<p class='top_text'>
无抵押、担保信用贷。
</p>
<p class='top_text'>
资金快至当天到账，可申请20万
</p>
</div>
</li>
</ul>
</div>
<!-- mukeEnd 文字功能性模块start -->
<!-- project 产品优势模块 start -->
<div class="project">
<div class="project_content">
<div class="project_content_left">
<p>慕课金融</p>
<p>产品特点以及优势</p>
<div class='line'></div>
</div>
<div class="project_content_right">
我是一个自由设计师，经常会接一些外包服务，在没有遇见慕课之前每一张图都需要自己创作，很费时。现在用图有授权，客户放心，我也更省心。
</div>
</div>
</div>
<!-- project 产品优势模块 end -->
<!-- 产品特点模块制作 start -->
<div class="pointer">
<div class="pointer_center">
<!-- 避免margin-top 出现意外 -->
<div class="pointer_fl">
<div class="pointer_title">
<span class="en">SOFA AUTUMN DISCOUNT</span>
<span class="cn">
超强五包服务
</span>
</div>
<div class="pointer_text">
著作权及相关权利归本网站所有，慕课网学习
</div>
<div class="pointer_en_text">
<span>
Photo network/European sofa autumn discount
</span>
</div>
<div class="line">
<div class='pot'></div>
<div class='pot'></div>
<div class='pot'></div>
<div class='pot'></div>
<div class='pot'></div>
<div class='pot'></div>
<div class='pot'></div>
<div class='pot'></div>
<div class='pot'></div>
<div class='pot'></div>
<div class='pot'></div>
<div class='pot'></div>
<div class='pot'></div>
<div class='pot'></div>
<div class='pot'></div>
<div class='pot'></div>
<div class='pot'></div>
<div class='pot'></div>
<div class='pot'></div>
<div class='pot'></div>
<div class='pot'></div>
<div class='pot'></div>
<div class='pot'></div>
<div class='pot'></div>
<div class='pot'></div>
<div class='pot'></div>
<div class='pot'></div>
<div class='pot'></div>
<div class='pot'></div>
<div class='pot'></div>
<div class='pot'></div>
<div class='pot'></div>
<div class='pot'></div>
<div class='pot'></div>
<div class='pot'></div>
<div class='pot'></div>
<div class='pot'></div>
<div class='pot'></div>
</div>
<div class="center_lists">
<dl>
<dt>
<img src="img/pointer_icon_01.png"/>
</dt>
<dd>
慕课原创作品
</dd>
</dl>
<dl>
<dt>
<img src="img/pointer_icon_02.png"/>
</dt>
<dd>
慕课原创作品
</dd>
</dl>
<dl>
<dt>
<img src="img/pointer_icon_03.png"/>
</dt>
<dd>
慕课原创作品
</dd>
</dl>
<dl>
<dt>
<img src="img/pointer_icon_04.png"/>
</dt>
<dd>
慕课原创作品
</dd>
</dl>
<dl class="last">
<dt>
<img src="img/pointer_icon_05.png"/>
</dt>
<dd>
慕课原创作品
</dd>
</dl>
</div>
</div>
</div>
</div>
<!-- 产品特点模块制作 end -->
<!-- 产品服务模块制作 start -->
<div class="serve">
<div class="serve_center">
<div class="serve_fl">
<div class="serve_left">
<img src="img/serve_image_01.png" class="serve_left_one">
<img src="img/serve_image_02.png" class="serve_left_two">
</div>
<div class="serve_right">
<div class="serve_right_title">
超强五包服务
</div>
<div class="serve_right_sm_title">
SOFA AUTUMN DISCOUNT
</div>
<div class="serve_right_text">
All original works (including preview photos) are protected by copyright law.Copyright and related rights belong to this website, all stolen map will be corrected.
</div>
<div class="serve_right_iconlink">
<a href="#">
<img src="img/serve_icon01.png">
</a>
<a href="#" class="icon_two">
<img src="img/serve_icon02.png" />
</a>
<a href="#" class="icon_three">
<img src="img/serve_icon03.png" />
</a>
<a href="#" class='icon_link_text'>
点击查看>>
</a>
</div>
</div>
</div>
</div>
</div>
<!-- 产品服务模块制作 end -->
</body>
</html>
服务行业模块制作
资源：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" type="text/css" href="css/reset.css" />
<style>
/*top 头部模块start*/
.top {
height: 138px;
background: #1483ff;
}
.top_content {
width: 1400px;
height: 100%;
margin: 0 auto;
}
.top_content .logo {
float: left;
margin: 39px 0 0 1px;
}
.top_content .top_link_lists {
height: 100%;
float: left;
margin-left: 209px;
}
.top_content .top_link_lists li {
float: left;
margin: 0 23px;
font-size: 15px;
line-height: 138px;
height: 100%;
}
.top_content .top_link_lists li a {
color: #ffffff;
}
.top_content .top_search {
width: 219px;
height: 51px;
float: right;
margin-right: 5px;
margin-top: 47px;
background: #47adf2;
border-radius: 25.5px;
}
.top_content .top_search input {
width: 141px;
height: 100%;
float: left;
margin-left: 21px;
border: none;
outline: none;
padding: 0;
background: none;
text-indent: 2px;
line-height: 51px;
font-size: 15px;
color: #fff;
}
.top_content .top_search .search_btn {
float: left;
margin-left: 7px;
margin-top: 12px;
}
/*top 头部模块end*/
/* <!-- banner 横幅 start --> */
.banner {
width: 100%;
height: 818px;
background: url(img/banner_bg.png) no-repeat center center, #1b9ffc;
;
}
.banner .banner_content {
height: 100%;
width: 1400px;
margin: 0 auto;
position: relative;
}
.banner .banner_content .banner_title {
font-size: 50px;
height: 50px;
line-height: 50px;
color: white;
margin-top: 127px;
float: left;
width: 100%;
text-indent: 6px;
}
.banner .banner_content .banner_text {
font-size: 57px;
height: 57px;
line-height: 57px;
color: white;
float: left;
width: 100%;
text-indent: 6px;
margin-top: 21px;
font-weight: bold;
}
.banner .banner_content .banner_line {
height: 4px;
width: 505px;
float: left;
background: white;
margin: 28px 0 0 3px;
}
.banner .banner_content .banner_bottom_title {
font-size: 33px;
line-height: 33px;
height: 33px;
color: white;
float: left;
width: 100%;
text-indent: 6px;
margin-top: 50px;
}
.banner .banner_content .banner_bottom_text {
font-size: 20px;
color: white;
line-height: 32px;
width: 745px;
float: left;
margin-left: 6px;
margin-top: 40px;
}
.banner .banner_content .banner_btn_outNode {
width: 100%;
float: left;
height: 70px;
margin-top: 95px;
margin-left: 4px;
}
.banner .banner_content .banner_btn_outNode .banner_btn {
width: 213px;
height: 100%;
float: left;
border-radius: 107px;
background: url(img/btn_bg.png) repeat-y;
font-size: 23px;
line-height: 70px;
color: white;
text-align: center;
cursor: pointer;
margin-right: 27px;
}
.banner .banner_content .banner_btn_outNode .btn_one {
margin-left: 4px;
}
.banner .banner_content .banner_lists {
width: 100%;
float: left;
height: 27px;
margin-top: 69px;
text-indent: -1px;
}
.banner .banner_content .banner_lists li {
float: left;
height: 20px;
line-height: 20px;
font-size: 20px;
color: white;
margin-left: 43px;
cursor: pointer;
position: relative;
/* 用最高的做定位，默认往下4px */
top: 4px;
}
.banner .banner_content .banner_lists .active {
font-size: 27px;
line-height: 27px;
color: #fdc235;
height: 27px;
top: 0;
}
.banner .banner_content .banner_position {
width: 80px;
height: 10px;
position: absolute;
left: 50%;
bottom: 29px;
margin-left: -40px;
}
.banner .banner_content .banner_position li {
width: 10px;
height: 10px;
float: left;
background: #f0f0f0;
border-radius: 50%;
margin-right: 13px;
cursor: pointer;
}
.banner .banner_content .banner_position li.active {
background: #fe672d;
}
.banner .banner_content .banner_position .end {
margin-right: 0;
}
/* <!-- banner 横幅 end --> */
/* mukeText 文字功能性模板start */
.mukeText {
width: 1400px;
height: 221px;
margin: 0 auto;
}
.mukeText .mukeText_lists {
width: 100%;
height: 100%;
}
.mukeText .mukeText_lists li {
float: left;
width: 466.5px;
height: 100%;
}
.mukeText .mukeText_lists li .mukeText_lists_img {
float: left;
margin-top: 74px;
}
.mukeText .mukeText_lists li .mukeText_lists_img_two {
margin-top: 82px;
margin-left: 39px;
}
.mukeText .mukeText_lists li .mukeText_lists_img_three {
margin-top: 80px;
margin-left: 40px;
}
.mukeText .mukeText_lists li .mukeText_lists_rightNode {
float: left;
height: 100%;
width: 346.5px;
}
.mukeText .mukeText_lists li .mukeText_lists_rightNode_three {
width: 319.5px;
}
.mukeText .mukeText_lists li .mukeText_lists_rightNode .top_title {
height: 22px;
font-size: 22px;
line-height: 22px;
color: #333333;
font-weight: bold;
margin-top: 47px;
text-indent: 26px;
margin-bottom: 42px;
}
.mukeText .mukeText_lists li .mukeText_lists_rightNode .top_text {
font-size: 19px;
height: 19px;
line-height: 19px;
color: #666666;
text-indent: 26px;
margin-top: 16px;
}
/* mukeText 文字功能性模板end */
/* project 产品优势模块 start */
.project {
width: 100%;
height: 277px;
background: #1b9ffc;
}
.project .project_content {
width: 1400px;
margin: 0 auto;
height: 100%;
}
.project .project_content .project_content_left {
float: left;
width: 663px;
height: 260px;
padding-top: 17px;
}
.project .project_content .project_content_left p {
font-size: 34px;
line-height: 34px;
height: 34px;
font-weight: bold;
color: #ffffff;
margin-top: 16px;
}
.project .project_content .project_content_left .line {
height: 4px;
width: 66px;
background: #ff902d;
margin-top: 37px;
}
.project .project_content .project_content_right {
width: 737px;
height: 260px;
float: left;
font-size: 17px;
line-height: 31px;
padding-top: 17px;
color: #ffffff;
background: url(img/project_icon.png) no-repeat left 123px;
}
/* project 产品优势模块 end */
/* <!-- 产品特点模块制作 start --> */
.pointer {
height: 648px;
background: #f5f6f9;
}
.pointer .pointer_center {
width: 1400px;
height: 100%;
margin: 0 auto;
}
.pointer .pointer_center .pointer_fl {
float: left;
width: 100%;
height: 100%;
}
.pointer .pointer_center .pointer_title {
height: 35px;
line-height: 35px;
font-size: 35px;
margin-top: 108px;
text-align: center;
}
.pointer .pointer_center .pointer_title .en {
position: relative;
top: -3px;
color: #989898;
font-weight: bold;
margin-right: 15px;
}
.pointer .pointer_center .pointer_title .cn {
font-weight: bold;
color: #2a77de;
}
.pointer .pointer_center .pointer_text {
margin-top: 25px;
font-size: 17px;
line-height: 17px;
height: 17px;
color: #989898;
text-align: center;
}
.pointer .pointer_center .pointer_en_text {
font-size: 14px;
line-height: 14px;
height: 14px;
color: #989898;
margin: 10px auto 0;
text-align: center;
position: relative;
z-index: 3;
}
.pointer .pointer_center .pointer_en_text span {
background: #f5f6f9;
}
.pointer .pointer_center .line {
width: 1354px;
height: 2px;
margin-left: 24px;
background: #cacacc;
position: relative;
top: -7px;
}
.pointer .pointer_center .line .pot {
width: 2px;
height: 2px;
background: #f5f6f9;
float: left;
margin-left: 33px;
}
.pointer .pointer_center .center_lists {
width: 1308px;
height: 227px;
margin: 68px auto 0;
}
.pointer .pointer_center .center_lists dl {
float: left;
height: 100%;
width: 168px;
margin-right: 117px;
}
.pointer .pointer_center .center_lists dl.last {
margin-right: 0px;
}
.pointer .pointer_center .center_lists dl dt {
width: 168px;
height: 168px;
float: left;
}
.pointer .pointer_center .center_lists dl dd {
width: 168px;
height: 23px;
font-size: 23px;
line-height: 23px;
float: left;
margin-top: 36px;
text-align: center;
color: #909091;
}
/* 产品特点模块制作 end */
/* serve 产品服务模块 */
.serve {
height: 520px;
background: #f5f6f9;
}
.serve .serve_center {
height: 100%;
width: 1400px;
margin: 0 auto;
}
.serve .serve_center .serve_fl {
width: 100%;
height: 100%;
float: left;
}
.serve .serve_center .serve_fl .serve_left {
width: 868px;
height: 100%;
float: left;
}
.serve .serve_center .serve_fl .serve_left .serve_left_one {
float: left;
}
.serve .serve_center .serve_fl .serve_left .serve_left_two {
float: right;
}
.serve .serve_center .serve_fl .serve_right {
width: 488px;
height: 100%;
float: left;
padding-left: 44px;
}
.serve .serve_center .serve_fl .serve_right .serve_right_title {
font-size: 34px;
font-weight: bold;
color: #2a77de;
line-height: 34px;
height: 34px;
margin-top: 44px;
}
.serve .serve_center .serve_fl .serve_right .serve_right_sm_title {
font-size: 34px;
font-weight: bold;
color: #2a77de;
line-height: 34px;
height: 34px;
margin-top: 44px;
}
.serve .serve_center .serve_fl .serve_right .serve_right_text {
font-size: 17px;
line-height: 28px;
color: #989898;
margin-top: 39px;
}
.serve .serve_center .serve_fl .serve_right .serve_right_iconlink {
height: 70px;
margin-top: 52px;
position: relative;
}
.serve .serve_center .serve_fl .serve_right .serve_right_iconlink a {
float: left;
margin-right: 47px;
}
.serve .serve_center .serve_fl .serve_right .serve_right_iconlink a.icon_two {
position: relative;
top: 3px;
}
.serve .serve_center .serve_fl .serve_right .serve_right_iconlink a.icon_three {
position: relative;
top: 3px;
}
.serve .serve_center .serve_fl .serve_right .serve_right_iconlink .icon_link_text {
font-size: 23px;
line-height: 23px;
height: 23px;
color: #fe7963;
position: absolute;
right: 33px;
top: 19px;
}
/* serve 产品服务模块 end */
/* 服务行业模块制作 start */
.trade {
height: 712px;
}
.trade .trade_top {
height: 144px;
width: 1440px;
margin: 0 auto;
}
.trade .trade_top .trade_fl {
float: left;
height: 100%;
width: 100%;
}
.trade .trade_top .trade_fl .trade_top_title {
font-size: 34px;
line-height: 34px;
height: 34px;
text-align: center;
margin-top: 32px;
color: #333333;
}
.trade .trade_top .trade_fl .trade_top_en {
font-size: 20px;
line-height: 20px;
height: 20px;
text-align: center;
color: #999999;
margin-top: 9px;
}
.trade .trade_bottom {
height: 483px;
padding-top: 85px;
background: #2a77de;
}
.trade .trade_bottom .trade_bottom_content {
width: 1142px;
height: 100%;
margin: 0 auto;
position: relative;
}
.trade .trade_bottom .trade_bottom_content dl {
width: 160px;
height: 214px;
float: left;
margin-right: 85px;
}
.trade .trade_bottom .trade_bottom_content dl.end {
margin-right: 0px;
}
.trade .trade_bottom .trade_bottom_content dl dt img {
margin-top: 36px;
}
.trade .trade_bottom .trade_bottom_content dl dt {
width: 158px;
height: 158px;
/* 左右两边相加得 */
border: 1px solid white;
border-radius: 50%;
float: left;
text-align: center;
}
.trade .trade_bottom .trade_bottom_content dl dd {
width: 100%;
float: left;
font-size: 21px;
line-height: 21px;
height: 21px;
text-align: center;
color: white;
margin-top: 35px;
}
.trade .trade_bottom .trade_bottom_content .bottom_link {
width: 156px;
height: 85px;
position: absolute;
left: 50%;
margin-left: -78px;
bottom: 88px;
background: url(img/trade_icon03.png) no-repeat center 2px;
}
.trade .trade_bottom .trade_bottom_content .bottom_link .bottom_link_btn {
width: 100%;
height: 50px;
position: absolute;
bottom: 0;
text-align: center;
line-height: 50px;
font-size: 16px;
color: #333333;
background: #fffffe;
border-radius: 9px;
cursor: pointer;
}
/* 服务行业模块制作 end */
</style>
</head>
<body>
<!-- top 头部模块 -->
<div class="top">
<div class="top_content">
<a href="#" class="logo">
<img src="img/logo_icon.png">
</a>
<ul class="top_link_lists">
<li>
<a href="#">
首页介绍
</a>
</li>
<li>
<a href="#">产品说明</a>
</li>
<li>
<a href="#">合作发展</a>
</li>
<li>
<a href="#">关于我们</a>
</li>
<li>
<a href="#"> 联系我们</a>
</li>
</ul>
<div class="top_search">
<input value="请输入搜索内容">
<a href="#" class="search_btn">
<img src="img/search_icon.png" />
</a>
</div>
</div>
</div>
<!-- top 头部模块end -->
<!-- banner 横幅 start -->
<div class="banner">
<div class="banner_content">
<div class="banner_title">
MUKE WANG
</div>
<div class="banner_text">
商务金融数据分析
</div>
<div class="banner_line"></div>
<div class='banner_bottom_title'>
财经报道/第一手股市新闻资讯
</div>
<div class="banner_bottom_text">
I AM A FREELANCE DESIGNER, AND OFTEN RECEIVE SOME OUTSOURCING SERVICES. BEFORE I MEET THE PHOTOGRAPHER, I NEED TO CREATE EACH PICTURE BY MYSELF, WHICH IS TIME-CONSUMING.
</div>
<div class="banner_btn_outNode">
<div class="banner_btn btn_one">
立即注册
</div>
<div class="banner_btn">
申请合作
</div>
</div>
<ul class='banner_lists'>
<li>
01
</li>
<li class='active'>
02
</li>
<li>
03
</li>
<li>
04
</li>
</ul>
<ol class='banner_position'>
<li class='active'></li>
<li></li>
<li></li>
<li class='end'></li>
</ol>
</div>
</div>
<!-- banner 横幅 end -->
<!-- mukeText 文字功能性模块start -->
<div class="mukeText">
<ul class="mukeText_lists">
<li>
<img class="mukeText_lists_img" src="img/mukeText_01.png">
<div class="mukeText_lists_rightNode">
<p class="top_title">我要借款</p>
<p class="top_text">无抵押、担保信用贷</p>
<p class="top_text">资金快至当天到帐，可申请20万</p>
</div>
</li>
<li>
<img class="mukeText_lists_img mukeText_lists_img_two" src="img/mukeText_02.png">
<div class="mukeText_lists_rightNode">
<p class="top_title">安全保障</p>
<p class="top_text">无抵押、担保信用贷</p>
<p class='top_text'>
资金快至当天到账，可申请20万
</p>
</div>
</li>
<li>
<img class="mukeText_lists_img mukeText_lists_img_three" src="img/mukeText_03.png">
<div class='mukeText_lists_rightNode mukeText_lists_rightNode_three'>
<p class='top_title'>我要出借</p>
<p class='top_text'>
无抵押、担保信用贷。
</p>
<p class='top_text'>
资金快至当天到账，可申请20万
</p>
</div>
</li>
</ul>
</div>
<!-- mukeEnd 文字功能性模块start -->
<!-- project 产品优势模块 start -->
<div class="project">
<div class="project_content">
<div class="project_content_left">
<p>慕课金融</p>
<p>产品特点以及优势</p>
<div class='line'></div>
</div>
<div class="project_content_right">
我是一个自由设计师，经常会接一些外包服务，在没有遇见慕课之前每一张图都需要自己创作，很费时。现在用图有授权，客户放心，我也更省心。
</div>
</div>
</div>
<!-- project 产品优势模块 end -->
<!-- 产品特点模块制作 start -->
<div class="pointer">
<div class="pointer_center">
<!-- 避免margin-top 出现意外 -->
<div class="pointer_fl">
<div class="pointer_title">
<span class="en">SOFA AUTUMN DISCOUNT</span>
<span class="cn">
超强五包服务
</span>
</div>
<div class="pointer_text">
著作权及相关权利归本网站所有，慕课网学习
</div>
<div class="pointer_en_text">
<span>
Photo network/European sofa autumn discount
</span>
</div>
<div class="line">
<div class='pot'></div>
<div class='pot'></div>
<div class='pot'></div>
<div class='pot'></div>
<div class='pot'></div>
<div class='pot'></div>
<div class='pot'></div>
<div class='pot'></div>
<div class='pot'></div>
<div class='pot'></div>
<div class='pot'></div>
<div class='pot'></div>
<div class='pot'></div>
<div class='pot'></div>
<div class='pot'></div>
<div class='pot'></div>
<div class='pot'></div>
<div class='pot'></div>
<div class='pot'></div>
<div class='pot'></div>
<div class='pot'></div>
<div class='pot'></div>
<div class='pot'></div>
<div class='pot'></div>
<div class='pot'></div>
<div class='pot'></div>
<div class='pot'></div>
<div class='pot'></div>
<div class='pot'></div>
<div class='pot'></div>
<div class='pot'></div>
<div class='pot'></div>
<div class='pot'></div>
<div class='pot'></div>
<div class='pot'></div>
<div class='pot'></div>
<div class='pot'></div>
<div class='pot'></div>
</div>
<div class="center_lists">
<dl>
<dt>
<img src="img/pointer_icon_01.png"/>
</dt>
<dd>
慕课原创作品
</dd>
</dl>
<dl>
<dt>
<img src="img/pointer_icon_02.png"/>
</dt>
<dd>
慕课原创作品
</dd>
</dl>
<dl>
<dt>
<img src="img/pointer_icon_03.png"/>
</dt>
<dd>
慕课原创作品
</dd>
</dl>
<dl>
<dt>
<img src="img/pointer_icon_04.png"/>
</dt>
<dd>
慕课原创作品
</dd>
</dl>
<dl class="last">
<dt>
<img src="img/pointer_icon_05.png"/>
</dt>
<dd>
慕课原创作品
</dd>
</dl>
</div>
</div>
</div>
</div>
<!-- 产品特点模块制作 end -->
<!-- 产品服务模块制作 start -->
<div class="serve">
<div class="serve_center">
<div class="serve_fl">
<div class="serve_left">
<img src="img/serve_image_01.png" class="serve_left_one">
<img src="img/serve_image_02.png" class="serve_left_two">
</div>
<div class="serve_right">
<div class="serve_right_title">
超强五包服务
</div>
<div class="serve_right_sm_title">
SOFA AUTUMN DISCOUNT
</div>
<div class="serve_right_text">
All original works (including preview photos) are protected by copyright law.Copyright and related rights belong to this website, all stolen map will be corrected.
</div>
<div class="serve_right_iconlink">
<a href="#">
<img src="img/serve_icon01.png">
</a>
<a href="#" class="icon_two">
<img src="img/serve_icon02.png" />
</a>
<a href="#" class="icon_three">
<img src="img/serve_icon03.png" />
</a>
<a href="#" class='icon_link_text'>
点击查看>>
</a>
</div>
</div>
</div>
</div>
</div>
<!-- 产品服务模块制作 end -->
<!-- 服务行业模块制作 start -->
<div class="trade">
<div class="trade_top">
<div class="trade_fl">
<div class="trade_top_title">
服务行业
</div>
<div class="trade_top_en">
BUSINESS INTRODUCTION
</div>
</div>
</div>
<div class="trade_bottom">
<div class="trade_bottom_content">
<dl>
<dt>
<img src="img/trade_icon01.png"/>
</dt>
<dd>化妆品</dd>
</dl>
<dl>
<dt>
<img src="img/trade_icon02.png" style='margin-top: 46px;'/>
</dt>
<dd>个人护理</dd>
</dl>
<dl>
<dt>
<img src="img/trade_icon04.png" style='margin-top: 33px;'/>
</dt>
<dd>电子电器品</dd>
</dl>
<dl>
<dt>
<img src="img/trade_icon05.png" style='margin-top: 28px;'/>
</dt>
<dd>烟草珠宝</dd>
</dl>
<dl class="end">
<dt>
<img src="img/trade_icon06.png" style='margin-top: 32px;'/>
</dt>
<dd>其他</dd>
</dl>
<div class="bottom_link">
<div class='bottom_link_btn'>
了解更多服务
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 服务行业模块制作 end -->
</body>
</html>
友情链接模块制作
资源
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" type="text/css" href="css/reset.css" />
<style>
/*top 头部模块start*/
.top {
height: 138px;
background: #1483ff;
}
.top_content {
width: 1400px;
height: 100%;
margin: 0 auto;
}
.top_content .logo {
float: left;
margin: 39px 0 0 1px;
}
.top_content .top_link_lists {
height: 100%;
float: left;
margin-left: 209px;
}
.top_content .top_link_lists li {
float: left;
margin: 0 23px;
font-size: 15px;
line-height: 138px;
height: 100%;
}
.top_content .top_link_lists li a {
color: #ffffff;
}
.top_content .top_search {
width: 219px;
height: 51px;
float: right;
margin-right: 5px;
margin-top: 47px;
background: #47adf2;
border-radius: 25.5px;
}
.top_content .top_search input {
width: 141px;
height: 100%;
float: left;
margin-left: 21px;
border: none;
outline: none;
padding: 0;
background: none;
text-indent: 2px;
line-height: 51px;
font-size: 15px;
color: #fff;
}
.top_content .top_search .search_btn {
float: left;
margin-left: 7px;
margin-top: 12px;
}
/*top 头部模块end*/
/* <!-- banner 横幅 start --> */
.banner {
width: 100%;
height: 818px;
background: url(img/banner_bg.png) no-repeat center center, #1b9ffc;
;
}
.banner .banner_content {
height: 100%;
width: 1400px;
margin: 0 auto;
position: relative;
}
.banner .banner_content .banner_title {
font-size: 50px;
height: 50px;
line-height: 50px;
color: white;
margin-top: 127px;
float: left;
width: 100%;
text-indent: 6px;
}
.banner .banner_content .banner_text {
font-size: 57px;
height: 57px;
line-height: 57px;
color: white;
float: left;
width: 100%;
text-indent: 6px;
margin-top: 21px;
font-weight: bold;
}
.banner .banner_content .banner_line {
height: 4px;
width: 505px;
float: left;
background: white;
margin: 28px 0 0 3px;
}
.banner .banner_content .banner_bottom_title {
font-size: 33px;
line-height: 33px;
height: 33px;
color: white;
float: left;
width: 100%;
text-indent: 6px;
margin-top: 50px;
}
.banner .banner_content .banner_bottom_text {
font-size: 20px;
color: white;
line-height: 32px;
width: 745px;
float: left;
margin-left: 6px;
margin-top: 40px;
}
.banner .banner_content .banner_btn_outNode {
width: 100%;
float: left;
height: 70px;
margin-top: 95px;
margin-left: 4px;
}
.banner .banner_content .banner_btn_outNode .banner_btn {
width: 213px;
height: 100%;
float: left;
border-radius: 107px;
background: url(img/btn_bg.png) repeat-y;
font-size: 23px;
line-height: 70px;
color: white;
text-align: center;
cursor: pointer;
margin-right: 27px;
}
.banner .banner_content .banner_btn_outNode .btn_one {
margin-left: 4px;
}
.banner .banner_content .banner_lists {
width: 100%;
float: left;
height: 27px;
margin-top: 69px;
text-indent: -1px;
}
.banner .banner_content .banner_lists li {
float: left;
height: 20px;
line-height: 20px;
font-size: 20px;
color: white;
margin-left: 43px;
cursor: pointer;
position: relative;
/* 用最高的做定位，默认往下4px */
top: 4px;
}
.banner .banner_content .banner_lists .active {
font-size: 27px;
line-height: 27px;
color: #fdc235;
height: 27px;
top: 0;
}
.banner .banner_content .banner_position {
width: 80px;
height: 10px;
position: absolute;
left: 50%;
bottom: 29px;
margin-left: -40px;
}
.banner .banner_content .banner_position li {
width: 10px;
height: 10px;
float: left;
background: #f0f0f0;
border-radius: 50%;
margin-right: 13px;
cursor: pointer;
}
.banner .banner_content .banner_position li.active {
background: #fe672d;
}
.banner .banner_content .banner_position .end {
margin-right: 0;
}
/* <!-- banner 横幅 end --> */
/* mukeText 文字功能性模板start */
.mukeText {
width: 1400px;
height: 221px;
margin: 0 auto;
}
.mukeText .mukeText_lists {
width: 100%;
height: 100%;
}
.mukeText .mukeText_lists li {
float: left;
width: 466.5px;
height: 100%;
}
.mukeText .mukeText_lists li .mukeText_lists_img {
float: left;
margin-top: 74px;
}
.mukeText .mukeText_lists li .mukeText_lists_img_two {
margin-top: 82px;
margin-left: 39px;
}
.mukeText .mukeText_lists li .mukeText_lists_img_three {
margin-top: 80px;
margin-left: 40px;
}
.mukeText .mukeText_lists li .mukeText_lists_rightNode {
float: left;
height: 100%;
width: 346.5px;
}
.mukeText .mukeText_lists li .mukeText_lists_rightNode_three {
width: 319.5px;
}
.mukeText .mukeText_lists li .mukeText_lists_rightNode .top_title {
height: 22px;
font-size: 22px;
line-height: 22px;
color: #333333;
font-weight: bold;
margin-top: 47px;
text-indent: 26px;
margin-bottom: 42px;
}
.mukeText .mukeText_lists li .mukeText_lists_rightNode .top_text {
font-size: 19px;
height: 19px;
line-height: 19px;
color: #666666;
text-indent: 26px;
margin-top: 16px;
}
/* mukeText 文字功能性模板end */
/* project 产品优势模块 start */
.project {
width: 100%;
height: 277px;
background: #1b9ffc;
}
.project .project_content {
width: 1400px;
margin: 0 auto;
height: 100%;
}
.project .project_content .project_content_left {
float: left;
width: 663px;
height: 260px;
padding-top: 17px;
}
.project .project_content .project_content_left p {
font-size: 34px;
line-height: 34px;
height: 34px;
font-weight: bold;
color: #ffffff;
margin-top: 16px;
}
.project .project_content .project_content_left .line {
height: 4px;
width: 66px;
background: #ff902d;
margin-top: 37px;
}
.project .project_content .project_content_right {
width: 737px;
height: 260px;
float: left;
font-size: 17px;
line-height: 31px;
padding-top: 17px;
color: #ffffff;
background: url(img/project_icon.png) no-repeat left 123px;
}
/* project 产品优势模块 end */
/* <!-- 产品特点模块制作 start --> */
.pointer {
height: 648px;
background: #f5f6f9;
}
.pointer .pointer_center {
width: 1400px;
height: 100%;
margin: 0 auto;
}
.pointer .pointer_center .pointer_fl {
float: left;
width: 100%;
height: 100%;
}
.pointer .pointer_center .pointer_title {
height: 35px;
line-height: 35px;
font-size: 35px;
margin-top: 108px;
text-align: center;
}
.pointer .pointer_center .pointer_title .en {
position: relative;
top: -3px;
color: #989898;
font-weight: bold;
margin-right: 15px;
}
.pointer .pointer_center .pointer_title .cn {
font-weight: bold;
color: #2a77de;
}
.pointer .pointer_center .pointer_text {
margin-top: 25px;
font-size: 17px;
line-height: 17px;
height: 17px;
color: #989898;
text-align: center;
}
.pointer .pointer_center .pointer_en_text {
font-size: 14px;
line-height: 14px;
height: 14px;
color: #989898;
margin: 10px auto 0;
text-align: center;
position: relative;
z-index: 3;
}
.pointer .pointer_center .pointer_en_text span {
background: #f5f6f9;
}
.pointer .pointer_center .line {
width: 1354px;
height: 2px;
margin-left: 24px;
background: #cacacc;
position: relative;
top: -7px;
}
.pointer .pointer_center .line .pot {
width: 2px;
height: 2px;
background: #f5f6f9;
float: left;
margin-left: 33px;
}
.pointer .pointer_center .center_lists {
width: 1308px;
height: 227px;
margin: 68px auto 0;
}
.pointer .pointer_center .center_lists dl {
float: left;
height: 100%;
width: 168px;
margin-right: 117px;
}
.pointer .pointer_center .center_lists dl.last {
margin-right: 0px;
}
.pointer .pointer_center .center_lists dl dt {
width: 168px;
height: 168px;
float: left;
}
.pointer .pointer_center .center_lists dl dd {
width: 168px;
height: 23px;
font-size: 23px;
line-height: 23px;
float: left;
margin-top: 36px;
text-align: center;
color: #909091;
}
/* 产品特点模块制作 end */
/* serve 产品服务模块 */
.serve {
height: 520px;
background: #f5f6f9;
}
.serve .serve_center {
height: 100%;
width: 1400px;
margin: 0 auto;
}
.serve .serve_center .serve_fl {
width: 100%;
height: 100%;
float: left;
}
.serve .serve_center .serve_fl .serve_left {
width: 868px;
height: 100%;
float: left;
}
.serve .serve_center .serve_fl .serve_left .serve_left_one {
float: left;
}
.serve .serve_center .serve_fl .serve_left .serve_left_two {
float: right;
}
.serve .serve_center .serve_fl .serve_right {
width: 488px;
height: 100%;
float: left;
padding-left: 44px;
}
.serve .serve_center .serve_fl .serve_right .serve_right_title {
font-size: 34px;
font-weight: bold;
color: #2a77de;
line-height: 34px;
height: 34px;
margin-top: 44px;
}
.serve .serve_center .serve_fl .serve_right .serve_right_sm_title {
font-size: 34px;
font-weight: bold;
color: #2a77de;
line-height: 34px;
height: 34px;
margin-top: 44px;
}
.serve .serve_center .serve_fl .serve_right .serve_right_text {
font-size: 17px;
line-height: 28px;
color: #989898;
margin-top: 39px;
}
.serve .serve_center .serve_fl .serve_right .serve_right_iconlink {
height: 70px;
margin-top: 52px;
position: relative;
}
.serve .serve_center .serve_fl .serve_right .serve_right_iconlink a {
float: left;
margin-right: 47px;
}
.serve .serve_center .serve_fl .serve_right .serve_right_iconlink a.icon_two {
position: relative;
top: 3px;
}
.serve .serve_center .serve_fl .serve_right .serve_right_iconlink a.icon_three {
position: relative;
top: 3px;
}
.serve .serve_center .serve_fl .serve_right .serve_right_iconlink .icon_link_text {
font-size: 23px;
line-height: 23px;
height: 23px;
color: #fe7963;
position: absolute;
right: 33px;
top: 19px;
}
/* serve 产品服务模块 end */
/* 服务行业模块制作 start */
.trade {
height: 712px;
}
.trade .trade_top {
height: 144px;
width: 1440px;
margin: 0 auto;
}
.trade .trade_top .trade_fl {
float: left;
height: 100%;
width: 100%;
}
.trade .trade_top .trade_fl .trade_top_title {
font-size: 34px;
line-height: 34px;
height: 34px;
text-align: center;
margin-top: 32px;
color: #333333;
}
.trade .trade_top .trade_fl .trade_top_en {
font-size: 20px;
line-height: 20px;
height: 20px;
text-align: center;
color: #999999;
margin-top: 9px;
}
.trade .trade_bottom {
height: 483px;
padding-top: 85px;
background: #2a77de;
}
.trade .trade_bottom .trade_bottom_content {
width: 1142px;
height: 100%;
margin: 0 auto;
position: relative;
}
.trade .trade_bottom .trade_bottom_content dl {
width: 160px;
height: 214px;
float: left;
margin-right: 85px;
}
.trade .trade_bottom .trade_bottom_content dl.end {
margin-right: 0px;
}
.trade .trade_bottom .trade_bottom_content dl dt img {
margin-top: 36px;
}
.trade .trade_bottom .trade_bottom_content dl dt {
width: 158px;
height: 158px;
/* 左右两边相加得 */
border: 1px solid white;
border-radius: 50%;
float: left;
text-align: center;
}
.trade .trade_bottom .trade_bottom_content dl dd {
width: 100%;
float: left;
font-size: 21px;
line-height: 21px;
height: 21px;
text-align: center;
color: white;
margin-top: 35px;
}
.trade .trade_bottom .trade_bottom_content .bottom_link {
width: 156px;
height: 85px;
position: absolute;
left: 50%;
margin-left: -78px;
bottom: 88px;
background: url(img/trade_icon03.png) no-repeat center 2px;
}
.trade .trade_bottom .trade_bottom_content .bottom_link .bottom_link_btn {
width: 100%;
height: 50px;
position: absolute;
bottom: 0;
text-align: center;
line-height: 50px;
font-size: 16px;
color: #333333;
background: #fffffe;
border-radius: 9px;
cursor: pointer;
}
/* 服务行业模块制作 end */
</style>
</head>
<body>
<!-- top 头部模块 -->
<div class="top">
<div class="top_content">
<a href="#" class="logo">
<img src="img/logo_icon.png">
</a>
<ul class="top_link_lists">
<li>
<a href="#">
首页介绍
</a>
</li>
<li>
<a href="#">产品说明</a>
</li>
<li>
<a href="#">合作发展</a>
</li>
<li>
<a href="#">关于我们</a>
</li>
<li>
<a href="#"> 联系我们</a>
</li>
</ul>
<div class="top_search">
<input value="请输入搜索内容">
<a href="#" class="search_btn">
<img src="img/search_icon.png" />
</a>
</div>
</div>
</div>
<!-- top 头部模块end -->
<!-- banner 横幅 start -->
<div class="banner">
<div class="banner_content">
<div class="banner_title">
MUKE WANG
</div>
<div class="banner_text">
商务金融数据分析
</div>
<div class="banner_line"></div>
<div class='banner_bottom_title'>
财经报道/第一手股市新闻资讯
</div>
<div class="banner_bottom_text">
I AM A FREELANCE DESIGNER, AND OFTEN RECEIVE SOME OUTSOURCING SERVICES. BEFORE I MEET THE PHOTOGRAPHER, I NEED TO CREATE EACH PICTURE BY MYSELF, WHICH IS TIME-CONSUMING.
</div>
<div class="banner_btn_outNode">
<div class="banner_btn btn_one">
立即注册
</div>
<div class="banner_btn">
申请合作
</div>
</div>
<ul class='banner_lists'>
<li>
01
</li>
<li class='active'>
02
</li>
<li>
03
</li>
<li>
04
</li>
</ul>
<ol class='banner_position'>
<li class='active'></li>
<li></li>
<li></li>
<li class='end'></li>
</ol>
</div>
</div>
<!-- banner 横幅 end -->
<!-- mukeText 文字功能性模块start -->
<div class="mukeText">
<ul class="mukeText_lists">
<li>
<img class="mukeText_lists_img" src="img/mukeText_01.png">
<div class="mukeText_lists_rightNode">
<p class="top_title">我要借款</p>
<p class="top_text">无抵押、担保信用贷</p>
<p class="top_text">资金快至当天到帐，可申请20万</p>
</div>
</li>
<li>
<img class="mukeText_lists_img mukeText_lists_img_two" src="img/mukeText_02.png">
<div class="mukeText_lists_rightNode">
<p class="top_title">安全保障</p>
<p class="top_text">无抵押、担保信用贷</p>
<p class='top_text'>
资金快至当天到账，可申请20万
</p>
</div>
</li>
<li>
<img class="mukeText_lists_img mukeText_lists_img_three" src="img/mukeText_03.png">
<div class='mukeText_lists_rightNode mukeText_lists_rightNode_three'>
<p class='top_title'>我要出借</p>
<p class='top_text'>
无抵押、担保信用贷。
</p>
<p class='top_text'>
资金快至当天到账，可申请20万
</p>
</div>
</li>
</ul>
</div>
<!-- mukeEnd 文字功能性模块start -->
<!-- project 产品优势模块 start -->
<div class="project">
<div class="project_content">
<div class="project_content_left">
<p>慕课金融</p>
<p>产品特点以及优势</p>
<div class='line'></div>
</div>
<div class="project_content_right">
我是一个自由设计师，经常会接一些外包服务，在没有遇见慕课之前每一张图都需要自己创作，很费时。现在用图有授权，客户放心，我也更省心。
</div>
</div>
</div>
<!-- project 产品优势模块 end -->
<!-- 产品特点模块制作 start -->
<div class="pointer">
<div class="pointer_center">
<!-- 避免margin-top 出现意外 -->
<div class="pointer_fl">
<div class="pointer_title">
<span class="en">SOFA AUTUMN DISCOUNT</span>
<span class="cn">
超强五包服务
</span>
</div>
<div class="pointer_text">
著作权及相关权利归本网站所有，慕课网学习
</div>
<div class="pointer_en_text">
<span>
Photo network/European sofa autumn discount
</span>
</div>
<div class="line">
<div class='pot'></div>
<div class='pot'></div>
<div class='pot'></div>
<div class='pot'></div>
<div class='pot'></div>
<div class='pot'></div>
<div class='pot'></div>
<div class='pot'></div>
<div class='pot'></div>
<div class='pot'></div>
<div class='pot'></div>
<div class='pot'></div>
<div class='pot'></div>
<div class='pot'></div>
<div class='pot'></div>
<div class='pot'></div>
<div class='pot'></div>
<div class='pot'></div>
<div class='pot'></div>
<div class='pot'></div>
<div class='pot'></div>
<div class='pot'></div>
<div class='pot'></div>
<div class='pot'></div>
<div class='pot'></div>
<div class='pot'></div>
<div class='pot'></div>
<div class='pot'></div>
<div class='pot'></div>
<div class='pot'></div>
<div class='pot'></div>
<div class='pot'></div>
<div class='pot'></div>
<div class='pot'></div>
<div class='pot'></div>
<div class='pot'></div>
<div class='pot'></div>
<div class='pot'></div>
</div>
<div class="center_lists">
<dl>
<dt>
<img src="img/pointer_icon_01.png"/>
</dt>
<dd>
慕课原创作品
</dd>
</dl>
<dl>
<dt>
<img src="img/pointer_icon_02.png"/>
</dt>
<dd>
慕课原创作品
</dd>
</dl>
<dl>
<dt>
<img src="img/pointer_icon_03.png"/>
</dt>
<dd>
慕课原创作品
</dd>
</dl>
<dl>
<dt>
<img src="img/pointer_icon_04.png"/>
</dt>
<dd>
慕课原创作品
</dd>
</dl>
<dl class="last">
<dt>
<img src="img/pointer_icon_05.png"/>
</dt>
<dd>
慕课原创作品
</dd>
</dl>
</div>
</div>
</div>
</div>
<!-- 产品特点模块制作 end -->
<!-- 产品服务模块制作 start -->
<div class="serve">
<div class="serve_center">
<div class="serve_fl">
<div class="serve_left">
<img src="img/serve_image_01.png" class="serve_left_one">
<img src="img/serve_image_02.png" class="serve_left_two">
</div>
<div class="serve_right">
<div class="serve_right_title">
超强五包服务
</div>
<div class="serve_right_sm_title">
SOFA AUTUMN DISCOUNT
</div>
<div class="serve_right_text">
All original works (including preview photos) are protected by copyright law.Copyright and related rights belong to this website, all stolen map will be corrected.
</div>
<div class="serve_right_iconlink">
<a href="#">
<img src="img/serve_icon01.png">
</a>
<a href="#" class="icon_two">
<img src="img/serve_icon02.png" />
</a>
<a href="#" class="icon_three">
<img src="img/serve_icon03.png" />
</a>
<a href="#" class='icon_link_text'>
点击查看>>
</a>
</div>
</div>
</div>
</div>
</div>
<!-- 产品服务模块制作 end -->
<!-- 服务行业模块制作 start -->
<div class="trade">
<div class="trade_top">
<div class="trade_fl">
<div class="trade_top_title">
服务行业
</div>
<div class="trade_top_en">
BUSINESS INTRODUCTION
</div>
</div>
</div>
<div class="trade_bottom">
<div class="trade_bottom_content">
<dl>
<dt>
<img src="img/trade_icon01.png"/>
</dt>
<dd>化妆品</dd>
</dl>
<dl>
<dt>
<img src="img/trade_icon02.png" style='margin-top: 46px;'/>
</dt>
<dd>个人护理</dd>
</dl>
<dl>
<dt>
<img src="img/trade_icon04.png" style='margin-top: 33px;'/>
</dt>
<dd>电子电器品</dd>
</dl>
<dl>
<dt>
<img src="img/trade_icon05.png" style='margin-top: 28px;'/>
</dt>
<dd>烟草珠宝</dd>
</dl>
<dl class="end">
<dt>
<img src="img/trade_icon06.png" style='margin-top: 32px;'/>
</dt>
<dd>其他</dd>
</dl>
<div class="bottom_link">
<div class='bottom_link_btn'>
了解更多服务
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 服务行业模块制作 end -->
</body>
</html>
底部导航模块制作
资源
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" type="text/css" href="css/reset.css" />
<style>
/*top 头部模块start*/
.top {
height: 138px;
background: #1483ff;
}
.top_content {
width: 1400px;
height: 100%;
margin: 0 auto;
}
.top_content .logo {
float: left;
margin: 39px 0 0 1px;
}
.top_content .top_link_lists {
height: 100%;
float: left;
margin-left: 209px;
}
.top_content .top_link_lists li {
float: left;
margin: 0 23px;
font-size: 15px;
line-height: 138px;
height: 100%;
}
.top_content .top_link_lists li a {
color: #ffffff;
}
.top_content .top_search {
width: 219px;
height: 51px;
float: right;
margin-right: 5px;
margin-top: 47px;
background: #47adf2;
border-radius: 25.5px;
}
.top_content .top_search input {
width: 141px;
height: 100%;
float: left;
margin-left: 21px;
border: none;
outline: none;
padding: 0;
background: none;
text-indent: 2px;
line-height: 51px;
font-size: 15px;
color: #fff;
}
.top_content .top_search .search_btn {
float: left;
margin-left: 7px;
margin-top: 12px;
}
/*top 头部模块end*/
/* <!-- banner 横幅 start --> */
.banner {
width: 100%;
height: 818px;
background: url(img/banner_bg.png) no-repeat center center, #1b9ffc;
;
}
.banner .banner_content {
height: 100%;
width: 1400px;
margin: 0 auto;
position: relative;
}
.banner .banner_content .banner_title {
font-size: 50px;
height: 50px;
line-height: 50px;
color: white;
margin-top: 127px;
float: left;
width: 100%;
text-indent: 6px;
}
.banner .banner_content .banner_text {
font-size: 57px;
height: 57px;
line-height: 57px;
color: white;
float: left;
width: 100%;
text-indent: 6px;
margin-top: 21px;
font-weight: bold;
}
.banner .banner_content .banner_line {
height: 4px;
width: 505px;
float: left;
background: white;
margin: 28px 0 0 3px;
}
.banner .banner_content .banner_bottom_title {
font-size: 33px;
line-height: 33px;
height: 33px;
color: white;
float: left;
width: 100%;
text-indent: 6px;
margin-top: 50px;
}
.banner .banner_content .banner_bottom_text {
font-size: 20px;
color: white;
line-height: 32px;
width: 745px;
float: left;
margin-left: 6px;
margin-top: 40px;
}
.banner .banner_content .banner_btn_outNode {
width: 100%;
float: left;
height: 70px;
margin-top: 95px;
margin-left: 4px;
}
.banner .banner_content .banner_btn_outNode .banner_btn {
width: 213px;
height: 100%;
float: left;
border-radius: 107px;
background: url(img/btn_bg.png) repeat-y;
font-size: 23px;
line-height: 70px;
color: white;
text-align: center;
cursor: pointer;
margin-right: 27px;
}
.banner .banner_content .banner_btn_outNode .btn_one {
margin-left: 4px;
}
.banner .banner_content .banner_lists {
width: 100%;
float: left;
height: 27px;
margin-top: 69px;
text-indent: -1px;
}
.banner .banner_content .banner_lists li {
float: left;
height: 20px;
line-height: 20px;
font-size: 20px;
color: white;
margin-left: 43px;
cursor: pointer;
position: relative;
/* 用最高的做定位，默认往下4px */
top: 4px;
}
.banner .banner_content .banner_lists .active {
font-size: 27px;
line-height: 27px;
color: #fdc235;
height: 27px;
top: 0;
}
.banner .banner_content .banner_position {
width: 80px;
height: 10px;
position: absolute;
left: 50%;
bottom: 29px;
margin-left: -40px;
}
.banner .banner_content .banner_position li {
width: 10px;
height: 10px;
float: left;
background: #f0f0f0;
border-radius: 50%;
margin-right: 13px;
cursor: pointer;
}
.banner .banner_content .banner_position li.active {
background: #fe672d;
}
.banner .banner_content .banner_position .end {
margin-right: 0;
}
/* <!-- banner 横幅 end --> */
/* mukeText 文字功能性模板start */
.mukeText {
width: 1400px;
height: 221px;
margin: 0 auto;
}
.mukeText .mukeText_lists {
width: 100%;
height: 100%;
}
.mukeText .mukeText_lists li {
float: left;
width: 466.5px;
height: 100%;
}
.mukeText .mukeText_lists li .mukeText_lists_img {
float: left;
margin-top: 74px;
}
.mukeText .mukeText_lists li .mukeText_lists_img_two {
margin-top: 82px;
margin-left: 39px;
}
.mukeText .mukeText_lists li .mukeText_lists_img_three {
margin-top: 80px;
margin-left: 40px;
}
.mukeText .mukeText_lists li .mukeText_lists_rightNode {
float: left;
height: 100%;
width: 346.5px;
}
.mukeText .mukeText_lists li .mukeText_lists_rightNode_three {
width: 319.5px;
}
.mukeText .mukeText_lists li .mukeText_lists_rightNode .top_title {
height: 22px;
font-size: 22px;
line-height: 22px;
color: #333333;
font-weight: bold;
margin-top: 47px;
text-indent: 26px;
margin-bottom: 42px;
}
.mukeText .mukeText_lists li .mukeText_lists_rightNode .top_text {
font-size: 19px;
height: 19px;
line-height: 19px;
color: #666666;
text-indent: 26px;
margin-top: 16px;
}
/* mukeText 文字功能性模板end */
/* project 产品优势模块 start */
.project {
width: 100%;
height: 277px;
background: #1b9ffc;
}
.project .project_content {
width: 1400px;
margin: 0 auto;
height: 100%;
}
.project .project_content .project_content_left {
float: left;
width: 663px;
height: 260px;
padding-top: 17px;
}
.project .project_content .project_content_left p {
font-size: 34px;
line-height: 34px;
height: 34px;
font-weight: bold;
color: #ffffff;
margin-top: 16px;
}
.project .project_content .project_content_left .line {
height: 4px;
width: 66px;
background: #ff902d;
margin-top: 37px;
}
.project .project_content .project_content_right {
width: 737px;
height: 260px;
float: left;
font-size: 17px;
line-height: 31px;
padding-top: 17px;
color: #ffffff;
background: url(img/project_icon.png) no-repeat left 123px;
}
/* project 产品优势模块 end */
/* <!-- 产品特点模块制作 start --> */
.pointer {
height: 648px;
background: #f5f6f9;
}
.pointer .pointer_center {
width: 1400px;
height: 100%;
margin: 0 auto;
}
.pointer .pointer_center .pointer_fl {
float: left;
width: 100%;
height: 100%;
}
.pointer .pointer_center .pointer_title {
height: 35px;
line-height: 35px;
font-size: 35px;
margin-top: 108px;
text-align: center;
}
.pointer .pointer_center .pointer_title .en {
position: relative;
top: -3px;
color: #989898;
font-weight: bold;
margin-right: 15px;
}
.pointer .pointer_center .pointer_title .cn {
font-weight: bold;
color: #2a77de;
}
.pointer .pointer_center .pointer_text {
margin-top: 25px;
font-size: 17px;
line-height: 17px;
height: 17px;
color: #989898;
text-align: center;
}
.pointer .pointer_center .pointer_en_text {
font-size: 14px;
line-height: 14px;
height: 14px;
color: #989898;
margin: 10px auto 0;
text-align: center;
position: relative;
z-index: 3;
}
.pointer .pointer_center .pointer_en_text span {
background: #f5f6f9;
}
.pointer .pointer_center .line {
width: 1354px;
height: 2px;
margin-left: 24px;
background: #cacacc;
position: relative;
top: -7px;
}
.pointer .pointer_center .line .pot {
width: 2px;
height: 2px;
background: #f5f6f9;
float: left;
margin-left: 33px;
}
.pointer .pointer_center .center_lists {
width: 1308px;
height: 227px;
margin: 68px auto 0;
}
.pointer .pointer_center .center_lists dl {
float: left;
height: 100%;
width: 168px;
margin-right: 117px;
}
.pointer .pointer_center .center_lists dl.last {
margin-right: 0px;
}
.pointer .pointer_center .center_lists dl dt {
width: 168px;
height: 168px;
float: left;
}
.pointer .pointer_center .center_lists dl dd {
width: 168px;
height: 23px;
font-size: 23px;
line-height: 23px;
float: left;
margin-top: 36px;
text-align: center;
color: #909091;
}
/* 产品特点模块制作 end */
/* serve 产品服务模块 */
.serve {
height: 520px;
background: #f5f6f9;
}
.serve .serve_center {
height: 100%;
width: 1400px;
margin: 0 auto;
}
.serve .serve_center .serve_fl {
width: 100%;
height: 100%;
float: left;
}
.serve .serve_center .serve_fl .serve_left {
width: 868px;
height: 100%;
float: left;
}
.serve .serve_center .serve_fl .serve_left .serve_left_one {
float: left;
}
.serve .serve_center .serve_fl .serve_left .serve_left_two {
float: right;
}
.serve .serve_center .serve_fl .serve_right {
width: 488px;
height: 100%;
float: left;
padding-left: 44px;
}
.serve .serve_center .serve_fl .serve_right .serve_right_title {
font-size: 34px;
font-weight: bold;
color: #2a77de;
line-height: 34px;
height: 34px;
margin-top: 44px;
}
.serve .serve_center .serve_fl .serve_right .serve_right_sm_title {
font-size: 34px;
font-weight: bold;
color: #2a77de;
line-height: 34px;
height: 34px;
margin-top: 44px;
}
.serve .serve_center .serve_fl .serve_right .serve_right_text {
font-size: 17px;
line-height: 28px;
color: #989898;
margin-top: 39px;
}
.serve .serve_center .serve_fl .serve_right .serve_right_iconlink {
height: 70px;
margin-top: 52px;
position: relative;
}
.serve .serve_center .serve_fl .serve_right .serve_right_iconlink a {
float: left;
margin-right: 47px;
}
.serve .serve_center .serve_fl .serve_right .serve_right_iconlink a.icon_two {
position: relative;
top: 3px;
}
.serve .serve_center .serve_fl .serve_right .serve_right_iconlink a.icon_three {
position: relative;
top: 3px;
}
.serve .serve_center .serve_fl .serve_right .serve_right_iconlink .icon_link_text {
font-size: 23px;
line-height: 23px;
height: 23px;
color: #fe7963;
position: absolute;
right: 33px;
top: 19px;
}
/* serve 产品服务模块 end */
/* 服务行业模块制作 start */
.trade {
height: 712px;
}
.trade .trade_top {
height: 144px;
width: 1440px;
margin: 0 auto;
}
.trade .trade_top .trade_fl {
float: left;
height: 100%;
width: 100%;
}
.trade .trade_top .trade_fl .trade_top_title {
font-size: 34px;
line-height: 34px;
height: 34px;
text-align: center;
margin-top: 32px;
color: #333333;
}
.trade .trade_top .trade_fl .trade_top_en {
font-size: 20px;
line-height: 20px;
height: 20px;
text-align: center;
color: #999999;
margin-top: 9px;
}
.trade .trade_bottom {
height: 483px;
padding-top: 85px;
background: #2a77de;
}
.trade .trade_bottom .trade_bottom_content {
width: 1142px;
height: 100%;
margin: 0 auto;
position: relative;
}
.trade .trade_bottom .trade_bottom_content dl {
width: 160px;
height: 214px;
float: left;
margin-right: 85px;
}
.trade .trade_bottom .trade_bottom_content dl.end {
margin-right: 0px;
}
.trade .trade_bottom .trade_bottom_content dl dt img {
margin-top: 36px;
}
.trade .trade_bottom .trade_bottom_content dl dt {
width: 158px;
height: 158px;
/* 左右两边相加得 */
border: 1px solid white;
border-radius: 50%;
float: left;
text-align: center;
}
.trade .trade_bottom .trade_bottom_content dl dd {
width: 100%;
float: left;
font-size: 21px;
line-height: 21px;
height: 21px;
text-align: center;
color: white;
margin-top: 35px;
}
.trade .trade_bottom .trade_bottom_content .bottom_link {
width: 156px;
height: 85px;
position: absolute;
left: 50%;
margin-left: -78px;
bottom: 88px;
background: url(img/trade_icon03.png) no-repeat center 2px;
}
.trade .trade_bottom .trade_bottom_content .bottom_link .bottom_link_btn {
width: 100%;
height: 50px;
position: absolute;
bottom: 0;
text-align: center;
line-height: 50px;
font-size: 16px;
color: #333333;
background: #fffffe;
border-radius: 9px;
cursor: pointer;
}
/* 服务行业模块制作 end */
/* 友情链接模块 Start */
.link {
height: 316px;
background: #f5f6f9;
}
.link .link_center {
width: 1400px;
height: 100%;
margin: 0 auto;
}
.link .link_center .link_fl {
float: left;
width: 100%;
height: 100%;
}
.link .link_center .link_fl .link_title {
width: 100%;
font-size: 34px;
height: 34px;
line-height: 34px;
text-align: center;
color: #444444;
margin-top: 98px;
}
.link .link_center .link_fl .link_logos {
height: 44px;
margin-top: 76px;
}
.link .link_center .link_fl .link_logos li {
float: left;
margin-right: 84px;
}
/* .link .link_center .link_fl .link_logos li a {
float: left;
} */
.link .link_center .link_fl .link_logos li.end {
margin-right: 0;
}
/* 友情链接模块 end */
/* footer 底部导航模块 start */
.footer {
height: 163px;
background: #f5f6f9;
}
.footer .footer_top {
height: 141px;
background: #1483ff;
}
.footer .footer_top .footer_content {
width: 1400px;
height: 76px;
margin: 0 auto;
padding-top: 65px;
position: relative;
}
.footer .footer_top .footer_content .footer_links {
height: 16px;
font-size: 16px;
line-height: 16px;
text-align: center;
}
.footer .footer_top .footer_content .footer_links a {
color: #ffffff;
margin: 0 22px;
}
.footer .footer_top .footer_content .icon_lins {
position: absolute;
width: 140px;
height: 18px;
right: 3px;
top: 63px;
}
.footer .footer_top .footer_content .icon_lins a {
float: left;
}
.footer .footer_top .footer_content .icon_lins a.footer_icon_one {
margin: 2px 25px 0 0;
}
.footer .footer_top .footer_content .icon_lins a.footer_icon_two {
margin: 0px 23px 0 0;
}
.footer .footer_top .footer_content .icon_lins a.footer_icon_three {
margin: 3px 22px 0 0;
}
.footer .footer_top .footer_content .icon_lins a.footer_icon_last {
margin-top: 2px;
}
/* footer 底部导航模块 end */
</style>
</head>
<body>
<!-- top 头部模块 -->
<div class="top">
<div class="top_content">
<a href="#" class="logo">
<img src="img/logo_icon.png">
</a>
<ul class="top_link_lists">
<li>
<a href="#">
首页介绍
</a>
</li>
<li>
<a href="#">产品说明</a>
</li>
<li>
<a href="#">合作发展</a>
</li>
<li>
<a href="#">关于我们</a>
</li>
<li>
<a href="#"> 联系我们</a>
</li>
</ul>
<div class="top_search">
<input value="请输入搜索内容">
<a href="#" class="search_btn">
<img src="img/search_icon.png" />
</a>
</div>
</div>
</div>
<!-- top 头部模块end -->
<!-- banner 横幅 start -->
<div class="banner">
<div class="banner_content">
<div class="banner_title">
MUKE WANG
</div>
<div class="banner_text">
商务金融数据分析
</div>
<div class="banner_line"></div>
<div class='banner_bottom_title'>
财经报道/第一手股市新闻资讯
</div>
<div class="banner_bottom_text">
I AM A FREELANCE DESIGNER, AND OFTEN RECEIVE SOME OUTSOURCING SERVICES. BEFORE I MEET THE PHOTOGRAPHER, I NEED TO CREATE EACH PICTURE BY MYSELF, WHICH IS TIME-CONSUMING.
</div>
<div class="banner_btn_outNode">
<div class="banner_btn btn_one">
立即注册
</div>
<div class="banner_btn">
申请合作
</div>
</div>
<ul class='banner_lists'>
<li>
01
</li>
<li class='active'>
02
</li>
<li>
03
</li>
<li>
04
</li>
</ul>
<ol class='banner_position'>
<li class='active'></li>
<li></li>
<li></li>
<li class='end'></li>
</ol>
</div>
</div>
<!-- banner 横幅 end -->
<!-- mukeText 文字功能性模块start -->
<div class="mukeText">
<ul class="mukeText_lists">
<li>
<img class="mukeText_lists_img" src="img/mukeText_01.png">
<div class="mukeText_lists_rightNode">
<p class="top_title">我要借款</p>
<p class="top_text">无抵押、担保信用贷</p>
<p class="top_text">资金快至当天到帐，可申请20万</p>
</div>
</li>
<li>
<img class="mukeText_lists_img mukeText_lists_img_two" src="img/mukeText_02.png">
<div class="mukeText_lists_rightNode">
<p class="top_title">安全保障</p>
<p class="top_text">无抵押、担保信用贷</p>
<p class='top_text'>
资金快至当天到账，可申请20万
</p>
</div>
</li>
<li>
<img class="mukeText_lists_img mukeText_lists_img_three" src="img/mukeText_03.png">
<div class='mukeText_lists_rightNode mukeText_lists_rightNode_three'>
<p class='top_title'>我要出借</p>
<p class='top_text'>
无抵押、担保信用贷。
</p>
<p class='top_text'>
资金快至当天到账，可申请20万
</p>
</div>
</li>
</ul>
</div>
<!-- mukeEnd 文字功能性模块start -->
<!-- project 产品优势模块 start -->
<div class="project">
<div class="project_content">
<div class="project_content_left">
<p>慕课金融</p>
<p>产品特点以及优势</p>
<div class='line'></div>
</div>
<div class="project_content_right">
我是一个自由设计师，经常会接一些外包服务，在没有遇见慕课之前每一张图都需要自己创作，很费时。现在用图有授权，客户放心，我也更省心。
</div>
</div>
</div>
<!-- project 产品优势模块 end -->
<!-- 产品特点模块制作 start -->
<div class="pointer">
<div class="pointer_center">
<!-- 避免margin-top 出现意外 -->
<div class="pointer_fl">
<div class="pointer_title">
<span class="en">SOFA AUTUMN DISCOUNT</span>
<span class="cn">
超强五包服务
</span>
</div>
<div class="pointer_text">
著作权及相关权利归本网站所有，慕课网学习
</div>
<div class="pointer_en_text">
<span>
Photo network/European sofa autumn discount
</span>
</div>
<div class="line">
<div class='pot'></div>
<div class='pot'></div>
<div class='pot'></div>
<div class='pot'></div>
<div class='pot'></div>
<div class='pot'></div>
<div class='pot'></div>
<div class='pot'></div>
<div class='pot'></div>
<div class='pot'></div>
<div class='pot'></div>
<div class='pot'></div>
<div class='pot'></div>
<div class='pot'></div>
<div class='pot'></div>
<div class='pot'></div>
<div class='pot'></div>
<div class='pot'></div>
<div class='pot'></div>
<div class='pot'></div>
<div class='pot'></div>
<div class='pot'></div>
<div class='pot'></div>
<div class='pot'></div>
<div class='pot'></div>
<div class='pot'></div>
<div class='pot'></div>
<div class='pot'></div>
<div class='pot'></div>
<div class='pot'></div>
<div class='pot'></div>
<div class='pot'></div>
<div class='pot'></div>
<div class='pot'></div>
<div class='pot'></div>
<div class='pot'></div>
<div class='pot'></div>
<div class='pot'></div>
</div>
<div class="center_lists">
<dl>
<dt>
<img src="img/pointer_icon_01.png"/>
</dt>
<dd>
慕课原创作品
</dd>
</dl>
<dl>
<dt>
<img src="img/pointer_icon_02.png"/>
</dt>
<dd>
慕课原创作品
</dd>
</dl>
<dl>
<dt>
<img src="img/pointer_icon_03.png"/>
</dt>
<dd>
慕课原创作品
</dd>
</dl>
<dl>
<dt>
<img src="img/pointer_icon_04.png"/>
</dt>
<dd>
慕课原创作品
</dd>
</dl>
<dl class="last">
<dt>
<img src="img/pointer_icon_05.png"/>
</dt>
<dd>
慕课原创作品
</dd>
</dl>
</div>
</div>
</div>
</div>
<!-- 产品特点模块制作 end -->
<!-- 产品服务模块制作 start -->
<div class="serve">
<div class="serve_center">
<div class="serve_fl">
<div class="serve_left">
<img src="img/serve_image_01.png" class="serve_left_one">
<img src="img/serve_image_02.png" class="serve_left_two">
</div>
<div class="serve_right">
<div class="serve_right_title">
超强五包服务
</div>
<div class="serve_right_sm_title">
SOFA AUTUMN DISCOUNT
</div>
<div class="serve_right_text">
All original works (including preview photos) are protected by copyright law.Copyright and related rights belong to this website, all stolen map will be corrected.
</div>
<div class="serve_right_iconlink">
<a href="#">
<img src="img/serve_icon01.png">
</a>
<a href="#" class="icon_two">
<img src="img/serve_icon02.png" />
</a>
<a href="#" class="icon_three">
<img src="img/serve_icon03.png" />
</a>
<a href="#" class='icon_link_text'>
点击查看>>
</a>
</div>
</div>
</div>
</div>
</div>
<!-- 产品服务模块制作 end -->
<!-- 服务行业模块制作 start -->
<div class="trade">
<div class="trade_top">
<div class="trade_fl">
<div class="trade_top_title">
服务行业
</div>
<div class="trade_top_en">
BUSINESS INTRODUCTION
</div>
</div>
</div>
<div class="trade_bottom">
<div class="trade_bottom_content">
<dl>
<dt>
<img src="img/trade_icon01.png"/>
</dt>
<dd>化妆品</dd>
</dl>
<dl>
<dt>
<img src="img/trade_icon02.png" style='margin-top: 46px;'/>
</dt>
<dd>个人护理</dd>
</dl>
<dl>
<dt>
<img src="img/trade_icon04.png" style='margin-top: 33px;'/>
</dt>
<dd>电子电器品</dd>
</dl>
<dl>
<dt>
<img src="img/trade_icon05.png" style='margin-top: 28px;'/>
</dt>
<dd>烟草珠宝</dd>
</dl>
<dl class="end">
<dt>
<img src="img/trade_icon06.png" style='margin-top: 32px;'/>
</dt>
<dd>其他</dd>
</dl>
<div class="bottom_link">
<div class='bottom_link_btn'>
了解更多服务
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 服务行业模块制作 end -->
<!-- 友情链接模块 start -->
<div class="link">
<div class="link_center">
<div class="link_fl">
<div class="link_title">
他们选择慕课
</div>
<ul class='link_logos'>
<li>
<a href="#" style="margin-top: 5px;">
<img src="img/link_icon01.png" />
</a>
</li>
<li>
<a href="#" style="margin-top: 2px;">
<img src="img/link_icon02.png" />
</a>
</li>
<li>
<a href="#" style="margin-top:2px;">
<img src="img/link_icon03.png" />
</a>
</li>
<li>
<a href="#" style="margin-top:4px;">
<img src="img/link_icon04.png" />
</a>
</li>
<li>
<a href="#" style="margin-top:8px;">
<img src="img/link_icon05.png" />
</a>
</li>
<li>
<a href="#" style="margin-top:4px;">
<img src="img/link_icon06.png" />
</a>
</li>
<li>
<a href="#" style="margin-top:12px;">
<img src="img/link_icon07.png" />
</a>
</li>
<li class='end'>
<a href="#" style="margin-top:2px;">
<img src="img/link_icon08.png" />
</a>
</li>
</ul>
</div>
</div>
</div>
<!-- 友情链接模块 end -->
<!-- footer 底部导航模块 start -->
<div class="footer">
<div class="footer_top">
<div class='footer_content'>
<div class="footer_links">
<a href="#">
首页
</a>
<a href="#">
产品市场
</a>
<a href="#">
创新研发
</a>
<a href="#">
精益生产
</a>
<a href="#">
增值服务
</a>
<a href="#">
产品市场
</a>
<a href="#">
可持续发展
</a>
<a href="#">
关于我们
</a>
</div>
<div class="icon_lins">
<a href="#" class='footer_icon_one'>
<img src="img/footer_icon01.png" />
</a>
<a href="#" class='footer_icon_two'>
<img src="img/footer_icon02.png" />
</a>
<a href="#" class='footer_icon_three'>
<img src="img/footer_icon03.png" />
</a>
<a href="#" class='footer_icon_last'>
<img src="img/footer_icon04.png" />
</a>
</div>
</div>
</div>
</div>
<!-- footer 底部导航模块 end -->
</body>
</html>
扩展-h标签
标签：实战,
banner,
top,
必学,
height,
content,
案例,
margin,
left
From： https://www.cnblogs.com/xiaochenNN/p/18085025
