精华内容
下载资源
问答
  • 一个网页如何显示多个界面? 如何利用网页显示页面的资源? 如何让用户打开最少的页面,显示最多的信息? 本次项目是利用frame框架实现一个网页显示多个界面: 1.首先index.jsp文件中注释掉标签: 因为inde.jsp...

    一个网页如何显示多个界面?

    如何利用网页显示页面的资源?

    如何让用户打开最少的页面,显示最多的信息?


    本次项目是利用frame框架实现一个网页显示多个界面:

    1.首先在index.jsp文件中注释掉<body>标签:

    因为inde.jsp是第一个显示的界面,你也可以在需要开始使用框架的界面这样干!

    添加如下代码:

     <frameset cols="1,4">
      	<frame src="mianht.html" name="left">
      	<frame src="main.html" name="right">
      </frameset>
    其中,cols属性表示把整个页面分为1/5和4/5,

    第一个scr属性表示左面1/5需要显示的界面,名字为left

    个scr属性表示面1/5需要显示的界面,名字为right
    2.新建mianht.html和main.html文件

    其中main.html只显示内容二字:

     <body>
       	内容
      </body>
    mianht.html显示三个跳转标签:

    <body>
       <a href="MyHtml.html" target="right">第一题</a><p>
       <a href="index.html" target="right">第二题</a><p>
       <a href="fun.html" target="right">第三题</a><p>
      </body>
    效果如下:


    3.新建MyHtml.html文件:

    <style type="text/css">
    #table{
    	width: 300px;
    	height: 300px;
    	border: 1px solid black;
    }
    #A{
    	width: 100px;
    	height: 200px;
    	text-align: center;
    	background-color: red;
    	color: green;
    	font-family: fantasy;
    	font-size: 30px;
    	border: 1px solid black;
    }
    #B{
    	width: 200px;
    	height: 100px;
    	text-align: center;
    	background-color: orange;
    	color: blue;
    	font-family: fantasy;
    	font-size: 30px;
    	border: 1px solid black;
    }
    #C{
    	width: 100px;
    	height: 100px;
    	text-align: center;
    	background-color: yellow;
    	color: black;
    	font-family: fantasy;
    	font-size: 30px;
    	border: 1px solid black;
    }
    #D{
    	width: 100px;
    	height: 200px;
    	text-align: center;
    	background-color: green;
    	color: white;
    	font-family: fantasy;
    	font-size: 30px;
    	border: 1px solid black;
    }
    #E{
    	width: 200px;
    	height: 100px;
    	text-align: center;
    	background-color: blue;
    	color: white;
    	font-family: fantasy;
    	font-size: 30px;
    	border: 1px solid black;
    }
    </style>
      </head>
      
      <body>
        <table id="table" align="center">
        	<tr>
        		<td id="A" rowspan="2">
        			<b>A</b>
        		</td>
        		<td id="B" colspan="2">
        			<b>B</b>
        		</td>
        	</tr>
        	<tr>
        		<td id="C">
        			<b>C</b>
        		</td>
        		<td id="D" rowspan="2">
        			<b>D</b>
        		</td>
        	</tr>
        	<tr>
        		<td id="E" colspan="2">
        			<b>E</b>
        		</td>
        	</tr>
        </table>
      </body>
    这个界面显示如下界面:



    4.新建index.html:

    <FRAMESET cols="1,3">
      		<FRAME src="content.html" name="content">
      		<FRAME src="main.html" name="content1">
    </FRAMESET>
    再次使用到了框架, 把右面4/5页面再次分为整个页面的1/5和3/5

    5.新建content.html:

    css样式:

    <STYLE>
      			A{
      				text-decoration: none;
      			}
    </STYLE>
    去掉下划线
    HTML中:

    <body>
      		<a href="file1.html" target="content1">文件1</a><p>
      		<a href="file2.html" target="right">文件2</a><p>
    </body>
    <a>跳转链接
    效果如下:



    点击文件1:



    点击文件2:


    文件1:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
      <head>
        <title>file1.html</title>
    	
        <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
        <meta http-equiv="description" content="this is my page">
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">
        
        <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
    
      </head>
      
      <body>
        file1
      </body>
    </html>

    文件2:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
      <head>
        <title>file2.html</title>
    	
        <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
        <meta http-equiv="description" content="this is my page">
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">
        
        <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
    
      </head>
      
      <body>
       file2
      </body>
    </html>
    

    6.实现第三题:

    <body>
    	<form name="form1" οnsubmit="foo();">
    		<table align="center">
    			<tr>
    				<td>
    					<table align="center">
    						<tr>
    							<td><input type="radio" name="mradio"> <b>1</b></td>
    							<td><input type="radio" name="mradio"> <b>2</b></td>
    							<td><input type="radio" name="mradio"> <b>3</b></td>
    						</tr>
    						<tr>
    							<td><input type="radio" name="mradio"> <b>4</b></td>
    							<td><input type="radio" name="mradio"> <b>5</b></td>
    							<td><input type="radio" name="mradio"> <b>6</b></td>
    						</tr>
    						<tr>
    							<td><input type="radio" name="mradio"> <b>7</b></td>
    							<td><input type="radio" name="mradio"> <b>8</b></td>
    							<td><input type="radio" name="mradio"> <b>9</b></td>
    						</tr>
    					</table></td>
    			</tr>
    			<tr>
    				<td>
    					<table align="center"
    						style="border: 2px solid black;text-align: center;" width="300px"
    						height="300px">
    						<tr>
    							<td rowspan="2"
    								style="color: green;background-color: red;width: 100px;height: 200px;border: 2px solid black;text-align: center;"
    								align="center"><input type="radio" name="mradio"> <b>A</b>
    							</td>
    							<td colspan="2" width="200px" height="100px"
    								style="border: 2px solid black;text-align: center;background-color: orange;color: blue;"
    								align="center"><input type="radio" name="mradio"> <b>B</b>
    							</td>
    						</tr>
    						<tr>
    							<td width="100px" height="100px"
    								style="border: 2px solid black;background-color: yellow;color: red;text-align: center;"
    								align="center"><input type="radio" name="mradio"> <b>C</b>
    							</td>
    							<td rowspan="2" width="100px" height="200px"
    								style="background-color: green;color: black;text-align: center;border: 2px solid black;"
    								align="center"><input type="radio" name="mradio"> <b>D</b>
    							</td>
    						</tr>
    						<tr>
    							<td colspan="2" height="100px" width="200px"
    								style="border: 2px solid black;background-color: blue;color: white;text-align: center;"
    								align="center"><input type="radio" name="mradio"> <b>E</b>
    							</td>
    						</tr>
    					</table></td>
    			</tr>
    			<tr>
    				<td align="center"><input type="submit" value="提交" style="text-align: center;"
    					align="middle"></td>
    			</tr>
    		</table>
    	</form>
    </body>
    
    在使用js语言添加响应方法:

    <script type="text/javascript">
    	function foo() {
    		var rdo = document.form1.mradio;
    		//var a = rdo;
    		for ( var i = 0; i < rdo.length; i++) {
    		document.write("不是这个");
    			if (rdo[i].checked) {
    			//document.write("是这个");
    				if (i >= 9) {
    					var str;
    					switch (i) {
    					case 9:
    						str = "A";
    						break;
    					case 10:
    						str = "B";
    						break;
    					case 11:
    						str = "C";
    						break;
    					case 12:
    						str = "D";
    						break;
    					case 13:
    						str = "E";
    						break;
    					}
    					alert("您选择了" + str);
    				} else {
    					alert("您选择的是第" + (i + 1) + "个单选框");
    				}
    			}
    		}
    	}
    </script>
    实现的效果:




    效果2:







    展开全文
  • 设计模式大概总结了前面的7个,熟练掌握以后,工作中的问题基本上都可以处理,...移动端采用vue结合vw 做了适配,界面展示iOS 和安卓到是没有什么问题,但是iOS存在一个问题,就是界面在iphone中上下滑动时总会有...

    设计模式大概总结了前面的7个,熟练掌握以后,工作中的问题基本上都可以处理,而且对后面看vue或者React的源码也有不小的帮助,这次的问题是 webApp如何进行真机调试

    前提是h5移动端界面在iPhone手机上的异常表现,这边以我遇到的问题为例。移动端采用vue结合vw 做了适配,界面展示在iOS 和安卓 到是没有什么问题,但是iOS存在一个问题,就是界面在iphone中上下滑动时总会有一个白边,造成界面滑动不流畅,尽管iOS端已经设置了全局的webview 的bounce 为false, 问题依然存在

    调试

     mac 一台, iphone手机一部, 数据线一根

    1. 打开电脑上的safari 浏览器 ,偏好设置-->高级-->选择【在菜单栏中显示开发菜单】

    62956c525478c5c985acb2d1373d3552.png

    2.将手机通过数据线连接至电脑,打开手机, 设置--->safari 浏览器--->高级

    然后用手机上的safari打开要调试的网页

    46ec617d38a07ba39ba260797e359025.png

    3. 在Mac电脑上 选择【开发】---> 【连接到电脑的手机】--->后面会显示手机上打开的需要调试的网页,我这里iPhone已经移除,所以只显示了电脑名称

    90bcc2758eb387a00c40b75e7ab40ba7.png

    Bug描述

    H5页面在iPhone上下滑动时,总会出现白边,且webView设置 debounce= false 无效,如图:下拉时红框位置 会出现白边,上滑到底,底部同样会出现白边

    362106c664033ebbb09d23fd2d47d5b2.png

    问题主要表现

    1. 安卓手机一切正常

    2. Iphone上滑动页面时,整个Html跟着滑动,造成上下出现白边,体验稍显卡顿

    解决方案

    最终采用了给body元素加上,position:fixed 及 overflow:hidden; 暂时解决这一问题。

    总结

    • 体验了如何真机调试iPhone中的H5界面

    • safari 和 App中的webView表现似乎是一致的

    • 需要找找safari的开发文档去了解问题出现的真正原因

    我是喜妹子,每篇文章尽量不超过1000字----欢迎关注,点赞,转发,评论。。。

    d21c445595e79dc012d2910824034cbf.png

    展开全文
  • 打开一个网站,用户首先看到的是网页外观,美观的页面会吸引用户眼球,用户产生继续阅读下去的兴趣。一个网站,想要留住用户,首先是要设计美观的页面,然后再追求别的设计要求。如何设计美观的页面呢?综合运用...

    打开一个网站,用户首先看到的是网页外观,美观的页面会吸引用户眼球,让用户产生继续阅读下去的兴趣。一个网站,想要留住用户,首先是要设计美观的页面,然后再追求别的设计要求。如何设计美观的页面呢?综合运用反差、重复、排列和分类4个技巧作为基础的设计,会让页面更加出色。

    1.反差效果

    好的反差效果设计可以给用户一个极好的第一印象。如果用户的眼睛没有焦点,注意力就会在处处是相同尺寸的元素和排版界面中迷失。设计师需要设计出很明显的突出视觉元素来引导用户的体验。你可以通过选择图片、颜色和字体等来形成良好的反差效果。

    图片反差

    当需要在很多小元素后面展示一个大尺寸的插图时,这种方法很有效。

    颜色反差

    恰到好处地使用少量颜色,是网页中另一种制造视觉反差的有效方法。可以在网页的头部和文本拷贝中使用不同的颜色,也可以在一张图片或插图的颜色里面应用。

    字体反差

    如果你想通过字体来产生反差效果,就应该避免使用2个很相像的字体外观和大小。很相像的字体会造成混淆,并让设计变得模糊。不过把字体大小弄得很不一样就会非常有效果,或者是把字体最细和最粗的版本拼合到一起也同样有效。同样的,如果你将两种外形差别明显的两种字体排在一块,就会对它们带来的视觉冲击效果感到惊奇。

    2.重复原则

    跟web设计相比,重复原则在书本设计中应用得更加普遍,不过它在两者之间都是一样有效的。重复的设计元素可以使页面显得很连贯,还能提升品牌。在web设计中,可以很好地达到这个目的的一个方式是在网页的头部和脚部重复放元素。

    3.排列原则

    你的网站外观设计得很业余还是很专业,排列原则在其中扮演了一个很复杂的角色。最近我很主张在设计网页时使用格栏。这么做可以让你的设计很干净,也可以提供一个很好的设计框架。

    4.分类原则

    最后一个原则是分类。只有在将相关元素分组,将无关元素分开的时候才会用到这个原则。假如你将所有东西都分到同一块文本块中,绝对会摧毁用户的体验。这就是为什么使用头部标签和适当的留空是那么的重要。

    最终思想

    当你脑中时刻惦记着这4个基本原则时,会发现设计的页面有很大的改进。

    石家庄网页设计金色方向,专业的设计师团队,打造更炫的页面!

    展开全文
  • 如题,我最近看了一个学习编程的网站fenby,感觉他的那个编写代码的界面很有趣, 那个小黑屋里你可以自己编写代码,也可以运行出结果,还会报错,指出你哪里错了。 我突发奇想,自己是不是也能写一个这样的网站...
  • 使用ASP制作一个站点的时候,常常会出现一个ASP文件中,程序代码和HTML代码混合的情况。这样子做有许多缺点: 1. 且不说编程时就要对页面布局进行设计和编排,造成代码混乱难懂,不规范; 2. 当需要改变页面...
  • 我是大明,手机经常弹出一些广告的原因是,我们误安装了自带弹窗的软件,说得再具体一些就是大家平时用手机浏览网页时,不小心点击了捆绑了软件的网页,或者安装了没有手机应用市场下载APP软件,那么这软件大...

    大家好,我是大明,手机经常弹出一些广告的原因是,我们误安装了自带弹窗的软件,说得再具体一些就是大家在平时用手机浏览网页时,不小心点击了捆绑了软件的网页,或者安装了没有在手机应用市场下载APP软件,那么这个软件大部件都捆绑了木马工具,安装之后就导致了手机经常有弹窗广告的原因了,那么接下来大明就详细讲一下这个问题的解决方法。

    a8d702d731ac636a9dca7563af5fbc36.png

    方法一

    既然是误安装了弹窗广告的软件,那么只要卸载了这些软件这个问题也就解决了,详细操作步骤是:依次打开手机”设置“选项-”应用管理“,查看一下软件列表,只要是默认的平时不使用的软件都是自带弹窗的,然后直接点击”卸载“就可以了。

    310dd9976c9f9d07ded7c93b42904941.png

    方法二

    打开”手机管家“主界面,接着点击”病毒扫描“选项,该功能可以有效地将”恶意应用“隔离”,也就是说只要软件自带弹窗被手机管家检测出来就会被隔离,那么这个问题也就解决了。

    1558e75fdd6a2f7a2e7fa648b7d3c7a2.png

    方法三

    有些恶意的顽固软件无法正常卸载清除,哪怕是使用杀毒软件也无济于事,那么最后一招就是将“手机恢复出厂设置”,这个方法较为彻底一些,恢复出厂设置后手机的所有数据将会清空,建议大家不到万不得己的时候不要使用这个方法。

    0e851acd964a56e558ca1824c906d231.png

    总结

    最后就是劝告大家在平时下载安装APP时,要到手机的“应用市场”里面安装,这样可以保证APP软件的纯净度,避免下载到自带弹窗的恶意应用。

    232e91444befa8ed2e95d19659e1fef8.png

    以上就是今天分享的内容,希望对大家有所帮助,喜欢的话别忘记 点个赞,关注一下,如果大家有不同观点,可以在评论区共同讨论,打开“今日头条APP”,搜索“电脑技师大明”,有更多原创电脑知识,供大家参考,本期内容就讲到这里,咱们下期再见!

    展开全文
  • 如何让网页适应不同分辨率 解决思路: 不同分辨率下看到的网页版面格式有很大差别,甚至有可能错位。导致这种差别的原因,主要是因为网页中用了绝对定位的层,并且页面内容设置为居中,这样分辨率改变时就会...
  • 小编浏览网页的时候,突然发现一个GUI神器,叫做Gooey,号称能把任何控制台应用程序转换为非常美观的的GUI应用程序。获赞9000颗星,非常厉害。 1 如何安装对于Gooey的安装非常的方便,大家只需要终端用p...
  • 又或者,你是否想玩游戏时有人捧场,可以你即使是一个人游戏也变得不再孤单。而方法就是直播游戏过程,本文介绍如何在B站 开 直 播 ,共享你的 电 脑 游戏画面~开始之前,首先你得注册个账号并进行实名认证...
  • 最前面的话:Smobiler是...1.从工具栏上的“Smobiler Components”拖动一个WebView控件、一个Button控件和一个TextBox控件到窗体界面上 2.修改Button的属性 a.Location属性 控件显示合适的位置(99, 1)...
  • 我就想了一下,有没有什么办法可以这些界面像浏览器一样,在一个界面里,就像下面这样:我就可以轻轻一点,找到想要的文件夹,而不是在那里疯狂alt+tab或者鼠标移过去找文件夹。你还别说,还真给我找到了。它就是...
  • 控制面板也称之为仪表盘,它本身就是基于汽车和飞机仪表盘这一隐喻,是一个综合性的中控台,用户以最便捷的方式来掌控信息并进行操纵。日常工作中一些企业总期望能够设计出足够一目了然的仪表盘,能够一眼看清信息...
  • 如何让你的网页动起来?且看本期分解。本文建议搭配 阅读。实际上,界面动画效果背后涉及到的参数非常简单——只有三种,即时间、变化、曲线。无论多复杂的动效也是这三种参数经过组合拼接出来的。进一步说,制作...
  • [MFC]如何禁止webbrowser的网页缩放

    千次阅读 2017-01-07 11:34:41
    问题来源开发mfc应用程序时,有一个需求就是页面中嵌入网页作为应用程序的界面。但存在的问题就是网页能够被用户缩放,所以就有了限制网页缩放的需求。解决思路1.拦截ctrl+鼠标滚轮的消息。这种方式只需要屏蔽...
  • 近期有发现越来越多的广告行业的...那么如果按照传统的方式,我们只能外部广告页放一个二维码,用户去扫码关注、添加之类的,这个场景适合PC端,试想现在用户更多的时间是停留手机端的,所以没办法拿着自己的...
  • 开始之前,有一个问题,设计一个网站...那么,如何建立一个让用户信赖的网站?关键点还是在于网页设计。甚至对于那些很小的初创公司,也最好找一个网页设计师来帮助设计。那么问题又来了,什么样的网页设计才是...
  • 首先,我们需要创建一个“标准EXE”工程, 进入窗体界面后,点击菜单栏中的工程--部件,弹出的对话框中向下拖动,选择并添加“Windows Internet controls”这个部件,如下图,VB获得对Webbrowser控件的支持。...
  • 最近碰到一个开发项目,该项目需要两块显示器(如下图所示),主屏幕用于显示网页,分屏幕用于显示客户端界面。该项目用到的客户端是用C# winform编写的。抛开客户端处理的业务逻辑不谈,主要谈谈winform中如何让...
  • 真正优秀的用户界面会被无视,而糟糕的设计则...多年来,网页设计师们已经按钮颜色、投影、边框和渐变上花了成百上千小时,只为了让界面更易用和美观。但事实上,优秀用户界面的终极形态不是易用,而是隐形。或许你
  • 开始之前,我有一个问题,...那么,如何建立一个让用户信赖的网站?关键点还是在于网页设计。甚至对于那些很小的初创公司,也最好找一个网页设计师来帮助设计。那么问题又来了,什么样的网页设计才是好的网页...
  • 今天哀悼日,大家先默哀分钟~~~~ 按照惯例,网页都得变灰色,IE下可以用下面的CSS解决: ... 但是非IE浏览器无效,群里有朋友发了网址,是E文的,上面写着如何在非IE浏览器下...
  • 小编浏览网页的时候,突然发现一个GUI神器,叫做Gooey,号称能把任何控制台应用程序转换为非常美观的的GUI应用程序。获赞9000颗星,非常厉害。 1 如何安装对于Gooey的安装非常的方便,大家只需要终端用p...
  • jquery.autocomeplete是一款基于jQuery的插件,它可以用户输入的时候,实时搜索...我们再对比另一个网页的自动完成,界面是这样的: 对比之下,我们立即发现,加上了提示性的:“输入中文/拼音/英文或↑↓选...
  • 小编浏览网页的时候,突然发现一个GUI神器,叫做Gooey,号称能把任何控制台应用程序转换为非常美观的的GUI应用程序。获赞9000颗星,非常厉害。1如何安装对于Gooey的安装非常的方便,大家只需要...

空空如也

空空如也

1 2 3 4 5 ... 17
收藏数 336
精华内容 134
关键字:

如何让网页在一个界面