① 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>