文章專區

網頁設計相關文章

 在網頁設計上,為了讓版面更整齊,時常需要讓文字限制在固定尺寸的區塊內, 當文字超過設定的框架時會自動顯示「…」的刪節號。而使用CSS便可以達到這個效果。 方法便是在文字區塊內加上text-overflow: ellipsis; 、white-space: nowrap; 及 overflow:hidden;   如下範例: See the Pen pZRmMy by Ya (@bok770) on CodePen.   然而可以發現的是,如此一來僅能顯示單行文字,若是需要顯示多行文字的話便不實用了。 不過CSS還有另一項新的屬性:-webkit-line-clamp,不僅可顯示多行文字,還可以控制要顯示的行數,超出的部分一樣會顯示「…」的符號。用法為設定要顯示的行數,例如要顯示三行便設定-webkit-line-clamp: 3   要配合的屬性包含: display: -webkit-box;以及 -webkit-box-orient: vertical;  text-overflow:hidden;   範例: See the Pen pZRXJb by Ya (@bok770) on CodePen.    缺點是此項屬性兼容性不佳,目前僅支援有webkit的瀏覽器,如:chrome、Safari、Opera,並不支援IE和firefox。    
以前在網頁裡加上三角形需使用圖片方式加入, 然而現在可以直接用CSS設計出想要的三角形了,而且語法相當簡潔。 主要會用到的就是邊框(border)概念, 一個元素會有四個邊框,每個邊框之間會呈現45度角,   於是利用這項特性,讓其中一個邊框消失,對稱的兩邊用相同的顏色, 如此一來就可以形成三角形了。 See the Pen PBZmWb by Ya (@bok770) on CodePen.   範例: See the Pen oMbWXr by Ya (@bok770) on CodePen.
 在網頁設計上,若是希望圖片或文字呈現在一定的範圍內的話,便可以透過CSS的overflow屬性,讓文字與圖片排在固定的範圍內,若超出設定的範圍,會自動變成捲軸的形式,有助於控制版面的編排。 設定值如下: overflow: auto-自動使用捲軸,當文字超出範圍時才會出現捲軸 See the Pen pZJpbr by Ya (@bok770) on CodePen.      overflow:visible-文字或圖片會直接超出範圍,不使用捲軸。 See the Pen xJGpEy by Ya (@bok770) on CodePen.       overflow:hidden-自動隱藏超出的文字或圖片。 See the Pen yqNpVz by Ya (@bok770) on CodePen.   overflow:scroll-不管文字有無超出範圍都會自動產生捲軸 See the Pen RBPxKw by Ya (@bok770) on CodePen.     overflow:inherit-繼承父元素 See the Pen JBdMEw by Ya (@bok770) on CodePen.
一個網站設計上使用數個特效是常態,然而要根據不同的特效分別插入不同的插件,可能會稍嫌累贅,而且有時還會發生插件之間衝突的情況。而這次介紹的jQuery .superSlide.js,是將網頁上常見的特效都統一歸到同一支js裡,常見的大圖輪播、頁籤切換、圖片滾動等特效,都可以直接用這支js實現!讓你不用特別為每個特效分別搜尋所需的插件,也不用擔心數個插件有代碼衝突的問題,相當方便管理。 首先到官網下載套件://www.superslide2.com/   「基礎效果」頁面有特效的範例和常用參數的設定 //www.superslide2.com/demo.html 可以直接在該頁面選擇數值,預覽呈現的效果。 如下圖為頁籤切換的特效,右邊列有效果(fade)、觸發方式(trigger)、效果速度(delayTime)等的參數設定,可以依自己的需求做設定   而隨著設定值的不同,下方當前調用代碼的寫法也會不同,可以直接複製到自己的專案裡。   「查看參數」頁面可以一覽Superslide可以設定的參數 //www.superslide2.com/param.html
當滑鼠移到圖片上會有放大的效果,這在網頁設計上是很常見的,而這效果用CSS就可以做出來了??! transform可以設定圖片放大的倍率,   transition可以做出圖片緩慢放大的效果, 而滑鼠移入所產生的變化要用:hover來實現。  外面的框設定overflow:hidden是為了隱藏在圖片放大時超出的部分, transform: scale(1.1)為圖片放大的倍率 transition:all 0.5s ease 0s為圖片放大所需的時間和特效 範例: See the Pen gKQjOy by Ya (@bok770) on CodePen.
就像CSS的box-shadow可以幫區塊加上陰影一樣,CSS也有能用來幫文字上陰影的屬性-text-shadow。 可設定值如下: text-shadow:  h-shadow v-shadow blur spread color; h-shadow:水平位移距離 v-shadow:垂直位移距離 blur:模糊半徑 spread:擴散距離 color:顏色   範例: See the Pen gKoYLe by Ya (@bok770) on CodePen.    也可以運用此屬性達成以下效果:   光暈效果,只要將前兩個值(h-shadow、v-shadow)設為0即可。若要加強效果可多寫幾次。   See the Pen qKpWmR by Ya (@bok770) on CodePen.   文字輪廓 若有四個陰影,能夠為文字加一層輪廓。不過還可以用CSS另一個屬性text-stroke來呈現。   See the Pen NzXKyJ by Ya (@bok770) on CodePen.
 之前的文章Flexslider--方便好用的圖片輪播、滑動切換套件介紹了Flexslider此套件,主要是以一張張圖片作輪播,而這次我們介紹另一套可以多組圖片輪播切換的套件,可應用於更多張圖片的展示。 此套件必須包含slick.js、jquery.min.js、slick.css、slick-theme.css這些檔案 可於slick官網下載,官網上更是陳列了許多項不同的輪播樣式,附上原始碼可以複製貼上。 詳細使用步驟如下: 首先到官網,點擊上方的「get it now」   頁面會滑到該對應位置,點擊「Download Now」即可下載壓縮檔,或是選擇直接複製外連網站的連結。   官網上展示了許多樣式,提供下方的原始碼複製貼上。   解壓後的檔案,只要點進名稱為「slick」的資料夾即可找到需要的js和css檔了??!放進自己的專案裡,依據自身需求修改檔案路徑和設定即可套用了。    
 z-index可以設定元素的堆疊順序, 設定值越高越前面,可以為負數,例如:z-index: -1。 另外要注意的是z-index只能在有設定位(position)的元素上才會奏效。 可設定為position: static、absolute、relative、fixed。 如下圖範例1中所示,如果將色塊設成z-index: 1的話,就會將文字擋住了。 See the Pen NMQENQ by Ya (@bok770) on CodePen.   然而如果改成z-index:-1的話,因為色塊的順序為負的,所以會被放置在文字的後面。 See the Pen yjmRGB by Ya (@bok770) on CodePen.   範例2: See the Pen wjVEQq by Ya (@bok770) on CodePen. 如範例2所示,設定值越大的元素( z-index:3),堆疊順序會越前面, 要注意設定值以免遮蓋到後方的元素。  
Select option是下拉式選單,通常用在表單(form)裡,在網頁中很??吹?,像是旅行社的網站會提供旅遊國家讓網友做選擇,或是購物網站提供各項商品項目等等。  基本語法為 < select name="選單名稱" > < option value="選項值" >< /option > < /select > 範例: See the Pen ZompYe by Ya (@bok770) on CodePen. 範例中的travel-form為此選單的名字,可以自己設定, 包在裡面的option是此選單的選項,每個項目都會有一個值(value), 用來判斷所選擇的項目,不會顯示在頁面上, 而 < option >< /option > 之間的文字就是會看到的內容, 這樣一來簡單的下拉式選單就完成了。 可以配合一些JS特效或是使用CSS美觀選單樣式。
在網頁設計上,有時我們只要擷取圖片的一部分時,若是還要另外切圖片的話又會顯得累贅,這時我們可以用CSS的屬性來自由裁切圖片囉! css的overflow屬性 設定成overflow: hidden就可以將多餘的圖片隱藏起來,並利用margin來控制要顯示的部分。 範例: 原本的完整圖片 See the Pen &amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;a _fcksavedurl='https://codepen.io/bok770/pen/zjZyKO/'&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;zjZyKO&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;/a&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt; by Ya (&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;a _fcksavedurl='https://codepen.io/bok770'&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;@bok770&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;/a&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;) on &amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;a _fcksavedurl='https://codepen.io'&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;CodePen&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;/a&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;.   使用css裁切過後 See the Pen KRovqO by Ya (@bok770) on CodePen.   css的clip屬性 clip的屬性值僅有rect( 矩形 ),其值為 rect (top, right, bottom, left),預設值為auto,而必須注意的是此屬性要有position:absolute才會生效,圖片顯示範圍的計算為top減掉bottom為顯示範圍的高,right減掉left為顯示範圍的寬。 範例: See the Pen LmdjJO by Ya (@bok770) on CodePen.
  • 迈向命运共同体 开创亚洲新未来 2018-11-12
  • 对美敲诈老手不能软越软越诈你要打就来 2018-11-11
  • 天津市政府召开第14次常务会议 张国清主持 2018-11-10
  • 监察体制改革后 湘西半年72名公职人员主动交代问题 2018-11-10
  • 月薪过万白领辞职回乡养鸡 亏数十万后回城找工作 2018-11-09
  • 90后听障女孩北漂学舞 王力宏为她写歌:我欣然接受我的不完美 2018-11-08
  • 他是受了启发才明白这个道理。而这个道理是对的。两个人组合,必须要产生两个人接续,才能保持力量的延续。人口数量的衰退,一定是两种原因,一是战争,而是生产能力的提升 2018-11-07
  • 高清图集:习近平在山东考察 2018-11-06
  • 颍上一驾校换“东家” 学员既不能培训又退不了费 2018-11-05
  • 三亚市民投诉“蛙声扰民” 官方“神回复”引热评 2018-11-04
  • 假期三天每日过万警力保市民平安 2018-11-03
  • 5G完成第一阶段功能标准化工作,龙头持续受益 2018-11-02
  • 咖啡馆雇自闭症患者作店员 4000多人报名当“顾客” 2018-11-02
  • 全新奥迪RS 6 Avant谍照 3.5秒破百明年亮相 2018-11-01
  • 挪用近30万报纸征订款赌博 河南一报社聘用制干部获刑 2018-11-01
  • 142| 109| 864| 792| 271| 147| 975| 406| 283| 85|