20160616 html5练习代码一-白红宇

20160616 html5练习代码一

阅读量：5164 次

发布时间：2019-06-13

本文共 33524 字，大约阅读时间需要 111 分钟。

index.html

<!DOCTYPE>

<head>

</head>

<body>

</div>

<a href="#">ABOUT</a>

<a href="#">SERVICES</a>

<a href="#">PROTFOLIO</a>

<a href="#">BENIFITS</a>

<a href="#">PRICING</a>

<a href="#">CONTACT</a>

</div>

</header>

<!--<div class="hd">

</div>-->

<ul>

<h1> PARRALAX <span>ONE PAGE</span> HAS ARRIVED</h1>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit amet sed diam nonummy nibh <span>dolore</span></p>

</div>

</li>

<h3>EXTREMELY <span>RESPONSIVE</span> DESIGN</h3>

</div>

</li>

</ul>

</div>

</div>

<h3>METRONIC <span>INSPIRES</span></h3>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</p>

</div>

<p>Clean Code</p>

</div>

<p>Huges Updates</p>

</div>

<p>Responsive</p>

</div>

<h3>OUR <span>SERVICES</span></h3>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</p>

</div>

<dd>

<dl>

<h4>Fantastic Support</h4>

<p>Lorem ipsum et dolor amet consectetuer diam</p>

</dl>

<dl>

<h4>Fantastic Support</h4>

<p>Lorem ipsum et dolor amet consectetuer diam</p>

</dl>

<dl>

<h4>Fantastic Support</h4>

<p>Lorem ipsum et dolor amet consectetuer diam</p>

</dl>

<dl>

<h4>Fantastic Support</h4>

<p>Lorem ipsum et dolor amet consectetuer diam</p>

</dl>

</dd>

</div>

<h4>THE DETAILS ARE NOT THE DETAILS<br><span>THEY MAKE THE DESIGN</span></h4>

<p>KEEN THEMES</p>

</div>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</p>

</div>

<h4>Marcus Doe</h4>

<span>FOUNDER</span>

<p>Lorem ipsum dolor amet, tempor ut labore magna tempor dolore </p>

</div>

<h4>Marcus Doe</h4>

<span>FOUNDER</span>

<p>Lorem ipsum dolor amet, tempor ut labore magna tempor dolore </p>

</div>

<h4>Marcus Doe</h4>

<span>FOUNDER</span>

<p>Lorem ipsum dolor amet, tempor ut labore magna tempor dolore </p>

</div>

<h3>LASTEST<span> WORKS</span></h3>

</div>

</a>

<div>

<h5>LONDON CITY PROJECT</h5>

<p>PROPERTY</p>

<a href="#">DETAILS</a>

</div>

</li>

<li>

</a>

<div>

<h5>LONDON CITY PROJECT</h5>

<p>PROPERTY</p>

<a href="#">DETAILS</a>

</div>

</li>

<li>

</a>

<div>

<h5>LONDON CITY PROJECT</h5>

<p>PROPERTY</p>

<a href="#">DETAILS</a>

</div>

</li>

<li>

</a>

<div>

<h5>LONDON CITY PROJECT</h5>

<p>PROPERTY</p>

<a href="#">DETAILS</a>

</div>

</li>

<li>

</a>

<div>

<h5>LONDON CITY PROJECT</h5>

<p>PROPERTY</p>

<a href="#">DETAILS</a>

</div>

</li>

<li>

</a>

<div>

<h5>LONDON CITY PROJECT</h5>

<p>PROPERTY</p>

<a href="#">DETAILS</a>

</div>

</li>

<li>

</a>

<div>

<h5>LONDON CITY PROJECT</h5>

<p>PROPERTY</p>

<a href="#">DETAILS</a>

</div>

</li>

<li>

</a>

<div>

<h5>LONDON CITY PROJECT</h5>

<p>PROPERTY</p>

<a href="#">DETAILS</a>

</div>

</li>

<li>

</a>

<div>

<h5>LONDON CITY PROJECT</h5>

<p>PROPERTY</p>

<a href="#">DETAILS</a>

</div>

</li>

<li>

</a>

<div>

<h5>LONDON CITY PROJECT</h5>

<p>PROPERTY</p>

<a href="#">DETAILS</a>

</div>

</li>

<li>

</a>

<div>

<h5>LONDON CITY PROJECT</h5>

<p>PROPERTY</p>

<a href="#">DETAILS</a>

</div>

</li>

<li>

</a>

<div>

<h5>LONDON CITY PROJECT</h5>

<p>PROPERTY</p>

<a href="#">DETAILS</a>

</div>

</li>

</ul>

</div>

<h3>WHY TO <span>CHOOSE US</span></h3>

<p>Lorem ipsum dolor sit amet, <span style="color:#1ea9e3">consectetuer piscing</span>elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. </p>

</div>

<p><em></em>Lorem ipsum dolor sit amet</p>

<ul>

<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod </li>

<li>tempor incididunt ut labore et dolore magna aliqua. Ut enim minim veniam quis </li>

<li>nostrud exercitation dolore magna ullamco.</li>

<li>Ut enim ad minim veniam, quis nostrud exercitation ullamco sed eiusmod </li>

<li>tempor ut labore et dolore.</li>

</ul>

<p><em></em>Consectetur adipisicing elit</p>

<ul>

<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod </li>

<li>tempor incididunt ut labore et dolore magna aliqua. Ut enim minim veniam quis </li>

<li>nostrud exercitation dolore magna ullamco.</li>

<li>Ut enim ad minim veniam, quis nostrud exercitation ullamco sed eiusmod </li>

<li>tempor ut labore et dolore.</li>

</ul>

<p><em></em>Augue assum anteposuerit dolore</p>

<ul>

<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod </li>

<li>tempor incididunt ut labore et dolore magna aliqua. Ut enim minim veniam quis </li>

<li>nostrud exercitation dolore magna ullamco.</li>

<li>Ut enim ad minim veniam, quis nostrud exercitation ullamco sed eiusmod </li>

<li>tempor ut labore et dolore.</li>

</ul>

<p><em></em>Sollemnes in futurum</p>

<ul>

<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod </li>

<li>tempor incididunt ut labore et dolore magna aliqua. Ut enim minim veniam quis </li>

<li>nostrud exercitation dolore magna ullamco.</li>

<li>Ut enim ad minim veniam, quis nostrud exercitation ullamco sed eiusmod </li>

<li>tempor ut labore et dolore.</li>

</ul>

<p><em></em>Nostrud Tempor veniam</p>

<ul>

<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod </li>

<li>tempor incididunt ut labore et dolore magna aliqua. Ut enim minim veniam quis </li>

<li>nostrud exercitation dolore magna ullamco.</li>

<li>Ut enim ad minim veniam, quis nostrud exercitation ullamco sed eiusmod </li>

<li>tempor ut labore et dolore.</li>

</ul>

<p><em></em>Ut enem magana sed dolore</p>

<ul>

<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod </li>

<li>tempor incididunt ut labore et dolore magna aliqua. Ut enim minim veniam quis </li>

<li>nostrud exercitation dolore magna ullamco.</li>

<li>Ut enim ad minim veniam, quis nostrud exercitation ullamco sed eiusmod </li>

<li>tempor ut labore et dolore.</li>

</ul>

</div>

<h2>CHECK OUT ADMIN THEME!</h2>

<p>Most Full Featured & Powerfull Admin Theme</p>

</div>

<a href="#">LIVE PREVIEW</a>

</div>

<h3 style="color:#fff">SOME FACTS ABOUT US</h3>

</div>

<dl>

<dd>PROJECTS COMPLETED</dd>

</dl>

</a>

<dl>

<dd>PROJECTS COMPLETED</dd>

</dl>

</a>

<dl>

<dd>PROJECTS COMPLETED</dd>

</dl>

</a>

<dl>

<dd>PROJECTS COMPLETED</dd>

</dl>

</a>

</div>

<h3>PRICING <span>TABLES</span></h3>

</div>

<dl>

<dt>Beginner<p style="font-size:14px">Lorem ipsum dolor</p></dt>

<dd>

<p>Per Month</p>

<li> Lorem ipsum dolor</li>

</ul>

</dd>

</dd>

</dl>

<dl>

<dt>Beginner<p style="font-size:14px">Lorem ipsum dolor</p></dt>

<dd>

<p>Per Month</p>

<li> Lorem ipsum dolor</li>

</ul>

</dd>

</dd>

</dl>

<dl>

<dt>Beginner<p style="font-size:14px">Lorem ipsum dolor</p></dt>

<dd>

<p>Per Month</p>

<li> Lorem ipsum dolor</li>

</ul>

</dd>

</dd>

</dl>

<dl>

<dt>Beginner<p style="font-size:14px">Lorem ipsum dolor</p></dt>

<dd>

<p>Per Month</p>

<li> Lorem ipsum dolor</li>

</ul>

</dd>

</dd>

</dl>

</div>

<h3>CUSTOMER <span>TESTIMONIALS </span></h3>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</p>

</div>

<li>

<p>This is the most awesome, full featured, easy, costomizeble theme.</p>

<p>It’s extremely responsive and very helpful to all suggestions.</p>

</a>

</li>

<li>

<p>This is the most awesome, full featured, easy, costomizeble theme.</p>

<p>It’s extremely responsive and very helpful to all suggestions.</p>

</a>

</li>

<li>

<p>This is the most awesome, full featured, easy, costomizeble theme.</p>

<p>It’s extremely responsive and very helpful to all suggestions.</p>

</a>

</li>

</ul>

</div>

<!--<a class="prev"></a>

</div>

<!--<div class="hd">

</div>-->

<li>

</li>

<li>

</li>

<li>

</li>

<li>

</li>

<li>

</li>

<li>

</li>

</ul>

</div>

<span>ABOUT US</span>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam sit nonummy nibh euismod tincidunt ut laoreet dolore magna aliquarm erat sit volutpat. Nostrud exerci tation ullamcorper suscipit lobortis nisl aliquip commodo consequat. </p>

<p>Duis autem vel eum iriure dolor vulputate velit esse molestie at dolore.</p>

</div>

<span>LATESTTWEETS</span>

<p class="aaa">KEEN <span style="color:#56c8eb;font-size:10px;">THEMES</span></p>

keenThemes@keenthems</br>

Envato just updated the ThemeForest's license info page to make it more clear and easy to und:

</p>

<a href="#" style="color:#56c8eb;font-size: 14px;">http://themeforest.net/licens...</a>

</div>

<p class="aaa">KEEN <span style="color:#56c8eb;font-size:10px;">THEMES</span></p>

keenThemes@keenthems</br>

Envato just updated the ThemeForest's license info page to make it more clear and easy to und:

</p>

<a href="#" style="color:#56c8eb;font-size: 14px;">http://themeforest.net/licens...</a>

</div>

<span>OUR CONCATS</span>

<p>25, Lorem Lis Street, Orange</br>California, US</br>Phone: 800 123 3456</br>Fax: 800 123 3456</br>Email: <a href="#" style="color:#56c8eb; font-size: 13px;">info@anybiz.com</a></br>Skype: <a href="#" style="color:#56c8eb; font-size: 13px;">anybiz</a></p>

</div>

<span>NEWSELECTER</span>

<input type="text" value="youremail@mail.com" class="ss" οnfοcus="if(this.value='youremail@mail.com'){this.value='';}"

οnblur="if(!this.value){this.value=this.defaultValue;}">

</div>

</div>

// var ary = location.href.split("&");

// jQuery(".sideMenu").slide({ titCell:"h3", targetCell:"ul", effect:ary[1], delayTime:ary[2] , trigger:ary[3], triggerTime:ary[4], defaultPlay:ary[5], returnDefault:ary[6],easing:ary[7] });

jQuery(".sideMenu").slide({titCell:"p", targetCell:"ul",defaultIndex:1,effect:"slideDown",delayTime:300,returnDefault:true,easing:"easeOutCirc"});

</script>

// var ary = location.href.split("&");

// jQuery(".txtScroll-left").slide( { titCell:".hd ul",mainCell:".bd ul",autoPage:true,effect:ary[1],autoPlay:ary[2],scroll:ary[3],vis:ary[4],easing:ary[5],delayTime:ary[6],pnLoop:ary[7],trigger:ary[8],mouseOverStop:ary[9] });

jQuery(".txtScroll-left").slide({titCell:".hd ul",mainCell:".bd ul",autoPage:true,effect:"left",autoPlay:true,easing:"easeInBack",pnLoop:false,mouseOverStop:false});

</script>

var ary = location.href.split("&");

//jQuery(".picMarquee-left").slide( { mainCell:".bd ul",autoPlay:true,effect:ary[1],vis:ary[2],interTime:ary[3],opp:ary[4],pnLoop:ary[5],trigger:ary[6],mouseOverStop:ary[7] });

jQuery(".picMarquee-left").slide({mainCell:".bd ul",autoPlay:true,effect:"leftMarquee",vis:6,interTime:50})

</script>

$(".ul-lastest li").mouseover(function(){

$(this).addClass("on").siblings().removeClass("on");

});

</script>

var ary = location.href.split("&");

// jQuery(".slideBox").slide( { mainCell:".bd ul", effect:ary[1],autoPlay:ary[2],trigger:ary[3],easing:ary[4],delayTime:ary[5],mouseOverStop:ary[6],pnLoop:ary[7] });

jQuery(".slideBox").slide({mainCell:".bd ul",autoPlay:true});

</script>

</body>

</html>

index.css部分

@charset 'utf-8';

*{margin: 0;padding: 0;}

.fix{*zoom:1; }

.fix:after,.fix:before{

display:block;

content:"clear";

height:0;

clear:both;

overflow:hidden;

visibility:hidden;

}

html{

width: 100%;

}

body{

width: 100%;

color: #66717c;

/*overflow: hidden;*/

}

text-decoration: none;

color: #66717c;

}

ul li{

list-style: none;

}

.wp{

width: 1200px;

height: auto;

/*border: 1px solid red;*/

margin: 0 auto;

overflow: hidden;

}

span{

color:#e6400c;

}

/*----------------------------------------------tit*/

.tit{

width: 660px;

margin: 0 auto;

text-align: center;

margin-top: 50px;

margin-bottom:40px;

box-sizing: border-box;

}

.tit h3{

font-size: 30px;

}

.tit p{

margin-top: 20px;

font-size: 16px;

}

/*-------------------------header部分*/

header{

/*position: fixed;

top:888px;*/

background-color: #fbfbfb;

/*background-color: pink;*/

height: auto;

width: 100%;

height: 60px;

position: absolute;

margin-top: 888px;

line-height: 60px;

z-index: 1;

}

.header-l{

float: left;

width: 380px;

}

.header-l a{

font-size: 32px;

}

.header-r{

float:right;

text-align: right;

width: 820px;

}

.header-r a{

font-size:16px;

padding-left:25px;

}

/*--------------------sliders部分*/

.sliders{

width: 100%;

height: 950px;

float: left;

box-sizing: border-box;

}

.sliders .bd img{

width: 100%;/*自适应*/

/*height: 948px;*/

/*display: block;*/

float: left;

display: block;

}

/* 本例子css */

.slideBox{ width: 100%; overflow:hidden; position:relative;

border: 1px solid #cccccc;

box-sizing: border-box;/*防止滚动条*/

}

.slideBox .hd{

left: 50%;

margin-left: -37px;

height:15px; overflow:hidden; position:absolute; right:5px; bottom:15px; z-index:1; }

.slideBox .hd ul{ overflow:hidden; zoom:1; float:left; }

.slideBox .hd ul li{ float:left; margin-right:20px;

width:50px; height:10px; line-height:10px; text-align:center; background:pink; cursor:pointer; }

.slideBox .hd ul li.on{ background:#f00; color:#fff; }

.slideBox .bd{ position:relative; height:100%; z-index:0; }

.slideBox .bd li{ zoom:1; vertical-align:middle; }

.slideBox .bd img{ width:100%; display:block; }*/

/* 下面是前/后按钮代码，如果不需要删除即可 */

.slideBox .prev{position:absolute; left:3%; top:50%; margin-top:-25px;

display:block; width:4%; height:40px;

/*filter:alpha(opacity=50);opacity:0.5; */

background:url(../images/slider-left.png) no-repeat center center;

}

.slideBox .next{ position:absolute; left:3%; top:50%; margin-top:-25px;

display:block; width:4%; height:40%;

background:url(../images/slider-right.png) no-repeat center center;

/*filter:alpha(opacity=50);opacity:0.5; *//*透明度*/

}

.slideBox .next{ left:auto; right:3%; background-position:8px 5px; }

.slideBox .prev:hover,

.slideBox .next:hover{ filter:alpha(opacity=100);opacity:1; }

.slideBox .prevStop{ display:none; }

.slideBox .nextStop{ display:none; }

.slideBox{

position: relative;

float: left;

height: 948px;

}

.box-sliders{

position: absolute;

margin-top:336px;

float: right;

text-align: center;

margin-left: 350px;

}

.box-sliders h1{

color: #fff;

font-size: 4rem;

}

.box-sliders .sliders-t{

padding: 60px 215px;

}

.box-sliders .sliders-t a{

display: block;

float: left;

height:140px;

width: 140px;

padding: 30px;

box-sizing: border-box;

background-color: rgba(0, 0, 0 ,0.7);

}

.box-sliders .sliders-t .sliders-r{

float: right;

text-align: left;

width: 512px;

height:140px;

line-height: 140px;

background-color: rgba(0, 0, 0 ,0.7);

color: #fff;

}

.box-sliders .sliders-t .sliders-r h2{

font-size: 38px;

line-height: 38px;

margin-top: 25px;

}

.box-sliders .sliders-t .sliders-r p{

font-size: 20px;

line-height: 30px;

margin-top: 10px;

}

.sliders-2 h3{

font-size: 60px;

margin-top: -65px;

margin-left: 60px;

color: #fff;

}

/*-------------------about部分*/

.about{

width: 100%;

height: 540px;

/*border: 5px solid red;*/

float: left;

box-sizing: border-box;

}

.about img{

margin-top: 120px;

z-index: 2;

position: absolute;

}

.at img{

/*margin-top: 40px;

margin-left: 16px;*/

margin: 30px 50px;

}

.at p{

color: #fff;

margin-top: 76px;

text-align: center;

}

.about-1{

width: 135px;

height: 135px;

background-color: #33b1e6;

position: absolute;

margin-top: 222px;

margin-left: 60px;

border-radius: 50%;

}

.about-2 {

width: 135px;

height: 135px;

border-radius: 50%;

background-color: #e85425;

margin-left: 370px;

position: absolute;

}

.about-3 {

width: 135px;

height: 135px;

border-radius: 50%;

background-color: #94db40;

margin-top: 160px;

margin-left: 920px;

position: absolute;

}

/*-------------------services部分*/

.services{

width: 100%;

height: 480px;

/*border: 5px solid blue;*/

float: left;

box-sizing: border-box;

overflow: hidden;

background-color: #f6f6f6;

}

.services dd{

margin: 0 auto;

height: 215px;

width: 110%;

display: block;

}

.services dl{

width: 200px;

text-align: center;

padding: 10px 50px 60px 50px;

display: block;

float: left;

border-right: 1px solid #e8e7e7;

}

.services dl img{

padding-bottom: 15px;

}

.servicese dl h4{

font-size: 18px;

height: 25px;

line-height: 25px;

}

.services dl p{

font-size: 14px;

height: 25px;

line-height: 25px;

}

/*-------------------design部分*/

.design{

width: 100%;

height: 460px;

/*border: 5px solid orange;*/

float: left;

box-sizing: border-box;

position: relative;

}

.design img{

float: left;

margin-left: 210px;

}

.design .design-t{

text-align: center;

color: #fff;

float: left;

position: absolute;

left: 0;

top: 0;

transition: all 1s linear;

width: 100%;

height: 0;

background-color: rgba(0,0,58,0.6);

overflow: hidden;

}

.design .design-t h4{

font-size: 34px;

line-height: 40px;

padding-top: 135px;

padding-left: 85px;

}

.design .design-t p{

font-size: 14px;

margin-top: 20px;

}

.design:hover .design-t{

display: block;

height: 100%;

}

/*-------------------theteam部分*/

.theteam{

width: 100%;

height: 790px;

/*border: 5px solid green;*/

float: left;

box-sizing: border-box;

}

.theteam .team-t{

margin: 0 auto;

text-align: center;

margin-top: 60px;

margin-bottom: 50px;

}

.theteam h3{

font-size: 32px;

}

.theteam p{

font-size: 14px;

}

.theteam .team1{

float: left;

text-align: center;

width: 360px;

margin-left: 15px;

}

.theteam .team1 h4{

font-size: 20px;

}

.theteam .team-b{

height: 50px;

margin-top: 12px;

margin-left: 10px;

}

.theteam .team-b img{

width: 15px;

height: 15px;

}

.theteam .team-b a{

padding: 8px 10px;

border: 1px solid;

border-radius: 50%;

margin-left: 10px;

}

.theteam .team-b a:hover{

background-color: #e6400c;

}

/*---------------lastest-work部分*/

.lastest-work{

width: 100%;

height: 695px;

/*border: 5px solid purple;*/

float: left;

box-sizing: border-box;

text-align: center;

background-color: #f6f6f6;

}

/*.lastest-work h3{

font-size: 37px;

line-height: 65px;

margin: 40px auto;

}*/

.ul-lastest{

overflow: hidden;

}

.ul-lastest li{

display: block;

float: left;

position: relative;

/*border: 2px solid white;

}

.ul-lastest img{

vertical-align: bottom;

width: 315px;

height: 265px;

}

.ul-lastest li div{

left: 0;

top: 0;

transition: all 1s linear;

width: 100%;

height: 0;

position: absolute;

background-color: rgba(227,96,58,0.7);

overflow: hidden;

color: #fff;

}

.ul-lastest li div h5{

font-size: 18px;

margin-top: 95px;

}

.ul-lastest li div p{

font-size: 14px;

line-height: 28px;

}

.ul-lastest li div a{

font-size: 14px;

color: #fff;

border: 1px solid #fff;

line-height: 28px;

margin: 0 20px;

}

/*.ul-lastest div{

transition: scale(0);

opacity:0.6;

width: 0;

height: 0;

transition: all .5s ease-in;

background-color:#e6400c;

color: #fff;

border-radius: 5px;

font-size: 18px;

position: absolute;

display: block;

float: left;

text-align: center;

}*/

.ul-lastest li:hover div{

display: block;

height: 100%;

}

/*-------------------choose*/

/*---------------choose部分*/

.choose{

width: 100%;

height: 760px;

/*border: 5px solid orange;*/

float: left;

box-sizing: border-box;

position: relative;

}

/* 本例子css */

.sideMenu{ border:1px solid #ddd; margin-left:50%; margin-top: 60px;}

.sideMenu p{ height:40px; line-height:40px;

font-size:18px;

padding-left:20px;

border-top:1px solid #e3e3e3;

background:#f4f4f4;

cursor:pointer;

/*font:normal 14px/32px "Microsoft YaHei";*/

}

.sideMenu p:hover{

color:#1ea9e3;

}

.sideMenu p em{ float:left; display:block; width:40px; height:32px;

background:url(../images/cc.png) 16px 12px no-repeat; cursor:pointer; }

.sideMenu p.on em{ background-position:16px -57px; }

.sideMenu ul{ padding:8px 25px; color:#999; display:none; /* 默认都隐藏 */ }

.sideMenu li{ font-size: 14px; }

.sideMenu img{

display: block;

position: absolute;

float: left;

margin-left:-620px;

margin-top: -180px;

}

/*---------------purchase部分*/

.purchase{

width: 100%;

height: 100px;

/*border: 5px solid orange;*/

float: left;

box-sizing: border-box;

background-color: #292f34;

}

.purchase .pur-l{

float: left;

margin: 32px 0;

line-height: 30px;

color: #fff;

}

.purchase h2{

float: left;

font-size: 30px;

}

.purchase p{

margin-left: 5px;

font-size: 16px;

float: left;

margin-top: 5px;

}

.purchase a{

display: block;

float: right;

padding: 10px 18px;

font-size: 18px;

color: #fff;

margin-top: 25px;

/*width: 140px;

height: 50px;*/

background-color: #e6400c;

}

/*---------------fact部分*/

.fact{

width: 100%;

height: 470px;

/*border:20px solid orange;*/

float: left;

box-sizing: border-box;

background: url("../images/fact-b.png") no-repeat center center;

color: #fff;

margin-top: -2px;

}

.fact .tit{

background-color: #000;

opacity: 0.5;

width: 100%;

}

.fact dl{

color: #fff;

text-align: center;

float: left;

width: 200px;

height: 200px;

background-color: #e6400c;

opacity: 0.7;

border-radius: 50%;

margin:48px;

}

.fact dt{

margin-top: 25px;

font-size:60px;

}

.fact dd{

font-size: 14px;

margin-top:15px;

}

.fact dl:hover{

border-radius:20%;

opacity:1;

border: 2px dashed darkblue;

/*height:220px;

-webkit-transition: height 0.3s ease 0.5s;

-moz-transition: height 0.3s ease 0.5s;

transition: height 0.3s ease 0.5s;

}

/*---------------pricing部分*/

.pricing{

width: 100%;

height: 760px;

/*border: 5px solid orange;*/

float: left;

box-sizing: border-box;

background-color: #f6f6f6;

}

.pricing dl{

width: 260px;

height: 520px;

/*border: 1px solid rebeccapurple;*/

text-align: center;

background-color: #fff;

float: left;

margin-right: 32px;

}

.pricing dt{

font-size: 38px;

color: #fff;

background-color: #a4afb8;

height:90px;

padding-top: 20px;

}

.pricing dt p{

margin-top: 8px;

}

.pricing dd img{

margin-top: 25px;

}

.pricing dd h5{

position: absolute;

margin-top: -120px;

margin-left: 80px;

font-size: 68px;

color: #fff;

}

.pricing dd p{

font-size: 16px;

margin-top: 15px;

}

.pricing .ul-pri{

margin-top: 30px;

}

.pricing .ul-pri li{

list-style-image: url("../images/cc.png");

font-size: 18px;

line-height: 28px;

}

.pricing .sign-up p{

font-size: 24px;

color: #fff;

background-color: #a4afb8;

width: 232px;

height: 48px;

line-height: 48px;

margin-left: 16px;

margin-top: 30px;

}

/*---------------test部分*/

.test{

width: 100%;

height: 410px;

/*border: 5px solid orange;*/

float: left;

box-sizing: border-box;

}

.infoList li{

width: 100%;

}

.infoList p{

line-height: 30px;

font-size: 23px;

color: #66717c;

}

/* 本例子css */

.txtScroll-left{

position:relative;

/*border:1px solid #ccc; */

}

.txtScroll-left .hd{

overflow:hidden;

height:30px;

margin-top: -35px;

/*background:#f4f4f4; */

padding:0 10px; }

/*.txtScroll-left .hd .prev,.txtScroll-left .hd .next{ display:block; width:5px; height:9px; float:right; margin-right:5px; margin-top:100px; overflow:hidden; cursor:pointer; background:url("../images/cc.png") no-repeat;}

.txtScroll-left .hd .next{ background-position:0 -50px; }*/

/*.txtScroll-left .hd .prevStop{ background-position:-60px 0; }

.txtScroll-left .hd .nextStop{ background-position:-60px -50px; }*/

.txtScroll-left .hd ul{ float:left; overflow:hidden; zoom:1; margin:10px 560px; }

.txtScroll-left .hd ul li{ float:left; width:10px; height:10px; overflow:hidden;

margin-right:5px; text-indent:-999px;

cursor:pointer; background:#fff url("../images/cc.png") no-repeat center center; }

.txtScroll-left .hd ul li.on{ background-position:0 0; }

.txtScroll-left .bd{ padding:10px 230px; width:100%;

overflow:hidden; height: 200px; margin-left: -250px; }

.txtScroll-left .bd ul{ overflow:hidden; zoom:1; }

.txtScroll-left .bd ul li{

margin-right:20px; float:left;

/*height:24px;

line-height:24px; */

text-align:center; _display:inline;}

.txtScroll-left .bd ul li span{ color:#999; }

/*---------------clien部分*/

.clien{

width: 100%;

height: 135px;

/*border: 5px solid orange;*/

float: left;

box-sizing: border-box;

background-color: #f6f6f6;

}

/* css 重置 */

/**{margin:0; padding:0; list-style:none; }

body{ background:#fff; font:normal 12px/22px 宋体; }

img{ border:0; }

a{ text-decoration:none; color:#333; }*/

/* 本例子css */

.picMarquee-left{ overflow:hidden; position:relative; }

/*.picMarquee-left .hd{ overflow:hidden; height:30px; background:#f4f4f4; padding:0 10px; }

.picMarquee-left .hd .prev,.picMarquee-left .hd .next{ display:block; width:5px; height:9px; float:right; margin-right:5px; margin-top:10px; overflow:hidden;

cursor:pointer; background:url("../images/arrow.png") no-repeat;}

.picMarquee-left .hd .next{ background-position:0 -50px; }

.picMarquee-left .hd .prevStop{ background-position:-60px 0; }

.picMarquee-left .hd .nextStop{ background-position:-60px -50px; }*/

/*.picMarquee-left .bd{ padding:10px; }*/

.picMarquee-left .bd ul{ overflow:hidden; zoom:1; }

.picMarquee-left .bd ul li{ margin:0 8px; float:left; _display:inline; overflow:hidden; text-align:center; }

.picMarquee-left .bd ul li .pic{ text-align:center; }

.picMarquee-left .bd ul li .pic img{

width:120px; height:45px;

display:block; padding:40px; }

.picMarquee-left .bd ul li .pic a:hover img{ border-color:#999; }

/*.picMarquee-left .bd ul li .title{ line-height:24px; }*/

/*---------------footer部分*/

.footer{

width: 100%;

height: 410px;

float: left;

box-sizing: border-box;

}

.footer .footer-t{

height: 350px;

width: 100%;

background-color: #313030;

}

.footer .footer-t .footer-tt{

padding-top: 50px;

}

.footer-l{

float: left;

width: 328px;

height: 180px;

margin-right: 80px;

}

.footer-tt span{

font-size: 18px;

color: #c2c1c1;

}

.footer-l p{

font-size: 13px;

color: #c2c1c1;

margin-top: 18px;

}

.footer-m{

float: left;

width: 325px;

height: 245px;

margin-right: 80px;

}

.footer-m .m-1{

width: 300px;

height: 80px;

margin-top: 15px;

}

.footer-m .m-2{

width: 300px;

height: 80px;

margin-top: 40px;

}

.footer-m .aaa {

float: left;

width:50px;

height: 50px;

background-color: #000;

font-size: 10px;

color: #c2c1c1;

text-align: center;

margin: 5px 0;

}

.footer-m .bbb{

display: block;

float: left;

font-size: 13px;

line-height: 18px;

position: absolute;

width: 265px;

height: 80px;

margin-left: 60px;

color: #c2c1c1;

}

.footer-m a{

display: block;

float: left;

margin-top: 75px;

padding-left:10px;

}

.footer-r{

float: left;

width: 300px;

height: 270px;

}

.footer-r p{

font-size: 13px;

line-height: 23px;

color: #c2c1c1;

margin-top: 15px;

/*margin-bottom: -10px;*/

}

.newselecter{

float: left;

position: relative;

}

.newselecter span{

display: block;

margin-top: 20px;

}

.so{

margin-top: 10px;

border: 1px solid #535353;

background-color: #272626;

}

.newselecter .ss{

display: block;

float: left;

width: 196px;

height: 38px;

line-height: 38px;

line-height: 38px\9;

color: #c2c1c1;

background-color: transparent;

border: none;

}

.newselecter .sub-inp{

width: 100px;

height: 38px;

margin-left: -5px;

background-color: #e6400c;

color: #fff;

position: absolute;

cursor: pointer;

border: none;

}

.footer .footer-b{

height: 60px;

width: 100%;

background-color: #272626;

}

.footer-b span{

font-size: 12px;

color: #fff;

line-height: 60px;

}

.bdsharebuttonbox{

float: right;

margin-top: 10px;

}

转载于:https://www.cnblogs.com/liaoliao985786516/p/5592267.html

你可能感兴趣的文章

我回答了90%的面试题，为什么还被拒？

查看>>

Html - Table 表头固定和 tbody 设置 height 在IE不起作用的解决

查看>>

20165205 学习基础与C语言基础调查

查看>>

iOS SVN终端指令

查看>>

SpringSecurity——默认过滤器链

查看>>

LeetCode: Word Ladder II [127]

php中函数 vsprintf() 和 var_export（）

查看>>

多线程（1）—单线程

查看>>

HTML5权威指南 16.拖放API与通知API

查看>>

NYOJ-289 苹果又是一个典型的01背包和上题一样没啥好说的