zoukankan html css js c++ java

实例应用，做了一个网页

先放完成后的样子图

在就是代码

<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;
}

查看全文

相关阅读:
SAP：建表时如果有QUAN、CURR类型的字段不能激活的问题
 ABAP：ALV的 Header中添加HTML内容
 iframe中cookie失效问题
 让flash自动显示代码提示的两种方式
 event.srcElement说明,方法,技巧
 ABAP：FI常用BAPI
加入收藏夹功能(jQuery)
ABAP笔记：BDC完整版例子
 BDC处理时用到结构BDCDATA
ABAP 自动生成EXCEL文件并作简单格式处理

原文地址：https://www.cnblogs.com/big-lll/p/6662174.html