在html网页中请问下面图是怎么用html语言实现的?
发布网友
发布时间：2022-04-26 16:57
共5个回答
热心网友
时间：2022-04-21 04:47
<!DOCTYPE>
<html>
<head>
<style type="text/css">
ul{
padding:0px;
}
#i{
font-style:italic;
}
a{
text-decoration:none;
color:#000000;
display:block;
border:1px solid #CDC9C9;
width:100px;
height:25px;
background-color:#f2f2f2;
font-weight:bold;
line-height:25px;}
a:hover{
border-left:5px solid #FF3030;
color:#FF3030;
background-color:#ffffff;
}
</style>
</head>
<body>
<ul>
<li id="i"><a href="#">Nature</a></li>
<li><a href="#">订阅e-alerts</a></li>
<li><a href="#">研究亮点</a></li>
<li><a href="#">评论亮点</a></li>
<li><a href="#">自然视频</a></li>
<li><a href="#">关于我们</a></li>
<li><a href="#">公司简介</a></li>
<li><a href="#">新闻稿</a></li>
<li><a href="#">致作者</a></li>
<li><a href="#">致广告商</a></li>
<li><a href="#">图书管理员门户</a></li>
<li><a href="#">关注我们的RSS</a></li>
<li><a href="#">帮助</a></li>
<li><a href="#">隐私*</a></li>
</ul>
</body>
</html>
如下：
热心网友
时间：2022-04-21 06:05
<html>
<head>
<style type="text/css">
ul {
background:#F3F3F3;
border:1px solid #D3D3D3;
width:160px;
padding:0;
}
li {
list-style:none;
height:22px;
padding-left:10px;
border-top:1px solid #D3D3D3;
padding-top:3px;
width:150px;
}
a {
text-decoration:none;
color:#555555;
font-family:"黑体";
font-size:14px;
}
a:hover {
color:#B1062E;
}
.show {
background:#ffffff;
border-left:8px solid #B1062E;
padding-left:2px;
}
</style>
<script type="text/javascript">
window.onload=function () {
var oUl=document.getElementById("oUl");
var aLi=document.getElementsByTagName("li");
for(var i=0;i<aLi.length;i++){
aLi[i].onmouseover=function() {
this.className='show';
}
aLi[i].onmouseout=function() {
this.className="";
}
}
}
</script>
</head>
<body>
<ul id="oUl">
<li style="border-top:none;"><a href="#">Nature</a></li>
<li><a href="#">订阅e-alerts</a></li>
<li><a href="#">研究亮点</a></li>
<li><a href="#">评论亮点</a></li>
<li><a href="#">自然视频</a></li>
<li><a href="#">关于我们</a></li>
<li><a href="#">公司简介</a></li>
<li><a href="#">新闻稿</a></li>
<li><a href="#">致作者</a></li>
<li><a href="#">致广告商</a></li>
<li><a href="#">图书管理员门户</a></li>
<li><a href="#">关注我们的RSS</a></li>
<li><a href="#">帮助</a></li>
<li><a href="#">隐私*</a></li>
</ul>
</body>
</html>
望楼主采纳
热心网友
时间：2022-04-21 07:39
<li><a href="#">内容</a></li>
<li><a href="#">内容</a></li>
<li><a href="#">内容</a></li>
.....
</ul>
布局就这样，下面说下样式ul{border: 1px solid #ccc} ul li{border-bottom:1px solid #ccc;background-color:xxx;font-weight:800;}a{padding-left:xxx(根据你前面红色那张图片来定);color#xxx; display:inline-block;width:xxx;height:xxx;line-height:xxx;}ul li a:hover{color:red;padding-left:xxx;background-color:#ffffff; background:url() no-repeat;}这里最好能把a的大小覆盖到跟你的li大小一样，这样的效果就能更好一些
热心网友
时间：2022-04-21 09:31
<li><a href="#">Nature</a></li>
<li><a href="#">Nature</a></li>
<li><a href="#">Nature</a></li>
<li><a href="#">Nature</a></li>
</ul>
当鼠标滑过时给li 下a 加个样式就可以了
热心网友
时间：2022-04-21 11:39
