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

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

jiayuanCo

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

阅读量7.5k

点赞数

分类专栏： Web前端

本文链接：https://blog.csdn.net/jiayuanCo/article/details/51917599

版权

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

摘要由CSDN通过智能技术生成

</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;
  }
&l