文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布

「拥抱开源」这个假前端开发有点虎

---- 01 页面分析 上周的实现思路是：表格以上部分拆为三层 div 来实现。 导致出现的问题：每行元素不能固定在应该呆的位置，给人一种整个页面元素很飘忽不定的感觉。...为了方便实现，这次把表格以上部分拆为左右两块区域。 左边的区域，占大部分宽度。其中内部元素分为三层。 右边的区域，占小部分宽度。其中内部元素分为两层。...它将一行的宽度定义为 12 列，我们想要实现的左右比例是 2:1，也就是两个 div 分别使用 col-8、col-4 的样式。 得到左右比例之后，我们还需要一个上下三层的划分。..."> html> 于是，得到了一个左对齐的页面。...全局的字体、文字大小与行高。 自定义指定高度、行高是 40 px 的样式。 通过增加两个样式，以及对原代码的重排。这样简简单单就能让产品“裂开”的页面，变得整整齐齐。

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

    前端移动web-day05学习笔记

    由 div + span元素组成 bootstrap栅格系统：https://v3.bootcss.com/css/#grid boostrap的核心技术（实现响应式布局的核心技术） 将屏幕以表格的形式划分为不同的区域...这个框架就是别人已经写好的css和JavaScript，我们要使用它，首先需要把这些样式和javascript相关文件下载下来，然后在我们的页面中引用这些文件就可以使用这个框架了，直接在这个网站下载，下载地址为...container尺寸是固定的（1170,970,750,100%） container-fluid的尺寸是铺满全屏: 100% b.row:行 默认没有高度，背景色、边框 默认宽度为100% 继承版心的宽度...768时可以排成一行，小于768时每个栅格独占一行 xs:超小栅格,这种栅格所有屏幕宽度下都会排成一行 x(1-12之间的数字，尺寸比例)：bootstrap将水平方向分为12份，每一份表示row宽度的...，所有栅格默认是靠左对齐的，但是栅格在排列时也可以往右偏移一段距离，通过偏移的样式类就可以了，偏移的样式类和栅格一样，也分为四种 1、.col-lg-offset-x x代表1~12的数字，它表示栅格偏移的宽度份数

    3.6K20

    css经典布局——双飞翼布局

    圣杯布局和双飞翼布局达到的效果基本相同，都是侧边两栏宽度固定，中间栏宽度自适应。...，通过左移和右移来使得左右两边的内容得以很好的展现，而双飞翼则是在center这个div中再加了一个div来放置内容，在给这个新的div设置margin-left和margin-right 。...注意：为了安全起见，最好还是给body加一个最小宽度! 双飞翼布局要求 header和footer各自占领屏幕所有宽度，高度固定。 中间的container是一个三栏布局。...三栏布局两侧宽度固定不变，中间部分自动填充整个区域。 中间部分的高度是三栏中最高的区域的高度。 header和footer各自占领屏幕所有宽度，高度固定。 中间的container是一个三栏布局。...三栏布局两侧宽度固定不变，中间部分自动填充整个区域。 中间部分的高度是三栏中最高的区域的高度。

    1.4K20

    jQuery.dotdotdot多行文本省略号插件的使用方法

    height: null,             /* 元素的（最大）高度:              null: 判断CSS (max-)的高度;              number: 设置一个固定的高度.../单词 或者 "letter"/字母. */             watch: "window",             /* 是否更新省略号:              true: 监测元素的宽度和高度...;              "window": 检测窗口的宽度和高度. */         });     }); 在插件被激发之后，通过存储在“dotdotdot”数据属性中的API可以获得一系列的方法...*/         API.watch();         /* 开始监视包装器或窗口的宽度和高度。 ...*/         API.unwatch();         /* 停止监视包装器或窗口的宽度和高度。 */     }) 简单的页面演示代码： <!

    2.9K01

    【JSjQuery——功能实现】传送门（蓝桥杯真题-2458）【合集】

    本题需要在已提供的基础项目中使用 JS/jQuery 等知识完善代码，最终实现该功能。...div id="lift">：侧边栏容器，包含三个链接和分隔线。 标签：三个链接，分别绑定了 toFunction 函数，点击时会调用该函数并传入不同的滚动高度参数。...0，并使用 box-sizing: border-box 使元素的宽度和高度包含内边距和边框。...a { cursor: pointer; }：将链接的鼠标指针样式设置为手型。 #top、#middle、#foot：分别设置顶部、中间和底部区域的宽度、高度、居中显示和背景图片。...#lift：设置侧边栏的样式，包括宽度、高度、背景颜色、固定位置、居中显示和使用 Flexbox 布局。 #lift a：设置侧边栏链接的样式，包括宽度、高度、居中显示和去除下划线。

    1.5K00

    BootStrap 前端框架简介

    还是使用以前的固定单位去布局，会引发两个问题： （1）分辨率太大，网页两边留白太多 （2）分辨率太小，页面显示不完全 概念：设备无关性布局方式；在css的发展过程中，逐渐出现了许多的响应式布局方式，今天将介绍的...历史： 1.固定布局：使用的是div aside article标签，width：xxx px;像素； 2.浮动 百分比的方式；width:100%; widht:90%,发现比刚才要好多了；还是有问题...响应式网格视图通常有12列，总宽度为100％，并在调整浏览器窗口大小时缩小和展开。 让我们开始构建响应式网格视图。 首先确保所有HTML元素都将box-sizing属性设置为border-box。...这可确保填充和边框包含在元素的总宽度和高度中。...使用行样式row来创建水平的列组。 内容需要放置在列中，并且只有列可以是行的直接子节点。 预定义的类如 .row 和 .col-sm-4 可用于快速制作网格布局。

    5K10

    css经典布局——圣杯布局

    效果图 原本录制了一个小视频，奈何不能上传到博客中，视频中通过缩放页面可以发现随着页面的宽度的变化，这三栏布局是中间盒子优先渲染，两边的盒子框子宽度固定不变，即使页面宽度变小，也不影响我们的浏览...注意：为了安全起见，最好还是给body加一个最小宽度! 圣杯布局要求 header和footer各自占领屏幕所有宽度，高度固定。 中间的container是一个三栏布局。...三栏布局两侧宽度固定不变，中间部分自动填充整个区域。 中间部分的高度是三栏中最高的区域的高度。 header和footer各自占领屏幕所有宽度，高度固定。 中间的container是一个三栏布局。...三栏布局两侧宽度固定不变，中间部分自动填充整个区域。 中间部分的高度是三栏中最高的区域的高度。 圣杯布局的三种实现 【1】浮动 先定义好header和footer的样式，使之横向撑满。...div id="footer">#footerdiv> html> 【2】flex弹性盒子 header和footer设置样式，横向撑满。

    3.6K10

    从零开始学 Web 之 移动Web（七）Bootstrap

    ，可以极大的节约开发成本，将这些通用的组件缩合到一起就形成了前端框架。...Framework7 主要的作用就是让你有机会能够使用 HTML，CSS 和 JavaScript 简单明了地开发 iOS 和 Android 应用。...Bootstrap是基于HTML5和CSS3开发的，它在jQuery的基础上进行了更为个性化和人性化的完善，形成一套自己独有的网站风格，并兼容大部分jQuery插件。...当屏幕宽度 > 1200，则页面宽度固定为 1170px 当屏幕宽度 992~1200，则页面宽度固定为 970px 当屏幕宽度 768~992，则页面宽度固定为 750px 当屏幕宽度 宽度固定为...“行（row）”必须包含在 .container （固定宽度）或 .container-fluid （100% 宽度）中，以便为其赋予合适的排列（aligment）和内补（padding）。

    6.4K30

    CSS的盒子模型

    padding的区域有背景颜色，css2.1前提下，并且背景颜色一定和内容区域的相同。 也就是说，background-color将填充所有boder以内的区域。 ?...标签分为两种等级： 1） 块级元素 ● 霸占一行，不能与其他任何元素并列 ● 能接受宽、高 ● 如果不设置宽度，那么宽度将默认变为父亲的100%。...默认的宽度，就是文字的宽度。 在HTML中，我们已经将标签分过类，当时分为了：文本级、容器级。...此时这个标签，和一个div无异： ● 此时这个span能够设置宽度、高度 ● 此时这个span必须霸占一行了，别人无法和他并排 ● 如果不设置宽度，将撑满父亲 标准流里面限制非常多，标签的性质恶心...这样，这个div的背景、边框就能够根据p的高度来撑开了。 4）overflow:hidden; 这个属性的本意，就是将所有溢出盒子的内容，隐藏掉。但是，我们发现这个东西能够用于浮动的清除。

    1.5K30

    【Html.js——图片折叠效果】折叠手风琴（蓝桥杯真题-1763）【合集】

    介绍 本次挑战需要实现图片折叠的效果，请使用 jQuery 语法完成代码。...overflow: hidden;：隐藏溢出部分，防止内容超出视口。 height: 100vh;：将 body 的高度设置为视口高度的 100%。...min-width: 600px; max-width: 900px; width: calc(100% - 100px); height: 400px;：设置 .options 容器的宽度和高度，并设置最小和最大宽度...工作流程 ▶️ 初始状态： HTML 部分创建了多个选项元素，部分元素添加了 active 类。 CSS 部分为元素设置了基本样式，包括布局、背景、阴影和过渡效果。...具有 active 类的元素使用 flex-grow 占据更多空间，其他元素占据较少空间。 页面通过 Flex 布局和媒体查询实现了基本的布局和响应式设计。

    1.8K00

    【应用】信息短时存储

    流程 程序主要的流程就是首先在文本框中输入或者粘贴一些内容，然后保存到服务器（使用的是新浪sae），保存成功之后会返回给客户端一个编号，通过该编号就可以访问存储的内容。...div> bootstrap有自适应机制，页面内容的宽度会随浏览器窗口的大小改变而改变。...所以我们更改了一下其默认行为，当浏览器窗口宽度大于800px时，将网页内容的宽度固定为800px。实现方式很简单，加上下面的css代码即可。...> 不过按上面修改之后在低于IE9的浏览器中工作并不理想，可能是IE9以下对 @media 支持不太好，所以在js的代码中加了一个判断，如果浏览器支持html5的一些特性(使用jquery判断)就使用toaster...> 底部固定 当页面内容的高度小于屏幕的高度时，将footer固定在底部，当页面内容的高度大于屏幕高度时，footer会随着滚动条滚动，不会遮盖到正常的内容，下面一个解决方法，这里 是原文地址。

    1.8K30

    给萌新HTML5 入门指南

    后面我们将结合一系列文章，深入浅出的介绍关于HTML，CSS和JavaScript的常用功能及编程技巧。 那么首先来了解下HTML5都更新了那些内容： 什么样的网页是HTML5网页？...只要html页面第一行是 html> 浏览器就会按照HTML5标准去解析网页，无论页面中是否使用了HTML5新增内容 HTML5新增了哪些内容？...HTML5页面布局 常用的页面布局方式有很多种，比如 最早的静态表格布局 通过栅栏划分页面的流式布局 根据屏幕大小自动调整内容的自适应布局 融和流式布局和自适应布局的响应式布局 以上布局主要通过使用css...header和footer自适应宽度，aside固定宽度并可收缩，main区域自动根据剩余空间填充。 ? ? ?...body设置高度 100vh， 这里使用了CSS3 的新单位vh，即 view height 视窗高度，100vh相当于html, body 高度100%，同样还有vw代表视窗宽度 body设置flex

    1.6K41

    【Jquery练习】tab栏切换

    ---- 文章目录 前言 排他思想 按钮切换 HTML、CSS jQuery Tab栏切换实现效果 HTML部分 CSS部分 Jquery部分 总结 ---- 前言 ---- 排他思想 在实现今天的练习之前...> jQuery 实现思路： 1、添加点击事件 2、将当前点击按钮的背景色改成粉色 3、将兄弟节点的背景色去掉 $(document).ready(function...tab页面标签栏时，tab页面内容也相应发生改变，如下是实现的效果，接下来跟着笔者一起来试试吧~ HTML部分 本次页面包含两部分，即tab栏标签栏和tab栏内容结构。...2、设置标签栏的宽度、高度，并清除li的默认样式，设置边框、边距，使文字居中显示。 3、为内容结构部分设置宽度、高度、背景色、边距。 4、设置标签栏第一个元素的底色，颜色，用于区分。...5、设置内容结构部分为块级元素，即block。

    7.6K30

    前端面试实录CSS篇（最近一周）

    当重置浏览器大小的过程中，页面会根据浏览器的宽度和高度重新渲染页面。 8. 对 BFC 的理解，如何创建 BFC？...• 使用 css3 的 transform 属性： transform: scale(0.5); • 内容固定不变的情况下，将文字内容做成图片，使用图片来解决 10. 单行/多行文本溢出？...，任何设备的物理像素都是固定的 • 像素px: 页面布局基础，分为css 像素和物理像素 • 百分比%: 实现响应式效果 • em和rem: 相对于 px 更具灵活性，它们都是相对长度单位，区别为，em...相对于父元素，rem相对于子元素 • vw/vh: 视图窗口单位，vw 宽度，vh 高度，还有 vmin 和 vmax 两个相关单位 20. px，em, rem 的区别以及使用场景？...两栏布局的实现 • 左边固定，右边自适应 • 利用浮动，将左边元素宽度设置为 200px，并且设置向左浮动。

    59810

    JQuery第三节

    “div”).html(“这是一段内容”); //获取内容 $(“div”).html() //设置内容 $(“div”).text(“这是一段内容...”); //获取内容 $(“div”).text() 区别：html方法会识别html标签，text方法会那内容直接当成字符串，并不会识别html标签。...//获取可视区宽度 $(window).width(); //获取可视区高度 $(window).height(); 1.4. scrollTop与scrollLeft 设置或者获取垂直滚动条的位置...//获取页面被卷曲的高度 $(window).scrollTop(); //获取页面被卷曲的宽度 $(window).scrollLeft(); 【案例：仿腾讯固定菜单栏案例】 【案例：小火箭返航案例...多库共存 jQuery使用$作为标示符，但是如果与其他框架中的$冲突时，jQuery可以释放$符的控制权. var c = $.noConflict();//释放$的控制权,并且把$的能力给了c

    1.1K30

    实例详解：Flex布局（二）

    同时也提到过，通过使用Flex布局，可以很优雅地解决很多CSS布局问题。本文将通过三个简单的实例，实际应用上篇文章的基础理论知识，展示下Flex布局是如何解决CSS布局问题。...一．垂直居中 这里同时用非flex布局和flex布局两种方式来实现，可以对比两种实现方式的差异。...1.1用margin实现垂直居中 实现方式： 父元素采用相对定位，子元素采用绝对定位，先将元素的定点定位到父元素的中心，再使用margin负值法，即子元素自身宽度、高度的一半，将其拉回到父元素的中心。...在我之前的文章圣杯布局与双飞翼布局中详细介绍过如何实现一个圣杯布局： (1)中间的三栏布局，这里采用margin负值法：两边两栏宽度固定，中间栏宽度自适应，左栏、右栏、中间栏向左浮动，左栏的margin-left...(2)给container设置padding-left和padding-right属性，值分别为左栏、右栏的宽度； (3)将左右两栏设置为相对定位，同时左栏的left值设为-左栏宽度，右栏的right设为

    2.9K432
    点击加载更多

    相关资讯

    热门标签

    更多标签

    活动推荐

      运营活动

      活动名称
      广告关闭

      腾讯云开发者

      扫码关注腾讯云开发者

      扫码关注腾讯云开发者

      领取腾讯云代金券

      热门产品

      热门推荐

      更多推荐

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

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

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

      领券