侧拉列表demo

最新推荐文章于 2022-05-01 16:39:49 发布
最新推荐文章于 2022-05-01 16:39:49 发布
阅读量157 收藏
点赞数
文章标签： css3 css html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Almee211/article/details/118943043
版权
本文详细介绍了如何使用CSS3实现侧拉列表，包括转换span标签为块级元素的方法，以及不同类型的定位技术如固定定位、粘性定位、绝对定位和相对定位的应用。同时，还探讨了兄弟选择器的用法以及在切换中英文导航栏中的实践。通过实例，读者可以深入理解这些CSS技巧在实际项目中的运用。
摘要由CSDN通过智能技术生成

1、侧拉列表

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>Document</title>

  <style>

    *{

      padding: 0;

      margin: 0;

    }

    .nav{

      width: 100%;

      height: 240px;

      /* background-color: black; */

    }

    .one_ul{

      width: 200px;

      height: 120px;

      list-style: none;

      background-color: bisque;

    }

    .one_li{

      width: 200px;

      height: 60px;

      line-height: 60px;

      text-align: center;

    }

    .two_ul{

      width: 800px;

      height: 60px;

      /* background-color: brown; */

      list-style: none;

    }

    .two_ul li{

      width: 200px;

      height: 60px;

      float: left;

    }

    span{

      width: 200px;

      height: 60px;

      line-height: 60px;

      text-align: center;

      float: left;

      display: block;

    }

    .two_ul{

      display: none;

    }

    .one_li:hover .two_ul{

      display: block;

    }

    .two_ul li:hover{

      background-color: lightpink;

    }

    .one_li span:hover{

      background-color: teal;

      color: aliceblue;

    }

  </style>

</head>

<body>

  <div class="nav">

    <ul class="one_ul">

      <li class="one_li">

        <span>时间</span>

        <ul class="two_ul">

          <li>早上</li>

          <li>中午</li>

          <li>晚上</li>

        </ul>

      <
最低0.47元/天 解锁文章
Almee211
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
CSS的侧拉列表和下拉列表
Z1529074的博客
07-20 355
侧拉列表【注意：span标签是inline行内元素，如果想设置宽度、高度需要用display：block，转化；或者设置float：left，使span标签脱离标准文档流，也可以设置宽高】 兄弟选择器：不需要包含关系，同级关系即可 p~a：代表p标签之后的a标签都变成红色 P+a：代表p标签之后紧跟的下一个a标签颜色变成红色。 position 定义:给定元素一定的位置 作用:实现侧边导航栏，网页中的广告 a.固定定位 语法: position: fixed+边偏移量【left/top/ri
侧拉列表、定位
weixin_44416290的博客
07-20 97
关于display 转化的延伸部分，当display的属性值为none的时候，其就会隐藏起来，这可以让我们实现侧边导航栏的操作，下面讲一下侧边导航栏的制作 首先是建立一个主题的结构 创建一个盒子 在盒子中加入一个段落标签， 在段落标签中加入超链接标签与一定数量的span标签，按需要重复上述3、4操作 在css中对样式进行修改 清除浏览器自带的内外边距，超链接标签的下划线，并设置超链接标签的字体颜色 设置盒子的高度、宽度、行高、文字的水平对齐 将超链接标签转化为块元素，并将其浮动起来 将s.
侧拉列表
ZhouZhouSunShine的博客
08-07 511
//创建侧拉列表 slidingMenu = new SlidingMenu(this); //设置侧拉列表的位置 slidingMenu.setMode(SlidingMenu.LEFT); //设置触摸的区域 slidingMenu.setTouchModeAbove(SlidingMenu.TOUCHMO
侧拉列表展示
qq_43577742的博客
11-11 147
//MainActivity的xml &lt;?xml version="1.0" encoding="UTF-8"?&gt; -&lt;android.support.v4.widget.DrawerLayout android:layout_height=“match_parent” android:layout_width=“match_parent” android:id="@+id/Dr...
横滑菜单和侧拉菜单
浓茶与你的博客
09-15 726
MainActivity类 package licancan.com.oneweek; import android.support.v4.app.Fragment; import android.support.v7.app.AppCompatActivity; import android.os.Bundle; import android.view.View; import android
侧拉回弹demo
02-24
本文将深入探讨“侧拉回弹demo”这一主题，主要围绕自定义ScrollView、下拉刷新以及上拉回弹效果进行详细阐述。 首先，让我们了解什么是自定义ScrollView。ScrollView是Android平台上的一个基本视图容器，它允许...
侧拉菜单demo
06-27
在本项目“侧拉菜单demo”中，我们将探讨如何实现这一功能，并通过解压提供的文件进行操作。 首先，解压缩包后，你会看到一系列文件和可能的库文件。这些文件通常包括Java源代码、资源文件（如XML布局文件和图片）...
侧拉菜单Demo
07-08
在这个“侧拉菜单Demo”中，我们将深入探讨如何在Android项目中实现这一功能。 首先，实现侧拉菜单的核心组件是`android.support.v4.widget.DrawerLayout`。这是一个特殊的布局容器，它可以容纳两个子视图：主内容...
仿QQ侧拉Demo
07-17
仿QQ侧拉栏右侧控制器可替换，实现左侧菜单均为一级菜单 XHDrawerController *drawerController = [[XHDrawerController alloc] init]; drawerController.springAnimationOn = YES; ...
CSS简洁的左侧菜单(侧拉菜单，向右显示)
网站开发初中级代码参考-转载
07-22 265
&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt; &lt;head&gt; &lt;met
CSS实现轮播图和侧拉单效果
Chen__sir__的博客
05-01 626
CSS基础，网页设计
jq，css侧边栏下拉三级导航栏
撑起自己半边天
02-22 452
jq，css侧边栏下拉三级导航栏 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>navdemo</title> <style type="text/css"> a{color: #000000;} .navdemo ul,.navdemo li{padding: 0;margin: 0;list-style: none;}
css3侧滑菜单
gztrljh
10-21 213
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>z
《建立一个悬停下拉菜单或者侧拉菜单》html+css
weixin_45973471的博客
04-10 925
《实现一个悬停下拉菜单》html+css 用html+css制作一个简单的下拉菜单或者侧边菜单 且不影响到下边内容。 （内容如有不对，欢迎指正） 下拉代码片段如下： <!DOCTYPE html> <html> <head> <title></title> <style type="text/css"> /*---...
jquery 下拉菜单，支持各种浏览器，二级可以侧面展开
corange代码演示
09-03 117
  jquery 下拉菜单，支持各种浏览器，二级可以侧面展开 http://www.corange.cn/demo/3700/index.html &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dt...
html中实现菜单侧滑,使用CSS实现滑动菜单栏
weixin_39925098的博客
06-15 1716
滑动菜单示例滑动菜单多用于菜单项目较多且菜单可归纳到少数类别的场合,点击类别滑动条会上下滑动以隐藏或显示其下的子菜单.其典型应用便是Visio中滑动菜单样式(上图).本人在Web中实现了类似的控件(下图),拿出来希望和大家一起交流一下.滑动效果的实现本文中使用无序列表作为滑动条下的子菜单的实现,出现滑动效果实际是控制子菜单的隐藏和显示.控制子菜单的隐藏和显示改变UL的display属性即可,当其为...
小程序 新闻列表demo
最新发布
09-04
小程序是一种可以在手机上快速开发和部署应用的平台，它可以帮助用户更方便地获取所需的信息和服务。而新闻列表demo是小程序中的一个示例项目，它用来展示新闻信息列表，方便用户阅读和浏览。 新闻列表demo通常包含以下几个基本功能和特点： 1. 新闻分类：新闻列表demo会将不同类型的新闻进行分类展示，比如国际、国内、娱乐等。用户可以通过选择不同的分类来筛选他们感兴趣的新闻。 2. 新闻标题和摘要：每条新闻会在列表中显示标题和摘要，用户可以通过浏览标题来判断是否要继续阅读该新闻。摘要可以帮助用户快速了解新闻内容的主要点。 3. 图片展示：部分新闻可能会附带相关的图片，这些图片可以在列表中展示，吸引用户的注意力并提供更直观的信息。 4. 新闻来源和发布时间：每条新闻的来源和发布时间也会在列表中显示，用户可以根据这些信息来判断新闻的可信度和时效性。 5. 新闻详情查看：用户可以通过点击某条新闻，在详情页中查看该新闻的详细内容。详情页还可以提供评论、分享和收藏等功能，增强用户与新闻的互动性。 通过这个新闻列表demo，用户可以快速浏览各类新闻，了解时事动态和各种领域的信息。小程序的轻量化和快速性能可以让用户更方便地获取新闻，节省阅读时间。而开发者也可以根据这个demo做一些扩展和定制化的开发，进一步满足用户的需求和提升用户体验。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值