精华内容
下载资源
问答
  • 如何运用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部分更加简洁,首先是词谱的左右换页
    在这里插入图片描述
    然后再是背景音乐按钮的点击事件
    在这里插入图片描述
    接下来就是核心,钢琴按钮的点击事件,先是鼠标的点击
    在这里插入图片描述
    然后再加上按键的点击事件在这里插入图片描述
    就这样,一个简洁好用的音乐网页便完成了

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

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

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

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

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

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

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

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

    展开全文
  • 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开发指南

    如何实现网页截屏功能

    看一下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


    展开全文
  • 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+爬虫的小白,今天要搞点爬虫的活儿,以前... 先做个简单的爬取网页的demo。 Python3 提供了 urllib 这个标准库,无需安装,即可引用使用:from urllib import request复制代码然后,我们就可以使用ur...
  • 简单如何做一个chrome 去广告插件

    万次阅读 2017-10-10 08:53:55
    这次我们先来简单接触一下,了解一点入门知识,先做一个简单的demo,就先去除一下CSDN网页上的广告。 解释 这次做的这个插件真的很简单,不涉及什么加密解密,也不是去拦截特定的网络请求,就是用
  • 前不久,曾经的一位朋友找到我,让我帮他弄一个简单的网页设计,起初打算拒绝来着,主要是因为真的没有自己写过html+CSS+javascript 构成的网页,不过后来想想又决定挑战一下自己,之前基本没接触过网页设计三剑客,...
  • 如何实现做一个简单的返回顶部效果按钮 开发工具与关键技术:DW—jquery 作者:Mr_恺 撰写时间:2019.01.17 我们是不是在浏览网页的时候,可以看到网页右下都会有一个“返回顶部”的按钮, 点击它就回能回到...
  • 现在要做一个网页版的分屏异显。 主屏显示主要业务,副屏显示一些简单的内容,并支持触摸,接受用户的一些输入。 就是像有些银行柜台的那个系统:客户可以看到一些指定内容,并作确认、输入密码等操作。 请大家给点...
  • 如何做一个统计网页访问量功能

    万次阅读 2015-03-27 21:01:15
    在H5中,由于提供了相应web客户端存储数据方法,所以不用利用传统追踪cookie方法,实现更加高效,简单。... sessionStorage-针对一个sessionweb存储,只记录当前session访问记录,关闭网页即恢复
  • 1、申请GitHub账号进入GitHub官网,点击右上角Sign up进行注册,注册很简单...点进来之后有调查问卷(想不想直接往下滑,点Complete setup进行下一步 )。随后GitHub会给你注册邮箱发份确认连接...
  • 超完整的代码+详细注释,适合给小白简单的网页电子相册实例 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=...
  • 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是如何建立网页的,请看这里
  • 在【使用web3调用智能合约的简单例子】中,使用的是...网页版的例子,同样的为了简单起见,仍旧直接使用Remix自带的Storage.sol合约例子,就是简单的存储和获取一个整数数值。前两个步骤 【1.编写智能合约】 和 【...
  • 然后创建java文件,如果是写登录方法话,可以参考这注释:@RequestMapping("/login"),有这注释就可以实现打开网页的时候在网址后面加上/login话就可以直接进入这方法, ModelAndView mav=new Mo
  • 首先你需要有一个网页,这个我这里模板网页就是一个上传页面,我打算在这个上传文件页面中添加一个下载文件功能,先写JSP页面: <a href="${pageContext.request.contextPath}/file/download?filename=123....
  • 网页版的例子,同样的为了简单起见,仍旧直接使用Remix自带的Storage.sol合约例子,就是简单的存储和获取一个整数数值。前两个步骤 1.编写智能合约 和 2.部署智能合约 与【使用we痛痒b3调和用智能合约的简单例子 】...
  • 段时间自然语言处理的项目,体会到了爬虫的乐趣,甚至一度产生了学好爬虫真的可以为所欲为的...本文介绍在python下,如何利用爬虫实现最简单的网页获取,包括data参数、headers参数的设置,以及cookie的使用。...
  • 简单的就是使用QueryString,就是在网址中传值。 具体操作: 1.在登陆界面的cs里写: Response.Redirect("index.aspx?name="+name): 解释: 2.在index.aspx的cs里获取: Request.QueryString["name"...
  • 比如我要做一个简单的网页交互:·要懂后端,比如Python里面的Django或者Flask,或者是Java里面的SpringBoot·要懂前端,现在都叫大前端了(因为很复杂),比如前端的框架Vue/React, 页面的美化框架Bootstrap,还有...
  • 2、set命令是定义变量并赋值,而使用/p参数后,set 并不马上在命令中给变量赋值,而是另起行,等待用户输入,并用户输入内容为值赋给变量。3、而且在set /p后,可以加入提示语句,让用户知道,程序正在...
  • 在【使用web3调用智能合约的简单例子】中,使用的是...网页版的例子,同样的为了简单起见,仍旧直接使用Remix自带的Storage.sol合约例子,就是简单的存储和获取一个整数数值。前两个步骤 【1.编写智能合约】 和 【...
  • 如何创建一个好看且简约的网页

    千次阅读 2017-03-16 11:00:50
    网页设计并不只是设计漂亮、体验优秀就够了,想要用户难以忘怀,你还要进行更加深入的思考,更加走心的设计。设计保持简约,傻瓜式操作,这个概念可以追溯到...创建一个简单的设计可能比你想象的有点复杂。这里有七个规
  • python 打开浏览器,可以做简单的网页的小程序 and 其他有想象力的程序。不过仅供学习,勿用非法用途。 python的webbrowser模块支持对浏览器进行一些操作 主要有以下三方法: webbrowser.open(url, new=0, ...
  • 一个爬虫很简单,写一个可持续稳定运行爬虫也不难,但如何构建一个通用化垂直爬虫平台?这篇文章,我就来和你分享一下,一个通用垂直爬虫平台构建思路。爬虫简介首先介绍一下,什么是爬虫?搜索引擎是这样...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,380
精华内容 552
关键字:

如何做一个简单的网页