Warning: error_log(/data/www/wwwroot/hmttv.cn/caches/error_log.php): failed to open stream: Permission denied in /data/www/wwwroot/hmttv.cn/phpcms/libs/functions/global.func.php on line 537 Warning: error_log(/data/www/wwwroot/hmttv.cn/caches/error_log.php): failed to open stream: Permission denied in /data/www/wwwroot/hmttv.cn/phpcms/libs/functions/global.func.php on line 537
務8:全屏模式的切換。
這張就是第八,第八小姐就是講關于全屏模式的切換。回到頁面,希望有個按鈕,一點全屏娛樂模式,這一點就切換回來。可能我個人不太喜歡這種模式,但有的人會用,還是把它設計進去。
然后就在這個地方加一個圖標,有空再找一下。找了一個圖標,就找這個。jump through screen one,這有了嗎?有了,還挺好。然后就稍小了一點,再給它大一點,size,就不要說是二十,可以。點它,現在沒效果,來做這個效果。
首先給它定一個變量叫is war screen,是不是全屏的?它肯定是響應數據了,i e f,它不是默認,當然響應數據這邊可以給它添類型,比如它是birch,填birch。如果它不是,還找一個相對的,跟它相反的按鈕,收回來的按鈕,就用這個。
off for screen one,就這個,給它來復制一下,把它放松,就是衣服regan in the first three,如果它真的,就顯示上面的,否則就顯示下面的。來看一下,這邊有一個方法,就這樣可以,可能還做其他的,記得就給它定一個top切換螺絲功能,它是一個,然后再調整這個方法就行了。
就要投screen,點,沒效果,為啥沒效果?是不是點錯了?這邊點這上面,再說下面一個,放到槍上,點,看有切換效果了。怎么樣給它切換?這個是節食里面固定的方法,如果它的值,直接給它切換,就是document,the element,點a request,press greet plug,就是全屏切換。
這里切換了,這點沒效果只按a xe,所以這邊也不對,所以希望它變成這個時候就把它縮回來,這邊就要做一個判斷了,就是來判斷它是不是已經縮放了,如果它已經是展開了,就把它縮回來,也是,這個就退出,否則就把它刪遠,就簡單的刪遠,刪除就可以了。
試一下,點,點,回來了,點,點,再配合原來的一點,就全屏顯示了,舒服了,點回來。這一章就講完了,就把頁面布局都弄好了,包括動態生成菜單頁,瀏覽歷史頁,面包穴導航,把整個布局就全做好了。
下一張開始做具體業務了,首先叫做用戶的登錄,注冊新用戶,還有一個重置密碼。這節課就講到這里,拜拜。
CSS中,背景樣式主要包括背景顏色和背景圖像。在傳統的布局中,只能使用少數的標簽來定義背景圖像和背景顏色。但是隨著Web2.0時代的到來,設置背景樣式不再使用傳統HTML屬性來定義,轉而使用無限制、更靈活的CSS來定義。
目標
在CSS中,使用background-color屬性來定義元素的背景顏色。
語法:background-color:顏色值;
說明:顏色值是一個關鍵字或一個16進制的RGB值。
HTML標簽
背景顏色設置
效果
在CSS中,使用background-image屬性來定義元素的背景圖片。
語法:background-image:url("圖像地址");
說明:圖像地址可以是相對地址,也可以是絕對地址。
注意:給某個元素設置背景圖像,元素要有一定的寬度和高度,背景圖片才會顯示出來。如果設置的元素的寬高過小,背景圖片就無法完整地顯示出來了。
設置背景圖片
效果
在CSS中,使用background-repeat屬性可以設置背景圖像是否平鋪,并且可以設置如何平鋪。
語法:background-repeat:取值;
取值
當值是repeat,全屏覆蓋
全屏覆蓋
當值是repeat-x,x軸方向覆蓋
x軸方向覆蓋
當值是repeat-y,y軸方向覆蓋
y軸方向覆蓋
當值是no-repeat,不復制
不復制
在CSS中,使用background-position設置背景圖像的位置
語法:background-positon:像素值/關鍵字;
說明:語法中的取值包括兩種,一種是采用像素值,另一種是關鍵字描述。
1. 像素值
要設置水平方向數值(x軸)和垂直方向數值(y軸),參數如下
取值
假設設置一個距離左上角水平方向100px,垂直方向100px
背景圖片位置設置
效果如下
效果
2. 關鍵字
當background-position取值為關鍵字時,也需要設置水平方向和垂直方向的值,只不過值不是使用px為單位的數值,而是使用關鍵字代替。
取值
假設我們要設置一個水平方向、垂直方向都居中的位置,就可以這樣設置
背景圖片位置設置
這樣他就永遠都處于屏幕的正中間
效果
在CSS中,使用背景附件屬性background-attachment可以設置背景圖像是隨對象滾動還是固定不動
語法:background-attachment:scroll/fixed;
說明:background-attachment 屬性只有2個屬性值。scroll表示背景圖像隨對象滾動而滾動,是默認選項;fixed表示背景圖像固定在頁面不動,只有其他的內容隨滾動條滾動。
背景固定設置
效果
、定義
<meta> 標簽提供關于 HTML 文檔的元數據。它不會顯示在頁面上,但是對于機器是可讀的。可用于瀏覽器(如何顯示內容或重新加載頁面),搜索引擎(關鍵詞),或其他 web 服務。
2、作用
meta里的數據是供機器解讀的,告訴機器該如何解析這個頁面,還有一個用途是可以添加服務器發送到瀏覽器的http頭部內容,例如我們為頁面中添加如下meta標簽:
瀏覽器的頭部就會包括這些:
只有瀏覽器可以接受這些附加的頭部字段,并能以適當的方式使用它們時,這些字段才有意義。
3、meta的必需屬性和可選屬性
meta的必需屬性是content,當然并不是說meta標簽里一定要有content,而是當有http-equiv或name屬性的時候,一定要有content屬性對其進行說明。例如:
必需屬性
<meta name="keywords" content="HTML,ASP,PHP,SQL">
這里面content里的屬性就是對keywords進行的說明,所以呢也可以理解成一個鍵值對吧,就是{keywords:"HTML,ASP,PHP,SQL"}。
可選屬性
在W3school中,對于meta的可選屬性說到了三個,分別是http-equiv、name和scheme。考慮到scheme不是很常用,所以就只說下前兩個屬性吧。
http-equiv
http-equiv屬性是添加http頭部內容,對一些自定義的,或者需要額外添加的http頭部內容,需要發送到瀏覽器中,我們就可以是使用這個屬性。在上面的meta作用中也有簡單的說明,那么現在再舉個例子。例如我們不想使用js來重定向,用http頭部內容控制,那么就可以這樣控制:
<meta http-equiv="Refresh" content="5;url=http://blog.yangchen123h.cn" />
在頁面中加入這個后,5秒鐘后就會跳轉到指定頁面啦,效果可看W3school的例子
name
第二個可選屬性是name,這個屬性是供瀏覽器進行解析,對于一些瀏覽器兼容性問題,name屬性是最常用的,當然有個前提就是瀏覽器能夠解析你寫進去的name屬性才可以,不然就是沒有意義的。還是舉個例子吧:
<meta name="renderer" content="webkit">
這個meta標簽的意思就是告訴瀏覽器,用webkit內核進行解析,當然前提是瀏覽器有webkit內核才可以,不然就是沒有意義的啦。當然看到這個你可能會有疑問,這個renderer是從哪里冒出來的,我要怎么知道呢?這個就是在對應的瀏覽器的開發文檔里就會有表明的,例如這個renderer是在360瀏覽器里說明的。360瀏覽器內核控制Meta標簽說明文檔
常用meta標簽大總結
接下來就是常用的meta標簽大總結啦,我會盡可能的做到全
charset
charset是聲明文檔使用的字符編碼,解決亂碼問題主要用的就是它,值得一提的是,這個charset一定要寫第一行,不然就可能會產生亂碼了。
charset有兩種寫法
兩個都是等效的。
百度禁止轉碼
百度會自動對網頁進行轉碼,這個標簽是禁止百度的自動轉碼
<meta http-equiv="Cache-Control" content="no-siteapp" />
SEO 優化部分
viewport
viewport主要是影響移動端頁面布局的,例如:
content 參數:
各瀏覽器平臺
Microsoft Internet Explorer
Google Chrome
360瀏覽器
UC手機瀏覽器
UCBrowser_U3_API
QQ手機瀏覽器
Apple iOS
Google Android
App Links
最后——移動端常用的meta
*請認真填寫需求信息,我們會在24小時內與您取得聯系。