整合營銷服務(wù)商
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
HTML5，作為HTML的最新版本，自推出以來，就以其強大的功能和革命性的特性，引領(lǐng)了網(wǎng)頁設(shè)計的新潮流。它不僅增強了網(wǎng)頁的表現(xiàn)力，還引入了眾多新元素和API，極大地豐富了網(wǎng)頁開發(fā)的可能性。本文將深入探討HTML5的核心特性，并通過實際代碼示例，展示它如何改變和提升現(xiàn)代網(wǎng)頁設(shè)計和開發(fā)。
1.1 語義標簽
HTML5引入了許多語義化的標簽，如<article>、<section>、<nav>和<header>，這些標簽使得網(wǎng)頁的結(jié)構(gòu)更加清晰，有助于搜索引擎優(yōu)化（SEO）。
示例代碼：
<header>
<h1>Website Title</h1>
<nav>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
</ul>
</nav>
</header>
<section id="home">
<article>
<h2>Article Title</h2>
<p>Article content...</p>
</article>
</section>
1.2 離線存儲
通過本地存儲（localStorage）和會話存儲（sessionStorage），HTML5允許網(wǎng)頁在用戶離線時存儲數(shù)據(jù)，大大提高了網(wǎng)頁的可用性和響應(yīng)速度。
示例代碼：
// 存儲數(shù)據(jù)
localStorage.setItem('key', 'value');
sessionStorage.setItem('key', 'value');
// 讀取數(shù)據(jù)
let value = localStorage.getItem('key');
value = sessionStorage.getItem('key');
1.3 多媒體支持
HTML5原生支持音頻和視頻，無需依賴插件。使用<audio>和<video>標簽，開發(fā)者可以輕松嵌入和播放多媒體內(nèi)容。
示例代碼：
<audio controls>
<source src="audio.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
<video width="320" height="240" controls>
<source src="video.mp4" type="video/mp4">
Your browser does not support the video element.
</video>
1.4 畫布（Canvas）和SVG
<canvas>元素用于通過JavaScript繪制圖形，而SVG（可縮放矢量圖形）則提供了另一種強大的圖形渲染方式。
示例代碼：
<canvas id="myCanvas" width="200" height="100"></canvas>
<script>
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#FF0000';
ctx.fillRect(0, 0, 150, 100);
</script>
1.5 新的表單元素和屬性
HTML5為表單提供了更多的控制和驗證功能，如日期和時間輸入、顏色選擇器、表單驗證等。
示例代碼：
<form>
<input type="date" name="bday">
<input type="color" name="favcolor">
<input type="email" name="email" required>
<input type="submit">
</form>
2.1 地理定位（Geolocation）
HTML5的地理定位API允許網(wǎng)頁訪問用戶的地理位置信息，為開發(fā)基于位置的服務(wù)提供了便利。
示例代碼：
navigator.geolocation.getCurrentPosition(function(position) {
var latitude = position.coords.latitude;
var longitude = position.coords.longitude;
console.log('Your current position is (' + latitude + ',' + longitude + ')');
});
2.2 拖放（Drag and Drop）
拖放API使得用戶可以輕松地拖拽網(wǎng)頁上的元素，為創(chuàng)建交互式網(wǎng)頁提供了新途徑。
示例代碼：
<div id="drag" draggable="true">Drag me</div>
<div id="drop" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<script>
function allowDrop(ev) {
ev.preventDefault();
}
function drag(ev) {
ev.dataTransfer.setData("text", ev.target.id);
}
function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
}
</script>
2.3 Web Workers
Web Workers允許在后臺運行JavaScript代碼，不會影響主線程的性能，特別適用于處理復(fù)雜計算。
示例代碼：
var myWorker = new Worker('worker.js');
myWorker.onmessage = function(e) {
console.log('Received message ' + e.data);
};
myWorker.postMessage('Hello World');
2.4 WebSockets
WebSockets提供了一種全雙工通信通道，使得客戶端和服務(wù)器之間的實時通信成為可能。
示例代碼：
var socket = new WebSocket('ws://localhost:8080');
socket.onopen = function(event) {
socket.send('Hello Server!');
};
socket.onmessage = function(event) {
console.log('Server says: ', event.data);
};
socket.onclose = function(event) {
console.log('Connection closed');
};
3.1 移動優(yōu)先
HTML5的設(shè)計考慮到了移動設(shè)備的特性，使得開發(fā)跨平臺移動應(yīng)用變得更加容易。
3.2 觸摸事件
HTML5支持觸摸事件，如觸摸開始、移動和結(jié)束，為移動設(shè)備提供了良好的交互體驗。
示例代碼：
var canvas = document.getElementById('myCanvas');
canvas.addEventListener('touchstart', handleStart, false);
canvas.addEventListener('touchmove', handleMove, false);
canvas.addEventListener('touchend', handleEnd, false);
function handleStart(e) {
e.preventDefault();
// 處理觸摸開始事件
}
function handleMove(e) {
e.preventDefault();
// 處理觸摸移動事件
}
function handleEnd(e) {
e.preventDefault();
// 處理觸摸結(jié)束事件
}
3.3 響應(yīng)式設(shè)計
結(jié)合CSS3，HTML5可以創(chuàng)建響應(yīng)式網(wǎng)頁，自動適應(yīng)不同屏幕尺寸和分辨率。
示例代碼：
<meta name="viewport" content="width=device-width, initial-scale=1">
@media (max-width: 600px) {
.responsive-class {
width: 100%;
}
}
4.1 兼容性考慮
雖然現(xiàn)代瀏覽器普遍支持HTML5，但在開發(fā)時仍需考慮舊版瀏覽器的兼容性問題。
4.2 性能優(yōu)化
合理使用HTML5特性，如緩存策略和資源加載，可以顯著提升網(wǎng)頁性能。
示例代碼：
<link rel="manifest" href="/manifest.webmanifest">
if ('serviceWorker' in navigator) {
window.addEventListener('load', function() {
navigator.serviceWorker.register('/service-worker.js').then(function(registration) {
console.log('ServiceWorker registration successful with scope: ', registration.scope);
}, function(err) {
console.log('ServiceWorker registration failed: ', err);
});
});
}
4.3 安全性
遵循最佳安全實踐，如驗證用戶輸入、使用HTTPS等，保護用戶數(shù)據(jù)和隱私。
HTML5作為現(xiàn)代網(wǎng)頁設(shè)計的基石，不僅提供了豐富的語義標簽和API，還極大地增強了網(wǎng)頁的表現(xiàn)力和交互性。它對移動開發(fā)的支持，使得創(chuàng)建跨平臺應(yīng)用變得更加容易。然而，開發(fā)者在利用HTML5的強大功能時，也應(yīng)考慮兼容性、性能和安全性的問題。隨著技術(shù)的發(fā)展，HTML5將繼續(xù)推動網(wǎng)頁設(shè)計和開發(fā)向更加先進和用戶友好的方向發(fā)展。
載說明：原創(chuàng)不易，未經(jīng)授權(quán)，謝絕任何形式的轉(zhuǎn)載
使用HTML5 Canvas構(gòu)建繪圖應(yīng)用是在Web瀏覽器中創(chuàng)建交互式和動態(tài)繪圖體驗的絕佳方式。HTML5 Canvas元素提供了一個繪圖表面，允許您操作像素并以編程方式創(chuàng)建各種形狀和圖形。本文將為您提供使用HTML5 Canvas創(chuàng)建繪圖應(yīng)用的概述和指導(dǎo)。此外，它還將通過解釋HTML設(shè)置、JavaScript實現(xiàn)、用戶交互和繪圖功能來幫助您理解構(gòu)建繪圖應(yīng)用的步驟。
HTML canvas標簽是一個HTML元素，它提供了一個空白的繪圖表面，可以使用JavaScript來渲染圖形、形狀和圖像。繪圖應(yīng)用程序利用HTML5 canvas的功能，使用戶能夠以數(shù)字方式創(chuàng)建藝術(shù)作品、草圖和插圖。此外，使用HTML5 canvas構(gòu)建的繪圖應(yīng)用程序允許用戶與畫布進行交互，捕捉鼠標移動和點擊事件，實時繪制、擦除或操作元素。
HTML5畫布非常適合創(chuàng)建繪圖應(yīng)用程序，原因如下：
您可以使用HTML5 Canvas以以下方式為繪圖應(yīng)用程序設(shè)置HTML結(jié)構(gòu)：
<!DOCTYPE html>
<html>
<head>
<title>Drawing Application</title>
<style>
body {
margin: 3px;
padding: 6px;
font-size: 22px;
}
canvas {
border: 2px solid black;
}
.toolbar button,
#clearButton,
#saveButton {
padding: 15px;
font-size: 24px;
}
</style>
</head>
<body>
<h1>HTML Setup for a Drawing Application Using HTML5 Canvas</h1>
<canvas id="myCanvas" width="700" height="400"></canvas>
<button id="clearButton">Clear</button>
</body>
</html>結(jié)果：
在上面的示例中，我們通過添加帶有ID為“myCanvas”的畫布元素并分別指定其寬度和高度為700和400像素來構(gòu)建了繪圖應(yīng)用程序的HTML結(jié)構(gòu)。我們還在畫布下方包含了一個ID為“clearButton”的“清除”按鈕，為用戶提供了一種方便的方式來從畫布中刪除所有繪制的元素，并為新的繪圖創(chuàng)建一個空白畫布。
添加一些元素和功能，使用額外的HTML和CSS使繪圖應(yīng)用程序看起來更像一個應(yīng)用程序。例如，您可以添加一個工具欄、一個顏色調(diào)色板、一個畫筆大小和一個狀態(tài)欄。以下是一個示例，其中包含一些額外的元素，以增強繪圖應(yīng)用程序的外觀和布局：
<div class="toolbar">
<button id="pencilTool">Pencil</button>
<button id="brushTool">Brush</button>
<button id="eraserTool">Eraser</button>
<input type="color" id="colorPicker" />
<select id="brushSize">
<option value="1">1px</option>
<option value="3">3px</option>
<option value="5">5px</option>
</select>
</div>
<div class="color-palette">
<div class="color-swatch" style="background-color: black"></div>
<div class="color-swatch" style="background-color: red"></div>
<div class="color-swatch" style="background-color: green"></div>
<div class="color-swatch" style="background-color: blue"></div>
</div>
使用CSS進行樣式設(shè)置：
.toolbar {
margin-bottom: 12px;
}
.toolbar button {
padding: 10px;
margin-right: 7px;
background: white;
color: black;
border: none;
cursor: pointer;
}
.color-palette {
display: flex;
justify-content: center;
margin-bottom: 12px;
}
.color-palette .color-swatch {
width: 32px;
height: 32px;
border: 3px solid white;
cursor: pointer;
margin-right: 6px;
}
.status-bar {
padding: 7px;
background: white;
color: black;
}結(jié)果：
上面的例子包括了創(chuàng)建繪圖應(yīng)用所需的結(jié)構(gòu)和樣式，包括工具欄（帶有不同工具的按鈕，如鉛筆、畫筆、橡皮擦）、顏色調(diào)色板、畫筆大小選擇下拉菜單、繪圖畫布、狀態(tài)欄和清除按鈕。您可以根據(jù)所需的功能自定義這些元素。
沒有JavaScript功能，上述示例中的按鈕、顏色樣本和清除按鈕將不會執(zhí)行任何操作。要使用繪圖應(yīng)用程序，您必須添加相應(yīng)的JavaScript源代碼來處理功能和與畫布元素的交互。以下是您可以使用JavaScript處理畫布元素功能和交互的幾種方式：
const canvas = document.getElementById("myCanvas");
const context = canvas.getContext("2d");const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
let isDrawing = false;
let selectedTool = "pencil";
function startDrawing(event) {
isDrawing = true;
draw(event);
}
function draw(event) {
if (!isDrawing) return;
const x = event.clientX - canvas.offsetLeft;
const y = event.clientY - canvas.offsetTop;
ctx.lineTo(x, y);
ctx.stroke();
}
function stopDrawing() {
isDrawing = false;
ctx.beginPath();
}
canvas.addEventListener("mousedown", startDrawing);
canvas.addEventListener("mousemove", draw);
canvas.addEventListener("mouseup", stopDrawing);
canvas.addEventListener("mouseout", stopDrawing);
const clearButton = document.getElementById("clearButton");
clearButton.addEventListener("click", function() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
});
const colorSwatches = document.querySelectorAll(".color-swatch");
colorSwatches.forEach((swatch) => {
swatch.addEventListener("click", function() {
const color = this.style.backgroundColor;
ctx.strokeStyle = color;
});
});
const brushSizeSelect = document.getElementById("brushSize");
brushSizeSelect.addEventListener("change", function() {
const brushSize = this.value;
ctx.lineWidth = brushSize;
});
const pencilToolButton = document.getElementById("pencilTool");
pencilToolButton.addEventListener("mousedown", function() {
selectedTool = "pencil";
ctx.globalCompositeOperation = "source-over";
});
const brushToolButton = document.getElementById("brushTool");
brushToolButton.addEventListener("mousedown", function() {
selectedTool = "brush";
ctx.globalCompositeOperation = "multiply";
});
const eraserToolButton = document.getElementById("eraserTool");
eraserToolButton.addEventListener("mousedown", function() {
selectedTool = "eraser";
ctx.globalCompositeOperation = "destination-out";
});
const colorPicker = document.getElementById("colorPicker");
colorPicker.addEventListener("input", function() {
const color = this.value;
ctx.strokeStyle = color;
});結(jié)果：
在上面的示例中，繪圖應(yīng)用程序的功能被激活，您可以輕松地使用它來繪制您想要的內(nèi)容。請注意，現(xiàn)在所有的元素都在正常工作，您可以在畫布上繪制，選擇不同的繪圖工具（鉛筆、畫筆、橡皮擦），選擇顏色，調(diào)整畫筆大小，并清除畫布。
JavaScript代碼指定了HTML文檔中的畫布元素，獲取了2D繪圖上下文，并在HTML文檔的各個元素上設(shè)置了事件監(jiān)聽器，例如畫布、按鈕、顏色樣本和輸入字段。這些事件監(jiān)聽器響應(yīng)用戶的鼠標點擊、移動和值變化等操作。當觸發(fā)時，相應(yīng)的JavaScript函數(shù)根據(jù)用戶的操作修改畫布繪圖上下文（ctx）。
它從HTML文檔中選擇清除按鈕并添加一個點擊事件監(jiān)聽器。當點擊時，它使用2D繪圖上下文的clearRect方法清除整個畫布。例如，當您在畫布上點擊并拖動鼠標時，將調(diào)用 startDrawing 、 draw 和 stopDrawing 函數(shù)，這些函數(shù)跟蹤鼠標坐標并在畫布上繪制線條。
一款繪圖應(yīng)用程序允許您使用上述工具和功能創(chuàng)建數(shù)字藝術(shù)作品。它為用戶提供了一個畫布，可以繪制、繪畫和應(yīng)用不同的效果，以創(chuàng)建視覺組合。繪圖應(yīng)用程序被藝術(shù)家、設(shè)計師、愛好者和任何對通過創(chuàng)建視覺吸引人的插圖、繪畫、素描和其他數(shù)字藝術(shù)形式來表達創(chuàng)造力感興趣的人使用。
將HTML5畫布繪制保存為圖像文件可幫助您與他人分享繪畫或在其他應(yīng)用程序中使用。用戶可以將繪畫存儲在本地設(shè)備上，或通過提供將其保存為圖像文件的選項，將其上傳到各種平臺，如社交媒體、網(wǎng)站或在線畫廊。
此外，保存繪畫使用戶能夠稍后重新訪問和展示他們的創(chuàng)作，增強了繪畫應(yīng)用程序的可用性和價值。以下是如何將HTML5畫布繪制保存為圖像文件的方法：使用JavaScript，您可以將畫布繪制保存為圖像文件。使用畫布元素的 toDataURL() 方法。該方法將畫布內(nèi)容轉(zhuǎn)換為數(shù)據(jù)URL，可用于創(chuàng)建圖像文件。例如：
<button id="saveButton">Save</button>const canvas = document.getElementById('myCanvas');
const link = document.createElement('a');
function saveCanvasAsImage() {
const dataURL = canvas.toDataURL('image/png');
link.href = dataURL;
link.download = 'drawing.png';
link.click();
}
saveCanvasAsImage();在上面的示例中，添加了一個具有id“saveButton”的新按鈕元素，并添加了一個點擊事件監(jiān)聽器。當您點擊“保存”按鈕時，它會觸發(fā)一個函數(shù)，該函數(shù)使用 toDataURL() 來檢索畫布的數(shù)據(jù)URL。然后，它創(chuàng)建一個動態(tài)生成的鏈接元素，將數(shù)據(jù)URL設(shè)置為href屬性，并使用download屬性指定所需的文件名為“drawing.png”，以啟動圖像文件下載。
該方法支持不同的圖像格式，如PNG、JPEG和GIF。您可以通過修改所需文件的類型（例如JPEG格式的'image/jpeg'）來更改格式。保存后，您可以通過電子郵件、消息應(yīng)用程序或社交媒體平臺分享圖像文件。
利用HTML5畫布的繪圖應(yīng)用為藝術(shù)家、設(shè)計師、教育工作者和所有具有創(chuàng)造力的人打開了無限的可能性。無論是作為獨立工具還是集成到其他應(yīng)用程序中，繪圖應(yīng)用都賦予用戶表達創(chuàng)造力、與他人分享作品和探索視覺表達的新領(lǐng)域的能力。憑借其豐富的功能，繪圖應(yīng)用在藝術(shù)創(chuàng)作中繼續(xù)激發(fā)和取悅用戶。所以拿起你的數(shù)字畫筆，在可能性的畫布上盡情釋放你的想象力吧！
由于文章內(nèi)容篇幅有限，今天的內(nèi)容就分享到這里，文章結(jié)尾，我想提醒您，文章的創(chuàng)作不易，如果您喜歡我的分享，請別忘了點贊和轉(zhuǎn)發(fā)，讓更多有需要的人看到。同時，如果您想獲取更多前端技術(shù)的知識，歡迎關(guān)注我，您的支持將是我分享最大的動力。我會持續(xù)輸出更多內(nèi)容，敬請期待。
TML 是用來描述網(wǎng)頁的一種語言。
HTML 指的是超文本標記語言 (Hyper Text Markup Language)
HTML 不是一種編程語言，而是一種標記語言 (markup language)
標記語言是一套標記標簽 (markup tag)
HTML 使用標記標簽來描述網(wǎng)頁
HTML5 是最新的 HTML 標準。
HTML5 是專門為承載豐富的 web 內(nèi)容而設(shè)計的，并且無需額外插件。
HTML5 擁有新的語義、圖形以及多媒體元素。
HTML5 提供的新元素和新的 API 簡化了 web 應(yīng)用程序的搭建。
HTML5 是跨平臺的，被設(shè)計為在不同類型的硬件（PC、平板、手機、電視機等等）之上運行。
CSS 是一種描述 HTML 文檔樣式的語言。
CSS 描述應(yīng)該如何顯示 HTML 元素。
CSS 用于控制網(wǎng)頁的樣式和布局。
CSS3 是最新的 CSS 標準。
CSS3 被拆分為"模塊"。主要包括盒子模型、列表模塊、超鏈接方式、語言模塊、背景和邊框、文字特效、多欄布局等模塊。
CSS3的新特征有很多，例如圓角效果、圖形化邊界、塊陰影與文字陰影、使用RGBA實現(xiàn)透明效果、漸變效果、使用@Font-Face實現(xiàn)定制字體、多背景圖、文字或圖像的變形處理（旋轉(zhuǎn)、縮放、傾斜、移動）、多欄布局、媒體查詢等。
要實現(xiàn)如下效果：
HTML5:
<ruby>
少<rt>shào</rt>小<rt>xiǎo</rt>離<rt>lí</rt>家<rt>jiā</rt>老<rt>lǎo</rt>大<rt>dà</rt>回<rt>huí</rt>
</ruby>，
<ruby>
鄉(xiāng)<rt>xiāng</rt>音<rt>yīn</rt>無<rt>wú</rt>改<rt>gǎi</rt>鬢<rt>bìn</rt>毛<rt>máo</rt>衰<rt>cuī</rt>
</ruby>。使用說明 | |
line-break | 用于指定如何（或是否）斷行。除了Firefox，其它瀏覽器都支持。取值包括： |
word-wrap | 允許長單詞或URL地址換行到下一行。所有瀏覽器都支持。取值包括： |
word-break | 定義文本自動換行。Chrome和Safari瀏覽器支持不夠友好。取值包括： |
white-space | 設(shè)置如何處理元素中的空格。所有瀏覽器都支持。取值包括： |
要實現(xiàn)的效果：
CSS3：
p {
text-align: center;
font: bold 60px helvetica, arial, sans-serif;
color: #fff;
text-shadow: black 0.1em 0.1em 0.2em;
}要實現(xiàn)的效果：
CSS3：
p {
text-align: center;
font:bold 60px helvetica, arial, sans-serif;
color: red;
text-shadow: 0 0 4px white,
0 -5px 4px #ff3,
2px -10px 6px #fd3,
-2px -15px 11px #f80,
2px -25px 18px #f20;
}要實現(xiàn)的效果：
CSS3：
p {
text-align: center;
padding: 24px;
margin: 0;
font-family: helvetica, arial, sans-serif;
font-size: 80px;
font-weight: bold;
color: #D1D1D1;
background: #CCC;
text-shadow: -1px -1px white,
1px 1px #333;
}要實現(xiàn)的效果：
CSS3：
p {
text-align: center;
padding: 24px;
margin: 0;
font-family: helvetica, arial, sans-serif;
font-size: 80px;
font-weight: bold;
color: #D1D1D1;
background: #CCC;
text-shadow: 1px 1px white,
-1px -1px #333;
}要實現(xiàn)的效果：
CSS3：
#demo {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid red;
}要實現(xiàn)的效果：
CSS3：
#demo {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 100px solid red;
}要實現(xiàn)的效果：
CSS3：
#demo {
width: 0;
height: 0;
border-top: 50px solid transparent;
border-right: 100px solid red;
border-bottom: 50px solid transparent;
}要實現(xiàn)的效果：
CSS3：
#demo {
height: 0;
width: 120px;
border-bottom: 120px solid #ec3504;
border-left: 60px solid transparent;
border-right: 60px solid transparent;
}要實現(xiàn)的效果：
CSS3和HTML5：
<style type="text/css">
.bubble {
width: 200px; /*定義框大小，可忽略，讓消息框自由收縮*/
height: 50px;
background:hsla(93,96%,62%,1); /*定義背景色，必須與下面箭頭背景色一致*/
padding: 12px; /*增加補白，防止消息文本跑到框外*/
position: relative; /*定義定位包含框，方便定位箭頭*/
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px; /*圓角*/
}
.bubble:before {
content: ""; /*不顯示任何內(nèi)容*/
width: 0; /*定義箭頭內(nèi)容區(qū)大小*/
height: 0;
position: absolute; /*絕對定位*/
z-index:-1; /*顯示在消息框下面*/
}
.bubble.bubble-left:before {
right: 90%;
top: 50%;
-webkit-transform: rotate(-25deg);
-moz-transform: rotate(-25deg);
transform: rotate(-25deg); /*定位箭頭傾斜角度*/
/*定義箭頭長短、粗細*/
border-top: 20px solid transparent;
border-right: 80px solid hsla(93,96%,62%,1);
border-bottom: 20px solid transparent;
}
div {
margin:50px;
}
<div class="bubble bubble-left">左側(cè)消息提示框<br>class="bubble bubble-left"</div>要實現(xiàn)的效果：
CSS3：
html, body {
margin: 0;
padding: 0;
height: 100%;
}
body {
background: -webkit-repeating-linear-gradient(to top, #f9f9f9, #f9f9f9 29px, #ccc 30px);
background: repeating-linear-gradient( to top, #f9f9f9, #f9f9f9 29px, #ccc 30px );
background-size: 100% 30px;
position: relative;
}
body:before {
content: "";
display: inline-block;
height: 100%;
width: 4px;
border-left: 4px double #FCA1A1;
position: absolute;
left: 30px;
}需要實現(xiàn)的效果：
CSS3：
.box {
background: linear-gradient(-135deg, #f00 30px, #fff 30px, #162e48 32px);
color: #fff;
padding: 12px 24px;
}<script>
function setTab(cursel,n){
for(i=1;i<=n;i++){
var menu=document.getElementById("tab_"+i);
var con=document.getElementById("con_"+i);
menu.className=i==cursel?"hover":"";
con.style.display=i==cursel?"block":"none";
}
}
</script>
<div id="tab">
<div class="Menubox">
<ul>
<li id="tab_1" class="hover" onclick="setTab(1,4)">明星</li>
<li id="tab_2" onclick="setTab(2,4)">搞笑</li>
<li id="tab_3" onclick="setTab(3,4)">美女</li>
<li id="tab_4" onclick="setTab(4,4)">攝影</li>
</ul>
</div>
<div class="Contentbox">
<div id="con_1" class="hover" ><img src="images/1.png" /></div>
<div id="con_2" class="hide"><img src="images/2.png" /></div>
<div id="con_3" class="hide"><img src="images/3.png" /></div>
<div id="con_4" class="hide"><img src="images/4.png" /></div>
</div>
</div>
</body>CSS3：
tbody tr:nth-child(2n) {
background-color: #f5fafe;
}圓角表格的CSS3：
.bordered tr:last-child td:last-child {
-moz-border-radius: 0 0 6px 0;
-webkit-border-radius: 0 0 6px 0;
border-radius: 0 0 6px 0;
}單線表格的CSS3：
table {
*border-collapse: collapse; /* IE7 and lower */
border-spacing: 0;
width: 100%;
}設(shè)計圖片翹邊陰影效果：
CSS3：
.box {
width: 980px;
clear: both;
overflow: hidden;
height: auto;
margin: 20px auto;
}
.box li {
background: #fff;
float: left;
position: relative;
margin: 20px 10px;
border: 2px solid #efefef;
-webkit-box-shadow: 0 1px 4px rgba(0,0,0,0.27), 0 0 4px rgba(0,0,0,0.1) inset;
-moz-box-shadow: 0 1px 4px rgba(0,0,0,0.27), 0 0 4px rgba(0,0,0,0.1) inset;
-o-box-shadow: 0 1px 4px rgba(0,0,0,0.27), 0 0 4px rgba(0,0,0,0.1) inset;
box-shadow: 0 1px 4px rgba(0,0,0,0.27), 0 0 4px rgba(0,0,0,0.1) inset;
}
.box li img {
width: 290px;
height: 200px;
margin: 5px;
}
.box li:before {
content: "";
position: absolute;
width: 90%;
height: 80%;
bottom: 13px;
left: 21px;
background: transparent; /*透明背景*/
z-index: -2; /*顯示在照片的下面*/
box-shadow: 0 8px 20px rgba(0,0,0,0.8); /*添加陰影*/
-webkit-box-shadow: 0 8px 20px rgba(0,0,0,0.8);
-o-box-shadow: 0 8px 20px rgba(0,0,0,0.8);
-moz-box-shadow: 0 8px 20px rgba(0,0,0,0.8);
transform: skew(-12deg) rotate(-6deg); /*變形并旋轉(zhuǎn)陰影，讓其翹起*/
-webkit-transform: skew(-12deg) rotate(-6deg);
-moz-transform: skew(-12deg) rotate(-6deg);
-os-transform: skew(-12deg) rotate(-6deg);
-o-transform: skew(-12deg) rotate(-6deg);
}
.box li:after { /*在左側(cè)添加翹邊陰影*/
content: "";
position: absolute;
width: 90%;
height: 80%;
bottom: 13px;
right: 21px;
z-index: -2;
background: transparent;
box-shadow: 0 8px 20px rgba(0,0,0,0.8);
transform: skew(12deg) rotate(6deg);
-webkit-transform: skew(12deg) rotate(6deg);
-moz-transform: skew(12deg) rotate(6deg);
-os-transform: skew(12deg) rotate(6deg);
-o-transform: skew(12deg) rotate(6deg);
}
<ul class="box">
<li><img src="images/1.jpg" /></li>
<li><img src="images/2.jpg" /></li>
<li><img src="images/3.jpg" /></li>
</ul>ref
《HTML5+CSS3+JavaScript從入門到精通（實例版）》
-End-
*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
