5-2作业

来源：5-2 作业题
soso_crazy
2019-02-12 13:05:08
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>5-2</title>
<link rel="stylesheet" type="text/css" href="5-2作业.css">

</head>
<body>

<!--顶部-->
 <header>
        <div class="container">
            <a href=""><img src="./img/logo.jpg"></a>
            <nav>
                <a href="">HOME</a>
                <a href="">PORTFOLIFE</a>
                <a href="">TEAM</a>
                <a href="">CONTACT US</a>
            </nav>
        </div>
    </header>

<!--banner区-->
 <section class="banner">
        <dl>
            <dt>Welcome to Website</dt>
            <dd>Lorem ipsum dolor sit amet,weoirwietfhow sodifuoweifuoweuiftoweufoweof</dd>
        </dl>
    </section>

<!--portfolio区-->
 <section class="portfolio">
        <div class="word">
            <dl>
                <dt>portfolio</dt>
                <dd>Lorem ipsum dolor sit amet,consectuer adipisking elit,eiuspium sieopt lsidfiowe at woeiht weoiroweiowifjowietfhow sodifuoweifuoweuiftoweufoweof</dd>
            </dl>

            <div class="English">
                <span>ALL</span>
                <span>WEB</span>
                <span>SOFTWARE</span>
                <span>WORKS</span>
                <span>BRANDS</span>
            </div>
        </div>
        <div class="pic"></div>
    </section>

 <!--star区-->
 <section class="star">
        <h1>Starts</h1>
        <p>Lorem ipsum dolor sit amet,consectuer adipisking elit,eiuspium sieopt lsidfiowe at woeiht weoiroweiowifjowietfhow sodifuoweifuoweuiftoweufoweof</p>
        <div class="starPic first">
            <p class="img"><img src="img/stats1.jpg"></p>
            <p class="Word">margins</p>
            <p class="nums">12,000</p>
        </div>
        <div class="starPic">
            <p class="img"><img src="img/stats2.jpg"></p>
            <p class="Word">completes</p>
            <p class="nums">5,681</p>
        </div>
        <div class="starPic">
            <p class="img"><img src="img/stats3.jpg"></p>
            <p class="Word">projects</p>
            <p class="nums">432</p>
        </div>
        <div class="starPic">
            <p class="img"><img src="img/stats4.jpg"></p>
            <p class="Word">customs</p>
            <p class="nums">86</p>
        </div>
    </section>

<!--team区-->
 <section class="team">
        <h1>Team</h1>
        <p>Lorem ipsum dolor sit amet,consectuer adipisking elit,eiuspium sieopt lsidfiowe at woeiht weoiroweiowifjowietfhow sodifuoweifuoweuiftoweufoweof</p>
        <dl class="One">
            <dt class="teamPicOne"></dt>
            <dd>Abigail</dd>
            <dd>Lorem ipsum dolor sit amet, consectetuer usce posuere, magna sed pulvinar ultricies,</dd>
        </dl>

        <dl>
            <dt class="teamPictwo"></dt>
            <dd>Andy</dd>
            <dd>Lorem ipsum dolor sit amet, consectetuerce posuere, magna sed pulvinar ultricies,</dd>
        </dl>

        <dl>
            <dt class="teamPicthree"></dt>
            <dd>Jacqueline</dd>
            <dd>Lorem ipsum dolor sit amet, consectetuer Fusce posuere, magna sed pulvinar ultricies,</dd>
        </dl>
    </section>

<!--contact区-->
 <section class="contact">
        <h1>Contact Us</h1>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies</p>
        <form>
            <input type="text" placeholder="Full Name" name="myName" class="text">
            <input type="email" placeholder="email" name="email" class="text">
            <input type="text" placeholder="message" name="message" class="message">
            <br>
            <input type="submit" value="Submit Message">
        </form>
    </section>

<!--页脚区-->
 <footer>
        <p>CopyRight&copyright;&nbsp;2016.Company name</p>
    </footer>
</body>

*{
        margin: 0;
        padding: 0;
}

a{text-decoration: none}

/*顶部区*/
header{width: 100%;
        height: 93px;
        background-color: #2e2e2e;}

header>.container>nav{
        float: right;
        padding-right: 150px;
}

header>.container>a>img{
        padding-left: 170px;
        padding-top: 27px;
}

header>.container>nav>a{
        color: white;
        line-height: 93px;
        padding-right: 54px;
        font-family: Microsoft YaHei UI;
}

/*banner区*/
.banner{
        background: url("img/banner.jpg") no-repeat;
        background-size: 100% auto;
        width: 100%;
        height: 675px;
        position: relative;
}

.banner>dl{
        position: absolute;
        top: 269px;
        left: 499px;
}

.banner>dl>dt{
        text-align: center;
        color: #ffffff;
        font-family: Microsoft YaHei UI;
        font-size: 48px;
        letter-spacing: 10px;
}

.banner>dl>dd{
        text-align: center;
        font-family: Microsoft YaHei UI;
        font-size: 14px;
        color: white;
}

/*portfolio区*/
.portfolio{
        width: 100%;
        height: 975px;
}

.portfolio .word{
        width: 100%;
        height: 414px;
        background-color: white;
}

/*鼠标移动 portfolio有变化*/
.portfolio .word:hover{
        background-color: #f46208;
}

.portfolio .word dl dt:hover{
        color: white;
}

.portfolio .word dl{
        padding-top: 116px;
}

.portfolio .word dl dt{
        color: #f46208;
        font:48px Microsoft YaHei UI;
        text-align: center;
}

.portfolio .word dl dd,
.star>p,
.contact p{
        padding-top: 53px;
        padding-left: 363px;
        width: 781px;
        color: #2e2e2e;
        font-size: 14px;
        line-height: 2em;
        font-family: Microsoft YaHei UI;
        text-align: center;
}

.portfolio .pic{
        background: url("img/portfolio-nav-img.jpg");
        background-size: 100% 561px;
        width: 100%;
        height: 561px;
}

.portfolio .English{
        padding-top: 53px;
        padding-left: 500px;
}

.portfolio .English span{
        display: inline-block;
        text-align: center;
        color: #f46208;
        height: 45px;
        width: 70px;
        border: 1px solid #f46208;
        padding-right: 17px;
        margin-left: 15px;
        font-size: 15px;
        font-family: Microsoft YaHei UI;
        line-height: 45px;
}

/*star区*/
.star{
        width: 100%;
        height: 582px;
        background-color: white;
}

.star h1,.team h1,.contact h1{
        color: #f46208;
        font-size: 48px;
        text-align: center;
        padding-top: 118px;
        font-family: Microsoft YaHei UI;
        letter-spacing: 14px;
        font-weight: normal;
}

.first{
        padding-left: 200px;
}

.star>.starPic{
        float: left;
        margin: 64px 0 0 135px;
        line-height: 30px;
        width: 141px;
}

.star>.starPic>p.img{
        padding-left: 50px;
}

.star>.starPic>p.Word{
        text-align: center;
        font: 14px Microsoft YaHei UI;
}

.star>.starPic>p.nums{
        color: #f46208;
        font:25px Microsoft YaHei UI;
        letter-spacing: 5px;
        text-align: center;
}

/*team区*/
.team{
        width: 100%;
        height: 664px;
        background-color: #2e2e2e;
}

.team p{
        padding-top: 53px;
        padding-left: 363px;
        width: 781px;
        color: #ffffff;
        font-size: 14px;
        line-height: 2em;
        font-family: Microsoft YaHei UI;
        text-align: center;
}

.team .teamPicOne{
        width: 204px;
        height: 205px;
        background-image: url("img/team1.jpg");
}

.team .teamPictwo{
        width: 204px;
        height: 205px;
        background-image: url("img/team2.jpg");
}

.team .teamPicthree{
        width: 204px;
        height: 205px;
        background-image: url("img/team3.jpg");
}

.team dl{
        float: left;
        width: 240px;
        margin: 73px 98px 0 0;
        color: white;
        text-align: center;
        line-height: 15px;
}

.One{
        padding-left: 306px;
}

.team dl dd:nth-child(3){
        color: #ffffff;
        font-size: 12px;
}

/*contact区*/
.contact{
        width: 100%;
        height: 844px;
        background-color: white;
}

.contact form{
        width: 960px;
        height: 427px;
        margin: 0 auto;
}

.contact .text{
        width: 462px;
        height: 54px;
        margin: 30px 11px 19px 0;
}

.contact .message{
        width: 943px;
        height: 276px;
        margin-bottom: 28px;
}

input[type="submit"]{
        width: 200px;
        height: 59px;
        background-color: #f46208;
        color: white;
        border: none;
        margin-left: 367px;
}

input[type="submit"]:hover{
        cursor:pointer;
}

/*页脚区*/
footer{
        width: 100%;
        height: 110px;
        background-color: #2e2e2e;
        color: #ffffff;
        line-height: 110px;
        font-size: 14px;
        text-align: center;
}
当鼠标移动到portfolio区改变背景和字体颜色用hover如何实现？为什么不能鼠标移动到portfolio就改变，而需要鼠标移动到各个模块才改变，如何修改？