HTML布局动态随窗口变化

最新推荐文章于 2023-09-06 08:56:06 发布
最新推荐文章于 2023-09-06 08:56:06 发布
阅读量1.1k 收藏
点赞数
分类专栏： HTML JQuery CSS JavaScript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zzd1989812/article/details/21120863
版权
JavaScript 同时被 3 个专栏收录
9 篇文章 0 订阅
订阅专栏
JQuery
5 篇文章 0 订阅
订阅专栏
HTML
1 篇文章 0 订阅
订阅专栏
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="jquery-1.6.2.min.js" type="text/javascript"></script>
<title>HTML布局随窗口动态变化</title>
</head>


<script>
$(function(){
resizeGolbalBody();
$(window).resize(function(){
resizeGolbalBody();
});
});
function resizeGolbalBody(){
var width=window.innerWidth-20;
var height=window.innerHeight-20;
width<1388?width=1388:width=width;
height<900?height=900:height=height;
$("#container").css({width:width+"px",height:height+"px"});
}


</script>
<style>
#container{
background-color:#09F;
box-shadow:0 0 5px #000;
border-radius:10px;
text-align:center;
margin:0px auto;
}
#header{
border:none;
width:100%;
height:10%;
float:left;
}
#main{

width:100%;
height:80%;
clear:both;
}
#m_left{
background-color:#CCC;
width:15%;
height:auto;
float:left;
margin-left:4px;
}
#m_body{
background-color:#FFF;
width:84%;
height:100%;
float:left;
margin-left:4px;

}
#footer{
width:100%;
height:10%;
float:left;
}




</style>
<body>
<div id="container">
<div id="header">
       <p>前端技术</p>
    </div>
    <div id="main">
    <div id="m_left">
        <ul>
            <li><a href="#">系统工程</a></li>
                <li><a href="#">外国语言</a></li>
                <li><a href="#">科学技术</a></li>
            </ul>
        </div>
        <div id="m_body">
        <iframe src="http://www.51cto.com" width="100%" height="100%" scrolling="no" frameborder="0"></iframe>
        </div>
    </div>
    <div id="footer">    
    <p>版本所有 周正德——前端技术</p>
    </div>
</div>
</body>
</html>
周正德
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
html中ul跟随盒子移动,当用户滑动页面时将跟随页面移动的导航栏固定在页面上方...
weixin_30769779的博客
06-19 1268
场景:导航栏才开始是固定在页面的某一个区域,当用户向下滑动页面到一定的程度时,可将导航栏固定在页面的某一个位置.实例:oschina博客编辑界面的工具栏,当向下滑动页面时,工具栏将会被固定在页面最上方.(不知道有一个算不算小BUG,如果浏览器足够短,向下滑动,拉出编辑区域,工具栏任然还在.)效果PC端: 效果移动端: 特点:用jquery和普通的css代码控制衔接位置的属性,让过度看起来不是那么生...
HTML基础------2D变换动态效果的实现
m0_54803288的博客
04-09 1424
大家好，我是小埋，今天我们讲HTML基础之2D变换动态效果的实现。也是前端开发过程中很重要的知识点。 如果大家觉得有用的话可以 关注，点赞，收藏。谢谢！ ----废话不多说，直接上教程。 1. 效果图(动态) 2. 代码 <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>2D变换</title>...
JS控制全屏
MajorMayer
09-21 879
//开启全屏 function fullScreen(el) { var rfs = el.requestFullScreen || el.webkitRequestFullScreen || el.mozRequestFullScreen || el.msRequestFullScreen, wscript; if (typeof rfs != "undefined"
如何使用HTML的多媒体元素来创建动态效果
2301_77795034的博客
05-02 823
在 0% 和 100% 的关键帧中，我们将元素的位置设置为 translateX(0)，表示元素的位置不变。在 100% 的关键帧中，我们将元素的位置设置为 translateX(-500px)，表示元素的位置向左移动了 500px。最后，我们使用 setTimeout 函数逐帧修改样式状态，以便使颜色从透明度改为黑白交替，并使用 setInterval 函数每隔一秒钟更新一次动画。首先，让我们来了解一下什么是动态效果。需要注意的是，在实际应用中，我们需要对动画进行优化和调整，以适应不同的需求和场景。
HTML5与CSS3实现动态网页（上）
最新发布
delishcomcn的博客
09-06 1032
通过把任务的表情动作变化等分级后画成许多 瞬间的画幅，利用视觉暂留的原理。多媒体标签意义：多媒体标签的出现亦为之富媒体的发展以及支持不适用插件的抢矿下即可操作媒体文件，极大的提升了用户体验。行内样式（1000）> ID选择器 >类属性选择器和伪类选择器（10）> 元素和伪元素( 1 ) > * （0）使用CSS3 属性选择器，你可以指定元素的某个属性，或者你还可以同时指定元素的某个属性和其对应的属性值。父元素：not(子元素/子选择器) （Father:not(Children/selector)）
怎么制作HTML5页面让它适应电脑和手机的尺寸？
chongtang6895的博客
12-22 1351
1、 利用meta标签 Meta标签主要用来描述一个HTML网页文档的属性，如作者、日期时间、网页描述、关键词、页面刷新等，它的Description和Keywords属性，可加入网站的关键字，让网页利于搜索引擎。 <meta name="viewport" content="wid...
HTML5动态散花背景特效特效代码
03-20
6. **事件监听**：为了响应用户的交互，例如窗口大小改变或滚动，开发者可能会使用JavaScript的事件监听器（如`resize`和`scroll`事件）来调整背景特效的布局或行为。 7. **Web动画API**：HTML5的Web动画API（如`...
project13_HTMLCSS响应式布局_
10-04
2. **流式布局（Fluid Grids）**：响应式设计通常采用百分比单位而非固定像素，使布局能够随着浏览器窗口大小的变化而自适应。例如，使用`width: 50%`而非`width: 300px`，可以让元素占据其父容器的一半宽度。 3. *...
VUE 单页面使用 echart 窗口变化时的用法
10-15
本篇文章将详细介绍如何在Vue单页面应用中实现ECharts图表在窗口变化时的自适应。 首先，当窗口尺寸变化时，我们通常会注册一个 `window.resize` 事件监听器来触发图表的重绘。但在多处使用这个监听器时，可能会...
HTML,CSS前端所有页面布局技术教程
11-30
这种方式确保内容随着浏览器窗口大小的变化而平滑流动，适用于分辨率差异较小的情况。然而，当屏幕尺寸变化较大时，流式布局可能会导致元素比例失调。 4. 响应式布局： 响应式布局（Responsive Layout）是最先进的...
动态网格布局jQuery插件（改变浏览器窗口大小 自动变化）
11-02
5. 监听窗口变化：插件会自动处理窗口大小变化，无需额外编写代码。 六、示例代码 ```html <!DOCTYPE html> <html lang="zh"> , initial-scale=1.0"> ...
【前端记录】拖拽分割线实现动态布局
qq_37846311的博客
02-20 386
拖动分割线改变宽高的动态布局
动态改变html(根元素)的属性值font-size(移动端rem)
文杰的博客
01-30 2066
以屏幕宽度为计算单位，将屏幕分成固定的份数，如768(通常)、750(uni-app),将其设置为根元素的font-size。移动端 rem
html页面随着窗口变,HTML布局动态随窗口变化
weixin_39761558的博客
06-03 674
HTML布局随窗口动态变化 $(function(){ resizeGolbalBody(); $(window).resize(function(){ resizeGolbalBody(); }); }); function resizeGolbalBody(){ var width=window.innerWidth-20; var height=wi...
html移动端布局与页面自适应布局
weixin_48687415的博客
12-21 3538
常见的布局方式，这里指的是对于width和height在不同页面情况下的改变， 1.比如使用px，就是固定其高宽，不论页面怎样放大缩小，其占领的依旧是，使用px固定了的高宽。 2.又比如弹性布局，没有设置内容盒子的大小，其放大缩小所占的比列一样，但大小不一样 还有响应式布局，媒体布局等等，所以综上： 常见的页面布局方式有： 1.静态布局 即传统的固定px的布局 2.流式布局(Liquid layout)(栈栏系统) 主要划分区域的尺寸使用100%来表示 3.自适应布局（媒体查询布局） 即创建多个静
JS动态添加HTML布局
sunny_day的博客
08-25 7239
html: &lt;tab-pane :label="lab1" name="name0"&gt; &lt;div class="t1"&gt; &lt;i-table :columns="columns3":data="data3"&gt; &lt;/i-table&gt; &lt;
HTML页面中解决内容元素随窗口变化布局变乱问题
热门推荐
weixin_33739523的博客
04-11 1万+
1、给body加上一个min-width最小宽度，以px为单位，这样当页面变小时，当达到你所设置的最小宽度，body的宽度不再改变，超出的部分会用横向滚动条显示，其内所有元素的布局也不会受影响。 2、使用百分比设置宽度，所有会在页面变化后布局改变的元素的宽度都设置成百分比宽度，这样在缩放时，页面内的各个元素也会跟着缩放，宽度占比不变，当然前提是设置CSS样式前，先给body和html这两个元素设...
动态生成布局html,HTML5应用开发：神奇的动态布局库isotope教程
weixin_35600369的博客
06-05 577
目录1. isotope介绍2. 简单的isotope例子3. Sorting & Filtering4. 动态添加元素5. 神奇的布局机制6. 标记#Hash历史记录1. isotope介绍Isotope可以实现仅仅依靠CSS3无法实现的动态布局方式，可以动态添加，删除，排序，筛选元素。Isotope的动画引擎可以充分使用现代浏览器CSS动画中GPU硬件加速性能,。2.简单的isotop...
html页面随窗口大小
09-06
你可以使用CSS中的响应式布局来实现HTML页面随窗口大小的调整。以下是一些常用的方法： 1. 使用百分比或相对单位设置元素的宽度和高度，例如： ```html <div style="width: 100%; height: 50%;"> <!-- 内容 --> </div> ``` 这将使元素的宽度和高度相对于其父元素的尺寸进行调整。 2. 使用CSS媒体查询来根据窗口大小应用不同的样式，例如： ```html <style> @media screen and (max-width: 768px) { /* 在窗口宽度小于768px时应用的样式 */ } </style> ``` 在媒体查询中，你可以根据不同的窗口宽度应用不同的样式规则，以适应不同的屏幕大小。 3. 使用CSS Flexbox 或 Grid 布局来创建灵活的布局，例如： ```html <div style="display: flex; flex-wrap: wrap;"> <div style="flex: 1 0 25%;"> <!-- 内容 --> </div> <div style="flex: 1 0 25%;"> <!-- 内容 --> </div> <div style="flex: 1 0 25%;"> <!-- 内容 --> </div> </div> ``` 这将使子元素在容器内自动调整大小，并以灵活的方式排列。 这些方法可以帮助你实现HTML页面的响应式布局，使其能够随着窗口大小的变化而自动调整。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值