实例应用，做了一个网页

最新推荐文章于 2024-07-14 12:56:18 发布
最新推荐文章于 2024-07-14 12:56:18 发布
阅读量80 收藏
点赞数
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/big-lll/p/6662174.html
版权

先放完成后的样子图

 

 

在就是代码

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

 

转载于:https://www.cnblogs.com/big-lll/p/6662174.html

weixin_30838873
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Pyamf实际应用案例
IMISer2016的博客
02-01 3552
再次爬取基于Flex技术的某农产品每日价格历史数据 这个是实习期间耽搁时间最长的项目了，通过这个对pyamf这个包算是很熟悉了。不得不说他的请求伪造真的好复杂。。。 顺便吐槽一下，像flash这种当今在网页上见得很少了，但是众多政府网站依然使用，接受html5就那么难吗？？？还是说懒得换架构和模式？？ 网上对pyamf包的使用案例几乎没有，只能从国外找，1.23那天项目已经实践过一次
爬取基于Flex技术的网站数据
IMISer2016的博客
01-24 3502
爬取基于Flex技术的网站数据 Flex技术是网站运用flash方法与客户端进行数据通信，数据的格式可以是txt,json或amf等。 AMF是一种二进制编码方式，其在flash传输效率高,以农业信息网数据为例，爬取的方式与一般ajax分析相同。通过抓包分析请求头和响应数据，然后构造请求、接受返回数据。 github原文地址 下面我以中国农产品批发市场每日价格行情http://jgsb.a
从Flash Remoting For .Net 返回一个数组数据给Flash
weixin_33963189的博客
07-27 51
在Flash Remoting与.Net的结合中,要返回多个值给Flash,比如返回一个数组或结构体的数据，比较简单，主要代码如下：Test.Aspx: &lt;%@ Page language="c#" debug="true" %&gt;&lt;%@ Register TagPrefix="Macromedia" Namespace="FlashGateway" Assembly="fla
100个网页实例
09-06
本资源"100个网页实例"是一个宝贵的教材，它提供了丰富的实例供学习者研究和参考，尤其对于初学者来说，是提升Web设计与开发能力的绝佳途径。 这些实例覆盖了多种网页布局技术，布局在网页设计中扮演着核心角色，它...
一个网页实例
05-19
总的来说，这个"一个网页实例"展示了HTML和CSS在网页设计中的应用，是学习和实践网页开发的好素材。通过下载和研究这个实例，你可以深入了解HTML的基本结构，掌握CSS的样式规则，以及如何在VS2010中进行有效的开发...
第12章 网页综合应用实例
12-27
第12章 网页综合应用实例 内容提要 站点的规划 利用表格进行网页布局 层的应用 库项目的创建及应用 超链接的设置
网页设计配色应用实例剖析
12-03
实例分析：假设我们有一个健康食品网站，可以选用绿色为主色，象征自然与健康，再搭配白色和浅木色，营造清新、自然的环境感。按钮或重要信息可以采用黄色，作为对比色，吸引用户的注意。 颜色心理学也是设计配色时...
Android应用源码之监听自身应用卸载，启动网页的实例工程.zip
11-01
这个"Android应用源码之监听自身应用卸载，启动网页的实例工程"提供了一个很好的学习和实践平台，它涵盖了Android系统中的一些核心概念和技术。以下是基于这个实例工程的关键知识点的详细说明： 1. **...
7. 应用到实例
litao55555的博客
01-21 598
1. 拷贝阿里云数据库到服务器 //阿里云执行 mysqldump -u root -p victory311 &amp;gt; victory311.sql 将victory311.sql复制到master1和master2的root目录 //server1执行 mysql -u root -p create database victory311; use victory311; set names ...
ByteArray应用
tiantian_kuaile的博客
09-07 252
package com.phone.week4.day5;import java.io.ByteArrayInputStream; import java.io.ByteArrayOutputStream; import java.io.IOException; import java.util.Scanner;public class TestByteArray {public static
Flex + Python + PyAMF编程实例
04-19 3882
Flex + Python + PyAMF编程实例 Cairgorm + Django + PyAMF简易教程 一、技术简介 1. Cairngorm框架     Cairngorm是一个轻量级的用于Flex项目开发的MVC框架，主要由vo、command、event、controller、service、delegate和modellocator等部分构成。其中vo用于数据对象的
amf数据解码
seawrath的博客
07-20 4123
这两天测试网站，发现了一个flex架构+amf协议的站点。别说注入和跨站了，连发送包和返回包的数据都看不明白，在尝试各种前端输入无果后，决定研究一下这个少见的技术组合。flex是用来做flash展示的，主要用来做页面呈现，不深究；主要是amf协议数据了。通过查询发现Python拥有amf处理模块，very beautiful，果然是强大的胶水语言，越来越喜欢Python了。接下来给大家分享一下具体
20190724-Python网络数据采集/第 2 章 复杂HTML解析-导航树/正则表达式
weixin_30737433的博客
07-24 117
1. 导航树 经典的HTML树状结构 直接看下面的代码示例：（注意目标网页的标签大小写等细节，易出bug） 1 from urllib.request import urlopen 2 from bs4 import BeautifulSoup 3 4 html = urlopen("http://www.pythonscraping.com/pages/page3....
Sortable.js板块拖拽示例
最新发布
w11111xxxl的博客
07-14 763
ghostClass: 'blue-background-class' // 拖动时元素的样式类。group: 'shared', // 允许与其它具有相同组名的元素交互。-- 引入 Sortable.js 的 CSS 和 JS 文件 -->width: 150px;/* 减少宽度 */height: 70px;/* 设置高度 */-- 引入 Sortable.js 的 JS 文件 -->animation: 150, // 动画速度。// 初始化 Sortable。
更新商品前端接口编写
weixin_55639995的博客
07-12 419
那么在vue运行的时候,会加载所有的ref属性特征的元素还有组件。标签中ref的作用就是将 该组件注册到vue对象的ref属性中。使用插槽,那个scope就是代表着一行的数据。然后里面的选项遍历的是 js定义的数据。如果文字显示过多可以使用 文本隐藏显示。表单绑定还有表单数据的绑定。数据绑定使用的表单绑定状态。写form表单然后封装数据。状态的选择使用的是选择框。副标题使用的是文本域。状态页面使用,下拉框。富文本选择器使用组件。使用后端枚举类型去写。
vue解决页面放大图片模糊的问题
m0_56104994的博客
07-12 319
解决页面放大，图片模糊的问题
动态网站构建：ASP应用实例详解
最后，提供了一个应用实例，可能展示了如何通过ASP实现用户注册、登录、信息展示等功能，帮助读者理解动态网站开发的实际应用场景。 通过学习本教程，读者能够掌握ASP的基本原理和技术，从而开发出功能丰富的动态...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值