css 制作一个菜单列表

最新推荐文章于 2024-06-06 10:41:53 发布

健康平安的活着

最新推荐文章于 2024-06-06 10:41:53 发布

阅读量450

点赞数 1

分类专栏： css 文章标签： css sass html

本文链接：https://blog.csdn.net/u011066470/article/details/124940336

版权

css 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

该博客展示了如何使用HTML和CSS创建一个具有特定样式的纵向菜单。代码中定义了样式，包括背景图片、边框和内联元素的样式，以实现菜单项的分隔和不同状态的视觉差异。菜单包含'新闻'和'娱乐'两个选项，通过无序列表呈现。

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

一案例

1.页面代码

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
  <style type="text/css">
  body{font-size:12px; font-family:"宋体"}
  .menu{ border:#dbbdbd 1px solid; background:url(images/bg.jpg) #d1e7ff repeat-x; width:140px;}
  .menu-title{border-top:#ffffff 2px solid;hight:25px;background:#d3d3d3;text-align:center;line-height:25px;}
  li{list-style-type:none;height:22px; test-align:center;font-weight:bold;line-height:22px;}
  .ic{ border-top:#ffffff 1px solid; border-bottom:#d8d8d8 1px solid}
  .ic2{background:url(images/ic1.gif) no-repeat left 2px;}
  .ic3{background:url(images/ic2.gif) no-repeat left 2px;}
  </style>
 </head>
 <body>
  <div class="menu">
  <div class="menu-title"> 纵向菜单</div>
  <ul class="u1">
   <li class="ic ic2"> <a href="#">新闻</a></li>
   <li class="ic ic3"><a href="#">娱乐</a></li>
   </ul>
   </div>
 </body>
</html>

2.页面效果

健康平安的活着

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css 制作一个菜单列表

一案例1.页面代码<!doctype html><html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="
复制链接

扫一扫