div+css怎样实现鼠标移上去出现这样的样式
13个回答
展开全部
分析如下：
首先你要把代码写好，百左边是1级目录列表，度右边是2级目录列表，然后2级目录最大的知div用display:none先隐藏起来，道用hover。
当鼠标经过1级目录时，给2级目录最回大的div添加display:block属性答让它显示出来。
扩展资料：
1、精简的代码，使用DIV+CSS布局，页面代码精简，这一点相信对XHTML有所了解的都知道。代码精简提高了百度蜘蛛的爬行效率以及高效性，能在最短的时间内爬完整个页面，同时这样对收录质量有一定好处;
2、提高访问速度、增加用户体验性
使得加载速度得到很大的提高，那么用户点击页面的等待时间就越少，用户体验性的增加相应的带来就是网站受到搜索引擎的喜欢，进而提高网站排名。
3、div+css结构清晰，很容易被搜索引擎搜索到，天生就是适合优化seo，降低网页大小，让网页体积变得更小。注意：div+css结构清晰、精简，不意味着可以全部用div+css结构，比如通篇HTML标签全DIV的，貌似除了<head>之上及<body>之上及之外，其它全是<div>。
就如同整个HTML是一万个毫不相干的内容拼装起来，或者通篇是<div><ul><li>结构的，就如同这个页面所有元素全是列表。事实上这两种情况还相当普遍，因为曲解了“DIV+CSS”的真实含义，也许根本就不应该有这个说法，因为一个完整页面几乎不可能仅仅DIV+CSS就能完成。
参考资料来源：百度百科-div+css
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
ul,li{margin:0;padding:0;list-style:none;}
ul.nav{width:160px;border:1px solid #CCC;}
ul.nav li{border-bottom:1px solid #f3f3f3;}
ul.nav li.last{border-bottom:none;}
ul.nav li a{font-size:13px;display:block;height:30px;line-height:30px;padding:0 15px 0 5px;position:relative;text-decoration:none;}
ul.nav li a:focus{outline:none;}
ul.nav li a b{color:#369;}
ul.nav li a:hover{background-color:#FFF;}
ul.nav li a:hover b{color:#F00;}
ul.nav li a i.arrow{position:absolute;font-size:14px;font-style:normal;right:0px;width:15px;text-align:center;}
ul.subnav{float:left;position:absolute;top:-1px;right:-302px;width:300px;border:1px solid #CCC;background-color:#FFF;display:none;}
ul.subnav li{float:left;border-bottom:none;}
ul.subnav li{padding:0 10px;color:#333 !important;}
ul.subnav li.first{border-left:1px solid #FFF;position:relative;left:-1px;}
ul.nav li a:hover ul.subnav{display:block;}
</style>
</head>
<body>
<ul class="nav">
<li class="first">
<a href="javascript:void(0)">
<b class="title">菜单1</b>
<i class="arrow">></i>
<ul class="subnav">
<li class="first">子菜单11</li>
<li>子菜单12</li>
<li>子菜单13</li>
<li>子菜单14</li>
<li>子菜单15</li>
<li>子菜单16</li>
<li>子菜单17</li>
<li>子菜单12</li>
<li>子菜单13</li>
<li>子菜单14</li>
<li>子菜单15</li>
<li>子菜单16</li>
<li>子菜单17</li>
<li>子菜单12</li>
<li>子菜单13</li>
<li>子菜单14</li>
<li>子菜单15</li>
<li>子菜单16</li>
<li>子菜单17</li>
<li>子菜单12</li>
<li>子菜单13</li>
<li>子菜单14</li>
<li>子菜单15</li>
<li>子菜单16</li>
<li>子菜单17</li>
</ul>
</a>
</li>
<li class="last">
<a href="javascript:void(0)">
<b class="title">菜单2</b>
<i class="arrow">></i>
<ul class="subnav">
<li class="first">子菜单21</li>
<li>子菜单22</li>
</ul>
</a>
</li>
</ul>
</body>
</html>
懒得找素材 有点简陋 IE6有问题，这么写 IE6有些样式不兼容，但又何必去考虑他呢。xp系统都要走进历史了，IE6在国外已被淘汰，基本已没人用，只有中国盗版猖狂，肆意泛滥，IE6才这么广泛。
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
ul,li{margin:0;padding:0;list-style:none;}
ul.nav{width:160px;border:1px solid #CCC;}
ul.nav li{border-bottom:1px solid #f3f3f3;}
ul.nav li.last{border-bottom:none;}
ul.nav li a{font-size:13px;display:block;height:30px;line-height:30px;padding:0 15px 0 5px;position:relative;text-decoration:none;}
ul.nav li a:focus{outline:none;}
ul.nav li a b{color:#369;}
ul.nav li a:hover{background-color:#FFF;}
ul.nav li a:hover b{color:#F00;}
ul.nav li a i.arrow{position:absolute;font-size:14px;font-style:normal;right:0px;width:15px;text-align:center;}
ul.subnav{float:left;position:absolute;top:-1px;right:-302px;width:300px;border:1px solid #CCC;background-color:#FFF;display:none;}
ul.subnav li{float:left;border-bottom:none;}
ul.subnav li{padding:0 10px;color:#333 !important;}
ul.subnav li.first{border-left:1px solid #FFF;position:relative;left:-1px;}
ul.nav li a:hover ul.subnav{display:block;}
</style>
</head>
<body>
<ul class="nav">
<li class="first">
<a href="javascript:void(0)">
<b class="title">菜单1</b>
<i class="arrow">></i>
<ul class="subnav">
<li class="first">子菜单11</li>
<li>子菜单12</li>
<li>子菜单13</li>
<li>子菜单14</li>
<li>子菜单15</li>
<li>子菜单16</li>
<li>子菜单17</li>
<li>子菜单12</li>
<li>子菜单13</li>
<li>子菜单14</li>
<li>子菜单15</li>
<li>子菜单16</li>
<li>子菜单17</li>
<li>子菜单12</li>
<li>子菜单13</li>
<li>子菜单14</li>
<li>子菜单15</li>
<li>子菜单16</li>
<li>子菜单17</li>
<li>子菜单12</li>
<li>子菜单13</li>
<li>子菜单14</li>
<li>子菜单15</li>
<li>子菜单16</li>
<li>子菜单17</li>
</ul>
</a>
</li>
<li class="last">
<a href="javascript:void(0)">
<b class="title">菜单2</b>
<i class="arrow">></i>
<ul class="subnav">
<li class="first">子菜单21</li>
<li>子菜单22</li>
</ul>
</a>
</li>
</ul>
</body>
</html>
懒得找素材 有点简陋 IE6有问题，这么写 IE6有些样式不兼容，但又何必去考虑他呢。xp系统都要走进历史了，IE6在国外已被淘汰，基本已没人用，只有中国盗版猖狂，肆意泛滥，IE6才这么广泛。
追问
恩恩，我看看
本回答被网友采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
首先你要把代码写好，左边是1级目录列表，右边是2级目录列表，然后2级目录最大的div用display:none先隐藏起来，用hover，当鼠标经过1级目录时，给2级目录最大的div添加display:block属性 让它显示出来
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>list</title>
<style type="text/css">
<!--
* {margin:0; padding:0;}
ul,li { list-style:none;}
a { text-decoration:none;}
a:hover {text-decoration:underline;}
.nav { width:150px; margin:20px;}
.nav li { height:25px; line-height:25px; background:#ccc; border-bottom:1px solid #999966; position:relative;}
.more { display:inline-block; width:200px; position:absolute; left:150px; top:0; background:#99cc33; display:none;}
.more a { font-size:12px; margin-right:8px;}
.nava:hover .more { display:block;}
-->
</style>
</head>
<body>
<div class="nav">
<ul>
<li class="nava"><a href="#">执业资格</a><span class="more"><a href="#">子栏目1</a><a href="#">子栏目1</a><a href="#">子栏目1</a><a href="#">子栏目1</a><a href="#">子栏目1</a><a href="#">子栏目1</a><a href="#">子栏目1</a><a href="#">子栏目1</a><a href="#">子栏目1</a><a href="#">子栏目1</a></span></li>
<li class="nava"><a href="#">外语类</a><span class="more"><a href="#">子栏目2</a><a href="#">子栏目2</a><a href="#">子栏目2</a><a href="#">子栏目2</a><a href="#">子栏目2</a><a href="#">子栏目2</a><a href="#">子栏目2</a><a href="#">子栏目2</a></span></li>
<li class="nava"><a href="#">学历类</a><span class="more"><a href="#">子栏目3</a><a href="#">子栏目3</a><a href="#">子栏目3</a><a href="#">子栏目3</a><a href="#">子栏目3</a><a href="#">子栏目3</a><a href="#">子栏目3</a></span></li>
<li class="nava"><a href="#">计算机类</a><span class="more"><a href="#">子栏目4</a><a href="#">子栏目4</a><a href="#">子栏目4</a><a href="#">子栏目4</a><a href="#">子栏目4</a><a href="#">子栏目4</a><a href="#">子栏目4</a><a href="#">子栏目4</a><a href="#">子栏目4</a><a href="#">子栏目4</a><a href="#">子栏目4</a></span></li>
</ul>
</div>
</body>
</html>
本回答被网友采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（11）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
