html5/css3怎么写以下这种效果,最好有详细代码,给高分!
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了html5/css3怎么写以下这种效果,最好有详细代码,给高分!相关的知识,希望对你有一定的参考价值。
鼠标滑过图片淡入一个白色外边框加投影.
最重要的是要有淡入效果,不要js效果。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>淡入阴影效果</title>
<style type="text/css">
* margin:0px; padding:0;
body color:#666; font:16px/1.5 '微软雅黑',Arial, Helvetica, sans-serif;
img border:0 none;
.ullist float:left; list-style:none; width:100%;
.ullist li background:#eee; float:left; margin:10px; width:228px;
.ullist li a border:10px solid #fff; color:#666; display:inline-block; text-decoration:none;
.ullist li a:hover box-shadow:0 0 10px #666; transition:all 0.40s ease-in-out;
.fcr color:#f00;
</style>
</head>
<body>
<ul class="ullist">
<li><a href="#"><img src="1.jpg" alt="" />詹二锋-野色风情<br/><span class="fcr">¥40,000</span></a></li>
<li><a href="#"><img src="1.jpg" alt="" />詹二锋-野色风情<br/><span class="fcr">¥40,000</span></a></li>
</ul>
</body>
</html>
给你写了一个例子,运行一下,就可以了。
追问这就是我想要的效果, 非常感谢,虽然有点小问题,不过已经调好了;请问css3有没有比较全面的学习网站。
参考技术A看看吧~希望对你有帮助
只写了谷歌的hank(用谷歌浏览器打开或者360浏览器)
要兼容其他浏览器需要把其他的也加上
你可以把其他的加上
.box:hover box-shadow:0 0 10px #EEE;<div class="box"></div>
希望能帮助您,谢谢!
请清楚问题!我要的是css3边框投影淡入淡出效果。
追答.box width:100px; height:250px; border:solid 1px #ccc; background:#FFF; -webit-transition:all .3s linear 参考技术C 用hover行吗?hover之后加投影,
我也不确定,随便说说
html+css这个列表效果怎样做出来的?
如题
参考技术A这个可以这么组织结构。不知道你的js或者jq如何。
我先大概写一下
<div class="tree"><dl>
<dt><a href="javascript:;">A一级第一个</a></dt>
<dd style="display:none;">
<ul>
<li>A二级第一个</li>
<li>A二级第二个</li>
<li>A二级第三个</li>
</ul>
</dd>
</dl>
<dl>
<dt><a href="javascript:;">B一级第二个</a></dt>
<dd style="display:none;">
<ul>
<li>B二级第一个</li>
<li>B二级第二个</li>
<li>B二级第三个</li>
</ul>
</dd>
</dl>
<dl>
<dt><a href="javascript:;">C一级第三个</a></dt>
<dd style="display:none;">
<ul>
<li>C二级第一个</li>
<li>C二级第二个</li>
<li>C二级第三个</li>
</ul>
</dd>
</dl>
</div>
大概结构可以像这样,当然,样式你要先写好,还可以无限制的扩展,用其他的标签也可以
效果是这样的,开始的时候,每个dl的dt都是可见的,而dd都是不可见的。
当点击了每个dt之后,它对应的dd则变为可见
<script type="text/javascript">function tree()
var obj = $('.tree');
obj.find('dt').click(function()
$(this).siblings('dd').toggle();
)
$(funciton()
tree();
)
</script>追问
不太会JS,只会css+div,你这个怎么提示有语法错误呢!!
追答额。。这个你要先引入一个jquery.js才行。。原生的js我也不会,只会jq的,你可以到网上搜一下jquery,然后下载一个。。。
在页面中引入一下
应该很容易就找到 参考技术C 可以看看这个效果,http://bbs.miaov.com/forum.php?mod=viewthread&tid=228&highlight=%E8%8F%9C%E5%8D%95追问
这个可以用,谢谢
本回答被提问者采纳 参考技术D 你用js做很容易实现。 第5个回答 2013-08-30 jQuery 或者js 控制下追问能给点代码么- -
以上是关于html5/css3怎么写以下这种效果,最好有详细代码,给高分!的主要内容,如果未能解决你的问题,请参考以下文章