頁面上一些小icon的製作方法及技術選擇

我們經常切片的時候，看到一些小圖示,都有些心頭小煩。當然我們一般為了相容多款瀏覽器。選擇保守的切圖拼成雪碧圖。然後通過background-position去定位到你想要用的圖示.

隨著我們一步步摒棄相容性差的瀏覽器。我們也可以通過不同的技術手段去實現小圖示。接下來。我將總結我曾用過的各種方法。實現頁面小圖示的方法

1. 切下小圖示然後拼成位置合理的雪碧圖；

通過background-position樣式來定位到你想要用的方法。這是最常用的方法；

劣勢：當初在wap版運用該方法時遇到了問題。每個小圖示呈現在頁面上總是有部分其他圖示卡在頁面上。如下圖

這是chrome瀏覽器開發工具所呈現的效果，不細看是看不出來的。 但只在iphone4下**，會發現圖示嚴重沒對齊。

思考方向：我認真排查html及css的問題。最後我自己重新寫demo,運用**的移動端運用的技術flexible.js，得到解決。

總結：之所以造成這種原因，是因為我們的頁面模板中設定根字型的大小精度不夠，對於緊湊的背景圖定位就會放大這個問題。

當然臨時解決方案，就暫時就所有小圖示拆開來引用。

2. 通過html+css實現一些圖示

當我們拿到如下圖的設計稿：

對於右邊的大於符號圖示,我們真心懶得切圖。當然我們的確可以通過 html+css來實現

html:

>
css:
span

分析： 這種方案在web端是可實現的，但是移動端是無法實現，手機版本太多了，瀏覽器種類也太多。估計每款手機都不太能渲染出我們要的宋體。

總結：根據自身專案的開發平台和需求，我們可以選擇這種方法製作圖示

3.css3屬性實現

我們依舊參照上圖設計稿製作出乙個箭頭

doctype html

>
<
html 
lang
="en"
>
<
head
>
<
meta 
charset
="utf-8"
>
<
title
>narrow
title
>
head
>
<
style
>
divstyle
>
<
body
>
<
div>
div>
body
>
html
>

總結： 一看就知道。ie8及以下瀏覽器是不能支援css3屬性的。 這個運用還是要看需求方對瀏覽器的要求了

4. 插入特殊字元實現圖示

還是參照以上的設計稿--製作箭頭

doctype html

>
<
html 
lang
="en"
>
<
head
>
<
meta 
charset
="utf-8"
>
<
title
>narrow
title
>
head
>
<
style
>
body
div.narrow
.box
.box div
.box div.black
.box div.white
style
>
<
body
>
<
div 
class
="narrow"
>
div>
<
div 
class
="box"
>
<
div 
class
="white"
>◆
div>
<
div 
class
="black"
>◇
div>
div>
body
>
html
>

圖上標題4就是通過特殊字元實現的。

總結：一直覺得 前端工作相比後端開發，總是多了很多想象力。每個人寫出來的頁面總是有自己的特色。可能這就是我為什麼成為前端工程師並一直堅持下去的魅力所在吧

5.icon-font實現頁面圖示，不用載入一張。

待續：....................

一些ArrayList的一些小方法

1 arraylist的一些小方法 加入某本圖書 list.add bk5 檢視是否包含某本圖書 boolean a list.contains bk1 system.out.println a 刪除某本圖書 list.remove bk5 根據圖書名檢視，刪除該圖書 集合的下角標是從0開始的 fo...

建立頁面時的一些小問題

1.塊級元素和行內元素還是分不清 2.行內元素比如非替換元素是沒有寬高的，非替換元素的內邊距和外寬距的垂直距離沒有效果，只在左右上有效果，不會影響元素行內框的高度，但是替換元素會影響高度，但是要注意行內元素也是有邊框的，在設定背景顏色時要十分的注意 3在布局方面，有定位和浮動，還有 css3上有新增...

tp5的一些小方法

當使用乙個新頁面替換當前頁面的body後，body重新整理了，所選擇的select值就不能儲存住，解決方法如下 作業題目 請選擇 先將所選擇的option傳遞到後台，在使用 tis assign title title 渲染到模板，selected style display none 在新頁面選中...