Time of Update: 2015-10-16
絕對置中,垂直置中<!DOCTYPE html><html> <head> <title> new document </title> <meta name="author" content="胡超" /> <meta charset="utf-8"/> <style type="text/css"> #a2{position:absolute; /*:絕對位置元素不在普通內容流中渲染,
Time of Update: 2015-10-16
百度首頁(練習),百度首頁練習學了幾天Html和CSS,做了個百度首頁當練習(因為最簡單)。由於還沒看到Javascript,所以只是盡量把布局做得相似一些。百度的首頁比較簡單,大概分為三個部分:右上方的標籤、Logo和表單、下面的著作權資訊。 首先是top部分代碼: 1 <div class="top"> 2 <div class="title"> 3 <span> 4 <a
Time of Update: 2015-10-16
負margin置中,margin置中<!DOCTYPE html><html> <head> <title> new document </title> <meta name="author" content="胡超" /> <meta charset="utf-8"/> <style type="text/css"> div { /*負邊距margin使置中,首先定位到50%
Time of Update: 2015-10-16
JS實現的最簡Table選項卡效果,js最簡table選項卡本文執行個體講述了JS實現的最簡Table選項卡效果。分享給大家供大家參考。具體如下:這是一款最簡易的Table選項卡,是基於Table表格的,非DIV結構,習慣表格的朋友可能會喜歡本選項卡,部分修飾仍然用的是Table,比如表格邊框、背景顏色等,個人感覺好像用Table比用DIV結構代碼更精簡一些。運行效果如下:線上示範地址如下:http://demo.jb51.net/js/2015/js-z-simple-tab-nav-menu
Time of Update: 2015-10-16
smartcrop.js智能圖片裁剪庫,smartcrop.js裁剪smartcrop.js 是一個裁圖不會裁掉人臉的 JS 外掛程式今天將為大家介紹一款近期github上很不錯的開源庫 –
Time of Update: 2015-10-16
JavaScript+CSS實現仿Mootools豎排彈性動畫菜單效果,cssmootools本文執行個體講述了JavaScript+CSS實現仿Mootools豎排彈性動畫菜單效果。分享給大家供大家參考。具體如下:這裡示範JavaScript+CSS仿Mootools豎排黑色動畫菜單,並非使用了Mootools,但效果卻和使用了Mootools差不多,動畫效果平滑,操作舒服,給菜單增色不少。運行效果如下:線上示範地址如下:http://demo.jb51.net/js/2015/js-css-
Time of Update: 2015-10-16
淺談angular.js中實現雙向繫結的方法$watch $digest $apply,angular.jsdigestAngular.js 中的特性,雙向繫結.多麼神奇的功能,讓視圖的改變直接反應到資料中,資料的改變又即時的通知到視圖,如何做到的?這要歸功於 scope 下面3個重要的方法:$watch$digest$apply他們的區別是什麼,我們來介紹下:$watch這是一個監聽 scope
Time of Update: 2015-10-16
JavaScript對html擷取節點的三種方法擷取節點的方法:1.getElementById 擷取對 ID 標籤屬性為指定值的第一個對象的引用2.getElementsByName 根據 NAME 標籤屬性的值擷取對象的集合。3.getElementsByTagName 擷取基於指定元素名稱的對象集合。<輔助>每個節點的三個屬性
Time of Update: 2015-10-16
JS更改select內option屬性的方法,js更改selectoption本文執行個體講述了JS更改select內option屬性的方法。分享給大家供大家參考。具體如下:幫一位友人解決了一個小問題,需求是更改選中選項卡內顯示的文本值,新值存放在某個文字框內初始視窗:<html> <head> <title>原視窗</title> <script> var parentValue="";
Time of Update: 2015-10-16
淺析四種常見的聲明迴圈變數的書寫方式,淺析四種變數書寫Javascript中的迴圈變數聲明,到底應該放在哪兒?習慣1:不聲明直接使用function loop(arr) { for (i = 0; i < arr.length; i++) { // do something } } 非常危險的使用習慣,一般情況下迴圈變數將成為window對象上的一個屬性被全域使用,極有可能影響程式的正常邏輯實現。
Time of Update: 2015-10-16
JavaScript實現的伸展收縮型菜單代碼,javascript伸展本文執行個體講述了JavaScript實現的伸展收縮型菜單代碼。分享給大家供大家參考。具體如下:這是一款真正的JavaScript伸展收縮型菜單,滑鼠放上看一看,是不是很酷?滑鼠划出功能表項目的時候,背景會伸長。菜單沒有加連結,想用的自己加,再美化一下,絕對夠個性吧。運行效果如下:線上示範地址如下:http://demo.jb51.net/js/2015/js-zkss-menu-codes/具體代碼如下:<html&g
Time of Update: 2015-10-15
Sticky Footer (讓頁尾永遠停靠在頁面底部,而不是根據絕對位置),stickyfooter<!doctype html><html> <head> <meta charset="UTF-8"> <meta name="Author" content="胡超"> <title>super胡</title> <style> * { margin:0; padding:0; }
Time of Update: 2015-10-16
Node.js與Sails ~項目結構與Mvc實現及日誌機制,node.jssails本文首先從sails的安裝講起接下來介紹node.js與Sails的日誌機制,小夥伴們已經迫不及待要看下文了吧,好吧。Sails是一個Node.js的中介軟體架構,協助我們很方便的構建WEB應用程式,網址:http://www.sailsjs.org/,它主要是在Express架構的基礎上發展起來的,擴充了新的功能組件,下面我們來看一下安裝方法一 安裝Sailsnpm -g install sails二
Time of Update: 2015-10-15
用CSS建立小三角形問題(筆試題常考),css常考 筆試題中經常遇到用CSS實現某個Div邊框添加三角形問題,掌握一點,合理利用div的邊框,當div有寬有高時,邊框就是不起眼的邊框,當div的寬高為0時,邊框就是一個小方塊,把剩下的三個邊透明就是神奇的三角形了。 然後就是考察CSS的:before和:after虛擬元素,此類問題一般分為兩種類型,即實心和空心問題,。中DOM結構均為:<div id=”demo”&
Time of Update: 2015-10-15
多裝置適應的前端開發時代如何字型單位選擇,前端字型在做手機web或app的時候,為適應不同螢幕,你可能需要寫很多針對不同螢幕大小的css代碼,那麼這個時候我們如果用固定大小去設定字型的大小就要些很多代碼了。這個時候我們需要使用相對大小了,這樣該其他我們之需要修改指定根項目的值了。css3中也出現新的字型單位rem,在幾乎所有的自適應網頁設計的書籍及文章中都推薦使用em作為字型單位,甚至推薦你使用em來作為你所有設定size部分的單位。那麼em和px如果轉換呢?1 ÷
Time of Update: 2015-10-15
Javascript中的幾種繼承方式開篇從’嚴格’意義上說,javascript並不是一門真正的物件導向語言。這種說法原因一般都是覺得javascript作為一門弱類型語言與類似java或c#之類的強型語言的繼承方式有很大的區別,因而預設它就是非主流的物件導向方式,甚至竟有很多書將其描述為’非完全物件導向’語言。其實個人覺得,什麼方式並不重要,重要的是是否具有物件導向的思想,說javascript不是物件導向語言的,往往都可能沒有深入研究過java
Time of Update: 2015-10-15
webapp尺寸,webapp設計尺寸一、viewport寬度起源:PC端的網站要顯示在移動端有什麼問題?如果把移動端的可是地區設定到(320-768)的話,大部分網站都會因為太窄而顯示錯亂所以瀏覽器預設把viewport【這個viewport指的是layout viewport】設定為一個較寬的值980px或者1024px,至少保證PC網站在移動端上可以顯示,只是超出部分出行橫向滾動。二、概念1、css像素html頁面中單位是px,在pc中往往1 css
Time of Update: 2015-10-15
min-height最小高度的實現(相容IE6、IE7、FF)(解決IE6不相容min-height),min-heightie6<!doctype html><html> <head> <meta charset="UTF-8"> <meta name="Author" content="胡超"> <title>super胡</title> <style> div{
Time of Update: 2015-10-15
學習小筆記---jquery(部分)attr()html()text()addClass()css()removeAtrr()removeClass()append()appendTo() 可以向指定的元素插入入內容 $(content).appendTo(selector)before() $(selector).before(content)after() 表示在整個元素的前面和後面插入指定的元素或內容 $(selector).after(content)clone() 複製了一個被選元素,
Time of Update: 2015-10-15
z-index優先順序總結,z-index優先順序因為顯示器顯示的圖案是一個二維平面,擁有x軸和y軸來表示位置屬性。為了表示三維立體的概念如顯示元素的上下層的疊加順序引入了z-index屬性來表示z軸的區別,表示一個元素在疊加順序上的上下立體關係。 可能的值: 注釋: 所有主流瀏覽器都支援 z-index 屬性。任何的版本的 Internet