css+div的一些menu

最新推荐文章于 2024-08-03 20:42:48 发布
最新推荐文章于 2024-08-03 20:42:48 发布
阅读量496 收藏
点赞数
文章标签： div menu css class url server
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cykjydxs/article/details/6494053
版权

1

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>无标题页</title>
    <style type="text/css">
        a{ display:block; float:left;}
       .menu1{ width:525px; padding-left:25px;}
       .menu1 a:link,.menu1 a:visited{ width:117px; height:32px; margin-right:4px; color:#fff; text-decoration:none; text-align:center; padding-top:10px;}
       .menu1 a.a1{ background-image:url(Images/bg20_btn1.jpg); }
       .menu1 a.a2{ background-image:url(Images/bg20_btn2.jpg); }
       .menu1 a.a3{ background-image:url(Images/bg20_btn3.jpg); }
       .menu1 a.a4{ background-image:url(Images/bg20_btn4.jpg); }
       .menu1 a:hover,.menu1 a:active{ background-position:left -54px;}

    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
       <div class="menu1">
          <a href="#" class="a1">首页</a>
          <a href="#" class="a2">公司简介</a>
          <a href="#" class="a3">产品展示</a>
          <a href="#" class="a4">联系我们</a>
       </div>
    </div>
    </form>
</body>
</html>

 

 

 

2

 

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>无标题页</title>
    <style type="text/css">
       a{ display:block; float:left;}
      .menu2{width:380px; height:41px;}
      .menu2 a.a1{ width:97px; background-image:url(Images/bg18_btn1.jpg);}
      .menu2 a.a2{ width:93px; background-image:url(Images/bg18_btn2.jpg);}
      .menu2 a.a3{ width:97px; background-image:url(Images/bg18_btn3.jpg);}
      .menu2 a.a4{ width:93px; background-image:url(Images/bg18_btn4.jpg);}
      .menu2 a{ color:#fff; text-align:center; text-decoration:none; height:30px; padding-top:11px;}
      .menu2 a:hover{ background-position:left -41px;}
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
       <div>
         
          <div class="menu2">
             <a href="#" class="a1">首页</a>
             <a href="#" class="a2">公司简介</a>
             <a href="#" class="a3">产品展示</a>
             <a href="#" class="a4">联系我们</a>
          </div>
       </div>
    </div>
    </form>
</body>
</html>

 

3

 

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>无标题页</title>
    <style type="text/css">
        a{ display:block; float:left;}
       .menu3{ width:484px; height:52px; }
       .menu3 a.a1{ background-image:url(Images/bg17_btn.jpg); width:121px;}
       .menu3 a.a2{ background-image:url(Images/bg17_btn.jpg); width:121px;}
       .menu3 a.a3{ background-image:url(Images/bg17_btn.jpg); width:121px;}
       .menu3 a.a4{ background-image:url(Images/bg17_btn.jpg); width:121px;}
       .menu3 a{ text-align:center; text-decoration:none; padding-top:16px; color:#ffffff; height:36px; }
       .menu3 a:hover,.menu3 a:active{ background-position:left -52px;}
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
       <div class="menu3">
          <a href="#" class="a1">首页</a>
          <a href="#" class="a2">公司简介</a>
          <a href="#" class="a3">企业新闻</a>
          <a href="#" class="a4">产品展示</a>
       </div>
    </div>
    </form>
</body>
</html>

 

 

4

 

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>无标题页</title>
    <style type="text/css">
       .menu4{ width:970px; height:48px;}
      
       .menu4 .content{ background-image:url(Images/nav_bg.gif); background-repeat:repeat-x; float:left;}
       .menu4 .content li{ width:88px; height:48px; padding-left:15px; padding-right:13px; background-image:url(Images/nav_li_right.gif); background-repeat:no-repeat; line-height:48px; text-align:center; float:left; list-style:none; background-position:center right;}
       .menu4 .content li a{ display:block; width:88px; height:48px; color:#fff; text-decoration:none; }
       .menu4 .content li a:hover{ background-image:url(Images/nav_li_hover.gif); background-repeat:no-repeat; line-height:37px;}
       .menu4 .content li em{ background-image:url(Images/bid_new.gif); background-repeat:no-repeat; width:35px; height:21px; top:-20px; position:absolute; left:40px;}
       .menu4 .content li.current{ line-height:37px; background-image:url(Images/nav_li_current.gif); background-repeat:no-repeat; background-position:top center;}
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
   
       <div class="menu4">
       
             <ul class="content">
                <li class="current"><a href="http://www.codefans.net" title="首页" target="_blank"><span>首页</span></a></li>
                <li><a href="#" ><span>网页特效</span></a></li>
                <li><a href="#"><span>源码下载</span></a></li>
                <li style="position:relative;"><a href="#" ><span>导航菜单</span></a><em></em></li>
                <li><a href="#" ><span>溶图素材</span></a></li>
                <li><a href="#" ><span>常用代码</span></a></li>
             </ul>
         
       </div>
    </div>
    </form>
</body>
</html>
 

 

 

5

 

 

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>无标题页</title>
    <style type="text/css">
       .menu4 { list-style:none; height:35px; background-image:url(Images/pro_four0.gif);}
       .menu4 li {float:left;}
       .menu4 li a {display:block; float:left; height:35px; line-height:35px; color:#aaa; text-decoration:none;  text-align:center; padding:0 20px 0 14px; font-size:12px;}
      
       .menu4 li.current a {color:#fff; background-image:url(Images/pro_four2.gif);  }
   
       .menu4 li a:hover {color:#fff; background-image:url(Images/pro_four1.gif);}
      
       .menu4 li.current a:hover {color:#fff; background-image:url(Images/pro_four1.gif); }
    

    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
       <div>
          <ul class="menu4">
             <li><a href="#">源码爱好者</a></li>
             <li><a href="#">更新日志</a></li>
             <li class="current"><a href="#">热点排行</a></li>
             <li><a href="#">给我留言</a></li>
             <li><a href="#">我是谁？</a></li>
             <li><a href="#">欢迎合作</a></li>
          </ul>
       </div>
    </div>
    </form>
</body>
</html>
 

app_code
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
css+div 菜单
03-15
在创建CSS+Div菜单时，一些关键的样式属性包括： 1. `display`: 控制元素的显示方式，如`inline-block`或`block`，这会影响菜单项的排列方式。 2. `position`: 设定元素的位置，如`relative`、`absolute`或`fixed`...
css+div经典代码大全
06-17
标题：“css+div经典代码大全” 描述：此资源提供了一系列CSS与DIV结合的经典代码实例，旨在帮助前端开发者理解和掌握如何运用CSS对DIV元素进行样式设计和布局控制，从而实现复杂且美观的网页界面。 标签：“Css...
DIV中menu的作法
weixin_30363817的博客
11-17 190
HTML:<div id="menu"><ul><li>1</li><li>2</li><li>3</li></ul></div><div id="wrapper"> CSS:#menu { position: relative; he...
Jquery+CSS Menu菜单
kongwei521的专栏
12-18 1425
效果图： HTML代码： WMS-入库查询及确认 WMS-出库查询 退出 系统 CSS代码： /* 导航菜单css */ /*导航菜单背景*/ #bar { width: 100%; height: 35px; padding: 15px 0; backgr
一直以来使用div menu下拉时flash总是覆盖div menu菜单，当时就很老火了。
07-24 1441
一直以来使用div menu下拉时flash总是覆盖div menu菜单，当时就很老火了，今天在网上搜索找到下面解决方法。有两种方法，一种就是设置flash为透明： 但是如果你在DW中插入动画，再加 是不生效的。要把整个的flash插件代码换成如下： 对比一下，和DW自动生成的代码是有区别的，测试过，IE　FF　均可以。 第二种方法：设置flash置底，加个代码： 但是只加这个代码，I
CSS实现下拉菜单
老徐的博客只有干货
04-09 2354
1.知识点 定位postition 浮动float 展示display 2.实现效果 3.代码 <!DOCTYPE html> <html> <head> <title>下拉菜单</title> <meta charset="utf-8"> <style> ul { list-...
css实现menu菜单
吾娱生活的专栏
07-29 1163
效果如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>menu菜单</title> <style type="text/css" media="all"> #menu{ display: block; box-siz...
CSS+DIV布局案例.pdf
10-04
《CSS+DIV布局详解》 CSS（Cascading Style Sheets）和DIV是网页设计中用于构建页面布局的重要工具。在本文中，我们将深入探讨如何利用CSS+DIV进行页面布局，包括如何实现页面居中、添加头部和尾部，以及如何引入...
CSS+DIV常用方法说明
05-16
本文将深入探讨CSS+DIV的一些核心概念和实用技巧，帮助读者更好地掌握网页布局的艺术。 #### CSS+DIV布局基础 1. **盒模型**：CSS的盒模型定义了元素的大小、填充、边框和边界。`<div>`作为块级元素，默认占据整行...
css+div代码讲解.pdf
10-02
在CSS和HTML结合的网页设计中，`div`元素与CSS样式是构建页面结构和样式的基石。在上述示例中，我们看到了几个常见的布局模式和CSS规则的应用。 首先，一列固定宽度居中的布局展示了如何使一个元素在页面中水平居中...
DIV+CSS编写的Menu
星月无恒
06-26 978
DIV+CSS编写的Menu
div 中id和class使用讲解
热门推荐
zhangxiaowei
06-13 5万+
在div 标签中，我们比较常见的属性是id 和class,那么这两个属性有什么区别吗？今天就来看看这两者的区别。其实id 和class是大部分标签都有的属性。其作用是让CSS或者JavaScript找到DOM元素并操作。     首先看看这两个属性在html中是如何使用的。 解释上面的代码， id="loading"，意思是定义了一个id，它的值是“loading”； class="
div+css 制作横向导航菜单
wl_haanel的专栏
05-19 3万+
好，开始上课！                前三节课，我们知道了什么是“块状元素和内联元素”，以及xHTML+CSS布局的核心概念“盒子模型”，同时又学习了一下页面布局中两种方法中的一种方法“浮动”，这次我们就利用这三个概念，来制作一款经典的导航条，别看它其貌不扬，可是网上所有的导航条都可以在它的基础上演变而来~，厉害吧~！其实理论都是一样的，只要你能理解并学会这节课的内容，以后再困难的导航
DIV设计菜单栏
dumiaoxin的博客
06-21 1872
chap1:&lt;!DOCTYPE HTML&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;垂直居中&lt;/title&gt; &lt;style&gt; html,body{ width:100%;
复杂的菜单样式
weixin_30642561的博客
09-29 90
<title>带字体</title><style type="text/css">body{background-color:#999;}#menu{font-size:16px;width:140px;margin:0 auto;border:solid 1px #ccc;}#menu a,#menu a:visited{text-deco...
【小技巧】CSS如何实现文字溢出显示省略号
最新发布
qq_65034569的博客
08-03 117
是一种常见的文本截断技术，用于在文本内容超出其容器宽度时，提供一种视觉上的提示，表明文本已被截断。在列表项或者导航菜单中，经常会在列表项或导航菜单中，由于空间有限，当文本内容较长时，可以使用省略号显示文本已被截断。这个方法很多地方都会用到，我们可以直接复制下来，写在一个公共样式当中，下次直接使用类名即可(当然，文字省略了之后，也要得找个时机让他的文字完全显示的做法，只需要设置一个。方法非常简单，只需要添加以下👇三句话就可以实现啦🥳！伪类，让鼠标经过的时候显示全。设置不允许换行，强制文字一行显示。
制作一个学校的主页，使用CSS+DIV布局
04-23
好的，我可以提供一些指导和建议来制作一个学校的主页，使用CSS DIV布局。 首先，你需要了解CSS DIV布局基本的思路和概念。CSS中的DIV是一个可以用于包含HTML元素的容器，可以被用来组织和布局网页内容。通过设置DIV的属性和样式，可以控制和调整网页布局，包括位置、大小和样式等。 接下来，你可以开始构建你的学校主页。首先，你需要设计一个基本的网页框架，包括页眉、页脚和主要内容区域。然后，你可以将页面划分为若干个DIV区域，用于包含不同的内容和元素，例如菜单、图片、文字等。根据需要，你可以设置DIV的属性和样式，例如位置、宽度、高度、边框、颜色、背景等。 以下是一些CSS DIV布局的示例代码。 HTML代码： ``` <!DOCTYPE html> <html> <head> <title>学校主页</title> <style> /* 页眉 */ .header { background-color: #333; color: #fff; padding: 10px; text-align: center; } /* 菜单 */ .menu { background-color: #f5f5f5; border: 1px solid #ccc; margin: 10px; padding: 10px; text-align: center; } /* 图片 */ .picture { border: 1px solid #ccc; margin: 10px; padding: 10px; text-align: center; } /* 文字 */ .text { border: 1px solid #ccc; margin: 10px; padding: 10px; } /* 页脚 */ .footer { background-color: #333; color: #fff; padding: 10px; text-align: center; } </style> </head> <body> <div class="header"> <h1>欢迎来到学校主页</h1> </div> <div class="menu"> <h2>菜单</h2> <ul> <li><a href="#">首页</a></li> <li><a href="#">学生信息</a></li> <li><a href="#">教师信息</a></li> <li><a href="#">课程信息</a></li> </ul> </div> <div class="picture"> <img src="http://example.com/school.jpg" alt="学校图片"> </div> <div class="text"> <h2>学校简介</h2> <p>这里是学校的简介。我们提供高质量的教学和培训服务，帮助学生取得优异成绩。</p> </div> <div class="footer"> <p>版权所有 © 2021 学校名称</p> </div> </body> </html> ``` 在上面的示例代码中，我们定义了五个DIV区域，分别是页眉、菜单、图片、文字和页脚。通过设置不同的样式和属性，我们可以实现不同的布局效果。当然，这只是一个简单的示例，你可以根据具体需求和设计要求进行更加复杂和丰富的页面布局和设计。 希望这些信息对你有所帮助，如果你有其他问题或需要更多信息，可以随时向我提问。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值