Muchow Web - Front Zero Foundation Introduction - Project: Web Layout Case - 2-10 Assignments

2-10 homework

Small partners, master the CSS style settings, then use the knowledge learned to complete the HTML web page development as shown in the following figure.

The main drawings are as follows: (Details can be downloaded and obtained in "Operation Material")

Task description

Language and environment

Implementing Language

            HTML,CSS

2. Environmental requirements and development tools

Sublime text is recommended

Second, the overall requirements of the web page:

1. Require the page to be neat and beautiful, which is basically consistent with the rendering and structure of the page.

2. Require HTML code and CSS code to be written and named in accordance with the specifications, add necessary annotations in the code to facilitate later maintenance.

3. Picture files and css style files should be placed in separate folders

Specific requirements:

1. Web pages are divided into the following parts: top, banner, ABOUT, GALLERY, foot, and the content of the web pages is displayed in the middle.

2. The lower part of the display blocks in Banner and ABOUT areas

The height is fixed and the width is 100% relative to the browsing area.

3. Font and color table

(1) Web font: Microsoft YaHei UI

(2) Colors used in Web pages:

What are the scoring criteria?

Specification [4 points]

* Picture files and css style files are placed in separate folders.

* File name, id name, class name should be standardized.

* Code writing specifications, and add appropriate comments to facilitate later maintenance.

Web page as a whole [8 points]

* Web content is displayed in the middle.

* The width of each area is 100% relative to the browser.

Top [10 points]

* It is basically consistent with the structure of the rendering.

* Navigation and Logo area have link effect and no underline.

* When the mouse passes through the corresponding navigation, the color changes.

* Navigation is always fixed at the top

banner District [24 points]

* It is basically consistent with the structure of the rendering.

* The Banner area is fixed in height and the width of the picture is 100% relative to the browser.

* There should be a translucent mask on the picture, the content of the form should be displayed at the top of the image, and the form should be in the middle level.

* Form items are: name, mail, specific content, submission button. Form item sets user prompt information.     

* When the mouse slides over the items in the form, the border color of the item in the form changes to 07cbc9.

* When the mouse slides over the submit button, the button has no border, and the background color becomes 07cbc9.

ABOUT [40 points]

* It is basically consistent with the structure of the rendering.

* It is divided into three parts, the top part is the title and the text.

* The middle part, from left to right, is composed of text, picture and text. The middle part is required to be displayed in the middle.

* The lower part is the interlaced display of text and pictures, requiring the lower part to flat the browser window horizontally.

* The EXPLORE button on the left of the middle part makes the background transparent when the mouse moves in, but has a black border.

* When the mouse crosses the button in the text area of the lower part, the background color of the button is transparent and the border is black.

GALLERY [10 points]

* It is basically consistent with the structure of the rendering.

* The upper part is a text description, and the lower part is a picture display. There is a certain distance between the pictures. The color and size of the text are set appropriately.  

Footpage area [4 points]

* Web copyright information text content is displayed vertically and horizontally in the middle.

Reference code:

CSS Code:

*{
    margin:0;
    padding:0;
    font-family:"Microsoft YaHei UI";
}

ul{
    list-style:none;
}
a{
    text-decoration:none;
    color:white;
}
.header{
    width:100%;
    height:80px;
    background-color:rgb(7,203,201);
    position:fixed;
    top:0;
    z-index:9999;
}

.header .logo{
    float:left;
    position:absolute;
    top:50%;
    margin-top:-24px;
    margin-left:5%;
}
.header .nav{
    float:right;
    margin-right:5%;
}
.header .nav li{
    float:left;
    padding:0 1em;
    color:white;
    text-transform:uppercase;
    line-height:80px;

}
.header .nav li:hover{
    background-color:black;
    
}

/* Head Area Style End */
/* banner Map area */
.banner{
    width:100%;
    height:600px; 
    background-color:green;
    position:relative;
    font-size:0; 
    margin-top:80px;
}
.banner img{
    width:100%;
    height:600px;
   
}
/* Image Matte */
.banner .mask{
    position:absolute;
    width:100%;
    height:100%;
    left:0;
    top:0;
    background-color:black;
    opacity:0.5;
    font-size:16px;
}
.banner .mask ul {
    position:relative;
    width:40%;
    margin:0 auto 0 auto;
    top:10%;
}
.banner .mask ul li{
    border:2px solid white;
    line-height:2;
    color:white;
    margin-bottom:2em;
    text-indent:1em;
}
.banner .mask ul li:hover{
    border:2px solid #07cbc9;
}

.banner .mask ul li.comment{
    height:8em;
}
.banner .mask ul li.last-item{
    width:25%;
    margin:0 auto;
}
.banner .mask ul li.last-item:hover{
    border-color:transparent;
    background-color:#07cbc9;

}
/* about-top Regional style*/
.about-top{
    width:569px;
    height:636px;
    /* background:gray; */
    position:relative;
    margin:0 auto;
    padding-top:57px;
    margin-bottom:100px;

}
.about-top .tit{
    font-size:30px;
    font-weight:bold;
    text-align:center;
}
.about-top .line{
    width:39px;
    border-bottom:2px solid rgb(7,203,201);
    margin:20px auto;
    
}
.about-top .font{
    
    color:rgb(121,141,162);
    text-align:center;
    line-height:1.8;
    margin-bottom:33px;

}

.about-top .image{
    width:569px;
    height:380px;
    position:absolute;
}
.about-top .image img{
    width:100%;
    height:100%;
}
.about-top .image .left{
    width:368px;
    height:90%;
    position:absolute;
    left:-236px;
    top:0;
    /* background:yellow; */
    font-size:30px;
}
.about-top .image .left .word-left{
    height:80%;
    background-color:rgba(255,255,255,0.5);
    box-sizing:border-box;
    padding:20px;
    line-height:1.8;
    border:1px solid rgb(197,197,197);
    font-size:16px;;

}
.explore{
    width:103px;
    line-height:2.5;
    background-color:black;
    color:white;
    text-align:center;
}
.explore:hover{
    background-color:rgba(255,255,255,0);
    border:1px solid black;
    color:black;
}

.about-top .image .left .word-left .explore{
    margin-top:20px;
}

.about-top .image .right{
    position:absolute;
    right:-274px;
    top:0;
    text-align:center;
}
.about-top .image .right>div{
    width:240px;
    border:1px solid rgb(7,203,201);
    font-size:30px;
    font-weight:bold;
    padding:20px 0;
    margin-bottom:20px;
}
.about-top .image .right>div span{
    font-size:20px;
    font-weight:normal;
}
/* about The Mixed Block of Chinese Pictures and Texts */
.about-bottom{
    width:100%;
    overflow:hidden;
    margin:0 auto;
}
.about-bottom li{
    width:50%;
    height:393px;
    float:left;
    color:white;
    background-color:#07cbc9; 
}
.about-bottom li>div{
    width:50%;
    height:100%;
    float:left;
    box-sizing:border-box;
}
.about-bottom li div img{
    width:100%;
    height:100%; 
}
.about-bottom li div.des{
    position:relative;
    padding:30px;
    
}
.about-bottom li div span:nth-child(1){
    font-size:30px;
    display:inline-block;
    margin-bottom:20px;  
    margin-bottom:10px;
    
}
.about-bottom li div span:nth-child(3){
    font-size:18px;
    display:inline-block;
    line-height:1.5;
    margin-bottom:10px;
   
}
.about-bottom li div span:nth-child(5){
    font-size:14px;
    color:rgb(180,213,201);
    line-height:1.5;

}
.about-bottom li div .explore{
    margin:0 auto; 
    bottom:20%;  
    position:absolute;
    left:0;
    right:0;
}
/* gallery region */
.gallery-wrap{
    width:100%;
    
}
.gallery-wrap  div{
    width:493px;
    margin:0 auto;
    text-align:center;
    /* background:yellow; */
}
.gallery-wrap  .line{
    width:39px;
    border-bottom:2px solid rgb(7,203,201);
    margin:20px auto;

}
.gallery-wrap>div:nth-child(1){
    margin-top:63px;
    font-size:30px;
    font-weight:bold;
}
.gallery-wrap>div:nth-child(3){
    color:rgb(121,121,121);
    line-height:1.5;
}
.gallery-pic{
    width:1182px;
    margin:50px auto;
    overflow:hidden;
}

.gallery-pic li{
    float:left;
    width:360px;
    background-color:black;
    color:white;
    margin-left:30px;

}
.gallery-pic li div{
    height:63px;
    line-height:63px;
    padding-left:2em;
}
/* Footer Area Style Code */
.footer{
    width:100%;
    height:80px;
    text-align:center;
    line-height:80px;
    background-color:#07cbc9;
}

HTML structure code:

<!DOCTYPE HTML>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="CSS/CSS.css">
</head>

<body>
    <!-- Header code -->
    <div class="header">
        <div class="logo"><a href="#"><img src="images/logo.png" alt="logo"></a></div>
        <ul class="nav">
            <li><a href="#">home</a></li>
            <li><a href="#">about</a></li>
            <li><a href="#">gallery</a></li>
            <li><a href="#">faculty</a></li>
            <li><a href="#">events</a></li>
            <li><a href="#">contact</a></li>
        </ul>
    </div>
    <!-- banner Map area -->
    <div class="banner">
        <img src="images/banner3.jpg" alt="banner">
        <!-- Masks and text -->
        <div class="mask">
            <ul>
                <li>your Name</li>
                <li>your Phone</li>
                <li>your Email</li>
                <li class="comment">Write Your Comment Here</li>
                <li class="last-item">SEND MESSAGE</li>
            </ul>
        </div>
    </div>
    <!-- about Part -->
    <!-- Upper half part -->
    <div class="about-top">

        <div class="tit">ABOUT</div>
        <div class="line"></div>
        <div class="font">Loren Ipsum is simply dummy text of the printing and typeseting industy.Loren Ipsum has been
            the industry's
            standard dummy text ever since the 1500s</div>
        <div class="image">
            <img src="./images/bb3.jpg" alt="bb3">
            <div class="left">
                A WORD<br />
                ABOUT US
                <div class="word-left">

                    Praesent dignissim viverra est,sed bibendum ligula congue non.Sed ac nislet felis gravida commodo?
                    Supendisseeget ullamcorper ipsum.Suspendissediam amet.
                    <div class="explore">EXPLORE</div>
                </div>
            </div>
            <div class="right">
                <div>70000<div class="line"></div><span>Students</span></div>
                <div>600<div class="line"></div><span>Faculty</span></div>
            </div>
        </div>

    </div>
    <!-- Picture and Text Mixed Block -->
    <ul class="about-bottom">
        <li>
            <div><img src="./images/b1.jpg" alt=""></div>
            <div class="des">
                <span>Library</span><br />
                <span> Lorem Ipsum is simply dummy text of the printing and typesetting industry</span><br />
                <span>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown
                    printer
                    took a galley of type and scrambled it to make a type specimen book.</span>
                <div class="explore"><a href="#">EXPLORE</a></div>
            </div>
        </li>
        <li>
            <div><img src="./images/b2.jpg" alt=""></div>
            <div class="des">
                <span>Computer Lab</span><br />
                <span> Lorem Ipsum is simply dummy text of the printing and typesetting industry</span><br />
                <span>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown
                    printer
                    took a galley of type and scrambled it to make a type specimen book.</span>
                <div class="explore"><a href="#">EXPLORE</a></div>
            </div>
        </li>
        <li>
            <div class="des">
                <span>Conference Hall</span><br />
                <span> Lorem Ipsum is simply dummy text of the printing and typesetting industry</span><br />
                <span>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown
                    printer
                    took a galley of type and scrambled it to make a type specimen book.</span>
                <div class="explore"><a href="#">EXPLORE</a></div>
            </div>
            <div><img src="./images/b3.jpg" alt=""></div>
        </li>
        <li>
            <div class="des">
                <span>Play Ground</span><br />
                <span> Lorem Ipsum is simply dummy text of the printing and typesetting industry</span><br />
                <span>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown
                    printer
                    took a galley of type and scrambled it to make a type specimen book.</span>
                <div class="explore"><a href="#">EXPLORE</a></div>
            </div>
            <div><img src="./images/b4.jpg" alt=""></div>
        </li>
    </ul>
    <!-- gallery region -->
    <div class="gallery-wrap">
            <div>GALLERY</div> 
            <div class="line"></div>
            <div> Lorem Ipsum is simply dummy text of the printing and typesetting industry.Lorem Ipsum has been the
            industry's standard dummy text ever since the 1500s.</div>    
    </div>
    <ul class="gallery-pic">
        <li><img src="images/03-01.jpg" alt=""><div>SCIENCE LAB</div></li>
        <li><img src="images/03-02.jpg" alt=""><div>INDOOR STADIUM</div></li>
        <li><img src="images/03-03.jpg" alt=""><div>TRANSPORTATION</div></li>
        <li><img src="images/03-04.jpg" alt=""><div>KIDS ROOM</div></li>
        <li><img src="images/03-05.jpg" alt=""><div>MEDITATION CLASSES</div></li>
        <li><img src="images/03-06.jpg" alt=""><div>KIDS PLAY GROUND</div></li>
    </ul>
<!-- Footer area -->
    <div class="footer">
        &copy; 2016 imooc.com Beijing ICP No. 13046624

    </div>

</body>

</html>

 

Tags: sublime

Posted on Fri, 03 May 2019 21:30:40 -0700 by ark014