html標題前色塊,CSS輕松實現色塊標題標識

不少網站開始采用韓式風格來建站,這種風格的特點是色彩變化豐富、應用Flash動畫合理、結構新穎,最明顯的特點就是表格或標題欄常會加上一條橫或豎的色帶,如圖1中圈起來的地方就是這樣。

6560a4f6cb19a1c4ff8ff42485da56cb.png

(圖一)

一般人都會想到用Photoshop等軟件來完成這樣的效果,但如果網頁上這類圖片太多,或是較大時,會給訪問帶來一定的困難。這里就給大家講一講如何用CSS來做這樣的風格,因為用CSS只是對顏色的定義,少了圖片的應用,所以基本不會影響速度。

首先,在Dreamweaver MX 2004中為頁面添加一個CSS效果類,具體設置如圖2。

290941106316b2cbd216c67bb00a1f9a.png

(圖二)

點擊OK后,會彈出具體的效果設置,打開其中的border標簽,進行如圖3的設置。

b11c1dc0956c3e9806c0cd4398589156.png

(圖三)

然后將Background標簽中的Background Color設置為“#BAEE66”,在你要應用這種風格的表格上添加這個CSS效果就OK了。

應用這種方法,大家可以做出各式各樣美觀且訪問速度很快的表格來,圖4是筆者試做的幾種風格,大家可以根據border的設定再結合表格的設計來做出各式各樣的效果來。

3f72f7128e7ee2adda82c1bb73625734.png

(圖四)

出處:電腦報

責任編輯:三分油菜田

◎進入論壇網頁制作、網站綜合版塊參加討論

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/392847.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/392847.shtml
英文地址,請注明出處:http://en.pswp.cn/news/392847.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

Git 基礎 - 遠程倉庫的使用

遠程倉庫的使用 要參與任何一個 Git 項目的協作,必須要了解該如何管理遠程倉庫。遠程倉庫是指托管在網絡上的項目倉庫,可能會有好多個,其中有些你只能讀,另外有些可以寫。同他人協作開發某個項目時,需要管理這些遠程倉…

山東理工大學第七屆ACM校賽-G 飛花的傳送門

G - 飛花的傳送門飛花壕最近手頭比較寬裕,所以想買兩個傳送門來代步(夏天太熱,實在是懶得走路)。平面上有N個傳送門,飛花壕想要挑兩個距離最遠的傳送門帶回家(距離為歐幾里得距離,即兩點之間直線…

leetcode 1002. 查找常用字符

給定僅有小寫字母組成的字符串數組 A,返回列表中的每個字符串中都顯示的全部字符(包括重復字符)組成的列表。例如,如果一個字符在每個字符串中出現 3 次,但不是 4 次,則需要在最終答案中包含該字符 3 次。 …

git 代理 git_如何成為Git專家

git 代理 gitI made a mistake in my commit, how do I fix it ?我在提交中犯了一個錯誤,該如何解決? My commit history is a mess, how do I make it neater?我的提交歷史是一團糟,我如何使其更整潔? If you have ever had …

101與金根回顧敏捷個人:(13)敏捷個人和敏捷開發

本文更新版本已挪至 http://www.zhoujingen.cn/blog/1726.html ------------------------- 敏捷個人源于工作 自2001初成立了敏捷聯盟到現在10年的推廣,敏捷開發已日漸成為當前IT行業軟件開發的一種主流方法。沒有銀彈,任何方法都不可能解決所有問題&a…

計算機網絡選擇重傳,計算機網絡選擇重傳協議實驗報告..docx

計算機網絡選擇重傳協議實驗報告.《計算機網絡》選擇重傳協議實驗報告1.實驗內容和實驗環境描述實驗內容:利用所學數據鏈路層原理,設計一個滑動窗口協議,在仿真環境下編程實現有噪音信道環境下兩站點之間無差錯雙工通信。信道模型為8000bps 全…

leetcode 劍指 Offer 03. 數組中重復的數字

找出數組中重復的數字。 在一個長度為 n 的數組 nums 里的所有數字都在 0~n-1 的范圍內。數組中某些數字是重復的,但不知道有幾個數字重復了,也不知道每個數字重復了幾次。請找出數組中任意一個重復的數字。 示例 1: 輸入&…

【Maven學習】Maven打包生成包含所有依賴的jar包

http://blog.csdn.net/u013177446/article/details/54134583 ************************************************** maven打包生成的普通jar包,只包含該工程下源碼編譯結果,不包含依賴內容。同時,maven提供以下方式生成包含所有依賴的jar文件…

mysql 數據庫 安全_如何確保您MySQL數據庫安全

mysql 數據庫 安全我們開始之前的一些基本信息: (Some basic information before we get started:) Source: Center for Internet Security’s (CIS) Oracle MySQL Community Server 5.7來源: 互聯網安全中心(CIS)Oracle MySQL Community Server 5.7 Op…

Exchange server 2010系列教程之三 發送郵件測試

最近有些忙,好幾天沒有上來寫教程了,接著往下寫吧。就當是自己的學習筆記,呵呵,有不到之處,還請大家多多指教。 上一篇我們已經把服務器架設好了,那么我們來測試一下發送郵件。 1.首先在AD DC上面新建一個域…

如何用計算機掃描圖片變成文字,怎么掃描圖片上的文字-華為手機黑科技"文字掃描儀",3秒就能將紙質文檔轉成電子檔,牛...

現如今,手機已經成為我們使用率最高的電子設備之一了。手機雖小,但是功能可是五花八門,很多手機的功能,可能我們使用幾年,都沒有發現過。今天就給大家介紹華為手機中,非常強大的一項黑科技“文字掃描儀”。…

第一步:編輯器選擇

對于c/c的學習已經進一年的時間了,現在想開始好好換一個文本編輯器,然后慢慢的學習,隨著時間的增加而不斷增加。兩款頗有爭議的軟件是Vim和emacs,兩者之間的選擇其實對于初學者的我還是比較困難的,Vim在原來有點接觸過…

leetcode116. 填充每個節點的下一個右側節點指針(dfs)

代碼 /* // Definition for a Node. class Node {public int val;public Node left;public Node right;public Node next;public Node() {}public Node(int _val) {val _val;}public Node(int _val, Node _left, Node _right, Node _next) {val _val;left _left;right _ri…

react銷毀方法鉤子0_React鉤子:使用React狀態的新方法

react銷毀方法鉤子0Updated: With React 16.8, React Hooks are available in a stable release!更新:隨著React 16.8的發布, React Hooks已經發布! Outdated: Hooks are still an experimental proposal. They’re currently in React v16.…

Linux下安全審計工具 lynis 使用說明

官網:https://cisofy.com/download/lynis/ 下載解壓后,執行./lynis -Q即可,稍等片刻自動生成一份檢測報告。可以根據檢測報告看哪里不足進行改進即可。 本文轉自 lirulei90 51CTO博客,原文鏈接:http://blog.51cto.com/…

課堂訓練

1.對于可能的變更是否能制定應急計劃? 可以制定 例如一款app的開發,在制作app之前會對app的功能性進行一個規劃,想的比較全面就能很好應對變更。 2.員工是否能夠有效地處理意料之外的工作請求? 能夠處理 對于工作能力極強的員工而…

Google 實用搜索技巧

孔子曰:“工欲善其事,必先利其器。居是邦也,是其大夫之賢者,友其示支仁者。”——語出《論語衛靈公》 1. Google搜索固定格式的文檔 Google支持特定格式文檔的搜索(“filetype:”就是它的搜索語法)&#xf…

華科的計算機和建筑學哪個強,華中科技大學和華南理工大學相比,誰更占優勢?看了也許就知道了...

大學是學生接受教育的過程中非常重要的一個階段,很多學生都會盡可能在高考中,考出更好的成績,爭取報考一個更好的大學。為了提升教育水平,我國到目前為止建設了超過3000所大學,其中有很多高等院校非常相似,…

c#+handle.exe實現升級程序在運行時自動解除文件被占用的問題

我公司最近升級程序經常報出更新失敗問題,究其原因,原來是更新時,他們可能又打開了正在被更新的文件,導致更新文件時,文件被其它進程占用,無法正常更新而報錯,為了解決這個問題,我花…

播客#50:Sacha Greif

On todays episode of the freeCodeCamp Podcast, Quincy Larson interviews Sacha Greif, a designer, developer, and prolific open source project creator.在今天的免費CodeCamp播客中,昆西拉爾森(Quincy Larson)采訪了設計師,開發人員和多產的開源…