HTML部分
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>实战3</title> <link rel="stylesheet" href="../css/4.2.0/css/font-awesome.css"> <link rel="stylesheet" href="实战3.css"> </head> <body> <div id="wrap"> <!-- 顶部导航栏部分 --> <div id="header"> <div class="width"> <div id="nav" > <div class="nav-left"> <div class="logo"> <a href="#">Start Bootstrap</a> </div> </div> <div class="nav-right"> <ul> <li> <a href="#serices">SERVICES</a> </li> <li> <a href="#portfolio">PORTFOLIO</a> </li> <li> <a href="#about">ABOUT</a> </li> <li> <a href="#team">TEAM</a> </li> <li> <a href="#contact">CONTACT US</a> </li> </ul> </div> </div> </div> </div> <!-- 页面mainpage部分 --> <div id="mainpage" class="mainpage"> <div class="mainpage-main"> <div> <h2>Welcome To Our Studio!</h2> <h1>IT'S NICE TO MEET YOU</h1> <a class="btn" href="">TELL ME MORE</a> </div> </div> </div> <!-- 页面1-SERVICES部分 --> <div id="serices" class="serices"> <div class="width clear"> <div class="serice-top"> <div> <h2>SERVICES</h2> <i>Lorem ipsum dolor sit amet consectetur.</i> </div> </div> <div class="serice-bottom"> <div> <div class="bottom-box"> <span><i class="fa fa-shopping-cart"></i></span> <h3>E-Commerce</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima maxime quam architecto quo inventore harum ex magni, dicta impedit.</p> </div> <div class="bottom-box"> <span><i class="fa fa-laptop "></i></span> <h3>Responsive Design</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima maxime quam architecto quo inventore harum ex magni, dicta impedit.</p> </div> <div class="bottom-box"> <span><i class="fa fa-lock "></i></span> <h3>Web Security</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima maxime quam architecto quo inventore harum ex magni, dicta impedit.</p> </div> </div> </div> </div> </div> <!-- 页面2-PORTFOLIO部分 --> <div id="portfolio" class="portfolio"> <div class="width"> <div class="portfolio-top"> <div> <h2>PORTFOLIO</h2> <i>Lorem ipsum dolor sit amet consectetur.</i> </div> </div> <div class="portfolio-bottom clear"> <div class="portfolio-box"> <div> <a href="#"> <div class="portfolio-hover"> <div class="portfolio-hover-content"> <i class="fa fa-plus fa-5x"></i> </div> </div> <img class="aaa"src="img/task2.png" alt=""> </a> <h3>Round Icons</h3> <i>Graphic Design</i> </div> </div> <div class="portfolio-box"> <div> <a href="#"> <div class="portfolio-hover"> <div class="portfolio-hover-content"> <i class="fa fa-plus fa-5x"></i> </div> </div> <img src="img/task3.png" alt=""></a> <h3>Startup Framework</h3> <i>Website Design</i> </div> </div> <div class="portfolio-box"> <div> <a href="#"> <div class="portfolio-hover"> <div class="portfolio-hover-content"> <i class="fa fa-plus fa-5x"></i> </div> </div> <img src="img/task4.png" alt=""></a> <h3>Treehouse</h3> <i>Graphic Design</i> </div> </div> <div class="portfolio-box"> <div> <a href="#"> <div class="portfolio-hover"> <div class="portfolio-hover-content"> <i class="fa fa-plus fa-5x"></i> </div> </div> <img src="img/task5.png" alt=""></a> <h3>Golden</h3> <i>Graphic Design</i> </div> </div> <div class="portfolio-box"> <div> <a href="#"> <div class="portfolio-hover"> <div class="portfolio-hover-content"> <i class="fa fa-plus fa-5x"></i> </div> </div> <img src="img/task6.png" alt=""></a> <h3>Escape</h3> <i>Graphic Design</i> </div> </div> <div class="portfolio-box"> <div> <a href="#"> <div class="portfolio-hover"> <div class="portfolio-hover-content"> <i class="fa fa-plus fa-5x"></i> </div> </div> <img src="img/task7.png" alt=""></a> <h3>Dreams</h3> <i>Graphic Design</i> </div> </div> </div> </div> </div> <!-- 页面3-ABOUT部分 --> <div id="about"> <div class="width"> <div class="about-top"> <h2>ABOUT</h2> <i>Lorem ipsum dolor sit amet consectetur.</i> </div> <div class="time-line clear"> <div class="time-left"> <div class="rahmen"> <img src="img/1.jpg" alt=""> </div> <div class="time-main"> <h4>2009-2011</h4> <h4>Our Humble Beginnings</h4> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt ut voluptatum eius sapiente, totam reiciendis temporibus qui quibusdam, recusandae sit vero unde, sed, incidunt et ea quo dolore laudantium consectetur!</p> </div> </div> <div class="time-link"></div> <div class="time-right"> <div class="rahmen"> <img src="img/2.jpg" alt=""> </div> <div class="time-main"> <h4>2009-2011</h4> <h4>Our Humble Beginnings</h4> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt ut voluptatum eius sapiente, totam reiciendis temporibus qui quibusdam, recusandae sit vero unde, sed, incidunt et ea quo dolore laudantium consectetur!</p> </div> </div> <div class="time-link"> </div> <div class="time-left"> <div class="rahmen"> <img src="img/3.jpg" alt=""> </div> <div class="time-main"> <h4>2009-2011</h4> <h4>Our Humble Beginnings</h4> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt ut voluptatum eius sapiente, totam reiciendis temporibus qui quibusdam, recusandae sit vero unde, sed, incidunt et ea quo dolore laudantium consectetur!</p> </div> </div> <div class="time-link"> </div> <div class="time-right"> <div class="rahmen"> <img src="img/4.jpg" alt=""> </div> <div class="time-main"> <h4>2009-2011</h4> <h4>Our Humble Beginnings</h4> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt ut voluptatum eius sapiente, totam reiciendis temporibus qui quibusdam, recusandae sit vero unde, sed, incidunt et ea quo dolore laudantium consectetur!</p> </div> </div> <div class="time-link"></div> <div class="time-left"> <div class="rahmen last"> <div> <p>BE PART</p> <p>OF OUR</p> <p>STORY!</p> </div> </div> <div class="time-main"> </div> </div> </div> </div> </div> <!-- 页面4-Team部分 --> <div id="team"> <div class="width"> <div class="team-top"> <div> <h3>OUR AMAZING TEAM</h3> <i>Lorem ipsum dolor sit amet consectetur.</i> </div> </div> <div class="team-bottom clear"> <div class="team-box"> <div> <img src="img/diana.jpg" alt=""> </div> <h4>Kay Garland</h4> <p>Lead Designer</p> <div> <a href="#"><i class="fa fa-twitter "></i></a> <a href="#"><i class="fa fa-facebook "></i> </a> <a href="#"><i class="fa fa-linkedin "></i> </a> </div> </div> <div class="team-box"> <div> <img src="img/kay.jpg" alt=""> </div> <h4>Kay Garland</h4> <p>Lead Designer</p> <div> <a href="#"><i class="fa fa-twitter "></i> </a> <a href="#"><i class="fa fa-facebook "></i> </a> <a href="#"><i class="fa fa-linkedin "></i> </a> </div> </div> <div class="team-box"> <div> <img src="img/larry.jpg" alt=""> </div> <h4>Kay Garland</h4> <p>Lead Designer</p> <div> <a href="#"><i class="fa fa-twitter "></i> </a> <a href="#"><i class="fa fa-facebook "></i> </a> <a href="#"><i class="fa fa-linkedin "></i> </a> </div> </div> </div> <div class="team-summary"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut eaque, laboriosam veritatis, quos non </p> <p> quis ad perspiciatis, totam corporis ea, alias ut unde. </p> </div> </div> </div> <!-- 底部商标部分label --> <div id="label"class="label "> <div class="width"> <div class="label-box clear"> <ul> <li> <div> <ahref="#"><img src="img/creative-market.jpg" alt=""></a> </div> </li> <li> <div> <a href="#"><img src="img/designmodo.jpg" alt=""></a> </div> </li> <li> <div> <a href="#"><img src="img/themeforest.jpg" alt=""></a> </div> </li> <li> <div> <a href="#"><img src="img/envato.jpg" alt=""></a> </div> </li> </ul> </div> </div> </div> <!-- 注册部分contact --> <div id="contact"> <div class="width"> <div class="contact-top"> <div> <h2>CONTACT US</h2> <p>Lorem ipsum dolor sit amet consectetur.</p> </div> </div> <div class="contact-bottom"> <form action="http://www.baidu.com"> <div class="bottom-main clear"> <div class="bottom-left"> <input type="text" name=""placeholder="YOUR MAME*"><br/> <input type="email" name="email" placeholder="YOUR EMAIL*"><br/> <input type="tel" name="phone" placeholder="YOUR PHONE*"> </div> <div class="bottom-right"> <textarea name="speak" id="" placeholder="YOUR MESSACE*"></textarea> </div> </div> <input class="btn" type="submit" name="button" value="SEND MESSACE"> </form> </div> </div> </div> <!-- 页脚部分footer --> <div id="footer"> <div class="width"> <div class="footer-left"> Copyright © Your Website 2014 </div> <div class="footer-right"> <a href="#">Privacy Policy</a> <a href="">Terms of Use</a> </div> <div class="footer-main"> <a href="#"><i class="fa fa-twitter "></i> </a> <a href="#"><i class="fa fa-facebook "></i> </a> <a href="#"><i class="fa fa-linkedin "></i> </a> </div> </div> </div> </div> </body> </html>
CSS样式部分
/*默认样式重置*/ body,ul,li,h1,h2,h3,h4,input,p{ margin:0; padding:0; background-size:border-box; } body{ font-family: Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif; } a{ text-decoration:none; color:white; } li{ list-style: none; } .clear:after{ content:""; display: block; clear:both; } /*公用*/ /*页面宽度*/ .width{ 1200px; margin:0 auto; } /*bottom按钮*/ .btn{ font-weight: bold; font-size:20px; border-radius: 5px; padding:21px 31px; background:#fed136; } /*---------顶部导航栏部分---------------*/ /*设置header样式*/ #header{ 100%; position: fixed; background:#222; height:70px; z-index: 10; } /*设置浮动*/ .nav-left{ float:left; } .nav-right{ float:right; } /*nav-right li 样式设置*/ .nav-right li{ float:left; line-height: 70px; margin-right:30px; font-size:16px; } /*导航栏右侧a标签鼠标滑动样式*/ .nav-right li>a:hover{ color:#fed136; transition: color 0.6s; } /*导航栏左侧logo样式*/ .logo a{ color:#fed136; font-size:30px; line-height: 70px; font-family:cursive; } /*-------主页面部分样式设置-----------*/ /*页面mainpage样式-box1*/ .mainpage{ min-1200px; background:url(img/task1.jpg)no-repeat;background-size:cover; text-align:center; /* display: table;*/ } .mainpage-main{ /* display: table-cell; vertical-align: middle;*/ padding:300px 0; } /*标语样式设置*/ .mainpage-main h1{ font-size:5em; color:white; margin-bottom:50px; } .mainpage-main h2{ font-size:34px; color:white; } /*页面services样式设置-box2*/ .serices{ 100%; /* min-height:580px;*/ padding-top:150px; text-align:center; } /*serice-top样式设置*/ .serice-top h2{ font-size:2.5em; letter-spacing: 5px; margin-bottom:20px; } .serice-top i{ opacity: 0.5; } /*serice-bottom样式设置*/ .bottom-box{ margin-top:70px; 33.3%; float:left; } .bottom-box p{ font-size:14px; margin:10px; color:gray; } .bottom-box span{ font-size:50px; line-height:100px; 100px; height:100px; color:white; display: block; margin:0 auto; border-radius: 50%; background:#fed136; margin-bottom:20px; /*text-align:center;*/ } /*--------portfolio页面部分-box2*---------*/ .portfolio{ min-1200px; background:#f7f7f7; padding-top:150px; padding-bottom:150px; } /*portfolio-top部分*/ .portfolio-top{ text-align:center; margin-bottom:20px; } .portfolio-top h2{ font-size:40px; letter-spacing: 2px; margin-bottom:20px; } .portfolio-top i{ color:gray; } /*portfolio-bottom部分*/ .portfolio-box{ 33.3%; float:left; text-align:center; margin:20px 0; position: relative; } .portfolio-box>i{ color:white; } .portfolio-box>div{ background:white; padding-bottom:30px; margin:0 20px; } /*.portfolio-box div{ margin:0 20px; }*/ /*img标签样式*/ .portfolio-box img{ 359px; height:260px; position:absolute; left:0; top:0; } /*设置图层效果*/ .portfolio-box a{ 359px; position: relative; display:block; height:260px; } .portfolio-box a:hover .portfolio-hover { visibility: visible; } .portfolio-hover { text-align:center; position: absolute; z-index: 2; display: table; visibility: hidden; 359px; height: 260px; background:#fed136; opacity: 0.9; } .portfolio-hover-content { display: table-cell; vertical-align: middle; color: #fff; } /*设置portfolio-box-h3样式*/ .portfolio-box h3{ margin-top:20px; margin-bottom:10px; } /*---------ABOUT部分样式------*/ /*设置about-top样式*/ .about-top{ margin-top:150px; text-align:center; } .about-top h2{ font-size:40px; margin-bottom:20px; } .about-top i{ font-size:20px; color:gray; } /*------------设置时间轴样式------------------*/ .time-line{ margin-top:100px; position: relative; } .time-line img{ 150px; height:150px; border-radius: 50%; } .last{ 150px; height:150px; border-radius: 50%; background:#fed136; color:white; display:table; text-align:center; margin-bottom:200px; } .last>div{ display:table-cell; vertical-align: middle; font-size:18px; font-weight: 700; } .time-line>div{ 600px; } .time-left{ position: relative; text-align: right; left:70px; /* margin-bottom:100px;*/ } .time-left .rahmen{ float:right; } .time-right .rahmen{ float:left; } .time-right{ left:520px; /* margin-bottom:100px;*/ position: relative; text-align:left; } .time-right .time-main{ height:150px; margin-left:180px; } .time-left .time-main{ height:150px; margin-right:180px; } .time-main p{ margin-top:20px; font-size:16px; } .time-link{ position: relative; height:100px; left:594px; border-left:4px solid #eee; } /*------------------------------*/ /*设置时间轴样式*/ /*.time-line{ margin-top:70px; position: relative; } .time-right,.time-left{ 700px; } .rahmen img{ 150px; height:150px; border-radius:50%; border:5px solid #eee; } .time-left> .rahmen{ float:right; } .time-right>.rahmen{ float:left; } .time-left:{ position: absolute; left:0; text-align: right; } .time-right{ position: absolute; right:0; text-align: left; } .time-left .time-main{ margin-right:120px; } .time-right .time-main{ margin-left:120px; }*/ /*--------页面4--team部分----*/ #team{ min-1200px; background:#eee; text-align:center; padding:150px 0; } .team-top h3{ font-size:30px; margin-bottom:20px; } .team-top i{ font-size:20px; } /*设置team头像部分*/ .team-box{ 33.3%; float:left; } .team-box img{ 250px; height:250px; border:10px solid white; border-radius: 50%; } .team-box h4{ font-size:20px; margin-top:10px; } .team-box p{ margin-top:10px; } .team-box i{ 40px; height:40px; line-height:40px; background:black; font-size:26px; color:white; border-radius: 50%; margin-right:10px; margin-top:10px; } .team-box i:hover{ background:#fed136; transition: background 0.5s; } .team-summary{ margin-top:50px; color:gray; /* font-size:16px;*/ } .team-summary p{ margin-bottom:10px; } /*---------lable底部商标部分---------*/ .label-box li{ height:100px; 25%; float:left; position: relative; /*display: table;*/ } .label-box div{ margin-left:50px; 200px; height:50px; margin:0 auto; position: absolute; left:50%; top:50%; margin-left:-100px; margin-top:-25px; /* display: table-cell; vertical-align: middle;*/ } /*.label-box img{ 200px; height:50px; margin:0 auto; }*/ /*---------注册部分contact--------*/ /*contact标语部分*/ #contact{ min-1200px; background:url(img/map-image.png) #222; padding:150px 0; text-align:center; } .contact-top{ color:white; } .contact-top h2{ font-size:40px; } .contact-top p{ margin-top:10px; color:gray; } /*注册部分*/ .contact-bottom{ margin-top:50px; } .bottom-left{ 550px; float:left; } .bottom-right{ 550px; float:right; } .bottom-left>input{ padding:20px; 510px; margin-bottom:20px; border:1px solid white; border-radius: 5px; } .bottom-right textarea{ 510px; height:170px; padding:20px; border-radius: 5px; font-family:"Roboto Slab", "Helvetica Neue", Helvetica, Arial, sans-serif; } .contact-bottom .btn{ padding:20px 33px; margin-top:20px; color:white; border:none; } /*-------------页脚部分footer---------*/ #footer{ text-align:center; height:80px; clear:both; } /*设置图标样式*/ .footer-main{ 33.3%; line-height:80px; float:left; } .footer-main a{ display: inline-block; font-size:20px; 40px; height:40px; line-height: 40px; border-radius: 50%; color:white; background:black; margin-right:10px; } /*设置图标hover样式*/ .footer-main a:hover{ background:#fed136; transition: color 0.6s; } /*设置左侧边样式*/ .footer-left{ 33.3%; float:left; line-height: 80px; /*font-family: Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif;*/ font-size:14px; } /*设置右侧边样式*/ .footer-right{ 33.3%; float:right; line-height: 70px; } .footer-right a{ color:#fed136; font-size:14px; font-family: '微软雅黑' } .footer-right a:first-child{ margin-right:10px; } .footer-right a:hover{ text-decoration: underline; }