实例应用，做了一个网页

先放完成后的样子图

在就是代码

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <link href="css/nb_1.css" rel="stylesheet" />
</head>
<body>

    <div class="datu">
        <!--第一区域-->
        <div id="d1" class="touming1"></div>
        <!--左半背景色-->
        <div class="lift">
            <!--左半区域框-->
            <div class="datu-l">
                <!--区域左半大字-->
                VB
                <div id="a1"><span>Under Construction</span></div>
            </div>
            <!--导航框-->
            <div class="datu-ll">
                <div class="daohang" style="background-color: white;"><a style="text-decoration: none; color: #ffd800;" href="#d1">Home</a></div>
                <a style="text-decoration: none; color: #ffffff;" href="#jieshao">
                    <div class="daohang" style="color: white">About</div>
                </a>
                <a style="text-decoration: none; color: #ffffff;" href="#renwu">
                    <div class="daohang" style="color: white">Team</div>
                </a>
                <a style="text-decoration: none; color: #ffffff;" href="#jieshao2">
                    <div class="daohang" style="color: white">Services</div>
                </a>
                <a style="text-decoration: none; color: #ffffff;" href="#biao">
                    <div class="daohang" style="color: white">Mail Us</div>
                </a>

            </div>
            <!--大字下分享-->
            <div class="datu-lll">
                <div class="fenxiang">1</div>
                <div class="fenxiang">2</div>
                <div class="fenxiang">3</div>
                <div class="fenxiang">4</div>
            </div>

        </div>

        <!--区域右半-->
        <div class="touming2"></div>
        <div class="datu-r">
            <div class="right1">Our website is under construction. We`ll be here soon with our new awesome site, subscribe to be notified.</div>
            <div class="right2">
                <div class="right22"></div>
                <div class="right22"></div>
                <div class="right22"></div>
                <div class="right22"></div>
            </div>
            <div class="right3">Subscribe Now</div>
            <form>
                <div class="right4">
                    <input type="text" style=" 200px; height: 30px;" />
                    <style>
                        #sub {
                             100px;
                            height: 35px;
                            line-height: 35px;
                            background-color: #FFA500;
                            no-repeat;
                            border: none;
                        }
                    </style>
                    <input id="sub" type="submit" value="Subscribe" />
                </div>
            </form>

        </div>

    </div>
    <!--第二区域-->
    <div id="jieshao" class="jieshao1">
        <div class="biaoti2">ABOUT US</div>
        <div class="text2">
            <div class="text2-1">
                <p>
                    <img src="logo/111.png" />
                </p>
                <br />
                <h4>LOREM IPSUM DOLOR</h4>
                <br />
                <p style="color: #8B8989">Pellentesque molestie viverra neque quis egestas. Proin dui urna, bibendum sit amet scelerisque id, lacinia at sapien. Cras quis varius urna. Praesent et tellus vel eros porta ultrices.</p>

            </div>
            <div class="text2-1">
                <p>
                    <img src="logo/111.png" />
                </p>
                <br />
                <h4>LOREM IPSUM DOLOR</h4>
                <br />
                <p style="color: #8B8989">Pellentesque molestie viverra neque quis egestas. Proin dui urna, bibendum sit amet scelerisque id, lacinia at sapien. Cras quis varius urna. Praesent et tellus vel eros porta ultrices.</p>
            </div>
            <div class="text2-1">
                <p>
                    <img src="logo/111.png" />
                </p>
                <br />
                <h4>LOREM IPSUM DOLOR</h4>
                <br />
                <p style="color: #8B8989">Pellentesque molestie viverra neque quis egestas. Proin dui urna, bibendum sit amet scelerisque id, lacinia at sapien. Cras quis varius urna. Praesent et tellus vel eros porta ultrices.</p>
            </div>
        </div>

    </div>
    <!--第三区域-->
    <div id="renwu" class="renwu">
        <div class="biaoti3">AMAZING TEAM</div>
        <div class="tu"></div>
    </div>
    <!--第四区域-->
    <div id="jieshao2" class="jieshao4">
        <div class="biaoti4">OUR SERVICES</div>
        <div class="text4">
            <div class="text4-1">
                <p>
                    <img src="logo/111.png" /></p>
                <br />
                <h4>PELLENTESQUE</h4>
                <br />
                <p>__</p>
            </div>
            <div class="text4-1">
                <p>
                    <img src="logo/111.png" /></p>
                <br />
                <h4>PELLENTESQUE</h4>
                <br />
                <p>__</p>
            </div>
            <div class="text4-1">
                <p>
                    <img src="logo/111.png" /></p>
                <br />
                <h4>PELLENTESQUE</h4>
                <br />
                <p>__</p>
            </div>
            <div class="text4-1">
                <p>
                    <img src="logo/111.png" /></p>
                <br />
                <h4>PELLENTESQUE</h4>
                <br />
                <p>__</p>
            </div>
        </div>
        <div class="text4-2">Sed mattis erat non justo mollis commodo. Praesent elementum orci nunc, eu convallis quam placerat non. Aenean eget leo ipsum. Aliquam velit sem, egestas vel posuere nec, gravida sit amet justo. Vestibulum faucibus vitae mauris laoreet accumsan. Sed libero tellus, dictum sed porttitor sit amet, porttitor in felis. In sollicitudin consequat vestibulum.</div>
    </div>

    <!--第五区域-->

    <div id="biao" class="biao">
        <div class="touming5"></div>
        <div class="biaoti5">GET IN TOUCH</div>
        <div class="xunxi">
            <div class="xunxi1">
                <b>Address :</b><br />
                <br />
                Eiusmod Tempor inc<br />
                St Dolore Place,<br />
                San Francisco 56777
            </div>
            <div class="xunxi1">
                <b>Phone :</b><br />
                <br />
                +2 123 456 789<br />
                +2 987 654 321
            </div>
            <div class="xunxi1">
                <b>Email :</b><br />
                <br />
                mail@example.com
            </div>
        </div>
        <div class="lianxifangshi">
            <div class="biaoti5-1">Contact Form</div>
            <div class="biaoti5-2">
                <div class="text5">Full Name</div>
                <div class="text5">Phone</div>
                <div class="text5">Emall</div>
                <div class="text5">Subject</div>
                <div class="text5" id="a2">Messagr</div>

            </div>
        </div>

    </div>
    <div class="end">© 2017 VB Under Construction. All rights reserved | Design by W3layouts</div>









</body>
</html>
<script type="text/javascript">
    var items = document.getElementsByClassName("daohang");
    for (var i = 0; i < items.length; i++) {
        items[i].onmouseover = function () {
            this.style.backgroundColor = "white";
            this.style.color = "yellow"
        }
        items[i].onmouseout = function () {
            this.style.backgroundColor = "";
            this.style.color = "white"
        }
    }
</script>
<script type="text/javascript">
    var items = document.getElementsByClassName("sub");
    for (var i = 0; i < items.length; i++) {
        items[i].onmouseover = function () {
            this.style.backgroundColor = "#FFA500";
            
        }
        items[i].onmouseout = function () {
            this.style.backgroundColor = "";
            
        }
    }
</script>

外联

/*第一区域*/
* {
    margin: 0;
    padding: 0;
}

.datu { /*背景图*/
    position: absolute;
     100%;
    height: 750px;
    background-image: url(../logo/2.jpg);
    background-repeat: no-repeat;
    background-size: 100%;
}

.touming1 { /*左半透明罩子*/
    position: absolute;
     50%;
    height: 750px;
    background-color: black;
    opacity: 0.3;
    -moz-opacity: 0.3;
    filter: alpha(opacity=30);
}

.lift { /*左半大框*/
    position: absolute;
     50%;
    height: 750px;
}

/*左边大字*/
.datu-l {
    position: absolute;
    top: 20%;
    left: 200px;
    font-family: 黑体;
    color: white;
    font-size: 170px;
    font-weight: bold;
    text-align: center;
    vertical-align: central;
    display: table-cell;
}

#a1 { /*左小字*/
    font-family: 黑体;
    color: white;
    font-size: 20px;
}
/*导航框*/
.datu-ll {
    position: absolute;
    top: 55%;
    left: 90px;
     430px;
    height: 40px;
    color: white;
    text-align: center;
}
/*导航*/
.daohang {
    height: 100%;
     18%;
    border: 1px solid white;
    float: left;
    line-height: 40px;
}
/*大字下分享*/
.datu-lll {
    position: absolute;
    top: 65%;
    left: 230px;
     120px;
    height: 30px;
    color: white;
    text-align: center;
    line-height: 30px;
}

.fenxiang {
    float: left;
    margin: 0px 2px;
     20%;
    height: 100%;
    border: 1px solid white;
}

/*右半区*/
.touming2 {
    position: absolute;
    left: 50%;
     50%;
    height: 750px;
    background-color: black;
    opacity: 0.7;
    -moz-opacity: 0.7;
    filter: alpha(opacity=70);
}

.datu-r {
    position: absolute;
    left: 50%;
     50%;
    height: 750px;
}
/*右上小字*/
.right1 {
    position: absolute;
    top: 20%;
    right: 40px;
     90%;
    height: 80px;
    font-family: 黑体;
    color: #CDC9C9;
    font-size: 22px;
    font-weight: bold;
    text-align: center;
    vertical-align: central;
    display: table-cell;
}
/*大时间框*/
.right2 {
    position: absolute;
    top: 35%;
    right: 30px;
     90%;
    height: 200px;
}
/*小时间框*/
.right22 {
    float: left;
     24%;
    height: 98%;
    border: 1px solid #8B8989;
}
/*右下文字*/
.right3 {
    position: absolute;
    top: 70%;
    right: 200px;
     200px;
    height: 30px;
    color: white;
    font-family: 黑体;
    font-size: 20px;
}
.right4 {
    position:absolute;
    top:80%;
    right:230px;
}
.jieshao1 {
    position: absolute;
    top: 750px;
     100%;
    height: 400px;
}
/*第二区域*/
.biaoti2 {
    position: absolute;
    top: 10%;
    left: 42%;
     40%;
    height: 15%;
    font-family: 黑体;
    font-size: 50px;
    color: black;
}

.text2 {
    position: absolute;
    margin: 150px 50px 10px 140px;
     80%;
    height: 250px;
}

.text2-1 {
    float: left;
    margin: 0 25px 0 25px;
     300px;
    height: 248px;
    
    /*background-image:url(../logo/111.png);*/
}

.renwu {
    position: absolute;
    top: 1150px;
     100%;
    height: 700px;
    background-color: #FFA500;
    text-align: center;
}
/*第三区域*/
.biaoti3 {
    position: absolute;
    top: 10%;
    left: 32%;
     500px;
    height: 100px;
    font-size: 50px;
}

.tu {
    position: absolute;
    top: 25%;
    left: 10%;
     1050px;
    height: 400px;
    border: 1px solid red;
}
/*第四区域*/
.jieshao4 {
    position: absolute;
    top: 1850px;
     100%;
    height: 400px;
    background-color: inherit;
}

.biaoti4 {
    position: absolute;
    top: 10%;
    left: 38%;
    font-size: 50px;
    font-family: 黑体;
    color: black;
}

.text4 {
    position: absolute;
    top: 25%;
    left: 10%;
     90%;
    height: 150px;
    text-align:center;
}

.text4-1 {
    float: left;
    margin: 0 10px 0 10px;
     20%;
    height: 99%;
    border: 1px solid red;
}

.text4-2 {
    position: absolute;
    top: 70%;
    left: 23%;
     60%;
    height: 100px;
    font-size: 12px;
    font-weight: bold;
    color: #8B8989;
    text-align: center;
    vertical-align: central;
    display: table-cell;
}

.touming5 {
     100%;
    height: 100%;
    background-color: black;
    opacity: 0.5;
    -moz-opacity: 0.5;
    filter: alpha(opacity=50);
}

.biao {
    position: absolute;
    top: 2250px;
     100%;
    height: 800px;
    background-image: url(../logo/4.jpg);
    background-repeat: no-repeat;
    background-size: 100%;
}
.biaoti5 {
    position:absolute;
    top:10%;
    left:38%;
    400px;
    height:50px;    
    font-size:40px;
    font-family:Arvo;
    color:white;
}
.xunxi {
    position:absolute;
    top:25%;
    left:8%;
    70%;
    height:200px;
    
}
.xunxi1 {
    float:left;
    margin:0 30px 0 0px;
    30%;
    height:100%;
    color:white;
    font-family:Constantia;
 
}
.lianxifangshi {
    position:absolute;
    top:42%;
    left:8%;
    70%;
    height:350px;
      
}
.biaoti5-1 {
    position:absolute;
    100%;
    height:50px;
    
    font-family:Aharoni;
    font-size:25px;
    color:white;
}
.biaoti5-2 {
    position:absolute;
    top:50px;
    100%;
    height:300px;
    
    font-family:Cambria;
    font-size:15px;
    color:white;
}
.text5 {
    float:left;
    margin:20px 5px 0 0;
    48%;
    height:40px;
    border-bottom:1px solid white;
}
#a2{
    float:left;
    margin:20px 40px 0 0;
    98%;
    height:150px;
    border-bottom:1px solid white;
}
.end {
    position:absolute;
    top:3050px;
    100%;
    height:50px;
    background-color:white;
    color:black;
    text-align:center;
    line-height:50px;
}

相关阅读:
Duang！异地多活！_InfoQ_传送门
 异地多活设计辣么难？其实是你想多了！-博客-云栖社区-阿里云
 途牛谭俊青：多数据中心状态同步&两地三中心的理论
 魅族多机房部署方案
 荔枝FM架构师刘耀华：异地多活IDC机房架构
 zz
“异地多活”多机房部署经验谈_运维管理_数据中心_中国IDC圈
 天猫双11晚会和狂欢城的互动技术方案
 案例 | 魅族云端同步的架构实践和协议细节
 如何应对大促？看京东核心中间件团队的高可用实践指南
原文地址：https://www.cnblogs.com/big-lll/p/6662174.html