如何做一个简单的网页

如何做一个简单的网页导航

2021-01-20 13:58:33

如何运用html和css制作一个简单的网页导航代码示例： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> .nav...

如何运用html和css制作一个简单的网页导航
代码示例：
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.nav{
				/* 设置高和宽 */
				height: 90px;
				width: 530px;
				/* 背景颜色 */
				background-color: #909090;
				/* 左右自动居中 */
				margin-left: auto;
				margin-right: auto;
				/* 行内元素-行内块元素-文本居中 */
				text-align: center;
			}
			.nav a{
				/* 转换为块元素，为了设置宽高 */
				display: inline-block;
				/* 高 */
				width: 105px;
				/* 行高90 让文本垂直在90居中 */
				line-height: 90px;
				/* 文字大小，粗细 */
				font-size: 24px;
				font-weight: 800;
				/* 不要装饰线 */
				text-decoration: none;
				/* 白色 */
				color: white;
				/* 默认设置左边两像素和背景一致的边框 */
				border-left:1px solid #909090 ;
			}
			.nav a:hover{
				/* 鼠标放上去改变背景和边框颜色 */
				background-color: red;
				border-left-color:white ;
			}
		</style>
	</head>
	<body>
		<div class="nav">
			<a href="">首页</a>
			<a href="">活动</a>
			<a href="">帮助</a>
			<a href="">招聘</a>
		</div>
	</body>
</html>


效果示例：

收起

展开全文

css html

如何做一个简单好玩的音乐网页

千次阅读 2019-01-16 11:20:55

如何做一个简单好玩的音乐网页（作者：宁佐潮，撰写时间：2019年1月16日）下面我们开始用所学的的知识，开始做一个简单而方便的音乐页面，未使用插件一共分为两部分：一：播放部分二：钢琴部分由上图...

如何做一个简单好玩的音乐网页
作者：朝思

下面我们开始用所学的的知识，开始做一个简单而方便的音乐页面，未使用插件

一共分为两部分：

一：播放部分

二：钢琴部分



由上图可见，左上角的为播放部分，可以实现基本的操作功能，支持鼠标和键盘操作

其他就是钢琴部分，我把这分为两个html写入，把另一个小的用iframe标签嵌入进去



首先是布局，第一部分的布局十分简洁，一个时间+四个按钮，然后就是一些歌曲



然后就是css样式，可以说是十分简洁了



接下来就是重点，javascript的写法，主要就是简单的if 和for循环

这个是鼠标点击事件



这个是键盘的点击事件



再加一个自动播放，获取到音乐的时长，我把结尾减去了5秒



调用的方法在这里

//播放

function one(){

tranfor = true;

var musiclist = document.getElementById(“music”).getElementsByTagName(“video”);

for(var i = 0;i<musiclist.length;i++){

musiclist[ind].play();

}

tranfor = false;

}

//暂停

function two(){

tranfor = true;

var musiclist = document.getElementById(“music”).getElementsByTagName(“video”);

for(var i = 0;i<musiclist.length;i++){

musiclist[ind].pause();

}

tranfor = false;

}

//上一首

function three(){

tranfor = true;

var musiclist = document.getElementById(“music”).getElementsByTagName(“video”);

var leftBtn = ind-1;

if(leftBtn < 0){

alert(“已经到顶了!”);

return;

}else{

for(var i = 0;i<musiclist.length;i++){

musiclist[leftBtn].play();

musiclist[ind].pause();

}

ind–;

}

tranfor = false;

}

//下一首

function four(){

tranfor = true;

var musiclist = document.getElementById(“music”).getElementsByTagName(“video”);

var rightBtn = ind+1;

if(rightBtn === musiclist.length){

alert(“居然没有歌了，快去添加吧!”);

return;

}else{

for(var i = 0;i<musiclist.length;i++){

musiclist[rightBtn].play();

musiclist[ind].pause();

}

ind++;

}

tranfor = false;

}
接下来就是钢琴的部分

钢琴我把它分为了二个部分，一个是上面的词谱，另一个便是下面的钢琴按键部分，然后在右上角我给了一个背景音乐的按钮
首先html部分，一样的简洁



然后css部分，词谱部分是一个轮播的格式，钢琴按键部分排列整齐便可
Javascript部分更加简洁，首先是词谱的左右换页



然后再是背景音乐按钮的点击事件



接下来就是核心，钢琴按钮的点击事件，先是鼠标的点击



然后再加上按键的点击事件

就这样，一个简洁好用的音乐网页便完成了

收起

展开全文

前端基础

如何做一个简单的类似qq网页版等的聊天网页

2019-03-20 22:18:11

1、我这个是tomcat上的，，利用的就是tomcat的webSocket用来跟好友进行交流。。当能实现实时发送消息之后。后面的什么表情啊、匿名、图片、等等就会自然而然的实现出来。目前这个已经可以实现发送群组，图片、匿名...

代码先不上，所谓工欲善其事必先利其器，首先说下下怎么实现的。

1、我这个是tomcat上的，，利用的就是tomcat的webSocket用来跟好友进行交流。。当能实现实时发送消息之后。后面的什么表情啊、匿名、图片、等等就会自然而然的实现出来。

目前这个已经可以实现发送群组，图片、匿名、撤回、表情、实时更换头像等等功能。

有了这个webSocket大家就不用费时费力不讨好的用ajax轮询等方法了。。大家敢兴趣的可以去看看webSocket。试着玩一玩

new WebSocket("ws://"+'<%=yuming+path%>'+"/websocket?roomId=把http改为ws,后面的参数可以在session里获得

等我整理好后可以在这里分享下weisocket后台的controller的心得。

大家有什么想法麻烦可以告诉我下

收起

展开全文

java WebSocket jquery html5

如何做一个简单的Chrome Extension用于网页截屏

千次阅读 2015-09-24 13:55:34

permission的权限配置很重要，如果要让extension作用于所有的网页站点，就必须申明为。具体的各种权限可以参考 https://developer.chrome.com/extensions/declare_permissions Google提供了一个API用于...


参考原文：


A Simple
 Chrome Extension to Save Web Page Screenshots to Local Disk


Chrome Extension开发指南





Chrome Extension Overview


Chrome Extension Debugging


Chrome Extension Samples



如何实现网页截屏功能

看一下manifest文件：






?





1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41




{

  

    "name": "Screenshot Extension",

  

    "version": "1.0",

  

    "description": "A simple screenshot extension",

  

    "background": {

  

        "persistent": false,

  

        "scripts": ["background.js"]

  

    },

  

    "content_scripts": [

  

        {

  

            "matches" : ["<all_urls>"],

  

            "js": ["content.js"]

  

        }

  

    ],

  

    "browser_action": {

  

        "default_icon": "camera.png",

  

        "default_title": "Screenshot"

  

    },

  

    "permissions": ["tabs", "<all_urls>", "activeTab"],

  

    "manifest_version": 2

  

}







 

注意：



background.js是用于extension的，而content.js是用于和网页交互的。这两个文件之间要交互，需要通过消息传递机制。


permission的权限配置很重要，如果要让extension作用于所有的网页站点，就必须申明为<all_urls>。具体的各种权限可以参考 https://developer.chrome.com/extensions/declare_permissions


Google提供了一个API用于捕捉网页的可见区域：



?





1

2

3

4

5

6

7

8

9

10

11

12

13

14

15




chrome.browserAction.onClicked.addListener(function(tab) {

  

     chrome.tabs.captureVisibleTab(null, {

  

         format : "png",

  

         quality : 100

  

     }, function(data) {

  

         screenshot.data = data;

  

     });

  

 });










如果要实现全网页的截图，就必须要触发滚动，然后把所有的数据拼接起来。这里的data就是获取的图片数据。

为了让用户做出截屏的选择，创建一个content.js来和网页交互。从background.js发送消息到content.js询问是否需要做截屏操作。如果用户点击确认，把消息回传到background.js。

    background.js




?





1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17




chrome.tabs.query({

  

      active : true,

  

      currentWindow : true

  

  }, function(tabs) {

  

      chrome.tabs.sendMessage(tabs[0].id, {ready : "ready"}, function(response) {

  

          if (response.download === "download") {

  

          }

  

      });

  

  });









    content.js






?





1

2

3

4

5

6

7

8

9

10

11

12

13




chrome.extension.onMessage.addListener(function(msg, sender, sendResponse) {

  

    if (msg.ready === "ready") {

  

        if (confirm('Do you want to capture the screen?')) {

  

            sendResponse({download : "download"});

  

        }

  

    }

  

});









保存下载图片：




?





1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33




saveScreenshot : function() {

  

    var image = new Image();

  

    image.onload = function() {

  

        var canvas = screenshot.content;

  

        canvas.width = image.width;

  

        canvas.height = image.height;

  

        var context = canvas.getContext("2d");

  

        context.drawImage(image, 0, 0);

  

        // save the image

  

        var link = document.createElement('a');

  

        link.download = "download.png";

  

        link.href = screenshot.content.toDataURL();

  

        link.click();

  

        screenshot.data = '';

  

    };

  

    image.src = screenshot.data;

  

},










安装运行Chrome Extension





在Chrome设置中勾上Developer mode


点击Load unpacked extension


打开一个网页，点击工具栏中的按钮


确认保存截屏







Download Sample Code

Chrome_Screenshot

收起

展开全文

使用application内置对象做一个简单的网页访问计数器
千次阅读 2017-08-21 11:26:19
jsp的9大内置对象：out、request、response、session、application、exception、page、pageContext和config，今天就说说如何用application内置对象做一个简单的网页访问计数器。 application对象负责提供应用程序在...
收起
如何做一个简单的APP
万次阅读 2013-01-03 13:33:21
如何做一个简单的APP (Android and iPhone) 时间:12-12-11 栏目:好文分享作者:Kenny 评论:1条评论点击: 91 次本文标签： Android , APP , 安卓开发 , 应用开发 AppsGeyser：...
收起
如何用python创建一个下载网站-用Python写一个简单的网页下载
2020-11-01 12:49:09
作为一个Python+爬虫的小白，今天要搞点爬虫的活儿，以前... 先做个简单的爬取网页的demo。 Python3 提供了 urllib 这个标准库，无需安装，即可引用使用：from urllib import request复制代码然后，我们就可以使用ur...
收起
简单说 如何做一个chrome 去广告插件
万次阅读 2017-10-10 08:53:55
这次我们先来简单接触一下，了解一点入门知识，先做一个简单的demo，就先去除一下CSDN网页上的广告。解释这次做的这个插件真的很简单，不涉及什么加密解密，也不是去拦截特定的网络请求，就是用
收起
chrome css chrome插件 js
用爬虫的底子两天做了一个简单的网页（新手版）
2020-05-23 23:34:03
前不久，曾经的一位朋友找到我，让我帮他弄一个简单的网页设计，起初打算拒绝来着，主要是因为真的没有自己写过html+CSS+javascript 构成的网页，不过后来想想又决定挑战一下自己，之前基本没接触过网页设计三剑客，...
收起
html css javascript jquery
如何实现做一个简单的返回顶部效果按钮
千次阅读 2019-01-17 09:31:02
如何实现做一个简单的返回顶部效果按钮开发工具与关键技术：DW—jquery 作者：Mr_恺撰写时间：2019.01.17 我们是不是在浏览网页的时候，可以看到网页右下都会有一个“返回顶部”的按钮，点击它就回能回到...
收起
如何做一个网页版 WEB 的分屏异显
2016-10-17 21:51:09
现在要做一个网页版的分屏异显。主屏显示主要业务，副屏显示一些简单的内容，并支持触摸，接受用户的一些输入。就是像有些银行柜台的那个系统：客户可以看到一些指定内容，并作确认、输入密码等操作。请大家给点...
收起
如何做一个统计网页访问量的功能
万次阅读 2015-03-27 21:01:15
在H5中，由于提供了相应的web客户端存储数据的方法，所以不用利用传统的追踪cookie的方法，实现更加高效，简单。... sessionStorage-针对一个session的web存储，只记录当前session的访问记录，关闭网页即恢复
收起
访问量 html5 存储 web
github密码格式_如何使用GitHub构建一个简单的网页 （不用框架版本）
2021-01-30 21:21:28
1、申请GitHub账号进入GitHub官网，点击右上角的Sign up进行注册，注册很简单...点进来之后有个有个调查问卷（想做就做不想做直接往下滑，点Complete setup进行下一步）。随后GitHub会给你注册的邮箱发一份确认连接...
收起
如何用HTML和css制作一个简单的带有滑动条的网页电子相册实例
千次阅读 2020-12-01 17:57:16
超完整的代码+详细注释，适合给小白做的简单的网页电子相册实例代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=...
收起
css html html5
android篇-如何做一个简单的安卓源码查看器
2017-11-10 14:46:00
1，网页源码查看器： Httpurlconnection：用于发送或接收数据 Mainactivity篇: import java.io.InputStream; import java.net.HttpURLConnection; import java.net.MalformedURLException; import java.net.URL; .....
收起
java做的简单网页
热门讨论 2011-07-19 15:31:54
这只是一个简单的一个网页，如果想看看Java是如何建立网页的，请看这里
收起
Java
如何把一个网页生成一个快捷方式在桌面?_如何写一个在WEB网页中调用以太坊智能合约的DAPP...
2020-12-05 22:32:56
在【使用web3调用智能合约的简单例子】中，使用的是...网页版的例子，同样的为了简单起见，仍旧直接使用Remix自带的Storage.sol合约例子，就是简单的存储和获取一个整数数值。前两个步骤【1.编写智能合约】和【...
收起
如何用SpringMVC做一个简单登录页面思路
2020-07-25 16:34:41
然后创建java文件，如果是写登录方法的话，可以参考这个注释：@RequestMapping("/login")，有这个注释就可以实现打开网页的时候在网址后面加上/login的话就可以直接进入这个方法， ModelAndView mav=new Mo
收起
java
简单说明如何使用Springmvc框架去做一个下载文件的功能
2020-08-07 20:56:40
首先你需要有一个网页，这个我这里的模板网页就是一个上传页面，我打算在这个上传文件的页面中添加一个下载文件的功能，先写JSP页面： <a href="${pageContext.request.contextPath}/file/download?filename=123....
收起
java
如何写一个在WEB网页中调用以太坊智能合约的DAPP
2020-05-27 11:38:12
网页版的例子，同样的为了简单起见，仍旧直接使用Remix自带的Storage.sol合约例子，就是简单的存储和获取一个整数数值。前两个步骤 1.编写智能合约和 2.部署智能合约与【使用we痛痒b3调和用智能合约的简单例子】...
收起
区块链智能合约
python 打开一个网页_爬虫入门（一）——如何打开一个网页
2021-01-13 07:51:10
做了一段时间自然语言处理的项目，体会到了爬虫的乐趣，甚至一度产生了学好爬虫真的可以为所欲为的...本文介绍在python下，如何利用爬虫实现最简单的网页获取，包括data参数、headers参数的设置，以及cookie的使用。...
收起
asp.net如何把一个网页中的用户名传到另一个网页
2020-05-02 21:09:05
最简单的就是使用QueryString，就是在网址中传值。具体操作： 1.在登陆界面的cs里写： Response.Redirect("index.aspx?name="+name): 解释： 2.在index.aspx的cs里获取： Request.QueryString["name"...
收起
c# asp.net
python操作ihtmldocument2网页元素_如何用纯Python写一个漂亮的网页
2020-12-07 08:25:43
比如我要做一个简单的网页交互：·要懂后端，比如Python里面的Django或者Flask，或者是Java里面的SpringBoot·要懂前端，现在都叫大前端了(因为很复杂)，比如前端的框架Vue/React, 页面的美化框架Bootstrap，还有...
收起
python开发webkit浏览器_如何用Python开发一个简单的Webkit浏览器|python网页开发教程...
2021-02-10 10:59:20
2、set命令是定义变量并赋值的，而使用/p参数后，set 并不马上在命令中给变量赋值，而是另起一行，等待用户的输入，并用户的输入内容做为值赋给变量。3、而且在set /p后，可以加入提示语句，让用户知道，程序正在...
收起
网页控制台调用click()失败_如何写一个在WEB网页中调用以太坊智能合约的DAPP
2021-01-29 08:06:52
在【使用web3调用智能合约的简单例子】中，使用的是...网页版的例子，同样的为了简单起见，仍旧直接使用Remix自带的Storage.sol合约例子，就是简单的存储和获取一个整数数值。前两个步骤【1.编写智能合约】和【...
收起
如何创建一个好看且简约的网页
千次阅读 2017-03-16 11:00:50
网页设计并不只是设计漂亮、体验优秀就够了，想要用户难以忘怀，你还要进行更加深入的思考，更加走心的设计。设计保持简约，傻瓜式操作，这个概念可以追溯到...创建一个简单的设计可能比你想象的有点复杂。这里有七个规
收起
python如何实现一个刷网页小程序
2020-12-25 04:55:19
python 打开浏览器，可以做简单的刷网页的小程序 and 其他有想象力的程序。不过仅供学习，勿用非法用途。 python的webbrowser模块支持对浏览器进行一些操作主要有以下三个方法： webbrowser.open(url, new=0, ...
收起
网页多个div如何提取_如何构建一个通用的垂直爬虫平台？
2020-11-29 23:02:33
写一个爬虫很简单，写一个可持续稳定运行的爬虫也不难，但如何构建一个通用化的垂直爬虫平台？这篇文章，我就来和你分享一下，一个通用垂直爬虫平台的构建思路。爬虫简介首先介绍一下，什么是爬虫？搜索引擎是这样...
收起