`
天之痕苏
  • 浏览: 17604 次
文章分类
社区版块
存档分类
最新评论

bootstrap界面杂谈

 
阅读更多

1、link标签

<head>
<link rel="stylesheet" type="text/css" href="theme.css" />
……
</head>
link标签支持所有的浏览器，定义了内部文档与外部资源的关系，通常情况下都是对外部资源的应用。并且只能出现在<head> </head>标签中，可出现多次。

说明：href表示被引用的资源链接；rel表示本文档和被引用文档之间的关系，rel=“stylesheet”表示被引用的文档是一个样式表。

eg: 登录jsp页面的<head>标签部分

<head>
<META HTTP-EQUIV="pragma" CONTENT="no-cache">
<meta name="viewport" content="width=device-width,innitial-scale=1">
<META HTTP-EQUIV="Cache-Control" CONTENT="no-store, must-revalidate">
<META HTTP-EQUIV="expires" CONTENT="Wed, 26 Feb 1997 08:21:57 GMT">
<META HTTP-EQUIV="expires" CONTENT="0">

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<link href="/EVM/bootstrap/css/bootstrap-responsive.css"
	rel="stylesheet">
<link href="/EVM/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href = "/EVM/img/sac_logo_small.jpg" rel="Shortcut Icon">  <!-- 页面的地址栏上面，页面标题旁的小图标 -->
<title>登陆</title>
</head>

在这里要提出的，是上段代码中的倒第三行：

<link href = "/EVM/img/sac_logo_small.jpg" rel="Shortcut Icon">    <!-- 页面的地址栏上面，页面标题旁的小图标 -->


很多人可能都注意过，当自己把网站收藏时，收藏夹中的该条记录前面会有个小图标，当你再次点击后，打开的页面前面还是有该图标，我称其为网站的标志：

eg：


标签前面会有个，若把该<link>标签行加入<head> </head>中，就可起到这种效果。至于rel里面填写的是什么倒不重要了，只要href把图片引过来就可以。


2、meta标签

<meta>也是<head>中经常要用到的标签。

定义：<meta>提供了本页面的元信息（类似于元数据，描述数据的数据），描述本页面的信息。

meta有两个属性：1、name; 2、http-equiv。下面分别介绍一下两个属性。

<1>name

格式：<meta name = "参数" content = "参数">

eg：

<meta name="viewport" content="width=device-width,innitial-scale=1">
name有如下几种参数值：

A.keywords(关键字)：用来告诉搜索引擎，本网页的搜索关键字是什么。

举例：

<meta name ="keywords" content="science, education,culture,politics,ecnomics">


B.description(描述)：说明本网页的主要内容是什么。

举例：

<meta name = "description" content = "This is sss's blog, welcome to everybody!">


C.robot(机器人向导)：用来告诉搜索机器人，哪些页面需要索引，哪些不需要索引。

举例：

<meta name = "robot" content = "none">


这里的content有几个固定的参数可选：all, none, index, noindex, follow, nofollow，默认的是all。

D.author(作者)：标注网页的作者。

举例：

<meta name = "author" content = "SSS">

<2> http-equiv

定义：相当于网页的文件头作用，向浏览器返回一些有用的信息，帮助浏览器正确的定位网页内容。

格式：<meta http-equiv = "参数" content = "参数值">

eg：

<head>
<META HTTP-EQUIV="pragma" CONTENT="no-cache">
<meta name="viewport" content="width=device-width,innitial-scale=1">
<META HTTP-EQUIV="Cache-Control" CONTENT="no-store, must-revalidate">
<META HTTP-EQUIV="expires" CONTENT="Wed, 26 Feb 1997 08:21:57 GMT">
<META HTTP-EQUIV="expires" CONTENT="0">

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<link href="/EVM/bootstrap/css/bootstrap-responsive.css"
	rel="stylesheet">
<link href="/EVM/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href = "/EVM/img/sac_logo_small.jpg" rel="Icon">    <!-- 页面的地址栏上面，页面标题旁的小图标 -->

<title>登陆</title>
</head>


http-equiv有几种类型的参数：

A. Expires(期限)：设定网页到期的时间，一旦网页上的时间到期，就需要浏览器重新向服务器重新传输，获取网页内容。

举例：

<meta http-equiv = "expires" content = "Fri, 12 Jan 2001 18:18:18 GMT" >

注意：时间必须要用GMT的时间格式

B. Pragma(cache模式)：禁止浏览器从本地缓存中访问网页内容。

举例：

<meta http-equiv = "Pragma" content = "no-cache" >


注意：如果这样设定，则用户无法脱机访问。

C. Refresh(刷新)：自动刷新并指向新页面。

举例：

<meta http-equiv = "Refresh" content = "2; url = http://baidu.com" >


注意：content中的2表示浏览器在本页面暂停2秒后转向URL指向的地址。

D. Set-Cookie(cookie设定)：如果网页过期，那么存盘的cookie将被删除。

举例：

<meta http-equiv = "Set-Cookie" content = "cookievalue = xxx; expires = Friday, 12-Dec-2014 :19:59:59 GMT; path = /" >


注意：时间要是GMT格式。

E. Window-target(窗口设定)：强制页面在当前窗口以独立页面显示。

举例：

<meta http-equiv = "Window-target" content = "_top" >


用途：防止别人在框架里调用自己的页面。

F. content-type(字符集的设定)：设定页面使用的字符集。

举例：

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

下面综述meta标签的功能：

1、帮助页面给各搜索引擎搜索

meta很重要的一个功能就是设置关键字，用来帮助各大搜索引擎来搜索到你的网页。其中，最主要的就是keywords和description两个关键字。因为按照搜索引擎的工作原理，显示派出搜索机器人查看网页中meta里面的keywords和description关键字中的content，然后将内容保存在自己的数据库中，然后再根据关键字的密度进行排序，从而显示出网页。因此，设置好关键字，可以提高网站的点击率。

下面给出一些例子：

<meta name = "keywords" content = "政治，经济，文化，情感，生活，心灵，娱乐，电影，社会，金融，交通" >
<meta name = "description" content = "政治，经济，文化，情感，生活，心灵，娱乐，电影，社会，金融，交通" >

网页里设置好这些关键字后，搜索引擎就可以自动搜索这些content，然后将结果放在自己的数据库中，再根据密度进行排序。



2、定义页面使用的语言


这是meta最常见的功能。起到定义该网页的语言类型。当浏览器访问该网站时，浏览器会自动将网页中的内容设置到你网页中设定的语言类型，比如utf-8，如果浏览器并没有安装utf-8码，那就网页就会呈现该浏览器默认的网页语言编码。同样的，如果网页是英文类型的，那么就可以设定charset = en。




<meta http-equiv = "content-Type" content = "type = "text/html; charset = gb2312" >



注意：改代码就表示将网页的语言设置成国标码。



3、自动刷新并指向指定页面


meta的这个功能就可以实现在无人干预的情况下，在本网页停留N秒之后，转向新网页。格式上面的refresh类型已给出。


4、实现网页转换时的动画效果


这个代码我还没有用过，功能是：在进入网页或者离开网页的一刹那实现动画效果。


代码如下：


<meta http-equiv = "Page-Enter" content = "revealTrans(duration=5.0, transition=20)" >




离开网页时的动画效果：





<meta http-equiv = "Page-Exit" content = "revealTrans(duration=5.0, transition=20)" >



一旦上述代码被加进<head> </head>中后，我们再进入或者离开网页，都会看到动画效果。

注意：所加的网页不能是一个frame页。



5、网页定级评价


6、控制页面缓冲


meta标签可以设置网页到期的时间(expires)，到期后，页面会重新向服务器提交请求，重新刷新页面。


7、控制显示窗口




<meta http-equiv = "Window-target" content = "_top" >



在<head> </head>中加入以上代码，可以防止页面被其他页面当做一个frame调用。



其他提到的功能都是上面http-equiv的几个关键字中提到的，入refresh，cache，expires等。

3、bootstrap3中的页面背景设置


这是在优化登录界面的时候碰到的难题。后来在网上看到了别人的一个样例，就是讲如何使得背景图片充满整个屏幕，


事例代码如下：


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" " http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>窗口背景变化</title>
<style type="text/css">  
*{margin:0;padding:0;}
#bg{
position:absolute;
top:0px;
left:0px;
z-index:-999;
}
</style>
</head>
<body>
<div id="bg"><img src=" http://www.wallcoo.com/ad/Korea_Besti_Belli/images/jihyun-bestibelli06.jpg" alt="HIGH"></div>
<input type="text" id="msg" name="msg" size="50"/>
<script type="text/javascript">
 window.onresize = window.onload = function(){
     var w,h
     if(!!(window.attachEvent && !window.opera))
     {
      h = document.documentElement.clientHeight;
      w = document.documentElement.clientWidth;
     }else{
      h = window.innerHeight;
      w = window.innerWidth;
     }
  document.getElementById('msg').value  ='窗口大小：' + 'width:' + w + '; height:'+h;
    var bgImg = document.getElementById('bg').getElementsByTagName('img')[0];
    bgImg.width = (w - 5);
    bgImg.height= (h-5) ;  
          
   }   
</script>
</body>
</html>

另外在我的另外一篇博文中也提到了这个问题，点击这里查看；



我这里要说的是另外一种方式，这种方式也是我在别的网页源代码里看到的，网址是http://job.bootcss.com/。该网站也是用bootstrap写的界面，其中的一个界面显示效果如下：





有热气球的那部分，涉及的源码如下：




<header id="top-header" class="top-header jumbotron" style="background-image: url(/assets/img/ballon.jpg);">
  <div class="container">
  	<div class="row">
  		<div class="col-md-8">
		  	<div class="page-header">
			    <h1>招聘/求职</h1>
			    <p class="lead">好工作都在这里啦！</p>
		  	</div>
		  	<div class="features media">
		  		<h5 class="media-left">快捷入口：</h5>
		  		<div class="media-body">
		        <p class="coms">
		    			<a target="_blank" href="http://company.liepin.com/1072424?mscid=b_o_0001" class="label label-default label-ali" onclick="_hmt.push(['_trackEvent', 'coms', 'click', '阿里'])">阿里</a>
		    			<!-- <a href="/company/腾讯" class="label label-default label-tencent" onclick="_hmt.push(['_trackEvent', 'coms', 'click', '腾讯'])">腾讯</a> -->
		    			<a target="_blank" href="http://company.liepin.com/884492?mscid=b_o_0001" class="label label-default label-baidu" onclick="_hmt.push(['_trackEvent', 'coms', 'click', '百度'])">百度</a>
		    			<a target="_blank" href="http://company.liepin.com/3264402?mscid=b_o_0001" class="label label-default label-sina" onclick="_hmt.push(['_trackEvent', 'coms', 'click', '金山'])">金山</a>
		    			<a target="_blank" href="http://company.liepin.com/856639?mscid=b_o_0001" class="label label-default label-sohu" onclick="_hmt.push(['_trackEvent', 'coms', 'click', '迅雷'])">迅雷</a>
		    			<a target="_blank" href="http://company.liepin.com/6429309?mscid=b_o_0001" class="label label-default label-360" onclick="_hmt.push(['_trackEvent', 'coms', 'click', '360'])">360</a>
		          		<!-- <a href="/company/小米" class="label label-default label-xiaomi" onclick="_hmt.push(['_trackEvent', 'coms', 'click', '小米'])">小米</a> -->
		          		<a target="_blank" href="http://company.liepin.com/947003?mscid=b_o_0001" class="label label-default label-lenovo" onclick="_hmt.push(['_trackEvent', 'coms', 'click', '畅游'])">畅游</a>
		        </p>
		        <p class="salary">
		          <a href="/salary/10" class="label label-default" onclick="_hmt.push(['_trackEvent', 'salary', 'click', '10万起'])">10万起</a>
		          <a href="/salary/20" class="label label-default" onclick="_hmt.push(['_trackEvent', 'salary', 'click', '20万起'])">20万起</a>
		          <a href="/salary/30" class="label label-default" onclick="_hmt.push(['_trackEvent', 'salary', 'click', '30万起'])">30万起</a>
		          <a href="/salary/50" class="label label-default" onclick="_hmt.push(['_trackEvent', 'salary', 'click', '50万起'])">50万起</a>
		          <a href="/salary/土豪" class="label label-default" onclick="_hmt.push(['_trackEvent', 'salary', 'click', '土豪'])">土豪</a>
		        </p>
		  		</div>
		  	</div>
	  	</div>
	  	<div class="col-md-4 hidden-sm hidden-xs">
	  		<div class="activities-wrap">
	  			<div class="activities">
	  				<h2>猎聘送“金卡” <i class="fa fa-star"></i></h2>
	  				<p>完善简历，抽“金卡”，高薪工作送到家！！高薪工作不要错过啦</p>
	  				<p class="text-center">
	  					<a class="btn btn-default btn-sm" href="http://wenda.bootcss.com/question/70" target="_blank"  onclick="_hmt.push(['_trackEvent', '活动', 'click', '活动详情'])">活动详情</a>
	  					<a class="btn btn-default btn-sm" href="http://www.liepin.com/event/landingpage/itweb.shtml?mscid=b_o_0002" target="_blank"   onclick="_hmt.push(['_trackEvent', '活动', 'click', '完善简历'])">完善简历</a>
	  				</p>
	  			</div>
	  		</div>
	  	</div>
  	</div>
  </div>
</header>


这里要指出的是，热气球作为了背景，且在前端界面是无法进行“复制图片”或者“图片另存为”的，这正好是我之前一直没有解决的问题，所以，我将上面代码中的这一句：
<header id="top-header" class="top-header jumbotron" style="background-image: url(/assets/img/ballon.jpg);">

加入我的代码中，
<header id="top-header" class="top-header jumbotron span10 offset1" style="background-image: url(/EVM/img/sac_jietu5.jpg);">
		<div class="row-fluid">
		
			<div class = "span4 offset2 text-right">
				<img src="/EVM/img/sac_jietu11.jpg" class = "img-rounded">
			</div>
			
			<br>
			<div class="span4 text-left" style = "background-color:silver; border:1px solid red">
				<br> <br> 
				<form class="form-horizontal" method="post" action="/EVM/userAction"
					id="loginForm">
					
					<div class="control-group span2 offset5">
						<h2>登录</h2>
					</div>
					
					<br> <br> <br> <br> <br> <br>
					
					<div class="control-group">
						<label class="control-label" for="inputEmail">用户名</label>
						<div class="controls">
							<input type="email" id="inputEmail" placeholder="邮箱"
								name="inputEmail" title="请输入登录邮箱">
						</div>
					</div>
					<div class="control-group">
						<label class="control-label" for="inputPassword">密码</label>
						<div class="controls">
							<input type="password" id="inputPassword" placeholder="Password"
								name="inputPassword" required="required">
						</div>
					</div>
					<div class="control-group">
						<div class="controls">
							<label class="checkbox"> <input type="checkbox">
								 保存
							</label>
							
							
							<button type="submit" class="btn">Sign in</button>
						</div>
					</div>
					<input type="hidden" name="method" value="login">
					
					
				</form>
			</div>
		</div>
		</header>
这里的界面效果展示如下：






其中，登录表单和图片左右的部分就是设置的背景图片，本来图片很小：



由此可见，<header ……>中的代码是将该图片多次覆盖而形成上面界面中的效果。这可能是另外的一种使图片占满div或者全屏的方式。


疑惑：如果图片足够大，是不是还会出现多张图片拼凑而成的界面？因为网站http://job.bootcss.com/中的气球图片是没有显示完全的，即整个区域只显示了一部分，所以不会出现多张图片拼凑的情况，针对这一疑惑，可能以后会给出答案，现在还是处于学习中~后续会继续更新





  


  

    
    
分享到：
      
      
    

  


  

    

      
      |
      web界面图片自适应解决方案
    

  

  

        
  

    
  

    
评论

    
    
    
    
  


  

    
发表评论

            
   您还没有登录,请您登录后再发表评论 

      

  

  





  

    
相关推荐

    
    
  





  
    Magicbox
  













      

            
    

    
    
  

  



   Global site tag (gtag.js) - Google Analytics