-
如何做一个简单的网页导航
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>
效果示例:
-
如何做一个简单好玩的音乐网页
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:111、我这个是tomcat上的,,利用的就是tomcat的webSocket用来跟好友进行交流。。当能实现实时发送消息之后。后面的什么表情啊、匿名、图片、等等就会自然而然的实现出来。 目前这个已经可以实现发送群组,图片、匿名...代码先不上,所谓工欲善其事必先利其器,首先说下下怎么实现的。
1、我这个是tomcat上的,,利用的就是tomcat的webSocket用来跟好友进行交流。。当能实现实时发送消息之后。后面的什么表情啊、匿名、图片、等等就会自然而然的实现出来。
目前这个已经可以实现发送群组,图片、匿名、撤回、表情、实时更换头像等等功能。
有了这个webSocket大家就不用费时费力不讨好的用ajax轮询等方法了。。大家敢兴趣的可以去看看webSocket。试着玩一玩
new WebSocket("ws://"+'<%=yuming+path%>'+"/websocket?roomId=把http改为ws,后面的参数可以在session里获得
等我整理好后可以在这里分享下weisocket后台的controller的心得。
大家有什么想法麻烦可以告诉我下
-
如何做一个简单的Chrome Extension用于网页截屏
2015-09-24 13:55:34permission的权限配置很重要,如果要让extension作用于所有的网页站点,就必须申明为 。 具体的各种权限可以参考 https://developer.chrome.com/extensions/declare_permissions Google提供了一个API用于...参考原文:
A Simple Chrome Extension to Save Web Page Screenshots to Local Disk
Chrome Extension开发指南
如何实现网页截屏功能
看一下manifest文件:
1234567891011121314151617181920212223242526272829303132333435363738394041{
"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用于捕捉网页的可见区域:
123456789101112131415chrome.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
1234567891011121314151617chrome.tabs.query({
active :
true
,
currentWindow :
true
},
function
(tabs) {
chrome.tabs.sendMessage(tabs[0].id, {ready :
"ready"
},
function
(response) {
if
(response.download ===
"download"
) {
}
});
});
content.js
12345678910111213chrome.extension.onMessage.addListener(
function
(msg, sender, sendResponse) {
if
(msg.ready ===
"ready"
) {
if
(confirm(
'Do you want to capture the screen?'
)) {
sendResponse({download :
"download"
});
}
}
});
保存下载图片:
123456789101112131415161718192021222324252627282930313233saveScreenshot :
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
-
打开一个网页,点击工具栏中的按钮
-
确认保存截屏
-
-
使用application内置对象做一个简单的网页访问计数器
2017-08-21 11:26:19jsp的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网页上的广告。 解释 这次做的这个插件真的很简单,不涉及什么加密解密,也不是去拦截特定的网络请求,就是用 -
用爬虫的底子两天做了一个简单的网页(新手版)
2020-05-23 23:34:03前不久,曾经的一位朋友找到我,让我帮他弄一个简单的网页设计,起初打算拒绝来着,主要是因为真的没有自己写过html+CSS+javascript 构成的网页,不过后来想想又决定挑战一下自己,之前基本没接触过网页设计三剑客,... -
如何实现做一个简单的返回顶部效果按钮
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的访问记录,关闭网页即恢复 -
github密码格式_如何使用GitHub构建一个简单的网页 (不用框架版本)
2021-01-30 21:21:281、申请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=... -
android篇-如何做一个简单的安卓源码查看器
2017-11-10 14:46:001,网页源码查看器: 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是如何建立网页的,请看这里 -
如何把一个网页生成一个快捷方式在桌面?_如何写一个在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 -
简单说明如何使用Springmvc框架去做一个下载文件的功能
2020-08-07 20:56:40首先你需要有一个网页,这个我这里的模板网页就是一个上传页面,我打算在这个上传文件的页面中添加一个下载文件的功能,先写JSP页面: <a href="${pageContext.request.contextPath}/file/download?filename=123.... -
如何写一个在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"... -
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:202、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:19python 打开浏览器,可以做简单的刷网页的小程序 and 其他有想象力的程序。不过仅供学习,勿用非法用途。 python的webbrowser模块支持对浏览器进行一些操作 主要有以下三个方法: webbrowser.open(url, new=0, ... -
网页多个div如何提取_如何构建一个通用的垂直爬虫平台?
2020-11-29 23:02:33写一个爬虫很简单,写一个可持续稳定运行的爬虫也不难,但如何构建一个通用化的垂直爬虫平台?这篇文章,我就来和你分享一下,一个通用垂直爬虫平台的构建思路。爬虫简介首先介绍一下,什么是爬虫?搜索引擎是这样...