页面_页面设计 - CSDN
精华内容
参与话题
  • HTML静态页面设计

    万次阅读 多人点赞 2019-05-18 14:29:35
    1.编写一个自我介绍的HTML页面,要求使用HTML文档常用的文本、超链接、图片、表格、行级、块级等标签,页面要求布局合理,内容图文并茂,将源文件和素材保存在exp01\1\文件夹下。 <!DOCTYPE ...

    1.编写一个自我介绍的HTML页面,要求使用HTML文档常用的文本、超链接、图片、表格、行级、块级等标签,页面要求布局合理,内容图文并茂,将源文件和素材保存在exp01\1\文件夹下。

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>自我介绍</title>
    <style>
    table{
    	width:500px;
    	height:300px;
    	margin:0 auto;
    	 border-radius:8px;
    	box-shadow:3px 3px 8px #000000;
    	background-color:rgba(100,100,00,0.1);
    	 }
    .bottom{ border-bottom: 6px #000066 double;
    }
    </style>
    </head>
    <body>
    <table >
      <tr>
        <td colspan="2" align="center" ><h2>自我介绍</h2> </td>
      </tr>
      <tr>
        <td width="97">姓名:</td>
        <td width="391" >Mary</td>
      </tr>
      <tr>
        <td>年龄:</td>
        <td >20</td>
      </tr>
      
      <tr>
        <td>班级:</td>
        <td >计本170</td>
      </tr>
      <tr>
        <td height="32">专业:</td>
        <td class="">计算机科学与技术</td>
      </tr>
      <tr >
        <td  colspan="2" >
          自我评价 :
          <hr/>
          <p>本人适应能力强,性格开朗大方,待人热情,能吃苦耐劳。
          	不断学习,工作认真负责积极主动,善于创新,
          	敢于迎接挑战,敢于承担责任,有较强的精力投入工作。
          	富有工作激情,乐业敬业。有良好的交际技能、
          	沟通交流谈判技巧及较强的团队合作精神,有良好的职业道德和素质。</p>
        </td>
      </tr>
    </table>
    
    </body>
    </html>
    

    在这里插入图片描述
    页面间导航:

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>超链接</title>
    </head>
    
    <body bgcolor="#CCCCCC">
    
    <div >
    <div >
    <p> <img src="images/logo.jpg" >
    
    <a href="login.html">登录</a>
    | 关于贵美 | 贵美助理 | 
    <a href="#">联系我们</a>
    </p>
    <p>手机 - 诺基亚 - 
    <a href="anchor.html">MOTO</a> - 索爱</p>
    </div>
    <div >
    <h4>导购资讯</h4>
    
      参观电玩达人的宝贝仓库 <br />
      炎炎夏日,冰凉家具两折起 <br />
    周末折扣,品牌三折热卖
    <hr/></div>
    <div ><br />
      <dt >网游专区<dt> 
      <ol>
     <li > QQ幻想100点卡只需¥8.8元 </li>
     <li>热血江湖250点只需¥8.8元 </li>
     <li>问道30元卡只需¥25.0元 </li>
     <li>跑跑点卡200点只需¥16.8元 </li>
      </ol>
      </div>
      <div >
      <dt>数码产品 </dt>
      <ul>
      <li>最酷音乐手机导购 </li>
      <li>最强街机6300仅售1450 </li>
      <li>99元热销学生Mp3推荐 </li >
      <li>漫步者音箱76元搞定</li>
      </ul> 
      </div>
    <hr/>
    <div >
    <dt>MOTO E2 音乐手机</dt>
     <br/>
     <dd> 130W像素摄像头 Linux智能系统</dd>
     <dd>Intel XScale 处理器</dd>
    <dd>A2DP蓝牙立体声 市场价:1690</dd>
    <dd>开学价:1045</dd>
    </div>
    <p>版权信息:Copyright&nbsp;©&nbsp;1997-2008&nbsp;Guimei Shopping Inc. All Rights Reserved</p>
    </div>
    </body>
    </html>
    
    

    在这里插入图片描述

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>综合案例:贵美商品分类</title>
    </head>
    
    <body>
    <img  src="images/list_bg.gif" >
    <table  align="center"width="800" >
    
        <tr >
          <th width="61" scope="col">&nbsp;</th>
          <th width="136" height="36" scope="col">商品图片</th>
          <th width="382" scope="col">商品名称/卖家</th>
          <th width="162" scope="col">价格</th>
        </tr>
        <tr >
          <th scope="row" height="110"><input type="checkbox" name="chose" /></th>
          <td><img src="images/list0.jpg" /></td>
          <td><div align="center">
            <p>三国群英会免费区</p>
            <p>卖家:lingture</p>
            <p><img src="images/online_pic.gif" width="77" height="19" />&nbsp;&nbsp;<img src="images/list_tool_fav1.gif" width="11" height="12" />收藏</p>       
          </div></td>
          <td><div align="center"><p>一口价</p>
            <p>283.3</p>
           </div></td>
        </tr>
        <tr>
          <th scope="row" height="110"><input  type="checkbox" name="chose1" /></th>
          <td><img src="images/list1.jpg" width="122" height="110" /></td>
          <td><div align="center">
            <p>HDMI促销活动</p>
            <p>卖家:yueyue</p>
            <p><img src="images/online_pic.gif" width="77" height="19" /> <img src="images/list_tool_fav1.gif" width="11" height="12" />收藏</p>
          </div></td>
          <td><div align="center"><p>一口价</p>
            <p>254</p>
           </div></td>
        </tr>
        <tr>
          <th scope="row" height="110"><input type="checkbox" name="chose3" /></th>
          <td><img src="images/list2.jpg" width="128" height="110" /></td>
          <td ><div align="center">
            <p>精美液晶电视</p>
            <p>卖家:yue</p>
            <p><img src="images/online_pic.gif" width="77" height="19" /> <img src="images/list_tool_fav1.gif" width="11" height="12" />收藏</p>
            
          </div></td>
          <td><div align="center"><p>一口价</p>
            <p>2800</p>
           </div></td>
        </tr>
    </table>
    </body>
    </html>
    
    

    在这里插入图片描述
    用户注册页面:

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>贵美商城注册</title>
    </head>
    
    <body >
    <table  align="center"  width="1000" height="300" >
    <tr>
      <td width="130"  >登录名:</td>
      <td width="330" ><input type="text" maxlength="10"> </td>
      <td width="193"  >(可包含a-z、0-9和下划线) </td>
      <td width="327"  ><img src="images/read.gif" width="35" height="26" />阅读贵美网服务协议
       </td>
    </tr>
    <tr>
      <td >密码: </td>
      <td><input type="text" maxlength="10"></td>
      <td>(至少包含6个字符)</td>
      <td rowspan="8"> <textarea  rows="25"  cols="30" readonly="readonly">欢迎阅读服务条款协议……</textarea> </td>
      </tr>
    <tr>
        <td >再次输入密码:</td>
        <td><input type="text" maxlength="10"> </td>
        <td>&nbsp;</td>
      <tr>
        <td>电子邮箱:</td>
        <td><input type="text"></td>
          <td>(必须包含@字符)</td>
      </tr>
    <tr>
        <td>性别:</td>
        <td><input type="radio" >
          <img src="images/Male.gif" width="22" height="21" />&nbsp;&nbsp;&nbsp;<input type="radio">
          <img src="images/Female.gif" width="23" height="21" /></td>
        <td rowspan="4" ></td>
      </tr>
    <tr>
       <td>头像:</td>
       <td><input type="file"/></td>
    <tr>
       <td>爱好:</td>
       <td><input type="checkbox">
    运动&nbsp;&nbsp;&nbsp;<input type="checkbox"> 
    聊天&nbsp;&nbsp;&nbsp;<input type="checkbox"> 
    玩游戏</td>
    </tr>
    <tr>
      <td>喜欢的城市:</td>
      <td><select name="city">
      <option selected="selected">[请选择]</opiton></select>
    </td>
    </tr>
    <tr>
    <td >&nbsp;</td>
    <td><input type="submit" disabled="disabled" value="同意右侧服务条款,提交注册信息"><input type="reset" value="重填"></td>
    <td>&nbsp; </td>
    </tr>
    </table>
    </body>
    </html>
    
    

    在这里插入图片描述
    使用框架完成如下help.html页面设计,要求左边按钮超链接的页面分别在右下主窗口内显示。

    <html	xmlns="http://www.w3.org/1999/xhtml">
    <head>
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8"	/>
     <title>贵美商城</title>
     <link rel="stylesheet"	type="text/css"	href="css/global.css"	/>
     <link rel="stylesheet"	type="text/css"	href="css/layout.css"	/>
     	<script type="text/JavaScript">
    	var strHome = 'http://www.gmgw.com';
    	function addFav(){
    		switch(getNav()){
    			case 1:
    			  window.external.addFavorite(strHome,'贵美商城');
    			  break;
    			case 2:
    			  window.sidebar.addPanel('贵美商城',strHome,'');
    			  break;
    			case 0:
    			  alert("加入收藏失败");
    			  break;
    		}		
    		function getNav(){
    			if(navigator.userAgent.indexOf("MSIE")!=-1)    return 1;
    			if(navigator.userAgent.indexOf("Firefox")!=-1) return 2;
    			return 0;
    			}
    	}
    	function setHome(oThis){
    		oThis.style.behavior='url(#default#homepage)';
    		oThis.setHomePage(strHome);
    		return false;
    		} 	
    	</script>
    </head>
    <body>
    	<div id="container">
    		<div id="header">
    			<div id="logo"></div>
    			<div class="upright_menu">
    				<ul>
    					<li class="pic pic1"></li>
    					<li class="h_text"><a href="buy_commodity.htm" target="_parent">购物车</a></li>
    					<li class="pic pic2"></li>
    					<li class="h_text"><a href="help.htm" target="_parent">帮助中心</a></li>
    					<li class="pic pic5"></li>
    					<li class="h_text"><a href="JavaScript:void(0);" onclick="addFav();">加入收藏</a></li>		
    					<li class="pic pic6"></li>
    					<li class="h_text"><a href="JavaScript:void(0);" onclick="setHome(this);">设为首页</a></li>			
    					<li class="bt login h_text"><a href="login.htm" target="_parent">登录</a></li>
    					<li class="bt reg h_text"><a href="register.htm" target="_parent">注册</a></li>																																
    				</ul>
    			</div> <!--upright_menu	end-->
    			<div class="upright_bottom">
    				<ul>
    					<li class="h_text	hello">你好,欢迎访问贵美商城!
    						<script type="text/JavaScript">
    							now=new Date;
    							document.write(now.getYear()+"年"+(now.getMonth()+1)+"月"+now.getDate()+"日"+now.getHours()+"点"+now.getMinutes()+"分");								
    						</script>
    						</li>
    				</ul>
    			</div> <!--upright_bottom	end-->
      		<div class="nav">
      			<ul>
      				<li><a href="index.htm" target="_parent">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a></li>
      				<li><a href="commoditys_show.htm" target="_parent">家用电器</a></li>
      				<li><a href="commoditys_show.htm" target="_parent">手机数码</a></li>
      				<li><a href="commoditys_show.htm" target="_parent">日用百货</a></li>
      				<li><a href="commoditys_show.htm" target="_parent">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a></li>
      				<li><a href="help.htm" target="_parent">帮助中心</a></li>
      				<li><a href="help.htm" target="_parent">免费开店</a></li>
      				<li><a href="help.htm" target="_parent">全球咨询</a></li>  				
      			</ul>
      		</div>	<!--nav	end-->		
    		</div> <!--header	end-->	
     </body>
    </html>
    
    
    html> 
    <head>
    <META http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>注册&认证</title>
    <style type="text/css">
    <!--
    /*设置项目列表的图片*/
    li {
    	list-style-image: url(images/list_icon.gif);
    	font-size:15px;
    	 
    	}
    
    /*设置无下划线的超连接样式*/
    A {
    	color: blue;
    	text-decoration: none;
       }       
      a:hover{ /*鼠标在超链接上悬停时变为颜色*/
       color: red;
       }
    -->
    </style>
     
     </head>
    
    <body>
     
    <h3>知识堂首页 &gt;&gt; 注册&认证 </h3>
    <p><img src="images/reg_line.jpg" width="580" height="12" alt="alt" /></p>
    <p>享受贵美网免费网上交易乐趣,并且在超人气的社区尽情交流您的网上购物经验,您需要先注册成为贵美的会员,具体的步骤如下:</p>
    <p><img src="images/reg_step.jpg" width="495" height="47" alt="alt" /></p>
    <ul type="square">
      <li><a href="#">如何激活会员名?</a></li>
      <li><a href="#">如何注册贵美会员?</a></li>
      <li><a href="#">注册时密码设置有什么要求?</a></li>
      <li><a href="#">贵美认证</a></li>
      <li><a href="#">为什么校验码明明是对的,却提示我输入错误?</a></li>
    </ul>
     
    </body>
    </html>
    
    <html>
    <head>
    <META http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    <style type="text/css">
    <!--
    body {
    	background-image: url(images/customer.jpg);
    	background-repeat: no-repeat;
    }
    .STYLE7 {color: #333333}
    li{list-style:none;line-height:12px;font-size:12px;}
    
    -->
    </style>
    </head>
    
    <body>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
      <p>
        <a href="right.html" target="rightname"><img src="images/reg.jpg" border="0" alt="alt" /></a>
      </p>
      <p>
        <a href="buy.html"target="rightname"><img src="images/buy.jpg" border="0" alt="alt" /></a>
      </p>
      <p>
        <a href="sale.html"target="rightname"><img src="images/sale.jpg" border="0" alt="alt" /></a>
      </p>
      <p><img src="images/person.jpg" border="0" alt="alt" /></p>
    </body>
    </html>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>贵美商城</title>
    </head>
    
    <frameset rows="100,*" border="1">
      <frame name="topname"src="head.html" noresize="noresize" scrolling="no"></frame>
      <frameset  cols="22%,*" bordercolor="#000000">
        <frame name="leftname"src="left.html" noresize="noresize" scrolling="no">
        </frame>
      <frame name="rightname" src="right.html" noresize="noresize" scrolling="no">
      </frame>
      </frameset>
    </frameset><noframes></noframes>
    </html>
    
    

    在这里插入图片描述

    总结

    1)什么是表单,表单在网页中的作用是什么?
    可以收集用户的信息和反馈意见,是网站管理者与浏览者之间沟通的桥梁。
    主要负责数据采集的功能。

    2)表格与框架都具有页面布局的作用,他们在进行页面布局时各有什么优缺点?
    表格用于划分页面区域的,而框架是用于分割浏览器窗口的,即使用框架结构的页面可以将一个浏览器窗口划分为多个相互独立又相互联系的小窗口,每个区域都可以显示不同的HTML文档,从而实现将多个HTML文件组织到一个浏览器窗口中显示。
    使用框架的优点:
    访问者的浏览器不需为每个页面重新加载导航条;每个框架都具有自己的滚动条,因此访问者可以独立滚动这些框架进行浏览。
    使用框架的缺点:
    a)并不是所有浏览器都提供良好的框架支持
    b)难以实现在不同框架中精确的对齐各个页面元素

    **使用表格布局页面的好处:**网上绝大部分的页面都是使用表格来美化的,因为表格有很好的兼容性,可被绝大部分的浏览器所支持,而且使用表格会使页面结构清晰、布局整齐。

    展开全文
  • 精美前端页面在哪里找

    千次阅读 2018-12-18 17:06:32
    好看的前端都在哪里找呢,看这里!...在左边可以直接查找到自己比较中意的前端页面,精美模板里面好多都是收费的,在通用模板里面基本上都是不收费的,大家可以随便使用。 二、点击预览 如果遇到...

    好看的前端都在哪里找呢,看这里!

    下面给大家一个网站,这里面有很多主题形式的
    https://www.sitestar.cn/website/combination_templates.aspx?type=all

    一、页面筛选

    打开页面是这样子的:
    在这里插入图片描述
    在左边可以直接查找到自己比较中意的前端页面,精美模板里面好多都是收费的,在通用模板里面基本上都是不收费的,大家可以随便使用。

    二、点击预览

    如果遇到比较喜欢的模板,将鼠标放在图片上,会出现预览的按钮,点击就可以查看系统的页面。
    注意,会在另外一个窗口出现。
    在这里插入图片描述

    你想要的都在这里!

    展开全文
  • 一个简单完整的网页

    万次阅读 多人点赞 2019-04-02 17:23:32
    网页头部+banner和信息部分+新闻部分+底部 一 头部 效果: 先对css进行初始化 ...分析:头部有一张图片和一个input输入框还有一个按钮+下面的通栏 ...因为用到左浮,右浮的地方不同我们可以写一个通类 ...

    获得源码链接,点击这里

    网页头部+banner和信息部分+新闻部分+底部

    一 头部

    效果:

    先对css进行初始化

    分析:头部有一张图片和一个input输入框还有一个按钮+下面的通栏

    因为用到左浮,右浮的地方不同我们可以写一个通类

    这里的logo图片如果不定义宽高会影响下面的通栏的设置,影响其中的第一个为首的顺序无法对齐

     

     

    二、通栏(宽度为适应屏幕所以是100%,不用设定了)

    效果

    分析:有一个ul里面有6个li,鼠标滑过的时候文字颜色改变(hover),ul在整个通栏nav中用一个nav-con这个命名的div包住,使其居中显示。

    margin: 0 auto使nav-con居中。。。。。。。。

    a链接是行内元素,设置宽高的时候要转成行内块 display: inline-block;  font:字体加粗,字体大小 /行高和字体高度相同的时候字体会居中显示

     

    三、banner

    效果:

    四、信息公告

    分析:整个部分有一部分文字(居中用一个盒子装),一部分图片(右边用一个盒子),这两个盒子分别左右浮动,调用fl,fr

    五、新闻部分

    效果:

    分析:有三部分,我们大体用三个盒子,里面的内容

    ①图片+文字(上),还有正中间的图片+左右箭头的图片用(子绝父相)position

    ②图片+文字(上),列表项ul,li,border-bottom用dashed虚线,“致歉公告”单独设置样式

    ③图片+文字(上),也是列表项这个我用div包住,还有下面的p标签的段落

     

    六、底部

    效果

    注意:这里在news的部分用到一个类来清除浮动,这样保证news部分和底部不发生重叠clearfix

    首先dt和dd是放于dl标签内,标签dt与dd处于dl下相同级。也就是dt不能放入dd内,dd不能放入dt内。在dl下,dt与dd处于同级标签。DD标签可以若干。同时不能不加dl地单独使用dt标签或dd标签。

    分析:有上下两部分,一个是dl dt dd设置列表的标题和虚线下的居中文字

     

    展开全文
  • 页面与单页面应用的区别

    千次阅读 2018-12-04 16:47:27
    虽然接触web开发有一段时间了,但从头开始构建一个完整的web项目的机会非常少,对于一些概念还很模糊,今天首先来梳理一下在应用开发中,单页面应用和多页面应用的区别。 其实从字面意思上理解,就很好理解了。 单...

    虽然接触web开发有一段时间了,但从头开始构建一个完整的web项目的机会非常少,对于一些概念还很模糊,今天首先来梳理一下在应用开发中,单页面应用和多页面应用的区别。

    其实从字面意思上理解,就很好理解了。

    单页面,顾名思义只有一个界面。

    界面是通过URL来定位的,所以单页面应用从头到尾它的html地址都是不变的,注意哦,是html地址,而不是URL地址,这两者还是有点区别的。html地址是截止到.html的界面地址,比如:http://about.html#setting这个地址中,html地址是http://about.html,而完整的URL是http://about.html#setting。

    而多页面应用,顾名思义就是多个界面间的跳转,会伴随着html地址的改变。

    在单页面应用中,通常是由一个外部框架和一个一个组件组成的,界面之间的切换其实就是组件的移除和新组建的添加。

    在多页面中,则可以看到导航栏中地址的变化,是从一个完整的页面跳转到另一个完整的页面(注意区分页面和界面)。

    思考:带iframe的界面算是单页面还是多页面?

    下面是详细的区别(原文地址:https://www.jianshu.com/p/4c9c29967dd6)

    单页面和多页面应用的区别
    对比项 多页面应用 单页面应用
    应用构成 由多个完整页面构成 一个外壳页面和多个组件构成
    跳转方式 页面之间的跳转是从一个页面跳转到另一个页面 页面片段之间的跳转是把一个页面片段删除或隐藏,加载另一个页面片段并显示出来。这是片段之间的模拟跳转,并没有开新页面
    跳转后公共资源是否重新加载
    URL模式 http://xxx/page1.html 和 http://xxx/page2.html http://xxx/shell.html#page1 和 http://xxx/shell.html#page2
    用户体验 页面间切换加载慢,不流畅,用户体验差,特别是在移动设备上 页面片段间的切换快,用户体验好,包括在移动设备上
    能否实现转场动画 无法实现 容易实现(手机app动效)
    搜索引擎优化SEO 可以直接做 需要单独方案做,有点麻烦
    特别适用的范围 需要对搜索引擎友好的网站 对体验要求高的应用,特别是移动应用
    开发难度 低一些,框架选择容易 高一些,需要专门的框架来降低这种模式的开发难度

     

    展开全文
  • 前端页面跳转的几种方法

    万次阅读 2020-04-19 10:52:49
    onclick跳转 设置window的location.href属性 onclick=”window.location.href=’URL’” onclick=”location=’URL’” ...调用window的open方法 ...onclick=”window.open(‘URL’,’_blank’);...
  • 关于一个完整项目的前端页面规划

    千次阅读 2019-06-11 12:51:56
    打算做一个简单的网站,拥有前端页面,后台数据,以及管理系统,然而这并不容易,所以打算先完成前端页面。 我喜欢做什么事情之前都做一个计划,现在这个计划可以说有这个想法很久了,但是一直没有去做,现在开始把...
  • 页面

    2019-08-20 19:12:06
    我们的Windows Phone应用程序,就像Web应用一样,都是由不同的页面构成的,类似的,我们要考虑的事情就是页面间的切换,伴随着的问题就是不同的页面之间的参数的传递,这些问题已经在上一篇 中解决了。接下来就是...
  • 常见的几种页面内容布局方式

    万次阅读 多人点赞 2017-07-27 11:51:25
    常见的页面布局,左右自适应布局
  • 如果使用路由是在 vue 页面中来回跳转,可以使用 this.$router.push() 实现,但是如果想用这种方法跳转到外部链接就会报错,因为外部页面中是存在 HTTP 等前缀的。 解决办法: 1. 在 data 中定义好要跳转的外部链接 ...
  • 小程序刷新重置当前页面

    万次阅读 2018-09-17 16:57:21
    在小程序开发过程中遇到提交表单,当表单提交完成后重置当前页面,因此需要用到刷新当前页面,关键代码如下: if (getCurrentPages().length != 0) { //刷新当前页面的数据 getCurrentPages()[getCurrentPages()...
  • js如何实现关闭当前页面

    万次阅读 2020-04-23 10:34:44
    js如何实现关闭当前页面 // 关闭当前页面 window.opener = null; window.open('', '_self'); window.close();
  • 用的是_window.Open()方式打开的窗口(风声js的window插件打开子窗口) ,类似于window.open() //用于刷新父窗口整个页面 window.parent.location.reload(); parent.subWindow_add.Clos
  • vue编辑、新增弹框(引用外部页面

    万次阅读 多人点赞 2018-06-15 09:37:20
    1、准备两个页面一个是表格页面,一个是表单页面2、表格页面中配置编辑按钮:引入表单页面:编辑按钮出发方法:3、表单弹出页面页面内容必须加上el-dialog标签,否则不是弹出层默认设置页面为影藏状态:初始化方法,...
  • vue页面离开后执行函数

    万次阅读 2018-04-10 17:06:05
    destroyed: function () { console.log("我已经离开了!"); this.stopTimer(); },说明:destroyed是与methods、mounted同层级的mounted(){ ...//离开当前页面后执行 destroyed: function () { this.s...
  • 在做项目中都会存有主页面子页面。子页面嵌套中主页面中,主页面有主的方法,子页面有字面的方法,通常的方法是点击主页面选项打开子页面。但是我这里我要从子页面就是房态图,因为主页面和房态中有一些方法是相同,...
  • vue中从一个页面传参到另一个页面

    万次阅读 2018-03-12 18:16:52
    首先我在home.vue中定义updates(id){ this.$router.push({ path:'/world', name:'world', params:{ id : id } ...
  • 页面与子页面之间的元素获取与方法调用: 1、JS 父调子 子调父 元素 window.frames[iframe的name属性值]; ① window.parent.document.getElementById("父页面元素ID"); ②...
  • 我们在写html页面或者说是jsp页面是,有时候需要在一个页面中使用iframe标签嵌套另一个页面,而两个页面有些数据需要交互,这个时候就会用到js技术,互相调用方法, 当我们在父页面中需要调用iframe标签中嵌入的子...
  • iframe子页面获取父页面元素的方法

    万次阅读 2013-12-10 11:47:27
    在iframe子页面获取父页面元素    代码如下: $.('#objld', parent.document); 在父页面获取iframe子页面的元素    代码如下: $("#objid", document.iframes('iframe').document) 或  代码如下: $...
  • 微信小程序开发交流qq群 173683895 承接微信小程序开发。扫码加微信。 在当前页面的 onUnload 执行页面跳转 onUnload: function () { ...代码讲解:监听页面卸载的函数,把页面重定向到指定的页面; ...
1 2 3 4 5 ... 20
收藏数 3,878,950
精华内容 1,551,580
关键字:

页面