CSS实现竖排导航栏/图像选择【HTML/JS】

最新推荐文章于 2024-03-18 18:05:55 发布

jiayuanCo

最新推荐文章于 2024-03-18 18:05:55 发布

阅读量7.5k

点赞数

分类专栏： Web前端

本文链接：https://blog.youkuaiyun.com/jiayuanCo/article/details/51917599

版权

Web前端专栏收录该内容

3 篇文章

订阅专栏

这个示例展示了如何使用CSS来创建一个竖直排列的导航栏，其中链接元素具有平滑的过渡效果。同时，它还包括了一个响应式的图像展示区，当鼠标悬停在图片上时，图片会呈现不同的边框效果和透明度变化。导航栏的链接包括'首页'、'新闻'、'联系我们'和'关于我们'。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

</pre><pre name="code" class="css"><!DOCTYPE html>
<html lang="zh-cn">
<head>
<style>
/*导航栏*/
ul
  {
  list-style-type:none;
  margin:0;
  padding:0;
  }
ul a:link,ul a:visited
  {
  display:block;
  float:left /*position margin*/
  padding:4px;
  width:120px;

  color:#FFFFFF;
  background-color:#bebebe;
  

  font-weight:bold;
  text-align:center; 
  text-decoration:none;
  text-transform:uppercase;
  }
ul a:hover,ul>a:active
  {
  background-color:#cc0000;
  }
  
/*图片区域*/
div.img
  {
  margin:3px;
  border:1px solid #bebebe;
  height:auto;
  width:auto;
  float:left;
  text-align:center;
  }
div.img img
  {
  opacity:1.0;
  display:inline;
  margin:3px;
  border:1px solid #bebebe;
  }
div.img a:hover img
  {
  opacity:0.9;
  border:12px solid #333333;
  }
div.desc
  {
  text-align:center;
  font-weight:normal;
  width:150px;
  font-size:12px;
  margin:10px 5px 10px 5px;
  }
</style>
</head>
<body>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>

<br></br>
<div class="img">
  <a target="_blank" href="/i/tulip_ballade.jpg">
  <img src="tulip1.jpg" alt="Ballade" width="160" height="160">
  </a>
 <div class="desc"><a href="http://inankai.cn">IMAGE DESCRIPTION</a></div>
</div>

<div class="img">
  <a target="_blank" href="/i/tulip_flaming_club.jpg">
  <img src="tulip2.jpg" alt="Ballade" width="160" height="160">
  </a>
  <div class="desc">IMAGE DESCRIPTIONS</div>
</div>

</body>
</html>