设为首页收藏本站
开启辅助访问 切换到窄版

仓酷云

 找回密码
 立即注册
搜索
热搜: 活动 交友 discuz
仓酷云»社区 › 软件教程 Design › Dreamweav(DW) › 来讲讲：CSS3网页制造教程:Action:hovert
返回列表 发新帖
查看: 807|回复: 8
打印 上一主题 下一主题

[DIV+CSS] 来讲讲：CSS3网页制造教程:Action:hovert

[复制链接]
变相怪杰 该用户已被删除
跳转到指定楼层
楼主
发表于 2015-1-15 22:58:36 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

您需要 登录 才可以下载或查看，没有帐号？立即注册

x
有了CSS，我们不再需要用FONT标签或者透明的1pxGIF图片来控制标题，改变字体颜色，字体样式等等
破洛洛文章简介：CSS3完成多种Action:hovert效果。
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/>
<title>Action:hovertpoluoluo.com</title>
<style>
body{background-color:#333;}
.main{background-color:#fff;}
.g160,.g320,.g480,.g640,.g800,.g960,.g80,.g240,.g400,.g560,.g720,.g880{background:transparent;}
html,body,div,span,object,iframe,
h1,h2,h3,h4,h5,h6,p,blockquote,pre,
a,abbr,acronym,address,code,
del,dfn,em,img,q,dl,dt,dd,ol,ul,li,
fieldset,form,label,legend,
table,caption,tbody,tfoot,thead,tr,th,td{
margin:0;
padding:0;
border:0;
font-weight:inherit;
font-style:inherit;
font-size:100%;
font-family:inherit;
vertical-align:baseline;
}
/*Tablesstillneedcellspacing="0"inthemarkup.*/
table{border-collapse:separate;border-spacing:0;}
caption,th,td{text-align:left;font-weight:normal;}
table,td,th{vertical-align:middle;}
/*Removepossiblequotemarks(")from<q>,<blockquote>.*/
blockquote:before,blockquote:after,q:before,q:after{content:"";}
blockquote,q{quotes:"""";}
/*Removeannoyingborderonlinkedimages.*/
aimg{border:none;}
/*
GoldenGrid-CSSLibrary
Author:VladimirCarrer
*/
/*CSSGrid*/

.main{margin:0auto;width:970px;padding-top:10px;}
.g160,.g320,.g480,.g640,.g800,.g960,.g80,.g240,.g400,.g560,.g720,.g880,.g960{float:left;display:inline;margin-left:10px;}
/*6columns*/
.g160{width:150px;}
.g320{width:310px;}
.g480{width:470px;}
.g640{width:630px;}
.g800{width:790px;}
.g960{width:950px;}
/*12columns*/
.g80{width:70px;}
.g240{width:230px;}
.g400{width:390px;}
.g560{width:550px;}
.g720{width:710px;}
.g880{width:870px;}
/*margin*/
.ml80{margin-left:90px;}
.ml160{margin-left:170px;}
.ml240{margin-left:250px;}
.ml320{margin-left:330px;}
.ml400{margin-left:410px;}
.ml480{margin-left:490px;}
.ml560{margin-left:560px;}
.ml640{margin-left:650px;}
.ml720{margin-left:730px;}
.ml800{margin-left:810px;}
.ml880{margin-left:890px;}
.ml960{margin-left:970px;}
.inside{margin-left:0;}
p.grid{padding-left:10px;}

.clear{clear:both;}
.clearfix,.main{display:block;}
.clearfix:after,.main:after{
visibility:hidden;
display:block;
font-size:0;
content:"";
clear:both;
height:0;
}
body{font:75%/1.5em"lucidagrande","lucidasansunicode",sans-serif;}
p{padding:001em0;color:#111;}
p.first:first-letter{float:left;font-family:Palatino,PalatinoLinotype,Georgia,sans-serif;font-size:3em;font-weight:700;line-height:1em;margin-bottom:-0.2em;padding:0.2em0.1em00;}
pimg{float:left;margin:0.3em0.833em0.833em0;padding:0;}
pimg.right{float:right;margin:0.3em00.833em0.833em;}

h1,h2{font-weight:normal;color:#333;font-family:Georgia,"TimesNewRoman",serif;}
h3,h4,h5,h6{font-weight:normal;color:#333;font-family:Georgia,"TimesNewRoman",serif;}

h1{font-size:2.2em;margin-bottom:0.682em;}
h2{font-size:1.9em;margin-bottom:0.79em;}
h3{font-size:1.7em;margin-bottom:0.882em;}
h4{font-size:1.4em;margin-bottom:1.071em;}
h5,h6{font-size:1.3em;margin-bottom:1.154em;}
/*Colorpalete*/
.water{color:#5582d1;}
.earth{color:#4e3e2c;}
.air{color:#f1fff7;}
.fire{color:#ff8a19;}
.wine{color:#4a040a;}
.beer{color:#F0C030;}
.caffe{color:#473523;}
.caffe-cream{color:#b68d3d;}
.espresso{color:#2c1901;}
.caramel{color:#ab671f;}
.chocolate{color:#290200;}
.black-pepper{color:#444334;}
.pepper-lite{color:#8d8a72;}
.lipstick{color:#c20c0c;}

liul,
liol{margin:01.5em;}
ul,ol{margin:01.5em1.5em1.5em;}

dl{margin:001.5em0;}
dldt{font-weight:bold;}
dldd{margin-left:1.5em;}
a{color:#035292;text-decoration:none;}
a:hover{text-decoration:underline;}

table{margin-bottom:1.5em;border-collapse:collapse;}
th{font-weight:bold;}
tr,th,td{margin:0;padding:01.5em01em;height:18px;}
tfoot{font-style:italic;}
caption{text-align:center;font-family:Georgia,serif;}

abbr,acronym{border-bottom:1pxdotted#000;}
address{margin-top:1.5em;font-style:italic;}
del{color:#000;}

blockquote{padding:1em1em1em1.5em;font-family:baskerville,"palatinolinotype",serif;}
blockquote>*:first-child:before{content:"201C";font-size:2.5em;margin-left:-.62em;font-family:georgia,serif;padding-right:.2em;color:#aaa;line-height:0;}/*FromTripoli*/
strong{ont-weight:bold;}
em,dfn{font-style:italic;}
dfn{font-weight:bold;}
pre,code{margin:1.5em0;white-space:pre;}
pre,code,tt{font:1emmonospace;line-height:1.5;}
tt{display:block;margin:1.5em0;}
hr{margin-bottom:1.5em;}
/*othersmallthings*/
.tc{text-align:center;}
.tr{text-align:right;}
.tl{text-align:left;}
.b{font-weight:bold;}
.i{font-style:italic;}
.indent{text-indent:1.5em;}
.open{font-variant:small-caps;}
p.break{text-align:center;text-indent:0;line-height:0;}
p.zero{padding:0;margin:0}
p.one{padding:01em1em1em;color:#111;}
pimg.right10{float:right;margin:0.833em;}
.oldbook{font-family:"BookAntiqua","WarnockPro","GoudyOldStyle","Palatino",Georgia,serif;}
.note{font-family:Georgia,"TimesNewRoman",Times,serif;font-style:italic;font-size:0.9em;margin:0.1em;color:#333;}
.mono{font-family:"CourierNew",Courier,monospace;}

/*CSSActionFramework*/
/*Onmou搜索引擎优化ver*/
.h-scale:hover{
-webkit-transform:scale(1.5);
-moz-transform:scale(1.5);
-o-transform:scale(1.5);
transform:scale(1.5);
}

.h-translate:hover{
-moz-transform:translate(-10px,-10px);
-webkit-transform:translate(-10px,10px);
-o-transform:translate(-10px,10px);
transform:translate(-10px,10px);
}
.h-rotate:hover{
-moz-transform:rotate(50deg);
-webkit-transform:rotate(50deg);
-o-transform:rotate(50deg);
transform:rotate(50deg);
}
.h-box-shadow:hover{
-moz-box-shadow:2px2px2px#666;
-webkit-box-shadow:2px2px2px#666;
box-shadow:2px2px2px#666;
}

.h-multitransform:hover{
-moz-transform:rotate(70deg)scale(1.5);
-webkit-transform:rotate(70deg)scale(1.5);
-o-transform:rotate(70deg)scale(1.5);
transform:rotate(70deg)scale(1.5);
}
.h-hide:hover{
-webkit-transition-duration:3s;
-moz-transition-duration:3s;
-o-transition-duration:3s;
opacity:0;
}

/*OnClick*/

.a-scale:active{
-webkit-transform:scale(1.5);
-moz-transform:scale(1.5);
-o-transform:scale(1.5);
transform:scale(1.5);
}

.a-translate:active{
-moz-transform:translate(-10px,-10px);
-webkit-transform:translate(-10px,10px);
-o-transform:translate(-10px,10px);
transform:translate(-10px,10px);
}
.a-rotate:active{
-moz-transform:rotate(50deg);
-webkit-transform:rotate(50deg);
-o-transform:rotate(50deg);
transform:rotate(50deg);
}
.a-box-shadow:active{
-moz-box-shadow:2px2px2px#666;
-webkit-box-shadow:2px2px2px#666;
box-shadow:2px2px2px#666;
}
.a-multitransform:active{
-moz-transform:rotate(70deg)scale(1.5);
-webkit-transform:rotate(70deg)scale(1.5);
-o-transform:rotate(70deg)scale(1.5);
transform:rotate(70deg)scale(1.5);
}
.a-hide:active{
-webkit-transition-duration:3s;
-moz-transition-duration:3s;
-o-transition-duration:3s;
opacity:0;
}
/*Target*/

.t-scale:target{
-webkit-transform:scale(1.5);
-moz-transform:scale(1.5);
-o-transform:scale(1.5);
transform:scale(1.5);
}

.t-translate:target{
-moz-transform:translate(-10px,-10px);
-webkit-transform:translate(-10px,10px);
-o-transform:translate(-10px,10px);
transform:translate(-10px,10px);
}
.t-rotate:target{
-moz-transform:rotate(50deg);
-webkit-transform:rotate(50deg);
-o-transform:rotate(50deg);
transform:rotate(50deg);
}
.t-box-shadow:target{
-moz-box-shadow:2px2px2px#666;
-webkit-box-shadow:2px2px2px#666;
box-shadow:2px2px2px#666;
}
.t-multitransform:target{
-moz-transform:rotate(70deg)scale(1.5);
-webkit-transform:rotate(70deg)scale(1.5);
-o-transform:rotate(70deg)scale(1.5);
transform:rotate(70deg)scale(1.5);
}
.t-hide:target{
-webkit-transition-duration:3s;
-moz-transition-duration:3s;
-o-transition-duration:3s;
opacity:0;
}
</style>
</head>
<body>

<divclass="main">
<divclass="g960">
<h1>Action:hover摘自：<ahref="http://wwwpoluoluo.com">www.poluoluo.com</a></h1>
<h5class="note">LookManoJavaScript</h5>
<br/>
</div>
<divclass="clear"></div>
<divid="a"class="g160h-scale"style="border:2pxsolidred;height:150px">鼠标过去缩小</div>
<divclass="clear"></div>
<divid="b"class="g160h-translate"style="border:2pxsolidred;height:150px">鼠标过去移位</div>
<divclass="clear"></div>
<divid="c"class="g160h-rotate"style="border:2pxsolidred;height:150px">鼠标过去扭转45度</div>
<divclass="clear"></div>
<divid="d"class="g160h-box-shadow"style="border:2pxsolidred;height:150px">鼠标过去投影效果</div>
<divclass="clear"></div>
<divid="e"class="g160h-multitransform"style="border:2pxsolidred;height:150px">鼠标过去扭转</div>
<divclass="clear"></div>
<divid="f"class="g160h-hide"style="border:2pxsolidred;height:150px">鼠标过去渐渐变淡</div>
<divclass="clear"></div>
</div>

</body>
</html>

</p>
更方便搜索引擎的搜索。用只包含结构化内容的HTML代替嵌套的标签，搜索引擎将更有效地搜索到你的内容，并可能给你一个较高的评价(ranking)。
background, content, 网页制作, address, iframe

相关帖子
回复

使用道具 举报

谁可相欹 该用户已被删除
沙发
发表于 2015-1-17 20:07:16 | 只看该作者
经过两天的学习，总算对Dreamweaver有进一步的了解了，心中不免有些激动。今天和其他几位老师交流了一下，感觉受益匪浅.
回复 支持 反对

使用道具 举报

爱飞 该用户已被删除
板凳
发表于 2015-1-26 22:28:44 | 只看该作者
只要我们努力，无论是怎样的艰难险阻，成功依然会迎面直击。在刚开始时我觉得dreamweaver mx XX很难理解。
回复 支持 反对

使用道具 举报

若相依 该用户已被删除
地板
发表于 2015-2-5 05:14:59 | 只看该作者
Dreamweaver8中文版(dw)是由Macromedia公司开发的一款所见即所得的网页编辑器。和二维动画设计软件FLASH，专业网页图像设计软件FIREWORKS，并称为“网页三剑客”。
回复 支持 反对

使用道具 举报

分手快乐 该用户已被删除
5#
发表于 2015-2-11 06:52:04 | 只看该作者
滚动条)层属性--溢出(visible/hidden/scroll/auto)
回复 支持 反对

使用道具 举报

不帅 该用户已被删除
6#
发表于 2015-3-2 00:28:48 | 只看该作者
我深感到交流的重要。善于交流的人才是善于学习的人。在整个技术的学习过程中，我总结了四大定律：兴趣、恒心、虚心、时间。
回复 支持 反对

使用道具 举报

若天明 该用户已被删除
7#
发表于 2015-3-11 03:37:12 | 只看该作者
每天上网看着那样多的网页，于是我才下定决心选择了网页制作这一门课程，目的就是希望以后能够做出一个完美的网页来。
回复 支持 反对

使用道具 举报

简单生活 该用户已被删除
8#
发表于 2015-3-17 21:12:14 | 只看该作者
难以逾越的障碍会大大打击你的学习积极性。这就需要你的恒心，坚持不懈的决心。在自己无法解决某些问题时，就需要虚心请教别人.
回复 支持 反对

使用道具 举报

柔情似水 该用户已被删除
9#
发表于 2015-3-25 06:55:37 | 只看该作者
是当我和赵丽芬崔明艳老师进行交流后，很快就了解了还不太清楚的内容和并不了解的知识（像布局表格、绘制布局单元格等）。
回复 支持 反对

使用道具 举报

返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|Archiver|手机版|仓酷云 鄂ICP备14007578号-2

GMT+8, 2024-4-20 07:01

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表