码迷，mamicode.com
首页 > Web开发 > 详细

实例应用，做了一个网页

时间：2017-04-03 17:09:52      阅读：274      评论：0      收藏：0      [点我收藏+]

标签：com   osi   aes   网页   central   半透明   att   form   service   

先放完成后的样子图

技术分享

技术分享

技术分享

 

 

技术分享

技术分享

技术分享

在就是代码

<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="width: 200px; height: 30px;" />
                    <style>
                        #sub {
                            width: 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;
    width: 100%;
    height: 750px;
    background-image: url(../logo/2.jpg);
    background-repeat: no-repeat;
    background-size: 100%;
}

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

.lift { /*左半大框*/
    position: absolute;
    width: 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;
    width: 430px;
    height: 40px;
    color: white;
    text-align: center;
}
/*导航*/
.daohang {
    height: 100%;
    width: 18%;
    border: 1px solid white;
    float: left;
    line-height: 40px;
}
/*大字下分享*/
.datu-lll {
    position: absolute;
    top: 65%;
    left: 230px;
    width: 120px;
    height: 30px;
    color: white;
    text-align: center;
    line-height: 30px;
}

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

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

.datu-r {
    position: absolute;
    left: 50%;
    width: 50%;
    height: 750px;
}
/*右上小字*/
.right1 {
    position: absolute;
    top: 20%;
    right: 40px;
    width: 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;
    width: 90%;
    height: 200px;
}
/*小时间框*/
.right22 {
    float: left;
    width: 24%;
    height: 98%;
    border: 1px solid #8B8989;
}
/*右下文字*/
.right3 {
    position: absolute;
    top: 70%;
    right: 200px;
    width: 200px;
    height: 30px;
    color: white;
    font-family: 黑体;
    font-size: 20px;
}
.right4 {
    position:absolute;
    top:80%;
    right:230px;
}
.jieshao1 {
    position: absolute;
    top: 750px;
    width: 100%;
    height: 400px;
}
/*第二区域*/
.biaoti2 {
    position: absolute;
    top: 10%;
    left: 42%;
    width: 40%;
    height: 15%;
    font-family: 黑体;
    font-size: 50px;
    color: black;
}

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

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

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

.tu {
    position: absolute;
    top: 25%;
    left: 10%;
    width: 1050px;
    height: 400px;
    border: 1px solid red;
}
/*第四区域*/
.jieshao4 {
    position: absolute;
    top: 1850px;
    width: 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%;
    width: 90%;
    height: 150px;
    text-align:center;
}

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

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

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

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

 

实例应用，做了一个网页

标签：com   osi   aes   网页   central   半透明   att   form   service   

原文地址：http://www.cnblogs.com/big-lll/p/6662174.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！