二级菜单 4行一列四行以上两列

最新推荐文章于 2021-07-20 10:39:53 发布
最新推荐文章于 2021-07-20 10:39:53 发布
阅读量699 收藏 1
点赞数
分类专栏： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lianxin19900610/article/details/79101359
版权
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{
padding: 0;
margin: 0;
}
.ul_1{
position: relative;
}
.ul_1>li{
float: left;
background: red;
margin: 0 10px;
}
ul ul{
display: none;
position: absolute;
}
.ul_1 li:hover .ul_2{
display: block;
}
.ul_2{

}
.ul_2 li{
float: left;
}
.ul_2 li:nth-child(2n+1){
clear: both;
}

</style>
</head>
<body>
<ul class="ul_1">
<li>一级菜单
<ul class="ul_2">
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
</ul>
</li>
<li>一级菜单
<ul  class="ul_2">
<li>二级菜单</li>
<li>二级菜单</li>
</ul>
</li>
<li>一级菜单
<ul  class="ul_2">
<li>二级菜单</li>
<li>二级菜单</li>
</ul>
</li>
</ul>



</body>
</html>
zhuhongjin0610
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
二级菜单
weixin_44371671的博客
07-08 121
先创建一个 <header class="head"> </header> 再创建一个列表 <header class="head"> <ul class="ul"> <li> <a href="#">我的淘宝</a> </li> <li> &lt
选项菜单之二级菜单
hi_0123的专栏
09-22 778
今天我们讲下二级菜单，代码如下： package com.example.optionmenu_02; import android.R.color; import android.os.Bundle; import android.app.Activity; import android.graphics.Color; import android.view.Menu; import a
CSS弹出二级多列菜单和DIV布局实例 - 仿IBM官网首页
bcbobo21cn的专栏
05-07 1844
图 顶层CSS菜单，弹出二级菜单，二级菜单多列； 主体部分三个DIV布局； 这个是IBM官网布局的样子； 代码，拿去花吧；我的奶酪很多；     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">       #pageHeader {
DIV＋CSS＋HTML布局（三行两列布局）
05-17
DIV＋CSS＋HTML布局（三行两列布局）
php表格制作4行两列的表格,excel表格怎么插行和列？
weixin_32311541的博客
03-18 1072
表格插入行的方法：将鼠标移动行数的编号上，右击选择“插入”，再通过输入数值来确定需要添加的行数，回车即可。表格插入列的方法：将鼠标移动列数的编号上，右击选择“插入”，再通过输入数值来确定需要添加的列数，回车即可。excel表格插行和列的方法：打开工作表后如下图所示页面，通过编辑一些内容进去后接着来说插入行和列的操作方法。1、表格插入行通过在行数的编号上鼠标右击-插入行，如下图所示。通过输入数值来确...
html数据自动填充,基于CSS实现每列四行加载完一列后数据自动填充到下一列
weixin_42403771的博客
05-31 700
只用css实现“每列四行，加载完一列后数据自动填充到下一列”的效果。这个题目用图表示如下：如果将题目换成“只用css实现每行四列，加载完一行后数据自动填充到下一行”，那这个问题就简单多了，相信大家都能使用多种方法实现。但现在这个问题该怎么去解决呢。对了这个题目，似乎不是那么好解决，毕竟像这类问题我们都是使用js或者模版辅助实现的。这个题目难点在哪儿？对动态添加的数据只用css实现这个效果，那就意味...
用html制作四行四列的表格,HTML表格元素
weixin_28752415的博客
06-16 4932
什么是表格？表格，是指按所需的内容项目画成格子，分别填写文字或数字的书面材料，便于统计查看。在HTML中，表格就是一个个成行排列的单元格。例如某单位里人员名单，包含姓名、性别、联系方式、职务等信息，就连可以用一个表格来显示。 某企业员工名单如上表所示的一个表格，就可以用HTML来制作。其中，HTML表格元素使用table标签，表格元素的所有内容都放置在table的起始标签和结束标签内，表格的行元素...
计算机一级两列怎么筛选,怎么筛选Excel软件两个表格里相同的数据
weixin_36252784的博客
07-20 3518
怎么筛选Excel软件两个表格里相同的数据腾讯视频/爱奇艺/优酷/外卖 充值4折起今天，小编给大家分享筛选Excel软件两个表格里相同数据的方法，希望对大家有所帮助。具体如下：1.首先，请大家在自己的电脑中找到“Excel”软件，点击进入主界面，然后请把两个工作表放在同一个窗口下，效果如图所示，其中的sheet1为年级全部学生的名字与成绩，而sheet2为某一班的学生花名册，小编就用它们作为示范。...
java web下开发二级级联下拉菜单（数据库实现的）
05-23
在Java Web开发中，二级级联下拉菜单是一种常见的用户界面元素，用于提供层次结构的选择。这个场景中，我们利用数据库存储数据，并通过后端处理逻辑动态生成这些下拉菜单。下面将详细介绍如何使用MySQL数据库来实现...
2021-2022计算机二级等级考试试题及答案No.11145.docx
10-26
题目中是一个三行一列、两行两列和三行三列的数组，初始化后sum为1，但在循环中每次乘以b[i][j]，所以结果是1*1*2*2*2 = 32。 3. switch语句：在Java、C++等语言中，switch语句可以接收int、byte、char以及short...
2021-2022计算机二级等级考试试题及答案No.12639.docx
10-26
计算机二级等级考试主要涵盖多个方面的知识点，包括数据库管理、编程语言、网络基础知识、网页设计以及操作系统等。以下是对部分题目涉及知识点的详细解释： 1. Access数据库中的关联：Access允许两个或更多数据表...
二级下拉菜单布局（纵向、横向）
热门推荐
Number7421的博客
04-27 2万+
一级菜单在ul列表内建立li元素并清除默认样式让所有li元素左浮动并清除浮动DOM中文档结构如下：&lt;ul class="clearfix"&gt; &lt;li&gt;&lt;a href="#"&gt;1&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;2&
单列变双列css_CSS实现多行多列的布局的实例代码
weixin_42434656的博客
02-05 865
1.两列多行：HTML:box1:实现两列多行布局111222333CSS:.box1 {width: 500px;background: #EEEEEE;}.box1 ul {clear: both;overflow: hidden;}.box1 ul li {width: 48%;height: 100px;margin-bottom: 10px;background: skyblue;flo...
用html制作四行四列的表格,HTML表格
weixin_33665771的博客
06-16 8171
释放双眼，带上耳机，听听看~！HTML表格是web1.0时代的产物，现在已经基本上被淘汰了，但是有些时候还是会用到，这里有必要简单的讲述一下。表格由一行或多行单元格组成，应用表格可以让数据展现更有条理，表格标签有：table标签(表格)、tr标签(行)、td标签(单元格)组成。例如，要展现一组企业员工通讯录，通讯录包括员工名称、电话、电子邮件、职务四项，就可以使用多行四栏的表格来展现企业员工通讯录...
java流水布局_JavaSwing FlowLayout 流式布局的实现
weixin_33812391的博客
02-13 969
1. 概述FlowLayout，流式布局管理器。按水平方向依次排列放置组件，排满一行，换下一行继续排列。排列方向(左到右 或 右到左)取决于容器的componentOrientation属性(该属性属于Component)，它可能的值如下:ComponentOrientation.LEFT_TO_RIGHT(默认)ComponentOrientation.RIGHT_TO_LEFT同一行(水平方向...
element-ui实现菜单的路由切换
lianxin19900610的博客
08-02 1万+
&lt;template&gt; &lt;div&gt; &lt;ul&gt; &lt;el-menu unique-opened :default-active="pagedefault" router&gt; &lt;!-- router 使用路由切换--&gt; &lt;el-submenu index="1"&gt;
请用HTML设计一个网页，设计要求如下：（1）至少包含三个网页，具体主题和内容自己设计。 （2）网页中要用到div标签，合理对网页的区域进行划分。 （3）每个网页都有导航栏，导航栏可以水平也可以垂直排列，可以通过导航栏在两个页面之间跳转。 （4）网页有一级标题。 （5）网页有正文段落。 （6）网页上用到1个图片（本人照片），美化页面。 （7）CSS样式要求： 表格宽300px，由两行组成。第一行包含一个表头单元格，单元格内有一个粗体的居中标题，背景色为#3cc，文字大小18个像素。第二行包含一个普通单元格，单元格内是一个无序列表，无列表标号。文字白色，背景黑色，文字大小12像素。无序列表是超链接，超链接文字白色，鼠标悬停超链接背景颜色变白，文字颜色变黑。 （8）CSS布局与定位 CSS样式采用内嵌样式完成，实现浮动定位. 有外层容器盒子，居中，宽度为页面的70%宽。内层盒子宽度相等，灰色背景；2个内层盒子分为2列，两个盒子之间有15px空隙。每列均有h2标题和一个段落构成（内容不限，但不能使用无意义的文字）。 （9）每个网页都要使用与主题内容相关的JS效果。
最新发布
05-27
好的，下面是一个示例来实现上述要求： 1. 创建三个HTML文件index.html、about.html和contact.html，分别作为主页、关于页面和联系页面。 2. 在每个HTML文件中使用div标签，按照需要进行区域划分，如头部、导航栏、正文等。 3. 在每个HTML文件中添加导航栏，可以使用ul和li标签，设置a标签的href属性来实现跳转。 4. 在每个HTML文件中添加一级标题和正文段落，可以使用h1和p标签来实现。 5. 在每个HTML文件中使用img标签添加一个图片，可以使用自己的照片或者其他图片来美化页面。 6. 在CSS样式中，使用table和tr标签创建一个表格，设置表格宽度为300px，第一行设置背景色为#3cc，文字大小为18px，第二行设置背景色为黑色，文字颜色为白色，文字大小为12px。无序列表的样式可以使用li和a标签，设置a标签的hover效果来实现。 7. 在CSS布局中，使用float属性实现浮动定位，使用外层div容器设置居中和宽度为页面的70%，使用内层div容器设置灰色背景和两列布局，每列包括一个h2标题和一个段落。 8. 在每个HTML文件中使用与主题内容相关的JS效果，如图片轮播、下拉菜单、滚动监听等效果。可以使用jQuery插件或者手写实现。 以下是示例代码，可以根据需要进行修改： index.html ``` <!DOCTYPE html> <html> <head> <title>主页</title> <style> body { margin: 0; padding: 0; } .container { width: 70%; margin: 0 auto; text-align: center; } .inner { display: flex; background-color: #ddd; margin-top: 15px; padding: 10px; } .col { flex: 1; margin-right: 15px; padding: 10px; background-color: #ccc; } .col:last-child { margin-right: 0; } .col h2 { margin-top: 0; } .table { width: 300px; margin: 15px auto; border-collapse: collapse; } .table th { background-color: #3cc; color: #fff; font-weight: bold; font-size: 18px; text-align: center; padding: 10px; border: 1px solid #000; } .table td { background-color: #000; color: #fff; font-size: 12px; padding: 10px; border: 1px solid #000; } .table a { color: #fff; text-decoration: none; } .table a:hover { background-color: #fff; color: #000; } </style> </head> <body> <header> <h1>这是一个网站</h1> </header> <nav> <ul> <li><a href="index.html">首页</a></li> <li><a href="about.html">关于</a></li> <li><a href="contact.html">联系</a></li> </ul> </nav> <div class="container"> <img src="your_photo.jpg" alt="你的照片"> <h2>欢迎来到我的网站</h2> <p>这是一个示例网站，用于演示HTML、CSS和JS的基本用法。</p> <table class="table"> <tr> <th>标题</th> </tr> <tr> <td> <ul> <li><a href="#">链接1</a></li> <li><a href="#">链接2</a></li> <li><a href="#">链接3</a></li> </ul> </td> </tr> </table> <div class="inner"> <div class="col"> <h2>左边栏</h2> <p>这是左边栏的内容。</p> </div> <div class="col"> <h2>右边栏</h2> <p>这是右边栏的内容。</p> </div> </div> </div> <footer> <p>© 2021 版权所有</p> </footer> </body> </html> ``` about.html和contact.html文件的内容可以根据需要进行修改，但要满足上述要求。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值