第一个页面。

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{
    width:1200px;
    margin:0 auto;
}
/*bottom按钮*/
.btn{
    font-weight: bold;
    font-size:20px;
    border-radius: 5px;
    padding:21px 31px;
    background:#fed136;
}

/*---------顶部导航栏部分---------------*/
/*设置header样式*/
#header{
    width: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-width: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{
    width: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;
    width:33.3%;
    float:left;
}
.bottom-box p{
    font-size:14px;
    margin:10px;
    color:gray;
}
.bottom-box span{
    font-size:50px;
    line-height:100px;
    width: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-width: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{
    width: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{
    width:359px;
    height:260px;
    position:absolute;
    left:0;
    top:0;
}
/*设置图层效果*/
    .portfolio-box a{
        width: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;
        width: 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{
    width:150px;
    height:150px;
    border-radius: 50%;
}
.last{
    width: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{
    width: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{
    width:700px;
}
.rahmen img{
    width: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-width: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{
    width:33.3%;
    float:left;
}
.team-box img{
    width: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{
    width: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;
    width:25%;
    float:left;
    position: relative;
    /*display: table;*/
}
.label-box div{
    margin-left:50px;
    width: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{
        width:200px;
        height:50px;
        margin:0 auto;
}*/
/*---------注册部分contact--------*/
/*contact标语部分*/
#contact{
    min-width: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{
    width:550px;
    float:left;
}
.bottom-right{
    width:550px;
float:right;
}
.bottom-left>input{
    padding:20px;
    width:510px;
    margin-bottom:20px;
    border:1px solid white;
    border-radius: 5px;
}
.bottom-right textarea{
    width: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{
        width:33.3%;
    line-height:80px;
    float:left;
}
.footer-main a{
    display: inline-block;
    font-size:20px;
    width: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{
    width:33.3%;
    float:left;
    line-height: 80px;
    /*font-family: Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif;*/
    font-size:14px;
}

/*设置右侧边样式*/
.footer-right{
    width: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;
}

posted @ 2016-03-22 11:08 z-one 阅读(227) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

z-one

第一个页面。

公告