设为首页
收藏本站
开启辅助访问
请
登录
后使用快捷导航
没有帐号?
立即注册
首页
课程设置
平面设计
室内设计
机械设计
园林景观设计
影视后期制作
论坛
老师加盟
登录
|
注册
搜索
搜索
本版
帖子
用户
快捷导航
室内设计学院
论坛
BBS
论坛
›
学院
›
平面设计学院
›
想做成天猫导航样子, 不知道对不对
返回列表
韩文强
0
主题
34
帖子
34
积分
新手上路
新手上路, 积分 34, 距离下一级还需 16 积分
新手上路, 积分 34, 距离下一级还需 16 积分
积分
34
加为好友
发送消息
访问家园
1
678
电梯直达
[提问]
想做成天猫导航样子, 不知道对不对
xiaofufu
|
注册会员
|
勤币 202
|
学币 0
发表于 2016-11-26 14:03
|
复制链接
|
打印
|
上一主题
|
下一主题
html+css网页前端课程
-
5.5.CSS3的其他常用属性
我加了过度效果,transition:0.3s。 但是总感觉不出来效果,数值我也调大过,感觉没差别。还有老师看下我的DIV 结构 错没,看下是用img标签做还是要用CCS 背景样式。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
*{ padding:0; margin:0;}
a{ text-decoration:none;}
ul{ list-style:none;}
.header{ width:100%; height:100px; background:#999999;}
.nav{ height:40px; width:100%; background:rgb(62,0,1);}
.nav ul{ width:980px; height:40px; background:rgb(221,31,31) ; margin:0 auto;}
.nav li{ float:left; position:relative;transition:0.3s; z-index:1; }
.nav li>a{ color:#fff; font-size:16px; text-align:center; line-height:40px; padding:0 30px; display:block;}
.nav li:hover>a{ background:rgb(221,39,39); color:#FFF}
.nav li a img{ display:none; transform:scale(0.5); position:absolute; top:0; left:0px; z-index:3}
.nav li:hover a>img{ display:block; top:-40px;}
.nav li .down{ width:150px; position:absolute; top:40px; left:0; display:none;}
.nav li .down a{ line-height:36px; color:#fff; display:block; padding-left:30px;
background:rgb(221,39,39); font-size:14px;}
.nav li:hover .down{ display:block}
</style>
</head>
<body>
<div class="header"></div>
<div class="nav">
<ul>
<li>
<a href="#">首页<img src="tianm_1.png" alt=""/></a>
<div class="down">
<a href="#">列表值</a>
<a href="#">列表值</a>
<a href="#">列表值</a>
<a href="#">列表值</a>
</div>
</li>
<li>
<a href="#">分类<img src="tianm_1.png" alt=""/></a>
<div class="down">
<a href="#">列表值</a>
<a href="#">列表值</a>
<a href="#">列表值</a>
<a href="#">列表值</a>
<a href="#">列表值</a>
<a href="#">列表值</a>
</div
></li>
<li>
<a href="#">案例展示
<img src="tianm_1.png" alt=""/></a>
<div class="down">
<a href="#">列表值</a>
<a href="#">列表值</a>
<a href="#">列表值</a>
<a href="#">列表值</a>
</div
></li>
<li>
<a href="#">练习我们<img src="tianm_1.png" alt=""/></a>
<div class="down">
<a href="#">列表值</a>
<a href="#">列表值</a>
</div
></li>
<li>
<a href="#">在线留言<img src="tianm_1.png" alt=""/></a>
</li>
</ul>
</div>
</body>
</html>
复制代码
点赞
26
哪些同学觉得很赞!
lori棒棒糖
觉得很赞
昵昵妹
觉得很赞
潜意式
觉得很赞
龙猫1212
觉得很赞
大大大表哥
觉得很赞
依仔101
觉得很赞
西卡
觉得很赞
一品数码
觉得很赞
热爱生活热爱家
觉得很赞
我叫大帅比
觉得很赞
举报
使用道具
|
回复
共1个回复 最后回复于 2016-11-28 19:51
韩文强
积分
34
0
主题
34
帖子
34
积分
新手上路
新手上路, 积分 34, 距离下一级还需 16 积分
新手上路, 积分 34, 距离下一级还需 16 积分
积分
34
加为好友
发送消息
访问家园
韩文强
新手上路
勤币 77
学币 0
沙发
发表于 2016-11-28 19:51:57
|
只看该作者
是不是想要做出下滑菜单的效果啊,使用CSS是解决不了的,transition的过渡不能让display:block和display:none,有缓慢的过渡效果的,想要实现下滑菜单,就需要结合javascript的交互特效了。
举报
使用道具
回复
支持
反对
返回列表
B
Color
Image
Link
Quote
Code
Smilies
高级模式
您需要登录后才可以回帖
登录
|
立即注册
本版积分规则
发表回复
回帖后跳转到最后一页
快速回复
返回顶部
返回列表