ul li 变成块状选项卡

最新推荐文章于 2021-11-08 20:38:03 发布
原创 最新推荐文章于 2021-11-08 20:38:03 发布 · 2.1k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY 版权协议，转载请附上原文出处链接和本声明。

本文介绍了一种使用CSS实现的导航菜单设计方法，包括不固定宽度和固定宽度两种类型的菜单样式。通过具体的HTML和CSS代码示例展示了如何设置菜单项的布局、样式以及悬停效果。

<style type="text/css">
.menu1{ border:1px solid #CCCCCC; height:40px;}
.menu1 ul { margin:0px; list-style:none; padding:0px;}
.menu1 ul li{ float:left; height:40px; line-height:40px;text-align:center; background:#F3F3F3; margin-right:2px;}
.menu1 ul li a{ display: inline-block; text-decoration:none ; font-size:12px; padding:0px 10px;}
.menu1 ul li a:hover{ background:#CC0000; color:#FFFFFF }
.menu2{ border:1px solid #CCCCCC; height:40px;}
.menu2 ul { margin:0px; list-style:none; padding:0px;}
.menu2 ul li{ float:left; height:40px; line-height:40px; width:150px; text-align:center; background:#F3F3F3; margin-right:2px;}
.menu2 ul li a{ display:block; text-decoration:none ; font-size:12px ;  line-height:40px; width:150px;}
.menu2 ul li a:hover{ background:#CC0000; color:#FFFFFF }
</style>
<p>菜单一不固定宽度</p>
<div class="menu1">
  <ul>
    <li><a href="#">导航菜单</a></li>
    <li><a href="#">导航菜单</a></li>
    <li><a href="#">导航比较长菜单文字多</a></li>
    <li><a href="#">导航比较长菜单</a></li>
  </ul>
</div>
<p>&nbsp;</p>
<p>菜单二固定宽度</p>
<div class="menu2">
  <ul>
    <li><a href="#">导航菜单</a></li>
    <li><a href="#">导航菜单</a></li>
    <li><a href="#">导航比较长菜单文字多</a></li>
    <li><a href="#">导航比较长菜单</a></li>
  </ul>
</div>

                                By:lsfhack        Email：lsfhack@163.com

css中使用ul li ul li ul li ul li 实现四层级联菜单
12-08
复制代码代码如下: <!DOCTYPE html PUBLIC “-//... <head> <title></title>...style type=”text/css”>... /*–a标签的默认颜色为黑色–*/ text-decoration:none; /*–隐藏超链接的下划线–*/ } a:
JS遍历ul下的li点击弹出li的索引的实现方法
11-22
<li>a</li> <li>a</li> <li>a</li> <li>a</li> <li>a</li> </ul> 我们遍历ul 下所有的li 并添加点击事件，一般我们会在for循环里面添加点击事件，但是结果和我们所期盼不一样，那么是为什么呢？？？？ 接下来看看...
一阶段项目整理第二次（ul，li 为块状元素可以代替div使用，背景图片的透明度渐变问题）...
weixin_34032779的博客
04-08 409
今天的问题整理： 1.ul li 块状元素，可以是代替div用，网页大部分的布局都是ul，li做的。 2.网页加载完成的js效果（div的背景图片透明度渐变） 加一个定时器，并附加一个函数 例子：setInterval(bb,80); 定义一个变量，值大的时候是可以从深到浅的。值小的时候是可以从浅到深。 var val = 0.001; va...
li块状分布html,CSS
weixin_29358723的博客
06-20 313
1. CSS1.1 为什么使用CSS美化网页元素的属性不能改变所有的样式元素的属性使代码比较臃肿，结构与样式没有分开1.2 怎样使用CSS行内样式表只能适用于单个元素没有实现结构与样式分离内部样式表适用于多个选择器相同的样式部分实现了结构与样式的分离外部样式表适用于当前站点的任何html文件完全实现了结构与样式的分离网页头部/* 选择器 {属性：属性值}*/p {color: blue;}1.3 ...
html中ul标签中li标签的横向排列
weixin_33743880的博客
08-03 532
第一步、编写横向菜单的HTML代码架构 请将以下代码添加到HTML文档的导航栏区域中。 <ul id="menu"> <li><a href="http://www.baidu.com">Baidu.Com</a></li> <li><a href="http://www.Code52.Net"...
html ul li 左右两排_HTML选项卡
weixin_39559333的博客
11-29 567
简单的解释一下，选项卡原理，小白一枚，方便自己记录，若有说错，请大神指教先看图讲解原理：点击选项1时，div2和div3将隐藏 点击选项2时，div1和div2隐藏 点击选项3时，div1=和div2隐藏理解了此原理之后呢，我们就要把我们的理解转成JS代码//onload事件，当页面加载完触发window.onload = function(){ var _tab =...
html ul实现tab,Web实现Tab选项卡功能（一）
weixin_31887421的博客
06-15 1575
序言前段时间学习了一下Html+Css+Js相关知识，感觉不用的话很容易忘记，因此打算每周有空的时候都会写一些小型的demo，也希望能给想入门Web前端的Android程序猿们一些建议，好了话不多说，代码为敬： image实现就是这样一个简单的效果，来看一下html代码：是不是很简单，html代码里面只管放东西进去就好了，需要什么就放什么，在html中，通常用ul标签来实现无需列表，而li标签通常...
ul & li 前面的实心小圆点
qq_34821328的博客
11-08 3297
import React, { useState, useEffect, useCallback, useMemo, Fragment } from 'react'; import { List, Avatar } from 'antd'; // import { useParams } from 'umi'; // import moment from 'moment'; // import { URL_PREFIX } from '@/config'; import { ArrowRightOutli.
精选资源
将ul+li 分两列显示(横向显示)的方法
01-19
目的很简单：有一个 ul>li 列表，默认为单列显示，把它变为两列显示。 方法1，使用DIV+CSS代码： 复制代码代码如下: <style type=”text/css”> .mycode{ width:300px; height:74px; float:left;} .mycode ul...
JavaScript使用ul中li标签实现删除效果
12-10
本文实例为大家分享了js使用ul中li标签实现删除效果的具体代码，供大家参考，具体内容如下 <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"&...
html 块元素li,HTML行内元素、块状元素、行内块状元素的区别（文章来源于优快云作者 zhanglir333）...
weixin_42525353的博客
06-19 352
HTML可以将元素分类方式分为行内元素、块状元素和行内块状元素三种。首先需要说明的是，这三者是可以互相转换的，使用display属性能够将三者任意转换：(1)display:inline;转换为行内元素(2)display:block;转换为块状元素(3)display:inline-block;转换为行内块状元素1.行内元素行内元素最常使用的就是span，其他的只在特定功能下使用，修饰字体和标签...
制作一个选项卡功能
weixin_46410264的博客
05-09 293
制作一个选项卡功能，点击标题出现与之对应的内容； 参考图： 代码参考： HTML文件： <body> <div id="head" class="head"> <ul> <li onclick="Option(1)">选项卡一</li> <li onclick="Option(2)">选项卡二</li> <li onclick="Option(3)">选项
li变成行内块级元素之后，每一个li之间会有间隙，这是为什么?
梁同学与Android
11-13 2254
今天在学习h5的时候，写一个导航栏，当把li变成行内块级元素之后，发现每一个li之间都会有一个小小的间隙，这个间隙是浏览器自带设置的，所以我们要把它清除掉，为什么呢，因为如果不清楚掉的话，每个浏览器默认的东西都不一样，假如换一个浏览器的话，页面可能就会有想不到的后果，所以要用font-size:0;这一行来去掉间距，如果想保留这个间距的话，可以自己设置，margin:4px; ...
js,li形式的选项卡，点击显示不同的div
sunling的专栏
11-18 7875
练习了一上午，一直在获取元素上出错误，最终还是弄好了     Home   -->      *{     margin:0;     padding: 0;   }   #box{     width: 410px;     display: block;   }   ul{     list-style: none;     float:
一个简单ＨＴＭＬ实现一个选项卡
hong_724618503的博客
02-23 8356
用HTML写一个简单的前端选项卡，简单易懂
IE6 下li.a设置为块元素问题解决方法
把心沉下去， 专心， 用心，乐观向上！周末多走走。。
01-05 205
test1 test2 在制作列表菜单的时候，我们不得不设置a元素为display: block,这样在IE6下，就会发现LI的margin（边界）会无缘无故多出几个像素，即使设置margin为0px也无法解决，这里给出两种解决方法； 第一种：为li设置border（边框） 如：border: 1px solid #9999...
4、行转列问题1
vip545058的专栏
04-18 556
1、数据查询，行转列的问题。 http://bbs.youkuaiyun.com/topics/390621630?page=1#post-395855019 根据数据查询得到如下数据表（tab）： 班级           学号     姓名        科目             得分          班排名       校排名         标准分 ClassNa
JS 选项卡效果案例
hedafighter2011的专栏
07-03 762
文字素材: 房产： 275万购昌平邻铁三居 总价20万买一居 200万内购五环三居 140万安家东三环 北京首现零首付楼盘 53万购东5环50平 京楼盘直降5000 中信府 公园楼王现房 家居: 40平出租屋大改造 美少女的混搭小窝 经典清新简欧爱家 90平老房焕发新生 新中式的酷色温情 66平撞色活泼家居 瓷砖就像选好老婆 卫生间烟道的设计 二手房： 通州豪华3居260万
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>家用电器分类</title> <link href="css/type.css" rel="stylesheet" type="text/css"/> </head> <body> <div id="type"> <h2 id="title">家用电器</h2> <ul> <li> <h3 class="secondTitle"> <a href="#">大家电</a> </h3> <p><a href="#">平板电视</a>  <a href="#">洗衣机</a>  <a href="#">冰箱</a><br/> <span>  </span><a href="#">空调</a>  <a href="#">烟机/灶具</a>  <a href="#">热水器</a><br/> <span>  </span><a href="#">冷柜/酒柜</a>  <a href="#">消毒柜</a>  <a href="#">家庭影院</a> </p> </li> <li> <h3 class="secondTitle"><a href="#">生活电器</a></h3> <p><a href="#">电风扇</a>  <a href="#">净化器</a>  <a href="#">吸尘器</a><br/> <span>  </span><a href="#">净水设备</a>  <a href="#">挂烫机</a>  <a href="#">电话机</a> </p> </li> <li> <h3 class="secondTitle"><a href="#">厨房电器</a></h3> <p><a href="#">榨汁机</a>  <a href="#">电压力锅</a>  <a href="#">电饭煲</a><br/> <span>  </span><a href="#">豆浆机</a>  <a href="#">微波炉</a>  <a href="#">电磁炉</a> </p> </li> <li><h3 class="secondTitle"><a href="#">五金家装</a></h3> <p><a href="#">淋浴/水槽</a>  <a href="#">电动工具</a>  <a href="#">手动工具</a><br/> <span>  </span><a href="#">仪器仪表</a>  <a href="#">浴霸/排气</a>  <a href="#">灯具</a> </p></li> </ul> </div> </body> </html> #title{ color: white; /*background-image: radial-gradient(at top,#d2e9f8,#cee7f9);*/ background-image: radial-gradient(at top,#106eb1,#72b0dc); width: 50%; } .secondTitle a{ text-decoration: none; }为什么下划线没有去掉
最新发布
10-23
HTML 代码设置 `.secondTitle a` 的 `text-decoration` 为 `none` 但下划线未去掉，可能有以下几种原因： ### 1. 样式优先级问题 CSS 样式存在优先级规则，若有其他选择器对 `<a>` 标签的 `text-decoration` 进行了设置，且优先级高于 `.secondTitle a`，则会覆盖 `.secondTitle a` 的设置。例如，内联样式（直接写在 HTML 标签的 `style` 属性中）优先级最高，若 `<a>` 标签有内联样式设置了下划线，就会覆盖 `.secondTitle a` 的样式。 ```html <div class="secondTitle"> <a href="#" style="text-decoration: underline;">链接</a> </div> ``` 同时，ID 选择器优先级高于类选择器，若存在 ID 选择器对 `<a>` 标签的 `text-decoration` 进行了设置，也会覆盖 `.secondTitle a` 的样式。 ### 2. 样式未正确加载 可能是 CSS 文件路径错误或者 CSS 文件未正确引入 HTML 文件中，导致 `.secondTitle a` 的样式没有被浏览器加载。例如，若 HTML 文件中引用 CSS 文件的代码如下： ```html <link rel="stylesheet" href="css/style.css"> ``` 但 `css/style.css` 文件路径错误，或者该文件不存在，就会导致样式无法加载。 ### 3. 选择器匹配问题 确保 `.secondTitle a` 选择器能够正确匹配到目标 `<a>` 标签。若 `<a>` 标签不在具有 `secondTitle` 类的元素内部，`.secondTitle a` 选择器就无法生效。例如： ```html <div class="secondTitle"> <!-- 这里的 a 标签会应用 .secondTitle a 的样式 --> <a href="#">链接</a> </div> <a href="#">这个链接不会应用 .secondTitle a 的样式</a> ``` ### 4. 浏览器缓存问题 浏览器可能缓存了旧的 CSS 文件，导致新的样式没有生效。可以尝试清除浏览器缓存，或者在 CSS 文件链接后面添加一个随机参数，强制浏览器重新加载 CSS 文件。 ```html <link rel="stylesheet" href="css/style.css?v=1.1"> ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

jarry.liu

如果对您有帮助，鼓励下博主吧

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值