页面_页面设计 - 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设置列表的标题和虚线下的居中文字

     

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

    万次阅读 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’);...

    一、onclick跳转

    1. 设置window的location.href属性
    • onclick="window.location.href='URL'" // 覆盖当前页
    • onclick="location='URL'" // 覆盖当前页
    2. 调用window的open方法
    • onclick="window.open('URL','_blank');" // 在新窗口打开
    • onclick="window.open('URL','_self');" // 覆盖当前页

    二、a标签跳转

    • <a href="URL" target="_blank">Preface</a> // 在新窗口打开
    • <a href="URL" target="_self">Preface</a> // 覆盖当前页,target属性默认为_self,此处可省略

    三、例子

    1. onclick
    <span onclick="location='www.csdn.net'">点击跳转到csdn</span>
    <span onclick="window.open('www.csdn.net','_blank')">点击在新标签页打开csdn</span>
    
    2. a标签
    <a href="www.csdn.net" target="_blank">点击在新标签页打开csdn</a>
    <a href="www.csdn.net">点击跳转到csdn</a>
    
    展开全文
  • 页面与单页面应用的区别

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

    万次阅读 2017-05-25 09:51:31
    不仔细去观察,一般人都不会察觉出来的,再加上现在的H5技术和原生应用的技术很多类似,或者说实现的效果很相像。   我们再来回顾一下: ...在Hybrid 当中,如何快速的判断一个APP页面是原生的还是H5
  • 页面流程图

    千次阅读 2019-03-11 13:01:06
    页面流程图重在把事情讲清楚,把页面交代清楚,不必追求太多的规则和条条框框,你可以用你最舒适的方式去表达。 有一些同学看过了我写的《如何绘制业务流程图》,发私信过来希望我谈谈页面流程图。 这个话题其实我也...
  • 页面置换算法

    万次阅读 2017-12-31 14:14:35
    题记:今天,我们来介绍几个页面置换算法。页面置换算法实在请求分页存储时,调页时候会用到的。正文:最佳置换算法(OPT)提出:由Belady于1966年提出的一种理论上的算法。思想:选择那些以后永不使用的,或在最长...
  • 我原本打算做一个信息管理系统,点击左侧标签栏,改变右边页面内容。实现这个效果应该使用jquery的load()函数。可我用bootstrap框架的时候,一直报$(…).load is not a function错误。 错误截图: 原因:jquery版本...
  • 如果使用路由是在 vue 页面中来回跳转,可以使用 this.$router.push() 实现,但是如果想用这种方法跳转到外部链接就会报错,因为外部页面中是存在 HTTP 等前缀的。 解决办法: 1. 在 data 中定义好要跳转的外部链接 ...
  • vue项目如何刷新当前页面

    万次阅读 多人点赞 2018-05-27 11:19:33
    想必大家在刨坑vue的时候也遇到过下面情形:比如在删除或者增加一条记录的时候希望当前页面可以重新刷新或者如下面这种:如果希望点击确定的时候,Dialog 对话框关闭的时候,当前...Dialog 对话框设置的数据可以在确定...
  • 如何将一个HTML页面嵌套在另一个页面

    万次阅读 多人点赞 2017-12-06 14:38:29
    这个在做网页中常要用到,有些通用的内容可集中放在一个页面文件中,其它要用到这些内容的页面只需要包含(引用)这个通用文件即可。这样便于维护,如果有很多网页,当通用内容需要修改时,只改一个文件就可以了,不...
  • iframe标签(页面嵌套)

    万次阅读 多人点赞 2019-06-18 08:58:54
    上面两张图是两个不同的页面但是它们的基本框架都是一样,每点击一次左边的导航栏改变的都是中间的内容区域。也就是说共同的框架都是没有改变的,改变的是中间的内容。 有没有什么方法可以不改变外面的基本框架只...
  • 问题是这样的~ 微信中打开了一个页面页面中有输入框,当点击输入框后会拉起系统...我的方法是,当input获取焦点后记录当前滚动条位置,失去焦点时,页面滚动条重新定位至刚才位置。 var inputList = [$('.inpu...
  • 访问某个比较老旧的网站或者内部站点时,提示:无法安全地连接到此页面,这可能是因为该站点使用过期的或不安全的 TLS 安全设置。如果这种情况持续发生,请与网站的所有者联系。TLS 安全设置未设置为默认设置,这也...
  • Vue刷新页面的三种方式

    万次阅读 多人点赞 2020-01-19 11:44:47
    我们在写项目的时候,经常会遇到,用户执行完某个动作,改变了某些状态,需要重新刷新页面,以此来重新渲染页面。如:用户登录成功、增加、删除、更新等。 原始方法: location.reload(); vue自带的路由跳转: ...
  • html和jsp的区别--静态页面和动态页面的区别

    万次阅读 多人点赞 2017-04-06 15:43:35
    一、静态web页面,一般指html: 1、在静态Web程序中,客户端使用Web浏览器(IE、FireFox等)经过网络(Network)连接到服务器上,使用HTTP协议发起一个请求(Request),告诉服务器我现在需要得到哪个页面,所有的...
  • HTML&CSS实现经典登录注册页面

    万次阅读 多人点赞 2018-10-28 09:11:51
    提要:本篇文章说的是一个简单的登录、注册页面用HTML结合css如何实现,包括两个页面的相互跳转,不包括对输入数据的处理,适合刚入门的新手小白。 1、首先看一下最后的实现效果:首先是一个登录界面,点击“立即...
  • 使用Vue写一个登录页面

    万次阅读 多人点赞 2020-05-28 10:48:20
    上一博客讲到构建了一个vue项目,现在在那个项目之上实现一个登录页面。 1.构建项目的目录 2.App.vue &lt;template&gt; &lt;div id="app"&gt; &lt;router-view/&gt; &...
  • VUE页面实现加载外部HTML方法

    万次阅读 2018-03-01 18:27:12
    所以,在页面显示的时候,如果以页面内嵌的形式显示这个说明文件。需要搞点事情以达到想要的效果。本文主要和大家介绍VUE页面中加载外部HTML的示例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起...
1 2 3 4 5 ... 20
收藏数 3,819,458
精华内容 1,527,783
关键字:

页面