6項目六 應用CSS3樣式美化網頁_第1頁
6項目六 應用CSS3樣式美化網頁_第2頁
6項目六 應用CSS3樣式美化網頁_第3頁
6項目六 應用CSS3樣式美化網頁_第4頁
6項目六 應用CSS3樣式美化網頁_第5頁
已閱讀5頁，還剩10頁未讀， 繼續(xù)免費閱讀

下載本文檔

版權說明：本文檔由用戶提供并上傳，收益歸屬內容提供方，若內容存在侵權，請進行舉報或認領

文檔簡介

HTML5+CSS3網頁設計與布局項目六應用CSS3樣式美化網頁6.1CSS美化網頁6.2CSS美化網頁案例6.1CSS美化網頁6.1.1美化網頁文字6.1.2美化網頁圖片6.1.3美化網頁背景6.1.4美化網頁邊框6.1.5美化網頁表格6.1.8美化網頁菜單6.1.7美化網頁導航6.1.6美化網頁表單6.1.1美化網頁文字

如何實現這段文字中的重點信息加強，這就需要使用<span>標簽進行樣式美化。

使用<span>標簽將需要凸現的詞匯標記，通過CSS樣式美化<span>標簽標記的內容。

美化前頁面代碼： <body>

<p>春天來了，天氣轉暖,</p>

<p>心情也隨之變得明媚起來。</p>

<p>很早就想換上春裝,用春天明媚的</p>

<p>色彩裝點自己。</p> </body>6.1.1美化網頁文字

增加以下css代碼： p{font-size:14px;} p.weather,.ownspan{font-size:36px;font-weight:bold;color:blue;} p#mood{font-size:24px;font-weight:bold;color:red;} p.spring{font-style:italic;color:green;font-size:28px;font-weight:bold;}6.1.2美化網頁圖片

圖像是美化網頁必不可少的元素，適用于網頁的圖像格式主要有JPEG、GIF和PNG。圖像能比文本更直觀地表達信息，在網頁中通常起到畫龍點睛的作用，它能表達網頁的形象和風格，恰到好處地使用圖像能使網頁更加生動和美觀。

給一個有圖片的html頁面增加css美化代碼： img{width:100px;border:3pxsolidred;} .fillet{border-radius:20px;} .oval{border-radius:50%;} .thumb{border:1pxsolid#ddd;border-radius:4px;padding:5px;} .filter{filter:brightness(50%);}6.1.3美化網頁背景

有時為了區(qū)別網頁上的一些元素或者為了使某些元素更加醒目，我們會添加一些背景來更好地呈現頁面想要展示的內容。

background-color屬性用來給文本設置背景顏色，為了頁面的美觀、合理，可以選用不同的顏色。給頁面增加css來美化網頁背景代碼：

h3{background-color:cornflowerblue;}

.imgs{background-image:url(img/fq.jpg);width:100px;padding:20px;background-repeat:repeat;}6.1.4美化網頁邊框

在網頁中如果要想改表格、表單、圖片等內容的邊框，可以使用border-style屬性定義了邊框的樣式。

給一個類增加一個邊框的代碼：

.first{border-style:dasheddoublesoliddotted;border-width:5px;border-color:blueredgoldcyan;}6.1.5美化網頁表格

之前學表格的時候有學過用表格屬性來美化表格，而css也可以用來美化表格。

css美化表格代碼： table{border-collapse:collapse;width:100%;}

table,th,td{border:1pxsolidblue;}

th{height:30px;background-color:powderblue;color:brown;}

td{text-align:center;padding:20px;}6.1.6美化網頁表單

表單做得是不是漂亮，是大家喜歡上一個網站的第一步，所以，對于表單的美化就顯得尤為重要。

css美化表單代碼： .myinput{border:2pxsolid;border-color:#D4BFFF;color:#2A00FF;}6.1.7美化網頁導航

導航欄是現行主流網站都必須具備的，通過導航欄，我們可以非常直觀地了解到該網站所要表達的主要內容，對于網站的每個部分大家可以一目了然。能夠有一個漂亮的導航條對于每個網站都是非常重要的。

css美化網頁導航代碼： ul{list-style-type:none;margin:0;padding:0;}

li{float:left;}

a:link,a:visited{display:block;width:100px;background-color:#FF7B00;color:white;text-decoration:none;font-weight:bold;}

a:hover,a:active{background-color:cornflowerblue;}6.1.2美化網頁菜單

導航通常都會有下拉菜單，下拉菜單是對導航的一種補充，更加豐富和增添了導航的內容。

css美化網頁菜單代碼：

ul{list-style-type:none;margin:0;padding:0;overflow:hidden;background-color:gray;} li{float:left;}

lia,.dropbtn{display:inline-block;color:white;text-align:center;padding:14px16px;text-decoration:none;} lia:hover,.dropdown:hover.dropbtn{background-color:green;}

.dropdown{display:inline-block;} .dropdown-content{display:none;position:absolute;background-color:darkgray;min-width:125px;box-shadow:0px8px16px0pxrgba(0,0,0,0.2);}

.dropdown-contenta{color:white;padding:12px16px;text-decoration:none;

display:block;}

.dropdown-contenta:hover{background-color:

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網頁內容里面會有圖紙預覽，若沒有圖紙預覽就沒有圖紙。
  • 4. 未經權益所有人同意不得將文件中的內容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網僅提供信息存儲空間，僅對用戶上傳內容的表現方式做保護處理，對用戶上傳分享的文檔內容本身不做任何修改或編輯，并不能對任何下載內容負責。
  • 6. 下載文件中如有侵權或不適當內容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論