文档建议反馈控制台
首页
学习
活动
专区
工具
TVP
最新优惠活动
文章/答案/技术大牛
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

【CSS——效果实现】自适应页面（蓝桥杯真题-5136）【合集】

且 Menu 按钮展示时，需要浮动在内容卡片上方，不能被遮挡，移动端和 PC 端顶部导航栏高度一致，均为 54px。 移动端导航栏的菜单项每一项独占一行。...">：使用 标签定义导航栏，添加 menu 类，方便后续样式控制。.../js/jQuery.min.js">：引入 jQuery 库，方便后续使用 jQuery 进行交互效果的实现，如菜单的展开和收缩等。...菜单项样式（.menu li） .menu li { display: block; /* 菜单项独占一行 */ } 将菜单项的显示方式设置为块级元素，这样每个菜单项都会单独占据一行，适应移动设备屏幕的纵向布局...将菜单改为可折叠的垂直菜单，菜单项独占一行，课程内容的描述和图片也改为垂直排列，确保在移动端有良好的显示效果。 4.

6110

懂个锤子Vue VueRouter路由深入浅出

文档类网站 / 移动端站点，如：网易云音乐 https://music.163.com/多页应用类网站：公司官网 / 电商类网站，如：京东 https://jd.com/Vue中的路由：Vue中的路由...-- 省略样式代码 -->路由的封装抽离：路由的封装抽离是Vue.js项目开发中的一个最佳实践： 它涉及到将路由配置和管理从应用的主入口文件通常是：main.js中分离出来，以提高代码的可维护性和可读性...创建路由器模块： 在项目的src目录下创建一个router文件夹、文件夹内创建一个index.js文件，这是路由器的配置中心；2.导入Vue和Vue Router： 在src/router/index.js...；router-link-exact-active：相对地，这个类仅在路径完全匹配时才被激活，提供了更精确的控制；声明式导航-自定义类名Vue Router为了提供更多的定制性，开发者可以自定义的URL，用户体验更好，路由看起来更像传统的服务器端路由；缺点：需要服务器端的配合，确保直接访问或刷新非根URL时；//事先定义好一个404页面//路由配置文件中引入页面组件

9310
    • 您找到你想要的搜索结果了吗？
    是的
    没有找到

    前端成神之路-CSS高级技巧

    1.1 display 显示（重点） 实际开发场景： 配合后面js做特效，比如下拉菜单，原先没有，鼠标经过，显示下拉菜单， 应用极为广泛 1.2 visibility 可见性 (了解) 1.3 overflow...1.4 显示与隐藏总结 属性 区别 用途 display 隐藏对象，不保留位置 配合后面js做特效，比如下拉菜单，原先没有，鼠标经过，显示下拉菜单， 应用极为广泛 visibility 隐藏对象，保留位置...:default">我是小白li> li style="cursor:pointer">我是小手li> li style="cursor:move">我是移动li> li...5.2 精灵技术讲解 CSS 精灵其实是将网页中的一些背景图像整合到一张大图中（精灵图），然而，各个网页元素通常只需要精灵图中不同位置的某个小图，要想精确定位到精灵图中的某个小图。 ?...5.4 制作精灵图(了解) CSS 精灵其实是将网页中的一些背景图像整合到一张大图中（精灵图），那我们要做的，就是把小图拼合成一张大图。 大部分情况下，精灵图都是网页美工做。

    6.8K30

    sublimeText3之码上有爱

    举个栗子：快速选中删除函数中的代码，重写函数体代码或重写括号内里的内容 Ctrl+M 光标移动至括号内结束或开始的位置 Ctrl+Enter 在下一行插入新行。...搜索类 Ctrl+F 打开底部搜索框，查找关键字 Ctrl+shift+F 在文件夹内查找，与普通编辑器不同的地方是sublime允许添加多个文件夹进行查找,如果这个快捷键被占用了,可以手动菜单栏 Find...在编辑器的任意一个html/js/css文件中，右击，出现如下图所示，选择 SetPlugin Options,HTMLPretty.sublime-settings，将node_path中的window...5.cssRem安装 自动将px转化为rem的插件,做移动端网站,rem布局时,该插件就很方便了,安装好后,设置基准值:"px_to_rem": 数值,我这里设置是100也就是100px=1rem，具体得设置值根据你的适配而定...当然sublimeText相比较atom而言,美中不足的就是在编辑器中实时预览,但是markdown文档通过 ctrl+B可以转换为html格式文件,在浏览器中打开,会发现它的色调也不是很好看,那么怎么更改呢

    1.4K30

    AJAX培训笔记_js基础笔记

    ，属性名必须小写，属性值必须位于“”或''内 2：创建ajax服务端代码：AjaxServer.java 和普通的servlet类似，区别在于，普通servlet返回的是页面，而ajax返回的 是我们想要的数据...-->verify1.js 5、不使用jquery框架，直接使用ajax的异步对象XMLHttpRequest对象去实现ajax应用 步骤： A：创建XMLHttpRequest对象 B：注册回调函数...： 在文本框中输入“中” 11：jQuery部分方法练习 test1.html ------- //1、简单：伪类 //：first var firstul = $("ul:first"); //alert...对象 3、取出当前td的值，存入临时变量 4、清空td的内容 5、创建一个input输入域 6、将临时变量的值赋给input输入域的value值 7、将该input元素插入到当前td中 8、取消绑定到该...F:编写补全框的样式：使用js的css方法 G:增加键盘事件：jqueryAuto.js---》jqueryAuto1.js //定义一个当前高亮显示的节点的索引号 var highlightindex

    6.5K10

    CSS——06扩展：高级

    1.1 display 显示（重点） 实际开发场景： 配合后面js做特效，比如下拉菜单，原先没有，鼠标经过，显示下拉菜单， 应用极为广泛 1.2 visibility 可见性 (了解) 1.3 overflow...1.4 显示与隐藏总结 属性 区别 用途 display 隐藏对象，不保留位置 配合后面js做特效，比如下拉菜单，原先没有，鼠标经过，显示下拉菜单， 应用极为广泛 visibility 隐藏对象，保留位置...:default">我是小白li> li style="cursor:pointer">我是小手li> li style="cursor:move">我是移动li> li...注意： 一定要首先强制一行内显示，再次和overflow属性 搭配使用 4.3 总结三步曲 /*1....5.2 精灵技术讲解 CSS 精灵其实是将网页中的一些背景图像整合到一张大图中（精灵图），然而，各个网页元素通常只需要精灵图中不同位置的某个小图，要想精确定位到精灵图中的某个小图。

    4.7K40

    巧用CSS3 :target 伪类制作Dropdown下拉菜单（无JS）

    :target 是CSS3 中新增的一个伪类，用以匹配当前页面的URI中某个标志符的目标元素（比如说当前页面URL下添加#comment就会定位到id=“comment”的位置，俗称锚）。...> 大体上上面的HTML代码可以分为两部分，一部分是一个出发下拉动作的入口（我习惯称为“开关”）——通常是一个button（实例是将a标签替换为一个button的功能）；...可能你会问close 这个类修饰的a标签那段是做什么的？...当你触发下拉菜单后，有时候需要做关闭（返回原状）的动作，而从具体情况（比如说如本实例触发菜单后菜单将原来的开关都掩盖了）或者用户体验上考虑，最好是除菜单区域外的整个屏幕都随便盲点就能关闭菜单。...为了让下拉菜单更显“下拉”的情况，采用CSS3的origin 定位下转换原点。 注意下兼容性，所有主流浏览器均支持 :target，除了 IE8 及更早的版本，移动端的话直接用。

    4K80

    Python全栈之jQuery笔记

    DOM对象转换为jQuery对象: $(DOM对象) jQuery对象转换成DOM对象: 将jQuery中封闭的DOM对象取出来即可....(不作展开): 2.1 移动端js事件 移动端的操作方式和PC端是不同的,移动端主要用手指操作,所以有特殊的touch事件,touch事件包括如下几个事件: 1、touchstart...移动端一般有三种操作:点击、滑动、拖动.这三种操作一般是组合使用上面的几个事件来完成的,所有上面的4个事件一般很少单独使用, 一般是封装使用来实现这三种操作,可以使用封装成熟的js库. 2.2 zeptojs...Zepto的一些可选功能是专门针对移动端浏览器的,它的最初目标是在移动端提供一个精简的类似jquery的js库. zepto官网: http://zeptojs.com/ zepto中文api: http.... zepto自定义构建地址: http://github.e-sites.nl/zeptobuilder/ touch模块封装了针对移动端常用的事件,可使用此模块进行移动端特定效果开发,这些事件有:

    5.5K40

    jQuery基础(五)一Ajax应用与常用插件-imooc

    表示的dom对象转换为jquery对象，这样就可以使用jquery提供的方法操作 声明一个叫$this的jquery对象变量， 给声明的变量赋值，赋的值是将this的HTML元素转换为jQuery对象。...在浏览器中显示的效果： 使用getScript()方法异步加载并执行js文件 使用getScript()方法异步请求并执行服务器中的JavaScript格式的文件，它的调用格式如下所示： jQuery.getScript...如下图所示： 自定义对象级插件——lifocuscolor插件 自定义的lifocuscolor插件可以在元素中，鼠标在表项li>元素移动时，自定义其获取焦点时的背景色，即定义li>元素选中时的背景色...3-5选项卡插件——tabs 使用选项卡插件可以将中的li>选项定义为选项标题，在标题中，再使用元素的“href”属性设置选项标题对应的内容，它的调用格式如下： $(selector)....在列表元素中，鼠标在列表项li>元素移动时，可以自定义其获取焦点(focus)时的背景颜色，即设置表项li>元素选中时的背景色.

    16.6K20

    LayUI之旅-入门

    最近要做一个项目，被要求前端要使用layui，甲方爸爸很牛逼的好吗，既然要求这样了，二话不说，撸起袖子就开干，由于从来没用过layui这个框架，对框架的不熟悉导致在使用的过程中是步步都是障碍啊，还是那句话...，不仅仅要PC端使用，还有移动端也是要使用的，所以需要实现左边栏的显示和隐藏），因为设计是右侧（页面内容区域）异步加载（这是最终确定的方案），所以页面上的所有事件的绑定都需要用事件委托来处理（刚开始我也没注意到这个问题...li> JS部分 /* * @todo 左侧菜单事件，示例中菜单只有一级，多级菜单看情况修改就好...解决方法：将事件委托写在外面，也就是写在上面这个例子的index中。...，需要在同一个页面加载不同的表格（点击某个按钮之后）将这个按钮对应的表格渲染出来（也就是异步的）因为前面对框架不熟悉，使用传递已知数据的方法进行了渲染 table.render({ elem:

    2.8K20

    第122天：移动端开发常见事件和流式布局

    2、 viewport 在移动端用来承载网页的这个区域就是我们的视觉窗口viewport，这个区域可以设置高度宽度，可以按比例放大缩小，而且能设置是否允许用户自行缩放。 ?...三、响应式开发 1、什么是响应式开发 在移动互联日益成熟的时候，我们在桌面浏览器上开发的网页已经无法满足移动设备的阅读。 通常的做法是针对移动端单独做一套特定的版本。...3、 响应式开发的原理 CSS3中的Media Query（媒介查询），通过查询screen的宽度来指定某个宽度区间的网页布局。 超小屏幕：768px以下（移动设备）。...中定义了一套响应式的网格系统，其使用方式就是将一个容器划分成12列，然后通过col-xx-xx的类名控制每一列的占比。...12 data-slide-to属性是指当前的li元素绑定的是第几个轮播项 13 注意，默认必须给其中某个li加上active，展示的时候就是焦点项目 14 -->

    3.6K40

    Java企业微信开发_09_身份验证之移动端网页授权(有完整项目源码)

    1.3 移动端网页授权流程 （1）用户点击1.2中菜单按钮，跳转至授权页面 （2）用户授权成功，页面重定向到 redirect_uri?... Contacts_UserService类 （5） 拿到 user_ticket后可选择去使用user_ticket获取成员详情（其中包括用户头像） 在此我们只关注于打通 企业微信官方文档中 移动端网页授权...相关的接口，这是基础，至于实际工作中企业是如何去具体实现他们自己的授权业务，暂时不在我们讨论的范围内。...，每个一级菜单都有二级菜单项 * * 在某个一级菜单下没有二级菜单的情况，menu该如何定义呢？...ms.createMenu( accessToken, menu, WeiXinParamesUtil.agentId); } }  2.3 移动端网页授权业务类

    2.8K40

    跨平台移动APP开发进阶(二)：HTML5+、mui开发移动app教程

    mobileweb 的文件存放在web 服务器上，而移动App 的文件存放在手机本地，编写移动App 的html、js、css文件被打包到ipa或apk等原生安装包，在手机客户端运行。...带入了移动端，从此前端人员前后移动端通吃。...前端涉及app的两种方式 适应移动端的网页 大家都很熟悉的bootstrap，和现在刚出来的amazeui就是这种方法的代表，说的简单点就是对移动端做了适配，布局样式组件都适合移动端展示。...可以说nodejs将js带到后端，h5+将js带到移动端。...Bootstrap:适合移动端浏览网页适配，移动端浏览效果不错，但是还是网页。 jquery mobile:专门对移动端做定制，看起来就像手机应用一样，js+css，国外的，不推荐，有坑。

    4.5K21

    前端成神之路-01_jQuery

    常见的JavaScript 库：jQuery、Prototype、YUI、Dojo、Ext JS、移动端的zepto等，这些库都是对原生 JavaScript 的封装，内部都是用 JavaScript...j 就是 JavaScript； Query 查询； 意思就是查询js，把js中的DOM操作做了封装，我们可以快速的查询使用里面的功能。...相当于原生 js 中的 DOMContentLoaded。 不同于原生 js 中的 load 事件是等页面文档、外部的 js 文件、css文件、图片加载完毕才执行内部代码。 更推荐使用第一种方式。...因为原生js 比 jQuery 更大，原生的一些属性和方法 jQuery没有给我们封装. 要想使用这些属性和方法需要把jQuery对象转换为DOM对象才能使用。...原生 JS 中 className 会覆盖元素原先里面的类名，jQuery 里面类操作只是对指定类进行操作，不影响原先的类名。 1.4.3.

    12K10

    05_CSS进阶技巧

    我们以 icomoon 字库网为例，将下载包解压，解压之后的文件如图： 把下载包里面的 fonts 文件夹放入页面根目录下 在CSS样式中全局声明字体：简单理解把这些字体通过css引入到我们页面中 一定要注意字体文件路径问题...使用图标 首先标签添加一个 iconfont 类名 再给标签添加一个图标对应的类名 图标大小通过 font-size 来调整 4 CSS 用户界面样式 4.1 什么是界面样式 所谓的界面样式，就是更改一些用户操作样式...更改用户的鼠标样式 表单轮廓 防止表单域拖拽 4.2 鼠标样式 cursor 设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状 li { cursor: pointer; } 属性值...（了解） 多行文本溢出显示省略号，有较大的兼容性问题，适合于 webKit 浏览器或移动端（移动端大部分是webKit内核） overflow: hidden; text-overflow: ellopsis...： 让每个盒子 margin 往左侧移动 -1px 正好压住相邻盒子边框 鼠标经过某个盒子的时候，提高当前盒子的层级即可 如果没有定位，则加相对定位（保留位置） 如果有定位，则加 z-index 7.2

    6810

    （强烈推荐）基于SSM和BootStrap的共享云盘系统设计（项目实现：文件分类）

    重 点：文件读取、弹出层显示 难 点：LayUI+JS实现弹出框 内 容：登录成功后，点击不同的分类，显示对应分类下的缩略图或文件名称。 ? 图1 文件分类页面 1....使用JS显示文件分类框 在WebContent/WEB-INF/menu.jsp页面中，点击左侧的菜单选项（如图片、文档、视频等），将触发index.js中的searchFileType()方法...目录切换 在index.js中添加changeTypeTab()方法，当点击不同的菜单时，切换为不同的目录，并在该目录下根据后台返回的文件地址，遍历显示出所对应的文件，代码如下所示； /**切换文件类型...后台处理显示分类文件 1）在FileController类中添加searchFile()方法，用于根据前台所传来的分类信息，获取该用户所对应的分类文件地址，并返回前台显示，代码如下所示； /**...e.printStackTrace(); return new Result(371, false, "查找失败"); } } 2）在FileService类中添加

    76210

    【应用】Markdown 在线阅读器

    功能 阅读器 支持文件拖拽 兼容移动端 Prism.js / Highlight.js 代码高亮 自动生成目录 本地图片显示 导出 Html （包含样式） 扩展功能 Toto 列表 MathJax 时序图...marked 将 markdown 格式转为 html 格式，这是一个 js 的库，可以直接在浏览器端使用。...首先读取本地文件，然后将 的 src 路径替换为图片内容 。...默认情况下，页内锚链接跳转之后，目标标签（上面代码中的 ）会移动到页面的最顶部，但是在我们的程序中有一个固定的 header，如果跳转到最顶部，目标标签会被 header 遮挡住，所以我们希望目标标签移动到距离页面顶部...使用时需要使用 JSON.parse 方法将字符串转为对象。 导出文件 通过使用 FileSaver.js，我们可以方便的在浏览器端生成文件，并提供给用户下载。

    3K20

    【前端基础篇】JavaScript之jQuery介绍

    前言 在阅读过程中可以把代码片复制到vscode上去浏览器看实际效果，更易理解喔 JQuery基本介绍和使用方法 W3C 标准给我们提供了⼀系列的函数, 让我们可以操作: ⽹⻚内容 ⽹⻚结构 ⽹⻚样式...removeClass(): 移除元素的一个或多个类，通常与addClass()配合使用，用于动态样式切换。...; }); // 用户提交表单时，弹出提示 change(): 当表单元素的值发生变化时触发，适用于下拉菜单或单选按钮等。...alert("动画完成"); }); // 此代码将使 #elementId 渐渐变透明，同时向右移动50px，并在5秒内切换高度 ajax(): 用于进行异步HTTP请求，可以加载数据而无需重新加载页面...GET方法从指定URL加载数据，并在成功时将其显示在 #elementId 元素中 fadeIn() / fadeOut(): 处理淡入淡出效果，常用于显示或隐藏内容。

    9910

    jQuery 教程

    独立文件中使用 jQuery 函数 如果您的网站包含许多页面，并且您希望您的 jQuery 函数易于维护，那么请把您的 jQuery 函数放到独立的 .js 文件中。...通过 jQuery 遍历，您能够从被选（当前的）元素开始，轻松地在家族树中向上移动（祖先），向下移动（子孙），水平移动（同胞）。这种移动被称为对 DOM 进行遍历。...，将重复的部分（例如导航栏）放入单独的文件，使用下列方法进行导入： //1.当前文件中要插入的地方使用此结构： ...() 判断指定参数是否是一个窗口 $.isXMLDoc() 判断一个DOM节点是否位于XML文档中，或者其本身就是XML文档 $.makeArray() 将一个类似数组的对象转换为真正的数组对象 $.map...适用于一些菜单的导航，支持基于 cookie 的持久性菜单。

    17K20
    点击加载更多

    扫码

    添加站长 进交流群

    领取专属 10元无门槛券

    手把手带您无忧上云

    扫码加入开发者社群

    相关资讯

    热门标签

    更多标签

    活动推荐

      运营活动

      活动名称
      广告关闭

      腾讯云开发者

      扫码关注腾讯云开发者

      扫码关注腾讯云开发者

      领取腾讯云代金券

      热门产品

      热门推荐

      更多推荐

      Copyright © 2013 - 2025 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

      深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

      腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号 | 京公网安备号11010802020287

      领券