JavaScript02-页面布局

最新推荐文章于 2023-04-26 20:35:55 发布
最新推荐文章于 2023-04-26 20:35:55 发布
阅读量591 收藏
点赞数
分类专栏： JavaScript总结介绍 文章标签： flex css 布局 ie 8
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Hanker_Percy/article/details/78242149
版权

页面布局

基础问题

假设高度已知，请写出三栏布局，其中左栏、右栏宽度各为300px，中间自适应。

  • 浮动
  • 绝对定位
  • flexbox
  • display:table-ceil
  • grid布局
延伸问题

  • 每个方案的优缺点

    • float，比较好的兼容性需要清除浮动，处理好与周边元素的关系
    • absolute，方便快捷，布局脱离文档流，导致方案的可使用性较差
    • flex布局，解决上述两个的缺点，移动端使用flex更多，ie8不支持
    • table-ceil布局，兼容性好，对SEO不够友好，每一个部分可以理解为单元格，当其中的一个表格高度变高，其他的两个表格也会变高
    • grid布局，代码量简洁，新技术

  • 假设去掉高度，哪个不能再用

    • float不能用，中间的内容被左侧挡住，因为撑开高度以后，左侧没有了遮挡物，就会流向左侧。
      • 解决方案：创建BFC
    • absolute不能用
    • flex可以使用。
    • table-ceil可以使用。
    • grid不能用

  • 考虑兼容性

小结
  • 语义化总结到位
  • 页面布局理解要深刻
  • CSS基础知识扎实
  • 思维灵活且积极上进
  • 代码书写规范
页面布局的变通

  • 三栏布局

    • 左右宽度固定，中间自适应
    • 上下高度固定，中间自适应

  • 两栏布局

    • 左宽度固定，右自适应
    • 右宽度固定，左自适应
    • 上高度固定，下自适应
    • 下高度固定，上自适应

本文章所有内容均来自慕课网课程总结

hanker_percy
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
40种网页布局js源代码
04-14
40种国外网站的布局例子，对网页布局设计有很好的参考价值
2. 如何用Javascript低代码进行HTML页面布局？
YUBINGCHAO的博客
11-11 45
使用低代码JavaScript层组件布局。
JavaScript-页面布局-div布局-盒子模型
插件开发
03-27 3823
文章目录1.盒子模型2.定位方式3.排列属性-float和clear4.块和内联属性5.作者答疑   在使用Html构建界面时，最关键的标签是div，这是一个有着各种属性的块状标签，能够以绝对定位和相对定位的方式构建各种界面模型。 1.盒子模型   div标签在界面排版时，使用的是盒子模型，如下图所示，主要有3大属性来标识相对关系，padding标识内部内容距离border的距离，border边框的宽度，margin是border距离外部元素的距离。使用这三大距离，可以有效控制该元素与周边元素的相对距离。如
五种布局方式
qq_52654932的博客
04-26 481
即传统Web设计，网页上的所有元素的尺寸一律使用px作为单位。1、布局特点不管浏览器尺寸具体是多少，网页布局始终按照最初写代码时的布局来显示。常规的pc的网站都是静态（定宽度）布局的，也就是设置了min-width，这样的话，如果小于这个宽度就会出现滚动条，如果大于这个宽度则内容居中外加背景，这种设计常见于pc端。2、设计方法PC：居中布局，所有样式使用绝对宽度/高度(px)，设计一个Layout，在屏幕宽高有调整时，使用横向和竖向的滚动条来查阅被遮掩部分；
通过js实现页面布局
_陌默
04-21 2794
（1）请实现上图所示的布局 （2）有以下已知条件： center 区域高度必然大于 left、right 区域 left、right 区域溢出后与 center 区域共用同一滚动条 当 left、right 区域内容溢出后，请实现以下功能： left、right 区域跟随滚动条滚动到底部就固定住，center 区域继续滚动 滚动条向上滚动，当 center 区域滚动到和 left、right 相同高度时，left、right 跟随滚 动，滚动到顶部时，left、right ...
自动解决页面和布局路由-JavaScript开发
05-26
vue-cli-plugin-auto-routing提供自动路由功能的Vue CLI插件。 概述确保您处于由Vue CLI v3生成的项目中。 您可以通过运行以下命令...src /├──页面/├──布局/└──router.js页面/目录下的页面.vue文件将是自动的
一个简单轻量级的Javascript库用于动态网格布局
08-09
一个简单，轻量级的Javascript库，用于动态网格布局
JavaScript 页面布局
07-12
一个完整的布局小项目，显示项目的布局结构，适合初学者
Chrome扩展程序可改善概念页面的布局-JavaScript开发
05-26
概念布局-Chrome扩展程序是什么？ Chrome扩展程序，使您可以更好地查看Notion数据库页面！ 它会自动隐藏通常会下推页面内容的页面属性列表。 这个怎么运作？ 默认情况下，属性列表是折叠的：单击栏上的可打开/隐藏...
JavaScript-Effects
05-22
每当您提交到该存储库时，GitHub Pages都将运行从Markdown文件中的内容重建站点中的页面。 降价促销 Markdown是一种轻巧且易于使用的语法，可用于样式化您的文字。 它包括以下约定 Syntax highlighted code block #...
网站页面简单布局
03-21
简单的网站布局 用于新手使用 网页是一个包含HTML标签的纯文本文件，它可以存放在世界某个角落的某一台计算机中，是万维网中的一“页”，是超文本标记语言格式（标准通用标记语言的一个应用，文件扩展名为.html或.htm）。网页通常用图像档来提供图画。网页要通过网页浏览器来阅读
JavaScript（事件句柄）+CSS+HTML5实现 页面布局设计
weixin_64227570的博客
11-17 439
在head 标记中插人 script 标记，在 script 标记中分别定义＄(id)、mover() 、mout()、mclick( )、mdown() ,mdclick等函数注：获取页面对象的函数＄(id)，代码如下所示：}
vuejs页面如何布局
weixin_35757531的博客
02-14 842
Vue.js 支持多种布局方式，其中常用的有以下几种： 基于 Flexbox 的布局：通过 CSS 的 Flexbox 布局可以轻松实现复杂的布局。 基于 Grid 的布局：Grid 布局是一种二维布局，可以更灵活地实现布局。 使用第三方 UI 库：如 Bootstrap、Element UI 等都提供了很多完整的布局组件，可以快速实现复杂的布局。 除此之外，Vue.js 还支持自定义布...
js层是这么完成页面页面的布局展布的
wyqwilliam的博客
11-08 228
/** *Created by zmj on 2018/8/29 */ import Main from '@/views/scene-common/main-page/Main.vue'; export const projectDetail = { name: '六方云智', scene: '企业内网态势感知' }; export const router = [ ...
3.1、public公共样式
weixin_44195250的博客
09-27 322
public>index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="vi...
JS UI框架：构建用户界面布局说明
HarmonyOS技术社区
11-13 3959
JS UI框架在不同设备的布局示例如下： 图1不同设备的布局示例 JS UI框架中智慧屏以720px（px指逻辑像素，非物理像素）为基准宽度，根据实际屏幕宽度进行缩放，例如当width设为100px时，在宽度为1440物理像素的屏幕上，实际显示的宽度为200物理像素。智能穿戴的基准宽度为454px，换算逻辑同理。 一个页面的基本元素包含标题区域、文本区域、图片区域等，每个基本元素内还可以包含多个子元素，开发者根据需求还可以添加按钮、开关、进度条等组件。在构建页面布局时，需要对每个基本元素思考以下几..
前端html+css+js开发：瀑布流布局（附源码）
qq_57210034的博客
05-21 1002
效果图： 注： 全屏模式下图片的自动填充还没有完善 注：半屏模式下图片会自动填充，出现页面奔溃现象时多刷新几次 css代码： * { margin: 0; padding: 0; } #main {/*整体相对定位，因为每个小盒子的位置是通过计算再由绝对定位放置，是需要相对于main盒子*/ position: relative; } .box { padding: 15px 0 0 15px;/*后面js获取的高度包括padd
javascript布局
u011674177的专栏
12-17 855
段落一般用定义，用表示换行。 布局方式，div与table，使用frameset可以同一页面中显示不同网页。 iframe用于在网页内显示网页。 布局样式 div#container{width:500px} div#header {background-color:#99bbbb;} div#menu {background-color:#ffff99;height
javascript学习笔记---页面布局1
time
02-17 336
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&gt; &lt;style&gt; body{ margin:0
echarts页面布局
最新发布
03-26
ECharts是一个基于JavaScript的开源可视化库，用于构建交互式的数据可视化图表。在ECharts中，页面布局主要通过HTML和CSS来实现。 一般来说，ECharts的页面布局可以分为以下几个步骤： 1. 引入ECharts库：在HTML文件中引入ECharts的JavaScript文件，可以通过CDN或者本地文件引入。 2. 创建容器：在HTML文件中创建一个容器元素，用于承载ECharts图表。可以使用div元素，并为其指定一个唯一的id属性。 3. 设置容器样式：使用CSS样式为容器元素设置宽度和高度，以及其他样式属性，以适应页面布局需求。 4. 初始化图表对象：在JavaScript代码中，通过调用echarts.init()方法初始化一个图表对象，并传入容器的id属性作为参数。 5. 配置图表选项：通过设置图表对象的option属性，配置图表的各种选项，包括图表类型、数据、样式等。 6. 渲染图表：调用图表对象的setOption()方法，将配置好的选项应用到图表中，并渲染出来。 下面是一个简单的示例代码： HTML部分： ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ECharts页面布局示例</title> <style> #chartContainer { width: 600px; height: 400px; } </style> </head> <body> <div id="chartContainer"></div> <script src="echarts.min.js"></script> <script src="main.js"></script> </body> </html> ``` JavaScript部分（main.js）： ```javascript // 初始化图表对象 var chart = echarts.init(document.getElementById('chartContainer')); // 配置图表选项 var option = { title: { text: '柱状图示例' }, xAxis: { data: ['A', 'B', 'C', 'D', 'E'] }, yAxis: {}, series: [{ name: '销量', type: 'bar', data: [5, 20, 36, 10, 10] }] }; // 渲染图表 chart.setOption(option); ``` 以上代码演示了一个简单的柱状图示例，通过设置容器的宽度和高度，以及配置图表选项，实现了ECharts的页面布局。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值