① html5怎麼設置網頁過渡效果
步驟1 創建空白的HTML 5模版
首先，我們創建一個空白的模版，代碼很簡單，如下所示：
復制代碼
步驟2 增加HTML 5新標簽 HTML 5中新增加了不少標簽，如：
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section
在頁面模版中，我們需要確保每個區域都能正確地對齊，因此需要使用HEADER、 NAVIGATION、 CONTENT、 SIDEBAR和Footer這些標簽。代碼如下所示：
復制代碼
讀者可能留意到這里使用的div id=」wrapper」，這個是稍候用來做meida query的時候調整全局CSS樣式調整用的 步驟3 往HTML 5標簽中增加代碼
1）首先往標題中增加如下代碼：
Simple HTML5 Template
復制代碼
2）往導航標簽中添加如下代碼，這樣很方便地構件了一個簡單的頁面分類導航：
Home About Parent Page Child
One Child Two with child Child One Child
Two Child Three Child Three
Contact
復制代碼
3）使用標簽來描述每一個要展示的內容實體,比如要展示的是多篇文章列表,其中的每一篇文章的具體內容就可以使用標簽了。如下代碼所示：
This is a title for post
Richard KS 20th March 2013 Tutorials HTML5, CSS3
and Responsive 10 Comments Lorem
Ipsum is simply mmy text of the printing and typesetting instry.
Lorem Ipsum has been the instry's standard mmy text ever since the
1500s
復制代碼
4）添加標簽 HTML5提供的元素標簽用來表示當前頁面或文章的附屬信息部分，可以包含與當前頁面或主要內容相關的引用、側邊欄、廣告、nav元素組，以及其他類似的有別與主要內容的部分。
根據目前的規范，元素有兩種使用方法：
被包含在中作為主要內容的附屬信息部分，其中的內容可以是與當前文章有關的引用、詞彙列表等。
在之外使用，作為頁面或站點全局的附屬信息部分；最典型的形式是側邊欄(sidebar)，其中的內容可以是友情鏈接、附屬導航或廣告單元等。
代碼如下：
Categories Category 1 Category 2
Parent Category Child One Child Two
Grandchild One Grandchild Two Grandchild Three
Child Three Category 3
Text Lorem Ipsum is simply mmy
text of the printing and typesetting instry.
復制代碼
5）加上最後的標簽，代碼為：
Copyright@ 2013 HTML5.com Privacy Policy - About Us
復制代碼
步驟4 增加CSS樣式
首先創建一個空白的樣式，如下：
[/code] 然後在http://necolas.github.com/normalize.css/中下載這個css,然後將其內容復制到該空白的文件中代碼如下： [code]body {
font-family: arial, sans-serif;
font-size: 100%; /* best for all browser using em */
padding:0;
margin:0;
}
*, html { line-height: 1.6em; }
article img { width:auto; max-width:100%; height:auto; }
.sidebar a, article a, header a, footer a { color: #C30; }
header a { text-decoration: none; }
#wrapper {
font-size: 0.8em; /* 13px from 100% global font-size */
max-width: 960px; /* standard 1024px wide */
margin: 0 auto;
}
/* css for */
header { padding: 1em 0; margin: 0px; float: left; width: 100%;
}
header hgroup { width: 100%; font-weight:normal; }
/* css for */
nav
{ display: block; margin: 0 0 2em; padding: 0px;
float: left; width: 100%; background-color: #181919;
}
nav ul ul {display: none;}
nav ul li:hover > ul {display: block;}
nav
ul { padding: 0; list-style: none; position:
relative; display: inline-table; z-index: 9999;
margin: 0px; float: left; width: 100%;
}
nav ul:after {content: ""; clear: both; display: block;}
nav ul li {float: left;}
nav ul li:hover a {color: #fff;}
nav
ul li a { display: block; padding: 1em; font-size:
1.125em; color: #ccc; text-decoration: none;
margin: 0px; background-color: #000; border-right: 1px
solid #333;
}
nav ul li:last-of-type a {border-right: 1px solid transparent !important;}
nav
ul ul { background: #5f6975; border-radius: 0px;
padding: 0; position: absolute; top: 100%; width:
auto; float: none;
}
nav ul li:hover { background: #5f6975; color: #FFF;
}
nav ul ul li a:hover { background-color: #4b545f;
}
nav ul ul li {
float: none;
border-bottom: 1px solid #444240;
position: relative;
}
nav ul ul li a {
padding: 0.5em 1em;
font-size: 1em;
width:10em;
color: #fff;
}
nav ul ul ul {
position: absolute; left: 100%; top:0;
}
/* css for */
section.content { width: 70%; float:left; }
.content article { width:100%; float:left; padding: 0 0 1em; margin: 0 0 1em; border-bottom: 1px solid #ddd; }
article .entry { clear:both; padding: 0 0 1em; }
h1.post-title { font-size: 1.8em; margin:0; padding:0;}
.entry.post-meta { color: #888; }
.entry.post-meta span { padding: 0 1em 0 0; }
.entry.post-content { font-size: 1.125em; margin:0; padding:0;}
/* css for */
aside.sidebar { width: 25%; float:right; }
aside.sidebar ul { width:100%; margin: 0px; padding: 0px; float: left; list-style: none;
}
aside.sidebar
ul li { width:100%; margin: 0px 0px 2em; padding:
0px; float: left; list-style: none;
}
aside.sidebar ul li ul li { margin: 0px 0px 0.2em; padding: 0px;
}
aside.sidebar
ul li ul li ul li { margin: 0px; padding: 0px 0px 0px
1em; width: 90%; font-size: 0.9em;
}
aside.sidebar
ul li h3.widget-title { width:100%; margin: 0px;
padding: 0px; float: left; font-size: 1.45em;
}
/* css for */
footer { width: 98%; float:left; padding: 1%; background-color: white; margin-top: 2em;
}
footer .footer-left { width: 45%; float:left; text-align:left; }
footer .footer-right { width: 45%; float:right; text-align:right; }
復制代碼
步驟5 為移動應用使用@media query查詢 為了進行響應式設計，最佳的方案是使用@media query去進行查詢，在上面的CSS代碼中添加如下代碼：
/* ipad 768px */
@media only screen and (min-width:470px) and (max-width:770px){
body { background-color: red; } #wrapper { width:96%; font-size: 0.6875em; }
section.content, aside.sidebar { width:100%; }
}
/* iphone 468px */
@media only screen and (min-width:270px) and (max-width:470px){
body { background-color: yellow; } #wrapper { width:96%; font-size: 0.6875em; }
section.content, aside.sidebar { width:100%; }
}
復制代碼
步驟6 增加jquery,modernizer和html5shiv到標簽中 這里推薦使用Modernizr 和html5shiv，它們都是一個能在多種瀏覽器中通過運行各種腳本兼容運行支持大部分HTML 5標簽的插件。我們將它們和jQuery庫放在標簽前
② 有關web前端的問題 怎麼可以做出如下圖的這種效果
這個不是很簡單嗎，那幾個圖片標簽綁定hover事件，再加個dropdown-menu顯示滑鼠懸停時候出現的東西
③ HTML5多個過渡動畫怎麼在滑鼠滑動的時候同時顯示，也就是不同對象的動畫同時顯示效果，本人初學……
要同時顯示就要同時觸發動畫，可以在HTML上把這3個box組織在一處，放在同一個父容器里，再用CSS同時觸發。示例：
<divclass="father">
<divclass="box1">0.5s</div>
<divclass="box2">1s</div>
<divclass="box3">2s</div>
</div>
同時觸發的CSS：
.father:hover>.box1{/*box1動畫*/}
.father:hover>.box2{/*box2動畫*/}
.father:hover>.box3{/*box3動畫*/}
④ 在web前端里,用css怎麼實現半形的效果
如果網頁背景是白色的，可以設一個小的span定在想實現半形的那個地方，設置寬高為0，給設置邊框 例如
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>帶缺角的水平菜單 </title>
<style>
#menu{ font-family:Arial; font-size:14px; }
#menu a , #menu a:visited{ float:left; display:block; position:relative; background:#c00;color:#fff; text-decoration:none; padding:6px ; margin:1px 0 0 1px ; }
#menu a span{ height:0; width:0; border-bottom:6px solid #c00; border-left: 6px solid #fff; position:absolute; top:0;left:0; overflow:hidden;}
#menu a:hover{ color:#333; background:#f90;}
#menu a:hover span{ border-bottom:6px solid #f90;}
</style>
</head>
<body>
<div id="menu">
<a href="#"><span class="left"></span>Home</a>
<a href="#"><span class="left"></span>Contact Us</a>
<a href="#"><span class="left"></span>Web Dev</a>
<a href="#"><span class="left"></span>Web Design</a>
<a href="#"><span class="left"></span>Map</a>
</div>
</body>
</html>
⑤ 網頁設計中，怎樣製作出鏈接的內容滑鼠滑過就會動的那種效果
你是說文字下陷那種效果？
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>網頁特效|Linkweb.cn/Js|---超鏈接陷下效果</title>
</head>
<body>
<style>
A:link,A:visited ,A:active {TEXT-DECORATION: none}
A:hover {text-decoration : none; position : relative; top : 1px; left : 1px}
</style>
<A HREF="http://linkweb.cn/js">來來，都到這里來……</A>
</body>
</html>
⑥ CSS滑鼠經過圖片變亮,移開變變暗效果代碼怎麼寫
1、打開hbuilder，在空白的html文件上面設置一個div，給div一個class並命名為img：
⑦ JS滑鼠滑動特效和HTML的a:hover之類的 那個好些
糾正LZ
1.a:什麼的 叫css 超鏈接偽類
2.a:visiter後面是D，指訪問過的。
解釋：
a:link超鏈接未被訪問（默認）狀態，
a:hover滑鼠滑過超鏈接的狀態
a:visited已訪問過的鏈接的樣式（默認是紫色）
回答問題
從代碼來說，css要簡單點；
畢竟css是現成的代碼，做起來要省力許多，而且看起來方便，便於維護。
js代碼一是多，復雜，if elseif 的太多了亂 不容易恢復 不好維護。
建議LZ再重溫下css偽類的知識。
ps.在有些時候，css的代碼也可能會變得復雜js反而會簡單，請根據實際情況來定。
⑧ html如何實現滑鼠懸停顯示文字，滑鼠移走文字消失。
最簡單的做法，給標簽增加title屬性，並賦上要顯示的內容，也就是添加title屬性即可。
代碼：
<div title="全部內容">部分內容</div>
註：title 屬性常與 form 以及 a 元素一同使用，以提供關於輸入格式和鏈接目標的信息。同時它也是 abbr 和 acronym 元素的必需屬性。
(8)webhover特效擴展閱讀：
HTML的title屬性的用法
1、HTML的title屬性,當游標移動到該標簽時，信息提示框內的內容
</body>
<hr>
<p title="HTML的標簽真多啊!">屬性選擇器</p>
</body>
2、設置標簽樣式時指定屬性css樣式
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!--頁面內容關鍵字-->
<meta name="keywords" content="頁面內容關鍵字">
<title>css:是層疊樣式表</title>
<!--外部樣式-->
<link rel="stylesheet" type="text/css" href="css1.css">
<style type="text/css">
/*有tittle屬性*/
[title] {
color: darkmagenta;
}
/*指定tittle屬性值*/
[title=t] {
color: red;
}
</style>
</head>
<body>
<hr>
<p title="HTML的標簽真多啊!">屬性選擇器</p>
<hr>
<p title="t">屬性選擇器指定屬性值</p>
</body>
</html>