前端筆記新手站長網頁設計和網站建設幹貨分享

新手推薦:DIV+CSS十日教程 十天學會DIV+CSS

10分鐘學會CSS彈性布局 Flexbox布局基礎

使用CSS給網頁布局,一般常用的方式是通過設置浮動或定位,而彈性布局是一種更靈活的方式,英文Flexible意思是“靈活的”,英文Flex具有收縮的意思 ...
所屬欄目:CSS3基礎 發表時間:12-20

自适應電腦和手機的jQuery焦點圖輪播代碼

本文分享的這款焦點圖幻燈片代碼是最常用的圖片輪播方式,沒有過多花哨的效果,使用很方便,隻需準備幾張banner圖片即可,建議使用尺寸1024*360的圖片,下面是html部分,語義 ...
所屬欄目:實用資源 發表時間:12-16

HTML5中新增的input表單輸入框類型

文本輸入控件(input)可以讓用戶在輸入框中輸入相應的字段,其type屬性決定了輸入字段的類型,除了傳統的輸入文字外,在html5中還增加了很多特殊的類型,比如可調取調色器選 ...
所屬欄目:建站經驗技巧 發表時間:12-08

左側固定菜單實現子菜單可點擊展開和收縮效果

固定在左側的導航欄,點擊一級菜單可展開子菜單的效果,經常在一些建站系統的後台可以看到,例如織夢CMS後台:文本主要分享一個簡單的左側固定導航的做法,這裡是借助jQuer ...
所屬欄目:實用資源 發表時間:12-07

網頁左右兩列等高布局的5種實現方法

兩列或多列布局的方法有很多,目前來說,浮動的方式用的比較多,例如下面這個就是典型的兩列布局,父容器寬度為600px,左右兩列分别為400px和200px,未設置具體的高度 ...
所屬欄目:前端技巧 發表時間:12-04

CSS設置輸入框占位符placeholder點擊隐藏

在HTML5中可以對文本輸入框增加placeholder屬性,英文placeholder意思是占位符,用在文本輸入框的時候可以友好的顯示提示文字,例如下面這個就是常見的文本框提示效果 ...
所屬欄目:前端技巧 發表時間:11-30

CSS制作多種樣式的箭頭圖标(單個div标簽)

曾在《CSS制作上下左右箭頭》這篇文章裡分享了通過三角形和小矩形拼接實現簡單小箭頭的方法,制作的箭頭圖案大緻是這樣:生活中常見的箭頭形狀還有很多種,比如下圖所 ...
所屬欄目:CSS3基礎 發表時間:11-29

CSS制作45度封頁套效果和折頁效果的步驟

網頁中加入封頁套或折頁的效果會更個性更有立體感,一般這種效果是通過一個小圖片定位的方法實現的,本文主要分享用純CSS的方法實現這樣的效果:這裡的封頁套效果相當 ...
所屬欄目:CSS3基礎 發表時間:11-28

動态返回網頁頂部按鈕最簡單的實現方法

在較長的網頁上加一個快速返回頂部的按鈕是較好的用戶體驗,但如果點擊按鈕直接回到頂部則有些生硬了,所以多數網站都采用平滑滾動到頂部的方式,該效果實現的方法有很 ...
所屬欄目:建站經驗技巧 發表時間:11-27

使用CSS3陰影屬性制作簡單雪花圖案的步驟

常見的雪花圖案大緻輪廓是一個星号的形狀,實現星号的方法一般是在一個長條矩形上分别疊加旋轉60度和-60度的兩個長條矩形,如下圖:本文所分享的CSS制作的雪花圖案最終 ...
所屬欄目:CSS3基礎 發表時間:11-25

CSS制作網店打折圖标(鋸齒圖标)簡單步驟

網店裡經常會用到一些優惠秒殺或打折信息的圖标,例如下圖就是幾個常見的圖标樣式:第一個圖标目測是由三個圓角矩形疊加形成的,所以實現的方法很簡單,使用2D旋轉就可以 ...
所屬欄目:CSS3基礎 發表時間:11-25

使用CSS陰影屬性簡單實現太陽圖案的步驟

CSS陰影屬性可以輕松的将一個元素複制一份,本文主要分享簡單的利用CSS陰影屬性這個特點實現一個太陽的圖案,太陽圖案一般可由中間的圓形和四周的“光線”組成,下面先 ...
所屬欄目:CSS3基礎 發表時間:11-23

關于html5視頻标簽video的屬性和用法

以往在網頁中引入視頻的代碼很複雜,在html5中出現了專用于視頻的video标簽,在網頁中引用視頻變得就像引用圖片那樣容易了,最簡單的視頻引入代碼為:<video src="v1.mp4 ...
所屬欄目:建站經驗技巧 發表時間:11-21

織夢dedecms實現點擊圖片翻頁的方法

制作圖片類網站的時候,如果能點擊圖片後翻頁,則是一種很好的用戶體驗,本文主要分享dedecms如果設置點擊圖片翻頁,實現該功能需要修改程序文件,這裡以dedecms5.7-UTF8版 ...
所屬欄目:建站經驗技巧 發表時間:11-20

純CSS制作會話氣泡和微信圖标的簡單步驟

通過CSS中的2D變換和定位的配合,可以實現一些簡單的會話氣泡圖案,這樣避免圖片的使用,可以減少服務器的資源請求,本文以微信圖标為例,簡單的說說回話氣泡的CSS實現方法 ...
所屬欄目:CSS3基礎 發表時間:11-20
DIV+CSS基礎DIV+CSS技巧CSS3基礎建站經驗技巧實用資源下載