分類‘設計園地’

QQ內置瀏覽器下網頁行高、字體大小顯示異常解決

最近手機端測移動網頁,偶然發現,iOS下訪問都正常的頁面,Android下微信內嵌瀏覽器、自帶瀏覽器等都正常,唯獨手機QQ內嵌瀏覽器下顯示略不正常,比如設置了16px字體,看起來明顯沒有16px,而網頁部分元素是由行高撐起的,沒有固定高度。于是,正常的頁面在QQ內嵌瀏覽器中顯示出現沒有垂直居中、元素高度縮小等。

一開始以為是兼容問題,簡單搜了下,只有看到知乎上有人問類似問題,感覺有點不可思議,感覺這么"大"的問題不可能沒人發現,于是就懷疑自己的寫法是否有問題,首先打開頁面時,在界面上打出某元素的font-size,結果,和設置的值14px相差甚遠,算了一下,只有設置像素的79%。 查看更多...

純CSS實現Footer固定底部,超過一屏自動撐開

日常開發中經常遇到網頁內容過少時底部版權區域上浮,網頁是經典的Header、Content、Footer三部分組成的情況下,之前要么采用js修改Footer的position,高度低于一屏時采用fixed,超出改用static,但是這樣會出現抖動,也試過初始化時設置Content的min-height,但終歸是使用了js,不太完美,CSS的也試過使用margin-bottom:-10000px;padding-bottom:10000px的方法填充底部顏色,但效果不見得有多好看。

最近又遇到此類問題,嘗試采用之前提到過的CSS水平垂直居中方法來解決,最終找到比較靠譜的方法,就此總結一下,以備后用。

廢話不說,直接上代碼,以下為CSS,采用border-box,所以IE7下面無效,由于工作原因,只測試到IE8,沒考慮低版本瀏覽器。 查看更多...

自適應高度div內嵌iframe高度被撐開問題解決

標題有點長,就想表達一個意思,div自適應的情況下,內部嵌入iframe,iframe邊框什么的全部設置0,本以為外層div可以完美自適應,結果div在不同瀏覽器卻生生多出3-5個像素的高度。

找了下相關文章,發現確有此問題,有人說用負的margin值,可終究不完美,終極完美解決方案竟然是給iframe加display: block,或者vertical-align: bottom。

效果如圖所示:
iframe_div_1
查看更多...

div絕對居中、寬高自適應、多欄寬度自適應

最近工作上有需求寫一些頁面,很久沒動手了,發現很多排版、樣式等技巧都忘得差不多了,幾番折騰,還算解決了基本的布局問題。下面分享一下常見的幾種div布局問題。

1、div絕對居中。
效果如下:
divposition1
就是固定大小的div在瀏覽器中垂直、水平都居中,適合用到浮動彈出框、頁面居中的登陸框等你想得到的地方。以前我也曾使用window.onload和window.onresize來控制高度自適應,寬度好說,兼容IE和其他主流瀏覽器的,直接文本居中,內部“margin:0 auto;”。 查看更多...

幾種有用的網頁排版技巧分享

在網頁設計中經常會忽略排版,其實這是很不利于SEO和提高用戶體驗的舉動,因為注重網頁排版可以提高你的網頁設計水平和可讀性。下面分享幾種有用的排版技巧,希望有用。

1、糾正行高

最常見的網頁布局錯誤之一是定義了不正確的行高。行高是定義一行文本的高度,所以我們必須按照文本字體大小來設定行高。
一般來說,在設置文本行高的時候,我經常在字體大小的基礎上加上7個像素(對12-17像素的字體而言)
查看更多...

發布完善版WordPress手機主題一款

主題不是我個人所設計,只是在原有主題上加以修改的。近來有朋友提及博客首頁訪問頁面時,想起來我的博客確實有手機頁面,而且有wml和xhtml兩個版本的,域名分別解析為wap和3g,昨天做了url匹配調整,發現很多功能不好用了,而且樣式也過于老土,再說現在的手機這么強悍了,繼續使用wml版也沒必要了,于是卸載了原先使用的WP-T-WAP插件,打算找個更好的。

折騰了老半天覺得不如找個針對手機設計的主題,因為直接接觸過類似Mobile Domain的綁定手機域名的插件,可以講正常安裝的主題顯示在所綁定域名訪問時顯示指定主題樣式,隨手一搜,還真找到不少中意的主題。 查看更多...

CSS3動畫技術應用基礎分享

隨著網絡的發展,瀏覽器具有更強的渲染更高級代碼的能力,我們正逐步實現跨越所有平臺和瀏覽器的目標。我們不但可以要花費更少的時間來確保我們的盒模型在IE6中看起來正常,而且形成了鼓勵創新、避免hack、重前端腳本的氛圍。

網絡是一個非常好的環境,也是一個有豐富的知識來分享的協作社區。我們想要有圓角 ,我們就實現了它;我們想要 多背景圖片,我們實現了它;我們想要 邊框圖片,我們也讓它實現了。所以需求從來不是問題,否則,我們可能還都仍然在使用table來布局頁面而且使用過多的代碼呢。我們都知道,網絡無所不能。

為網絡而生

CSS 3的屬性比如border-radius、box-shadow和 text-shadow 在webkit(Safari、Chrome等)和Gecko(Firefox)等先進的瀏覽器中的使用開始出現增長的勢頭。它們(這些CSS屬性)已經為用戶創建更輕量的頁面和更豐富的體驗,而且它們可以優雅的降級。然而,這些只是CSS 3能為我們做的眾多事情中的一小部分。 查看更多...

Responsive Web design(響應式網頁設計)

所謂Responsive Web design(響應式網頁設計),通俗的說,就是可以自適應的網頁設計。隨著3G的普及,越來越多的人使用手機上網。移動設備正超過桌面設備,成為訪問互聯網的最常見終端。于是,網頁設計師不得不面對一個難題:如何才能在不同大小的設備上呈現同樣的網頁?目前各大網站、博客已經有向此方向改變的趨勢,我們也得及時做下了解。

手機的屏幕比較小,寬度通常在600像素以下;PC的屏幕寬度,一般都在1000像素以上(目前主流寬度是1366×768),有的還達到了2000像素。同樣的內容,要在大小迥異的屏幕上,都呈現出滿意的效果,并不是一件容易的事。 查看更多...

Photoshop CS6驚艷的新特性分享

3月份,Photoshop CS6 Beta版(下文簡稱PS CS6)發布公測,并在4月發布了正式版,因為網絡以及電腦性能問題,再加上最近沒有從事這方面的工作,沒能及時體驗,最近才注意到,photoshop cs6有著多項驚艷的新特性,工作中整天和像素打交道的朋友,感觸比較深的特性可能就是PS CS6支持矢量對象繪制、變換時像素自動對齊網格嘍。 查看更多...

網頁設計師必須知道的10件事

在做網站時會遇到很多的問題,所以網頁設計師通常要扮演多種角色,并且要掌握如何構建一個有效實用的網站布局知識。
你在網頁設計所學到的大多數教訓都來自工作經驗。學習是一個反復持續的過程,并且沒有比犯錯更好的方式來獲得知識(從錯誤中學習)。在本文中,我們將討論10個重要并常規的技巧,這是每位網頁設計師新手都應該知道。

1. 優化圖片,獲得更好的頁面加載速度

學習如何通過選擇正確的格式,來優化網頁圖片,并確保文件大小在可行的范圍你是足夠小的。雖然現在人們已經都在使用寬帶,但仍然有人是撥號上網。此外,雖然移動裝置技術的普及,但移動裝置卻不一定支持像寬頻一樣的速度,圖片文件的大小可能還是會延長網頁的加載時間,有可能把用戶趕走的。 查看更多...

黑龙江22选5开奖