Time of Update: 2017-11-29
做網站開發我們肯定少不了一種最基本的功能,就是搜尋方塊,那麼搜尋方塊樣式也能讓一個網站看起來更加美觀上檔次。現在我們就教大家一種如何把搜尋方塊做的很美觀的方法。:實現這種效果有兩種方法:一是整體處理一個背景,以透明gif圖的方式定位到搜尋方塊,或者切分開,這種方法載入快,而且靈活性更高。文中用到的圖片<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
Time of Update: 2017-11-29
我們知道,在製作網頁一定要習慣用標籤,可能很多人有疑惑,為什麼要用標籤呢?我直接DIV裡放文字不是更簡單嗎?今天就來給大家解答這個疑惑。<h1>標籤具有標題意思,一個網頁唯一標題的意思,對於搜尋引擎來說遇到此標籤說明此標籤內內容有點重要,所以有讓搜尋引擎知道此處具有重要性內容,這個網頁也是圍繞此標題內容進行或相關的內容,我們把關鍵字放入此標籤在某種程度說我們通過瀏覽器看起效果沒什麼不同但是對於搜尋引擎最佳化(SEO)具有好處。<h2>和<h3>標籤在一個網頁中
Time of Update: 2017-11-29
我們知道,在HTML中,你不僅僅要做出好看的網頁,也要考慮到網頁的最佳化問題,那麼今天就給大家帶來怎麼最佳化HTML網頁的思路,我總結了5點,一起來看一下將table改為div布局盡量將table標籤布局html重構div布局,可以節約至少40%的代碼量。由於div代碼少於table布局的html網頁,所以搜尋引擎索引權重也優於table布局的html網頁。縮減精簡div、span、ul li等系欄標籤
Time of Update: 2017-11-29
我們知道,在做前端開發的時候最怕遇到的一個是解析度,一個是相容性,那麼今天就來給大家解決調用不同解析度的問題。一起來看一下將以下JS代碼放入<head>和</head>標籤內,此段JS代碼作用是辨別瀏覽器解析度 <SCRIPT LANGUAGE="javascript"> <!-- if (window.navigator.userAgent.indexOf("MSIE")>=1) { var IE1024=
Time of Update: 2017-11-29
我們知道,在HTML中,ul,li列表之前需要用色差布局的效果,那麼ul li 怎麼用css做出隔行換色呢?今天就給大家做一個執行個體來示範一下。為了不影響程式做調用,讓程式簡便,使用ul
Time of Update: 2017-11-28
今天看到了網上有一篇關於JS函數傳回值的問題嗎,裡面有一些js函數的痛點。在那上面提了一下,關於js函數返回另一個函數的問題,並附上了一道面試題,我就給大家分享一下[javascript] view plain copyvar add = function(x){ var sum = 1; var tmp = function(x){ sum = sum + x; return tmp; } tmp.toString =
Time of Update: 2017-11-28
今天和大家說一下JS的內建函數和自訂函數,JS的內建函數和自訂函數怎麼使用,JS的內建函數和自訂函數使用的時候有哪些注意事項,下面給大家舉倆個案例。執行JS代碼,有兩種方式,一種是重新整理介面,一種是寫在點擊事件裡面,在進行點擊的時候,執行JS代碼函數的參數:放在定義函數中的是形式參數(形參),沒有個數的限制,調用函數傳遞的值是實參,形參與實參是對應的變數的訪問就取值和賦值寫在script標籤之間的變數叫做全域變數(頂級變數),該變數的範圍是頂級範圍當變數定義在某個函數中時僅在該函數內才可以訪問
Time of Update: 2017-11-28
CSS為HTML標記語言提供了一種樣式描述,定義了其中元素的顯示方式。CSS在Web設計領域是一個突破。利用它可以實現修改一個小的樣式更新與之相關的所有頁面元素。CSS裡一直有一個讓我們頭疼的問題,就是建立布局很麻煩。當然,有很多方式,有很多技術都可以建立各種布局,但我們總覺得CSS裡應該提供一些新屬性,讓我們能更好的管理布局。幸運的是,CSS3裡提供了一批新的建立列式布局的column屬性,有了這些屬性,我們不需要再使用float,clear,margin等屬性進行調控,避免了很多麻煩。CSS
Time of Update: 2017-11-28
做一個案列給大家參考,我們使用DW軟體來做一個紅色實線邊框的盒子,我們給這個盒子命名為DIV,下面就是代碼案列為了觀察效果對盒子設定一個css高、css寬樣式,並賦予紅色css邊框樣式。同時為了相容性DIV依然使用DW軟體建立這個執行個體。給這個執行個體css命名為“.div”,在html中使用class引用。css 寬380px,css 高200px,一個邊框寬度為2px的實線邊框。邊框基礎文法:邊框:border 進入css
Time of Update: 2017-11-30
細心的朋友可能會注意到,有的圖片會有一道高亮光弧閃過很炫的效果,這並不是圖片的預設屬性,而是用CSS3的動畫屬性做出的效果,下面就給大家分享一份執行個體供大家研究。<!Doctype html><html><head><meta http-equiv="Content-Type" content="text/html;
Time of Update: 2017-11-30
我們知道,如果想要用css3做出旋轉效果,那麼就會使用到CSS3的transform旋轉屬性寫出來,文法是transform:skew。下面做一個旋轉四邊形給大家作為案列研究,感興趣的朋友可以自己動手操作一下。代碼如下:<!Doctype html><html><head><meta http-equiv="Content-Type" content="text/html;
Time of Update: 2017-11-30
我們知道,在CSS3中有一個很重要的屬性word-break屬性,那麼今天就給大家介紹清楚word-break屬性的定義,文法,參數以及用word-break做一個小列子,協助大家理解。1、定義word-break 屬性規定自動換行的處理方法。 提示:通過使用 word-break 屬性,可以讓瀏覽器實現在任意位置的換行。2、文法和參數word-break: normal(預設)|break-all|keep-all
Time of Update: 2017-11-30
我們知道,在CSS3中的transform屬性,是可以讓元素在2D和3D之間進行形狀的變化的,那麼我們今天就來說一下Css3中的變形屬性。transform屬性,最最重量CSS3改變。讓元素在2D、3D進行形狀的變化。2D變形deg表示degree(度數),單位不能少,只有deg單位,沒有別的單位。rotate(angle) 在參數中規定角度skew(x-angle,y-angle) 沿著 X 和 Y 軸的 2D 傾斜轉換。skewX(angle) 沿著 X 軸的 2D
Time of Update: 2017-11-30
我們都知道CSS選擇符有很多種,很多人在寫CSS頁面的時候,或許覺得很好玩也很簡單,但是你會慢慢的發現,那就是沒有規則的瞎寫,雖然也能實現效果,但是在實際開發中可能會多做無用功或是重複做功,並且CSS並不高效。所以本文我們將教大家如何寫出高效的,可複用的CSS,主要是是以下幾個方面。首先看一小段 CSS 代碼: #menus > li { font-size: 14px; }可能大家都會猜想瀏覽器會使從左至右匹配上面的規則,我們會想象瀏覽器先找到唯一的 id 為 menus
Time of Update: 2017-11-30
我們知道,如果使用虛擬元素來實現邊框逐漸發光的代碼,會用到scale和opacity這兩個屬性,那麼今天就來實現一個CSS3做出逐漸發光的方格邊框的案列,協助大家更好的瞭解CSS3,一起來看一下。Html代碼<div> <img src="http://tva2.sinaimg.cn/crop.0.0.180.180.180/6830a53bjw8f2qo4xzc2zj20500500t0.jpg"/> <div&
Time of Update: 2017-11-30
給大家收集一下 @keyframes 規則和所有動畫屬性,我們都知道@keyframes 是規定動畫的意思,下面做一個實戰案例,協助大家理解,一起來看一下。屬性 描述 CSS@keyframes 規定動畫。animation 所有動畫屬性的簡寫屬性,除了 animation-play-state 屬性。animation-name 規定 @keyframes 動畫的名稱。 animation-duration 規定動畫完成一個周期所花費的秒或毫秒。預設是 0。
Time of Update: 2017-11-30
我們知道,使用CSS3做出來的下拉式功能表是不相容IE6的,而IE8和以下也就不支援一些CSS3的屬性了,比如opacity、transition等。這次就來給大家說一下用css3實現動畫下拉式功能表效果的實現步驟。site-navigation ul ul{min-width: 100px; position: absolute; left:0; top:100%; visibility: hidden; opacity: 0; -webkit-transition:all .3s ease-
Time of Update: 2017-11-29
相信大家都看過途牛旅遊網的廣告動畫特效,說實話我第一次看到的確是被驚豔到了,CSS3用的如此出神入化,今天就給大家帶來仿途牛旅遊網廣告動畫特效。希望能對你有所協助。<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="
Time of Update: 2017-11-29
我們都知道,word-wrap 屬性是CSS3的新屬性,那麼這篇文章就給大家詳細講解一下word-wrap屬性怎麼使用,以及使用的注意事項,下面來看一個小列子。1、定義word-wrap 屬性允許長單詞或 URL 地址換行到下一行。2、文法和參數word-wrap:normal(預設)|break-word normal:允許內容頂開指定的容器邊界,如果單詞超長,會衝出邊界(在當前行顯示,不會換行)。 break-word:
Time of Update: 2017-11-29
我們知道 ,在網頁布局中,有一些特殊情況我們是不能直接使用外部的CSS樣式來控制DIV樣式的,比如對A設定a:hover這種,那麼我們要怎麼不適用CSS樣式來改變滑鼠移至上方樣式呢?可以使用onMouseOver(滑鼠移到目標上)和onMouseOut(滑鼠移開目標後)實現對a標籤或其它html標籤設定hover樣式。直接對標籤使用即可,無論A標籤、SPAN標籤、DIV標籤等均可。<a href="http://www.php.cn/"