CSS弹出二级多列菜单和DIV布局实例 - 仿IBM官网首页

最新推荐文章于 2023-03-28 20:17:29 发布
最新推荐文章于 2023-03-28 20:17:29 发布
阅读量1.8k 收藏 1
点赞数
分类专栏： 原创教程 .Net 文章标签： css w3c div 网页二级弹出菜单 div布局
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/bcbobo21cn/article/details/45559547
版权
.Net 同时被 2 个专栏收录
383 篇文章 14 订阅
订阅专栏
原创教程
190 篇文章 6 订阅
订阅专栏

图



顶层CSS菜单，弹出二级菜单，二级菜单多列；

主体部分三个DIV布局； 这个是IBM官网布局的样子；


代码，拿去花吧；我的奶酪很多；

有不清楚的地方可以问我，qq 513979805


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">


<head>
  <title></title>


  <Style>


  #pageHeader {
    BACKGROUND: url(../images/header_back.jpg) repeat-x; MARGIN: 0px auto; WIDTH: 940px; HEIGHT: 99px; z-index:10000
}
#pageHeader TABLE TD {
    VERTICAL-ALIGN: top
}
#pageHeader TD.miscIcons IMG {
    MARGIN: 0px 3px
}
#pageHeader DIV.accountLinks {
    VERTICAL-ALIGN: top; PADDING-TOP: 10px; HEIGHT: 20px
}
#pageHeader DIV.accountLinks LI {
    BACKGROUND-POSITION: left 5px; PADDING-LEFT: 15px; FLOAT: rightright; MARGIN-LEFT: 10px; BACKGROUND-REPEAT: no-repeat; LIST-STYLE-TYPE: none
}
#pageHeader DIV.accountLinks LI A {
    FONT-WEIGHT: bold; FONT-SIZE: 11px; COLOR: white
}
#pageHeader .contactPhone{
    POSITION: relative; TOP: 25px; TEXT-ALIGN: center;
}
#pageHeader .contactPhone A{
    font-size:11px; color:#FFF; font-weight:bold
}
#pageHeader DIV.topSearchFromBox {
    MARGIN: 7px 0px
}
#pageHeader DIV.topSearchFromBox INPUT[type=text] {
    BORDER-TOP-WIDTH: 0px; PADDING-RIGHT: 3px; PADDING-LEFT: 3px; BORDER-LEFT-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; WIDTH: 250px; COLOR: #999; PADDING-TOP: 0px; HEIGHT: 23px; BORDER-RIGHT-WIDTH: 0px
}
#pageHeader DIV.topSearchFromBox INPUT[type=submit] {
    FONT-WEIGHT: bold; WIDTH: 95px; COLOR: #666
}
#pageHeader .topSubMenu LI {
    BORDER-RIGHT: white 1px solid; PADDING-RIGHT: 7px; PADDING-LEFT: 7px; FLOAT: rightright; PADDING-BOTTOM: 0px; PADDING-TOP: 0px; LIST-STYLE-TYPE: none
}
#pageHeader .topSubMenu LI A {
    FONT-WEIGHT: bold; FONT-SIZE: 11px; COLOR: white
}
#pageHeader .topSubMenu LI:first-child {
    PADDING-RIGHT: 0px; BORDER-RIGHT-WIDTH: 0px
}


/* menu-bar */
.menu-bar {
    MARGIN: 0px left; WIDTH: 940px;Z-INDEX:99999;position: relative;
}
.menu-bar UL {
    PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px
}
.menu-bar LI {
    PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px
}
.menu-bar A {
    FONT: bold 14px Garamond,serif; COLOR: #333
}
.menu-bar .main-menu {
    PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; BORDER-LEFT: #ccc 1px solid; PADDING-TOP: 0px; LIST-STYLE-TYPE: none; HEIGHT: 32px
}
.menu-bar .main-menu LI.topLevel {
    BORDER-RIGHT: #ccc 1px solid; FLOAT: left; VERTICAL-ALIGN: middle; PADDING-TOP: 6px; POSITION: relative; HEIGHT: 26px; TEXT-ALIGN: center
}
.menu-bar LI:hover {
    Z-INDEX: 128000; BACKGROUND-COLOR: #666
}
.menu-bar LI:hover A {
    COLOR: #fff; TEXT-DECORATION: none
}
.menu-bar LI:hover .sub-menu {
    DISPLAY: inline; Z-INDEX: 99999
}
.menu-bar LI:hover .sub-menu A {
    FONT: 12px Arial,sans-serif; COLOR: #9d0013
}
.menu-bar .sub-menu {
    BORDER-RIGHT: #9d0013 1px solid; PADDING-RIGHT: 17px; BORDER-TOP: #9d0013 1px solid; DISPLAY: none; PADDING-LEFT: 17px; LEFT: 0px; PADDING-BOTTOM: 11px; BORDER-LEFT: #9d0013 1px solid; PADDING-TOP: 11px; BORDER-BOTTOM: #9d0013 1px solid; WHITE-SPACE: nowrap; POSITION: absolute; TOP: 31px; BACKGROUND-COLOR: #fffdf0; TEXT-ALIGN: left
}
.menu-bar .sub-menu UL {
    PADDING-RIGHT: 0px; PADDING-LEFT: 0px; MARGIN-BOTTOM: 6px; PADDING-BOTTOM: 0px; MARGIN-RIGHT: 10px; PADDING-TOP: 0px; LIST-STYLE-TYPE: none; rem-float: left
}
.menu-bar .sub-menu LI.sub-menu-li {
    rem-line-height: 20px
}
.menu-bar .sub-menu LI.sub-menu-li A {
    PADDING-RIGHT: 5px; PADDING-LEFT: 5px; FLOAT: none; PADDING-BOTTOM: 2px; COLOR: #9d0013; PADDING-TOP: 2px; LIST-STYLE-TYPE: none; TEXT-ALIGN: left
}
.menu-bar .sub-menu LI.sub-menu-li:hover {
    rem-background-color: #9D0013
}
.menu-bar .sub-menu LI.sub-menu-li:hover A {
    TEXT-DECORATION: underline
}
.menu-bar .sub-menu LI:hover {
    BACKGROUND-COLOR: transparent
}  


/* div */
.divup {
background-color: #505050
}


.divmiddle {
}


.divdown {


}


#layout1 { height: 300px; width: auto; background: #505050; }
#layout2 { height: 300px; width: auto; background: ; }
#layout3 { height: 300px; width: auto; background: #505050; }
#layout4 { height: 100px; width: auto; background: #404040; }


  </Style>


</head>


<body>


<DIV class=menu-bar>
<UL class=main-menu>
  <LI class=topLevel style="WIDTH: 139px"><A  href=""><img src="logo2.png" style="padding-top:0px"></img></A></LI>
  <LI class=topLevel style="WIDTH: 139px"><A  href="">解决方案</A>
  <DIV class=sub-menu>
  <TABLE>
    <TBODY>
    <TR>
      <TD vAlign=top>
        <UL>
          <LI class=sub-menu-li nowrap><A href="" nowrap>方案概述</A>
          <LI class=sub-menu-li nowrap><A href="" nowrap>成功案例</A>
<LI class=sub-menu-li nowrap><A href="" nowrap>案例参考</A>
<LI class=sub-menu-li nowrap><A href="" nowrap>业务流程管理</A>
<LI class=sub-menu-li nowrap><A href="" nowrap>行业解决方案</A>
<LI class=sub-menu-li nowrap><A href="" nowrap>企业解决方案</A>
 
          </LI></UL></TD>
      <TD vAlign=top>
        <UL>
          <LI class=sub-menu-li nowrap><A href="" nowrap>合作项目</A>
          <LI class=sub-menu-li nowrap><A href="" nowrap>如何购买</A>
         </LI></UL></TD></TR></TBODY></TABLE></DIV>
</LI>
 
  <LI class=topLevel style="WIDTH: 77px"><A  href="">服务</A>
  <DIV class=sub-menu>
  <TABLE>
    <TBODY>
    <TR>
      <TD vAlign=top>
        <UL>
          <LI class=sub-menu-li nowrap><A href="" nowrap>Diamond Rings</A>
          <LI class=sub-menu-li nowrap><A href="" nowrap>Gemstone Rings</A>
          <LI class=sub-menu-li nowrap><A href="" nowrap>Promise Rings</A>
          <LI class=sub-menu-li nowrap><A href="" nowrap>Colored Diamond Rings</A>
          <LI class=sub-menu-li nowrap><A href="" nowrap>Engagement Rings</A>
          <LI class=sub-menu-li nowrap><A href="" nowrap>Wedding Sets</A> </LI></UL></TD>
      <TD vAlign=top>
        <UL>
          <LI class=sub-menu-li nowrap><A
          href=""
          nowrap>Anniversary Rings</A>
          <LI class=sub-menu-li nowrap><A
          href=""
          nowrap>Wedding Bands</A>
          <LI class=sub-menu-li nowrap><A
          href=""
          nowrap>Sterling Silver Rings</A>
          <LI class=sub-menu-li nowrap><A
          href=""
          nowrap>Top Selling</A>
          <LI class=sub-menu-li nowrap><A
          href=""
          nowrap>Top Rated</A>
          <LI class=sub-menu-li nowrap><A
          href=""
          nowrap>Newest</A> </LI></UL></TD></TR></TBODY></TABLE></DIV></LI>


<LI class=topLevel style="WIDTH: 77px"><A  href="">产品</A>
  <DIV class=sub-menu>
  <TABLE>
    <TBODY>
    <TR>
      <TD vAlign=top>
        <UL>
          <LI class=sub-menu-li nowrap><A
          href=""
          nowrap>Diamond Rings</A>
          <LI class=sub-menu-li nowrap><A
          href=""
          nowrap>Gemstone Rings</A>
          <LI class=sub-menu-li nowrap><A
          href=""
          nowrap>Promise Rings</A>
          <LI class=sub-menu-li nowrap><A
          href=""
          nowrap>Colored Diamond Rings</A>
          <LI class=sub-menu-li nowrap><A
          href=""
          nowrap>Engagement Rings</A>
          <LI class=sub-menu-li nowrap><A
          href=""
          nowrap>Wedding Sets</A> </LI></UL></TD>
      <TD vAlign=top>
        <UL>
          <LI class=sub-menu-li nowrap><A
          href=""
          nowrap>Anniversary Rings</A>
          <LI class=sub-menu-li nowrap><A
          href=""
          nowrap>Wedding Bands</A>
          <LI class=sub-menu-li nowrap><A
          href=""
          nowrap>Sterling Silver Rings</A>
          <LI class=sub-menu-li nowrap><A
          href=""
          nowrap>Top Selling</A>
          <LI class=sub-menu-li nowrap><A
          href=""
          nowrap>Top Rated</A>
          <LI class=sub-menu-li nowrap><A
          href=""
          nowrap>Newest</A> </LI></UL></TD></TR></TBODY></TABLE></DIV></LI>


<LI class=topLevel style="WIDTH: 77px"><A  href="">支持与下载</A>
  <DIV class=sub-menu>
  <TABLE>
    <TBODY>
    <TR>
      <TD vAlign=top>
        <UL>
          <LI class=sub-menu-li nowrap><A
          href=""
          nowrap>Diamond Rings</A>
          <LI class=sub-menu-li nowrap><A
          href=""
          nowrap>Gemstone Rings</A>
          <LI class=sub-menu-li nowrap><A
          href=""
          nowrap>Promise Rings</A>
          <LI class=sub-menu-li nowrap><A
          href=""
          nowrap>Colored Diamond Rings</A>
          <LI class=sub-menu-li nowrap><A
          href=""
          nowrap>Engagement Rings</A>
          <LI class=sub-menu-li nowrap><A
          href=""
          nowrap>Wedding Sets</A> </LI></UL></TD>
      <TD vAlign=top>
        <UL>
          <LI class=sub-menu-li nowrap><A
          href=""
          nowrap>Anniversary Rings</A>
          <LI class=sub-menu-li nowrap><A
          href=""
          nowrap>Wedding Bands</A>
          <LI class=sub-menu-li nowrap><A
          href=""
          nowrap>Sterling Silver Rings</A>
          <LI class=sub-menu-li nowrap><A
          href=""
          nowrap>Top Selling</A>
          <LI class=sub-menu-li nowrap><A
          href=""
          nowrap>Top Rated</A>
          <LI class=sub-menu-li nowrap><A
          href=""
          nowrap>Newest</A> </LI></UL></TD></TR></TBODY></TABLE></DIV></LI>




  </UL></DIV>


  <DIV id="layout1">
  </DIV>


  
  <DIV id="layout2">
  </DIV>
  
  <DIV id="layout3">
  </DIV>
  
  <DIV id="layout4">
  </DIV>
  




</body>


</html>



bcbobo21cn
关注
专栏目录
【Web前端大作业实例网页代码】html+css新闻资讯网页带dw模板和登陆注册（9页）
HTML网页设计
08-09 882
🏫 校园网页设计 、学校班级网页制作、学校官网、小说书籍、等网站的设计与制作。🏷️HTML静态网页设计作业使用dreamweaver制作，采用DIV+CSS布局，共有多个页面，首页使用CSS排版比较丰富，色彩鲜明有活力。顶部导航及底部区域背景色为100%宽度，主体内容区域宽度🏅 一套优质的💯网页设计应该包含 (具体可根据个人要求而定)📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语......
HTML+CSS学习demo合集
Yous的博客
07-06 609
HTML案例-跳转-index 在新窗口中跳转： 在当前窗口中跳转： 我的： index.html 1.html 2.html 学生信息表 表单 新闻网页案例 整体效果图： 卡片居中案例 要求：对于大小、颜色等具体样式取值，参考效果图上的标注即可 效果图： 成品图： 代码中发现用和还是有形式上的区别的： 两段文字之间有很大的空隙，这里用会导致上面这种 格式不一致 的问题。工作中可以考虑用p标签。样式图： 5个导航链接，鼠标悬停时变色，导航字迹居中。 a标签是行内元素，修改宽高不生效，
仿IBM首页滚动
06-23
仿IBM首页滚动，很好的效果，用javascript和jquery技术写的，很不错，我第一次分享给大家。保留了很长时间了，现在公开代码！
二级菜单 4行一列四行以上两列
lianxin19900610的博客
01-18 701
*{ padding: 0; margin: 0; } .ul_1{ position: relative; } .ul_1>li{ float: left; background: red; margin: 0 10px; } ul ul{ display: none; position: absolute; } .
css-弹性布局弹布局(Flex布局)
az44yao的专栏
07-14 183
在网页制作过程中，布局是我们最重要的一个环节。可以说布局的好坏直接影响到整个网页的成败！布局成，则事半功倍；布局败，则事倍功半。 随着移动互联的到来，响应式网站风靡。这也就兴起了一种新兴的布局方式——弹性布局。 取代我们之前“display+float+position”的布局形式，采用全新的弹性布局，会让你的网站如丝般顺滑！ 今天，就让我们一起来学习一下弹性布局，让我们用5个div玩转弹性布局吧~ 弹性布局简介 1:所有浏览器都支持 ...
导航模仿IBM
江湖再见
04-13 908
IBM 导航 *{margin:0; padding: 0;} body{ text-align: center; color: #333; font-size: 12px;} ul,li{ list-style: none;} .wrapper{ width: 1000px; text-align: left; margin: 0 auto;} .cf:before,
纯css下拉菜单,可以设置下拉菜单为多列
freejs
10-22 1329
纯css下拉菜单,可以设置下拉菜单为多列  和一般的下拉菜单不同处在于下拉的内容可以按照需求设置为1行2个，注意一点就是顺序是在table里面用td设置的，如果是数据库读取的话要先取得记录数后计算左右2列的数量 演示     XML/HTML Code &lt;DIV class=menu-bar&gt;   &lt;UL class=main-menu&gt; ...
2021-2022计算机二级等级考试试题及答案No.14008.docx
10-27
【计算机二级考试题】知识点详解： 1. 文本框控件滚动条设置：在VB或类似编程环境中，如果想让文本框控件显示水平滚动条（已设定`MultiLine=True`），应将`ScrollBar`属性设置为1，代表`sbHorizontal`，即水平滚动...
基于HTML+CSS+JavaScript角色后台管理系统设计毕业论文源码
HTML网页设计
08-04 1547
🧑‍🎓 学生管理系统网页设计 、OA管理系统、后台管理模板、智能停车系统、等网站的设计与制作。🏷️HTML网页设计，采用DIV+CSS布局，共有多个页面，排版整洁，内容丰富，主题鲜明，首页使用CSS排版比较丰富，色彩鲜明有活力，导航与正文字体分别设置不同字号大小。导航区域设置了背景图。子页面有纯文字页面和图文并茂页面。🏅 一套优质的💯网页设计应该包含 (具体可根据个人要求而定)📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新......
vue--SPA项目开发之首页导航+左侧菜单
chen的博客
09-30 2128
1. Mock.js 前后端分离开发开发过程当中，经常会遇到以下几个尴尬的场景： 老大，接口文档还没输出，我的好多活干不下去啊！ 后端小哥，接口写好了没，我要测试啊！ 前后端分离之后，前端迫切需要一种机制，不再需要依赖后端接口开发，而今天的主角mockjs就可以做到这一点 Mock.js是一个模拟数据的生成器，用来帮助前端调试开发、进行前后端的原型分离以及用来提高自动化测试效率。 众所周知Mo...
两个PupupWindows(一个是消息框的形式弹出，另一个是底部弹窗形式弹出)
07-27
两个PupupWindows(一个是消息框的形式弹出，另一个是底部弹窗形式弹出)
div+css制作的弹出菜单
12-02
纯div+css制作的弹出菜单，非常好的网站资源
go可以写在html中吗_html+css写IBM中文官网首页
weixin_36225637的博客
11-29 171
查看效果：http://is666a.gitee.io/ibm-chinese-index/下载源码：小朋友/IBM中文官网首页知乎视频​www.zhihu.com需要用到的技术：html基础标签的使用，css基础样式，flex布局，层模型（position定位），响应式布局难度：简单适宜人群：前端入门的同学温馨提示，以下内容可能会造成眼花缭乱，身体感觉极度不适，且行且珍惜，宝贵讲解页尾见base...
DIV+CSS制作二级横向弹出菜单，略简单
weixin_30746117的博客
08-11 209
没有使用JavaScript控制二级菜单的显示，结果如上图所示。 代码如下： 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>纯DIV+CSS制作二级横向弹出菜单</title> 6 <st...
CSS实现多列复杂界面布局
diaoleiluomulaojin的博客
08-07 406
1、此页面宽高均占满全屏     这种占满全屏的布局，比较常见的是早期的一些论坛，width都设置为100%，现在也有不少论坛设置成了定宽~     当前这种页面元素比较多的布局，建议加上最小宽度 & 最小高度，再加上宽度高度都是100%(要设置html,body高度为100%)。         html, body{     height: 100%;     }     .w
CSS之二级弹出菜单设计
码说芯语的博客
05-02 346
1、css里面两种隐藏方式： （1） display: none;不占用物理空间 (2)visibility:hidden;占用物理空间 2、选择器： 1、后代选择器：``.aside ul li{ }` 2、子代选择器：.aside ul > li{ }` 3、邻代选择器：`.aside ul + li{ }` 3、CSS之伪元素案例： .sub-nav:bef...
HTML+CSS制作二级和三级列表
最新发布
Yuansjjd的博客
03-28 1924
【代码】HTML+CSS制作二级和三级列表。
【原创】改造ibm首页tab效果
dujunzhi的专栏
07-26 78
之前看过好多网站都在模仿ibm首页的tab菜单， 看了下ibm的tab菜单，里面的实现有点复杂，我试着用纯css+sprite做了一个，效果是一样的，用到的图片大小8.85k，ibm的所有加起来7k多。   &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xh...
纯css下拉菜单，可以设置下拉菜单为多列
管子（zero）的杂乱空间
03-01 2541
演示地址:http://www.corange.cn/demo/3806/index.html    type=text/css rel=stylesheet>   href="engagement-rings-wedding/566/">BRIDAL GALLERY       href="sc-engagement-rings_76/" nowrap>Engagement Rings
CSS多行多列布局实例与 nth-child 和 nth-of-type 简介
本文档主要讲解了如何使用CSS实现多行多列的布局，这对于理解和设计响应式网页或需要灵活排版的页面非常重要。以下是两个具体的实例： 1. 两列多行布局: 在HTML中，我们创建了一个`<div>`元素，类名为`box1`，其中...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值