宽高自适应页面布局小案例

最新推荐文章于 2022-10-23 22:17:22 发布
最新推荐文章于 2022-10-23 22:17:22 发布
阅读量658 收藏 1
点赞数
分类专栏： HTML 文章标签： 自适应 布局
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_36499016/article/details/96898942
版权

head部分宽高固定

left宽度固定，高度自适应

right宽高自适应

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/reset.css"/>
		<style type="text/css">
			html,body.box{
				height:100%;
			}
			.head{width:100%; height: 80px; background: deepskyblue;}
			.main{
				width:100%;
				height: auto;
				position: absolute;
				top:80px;
				bottom:0;
				background: #eee;
			}
			.left{
				width:200px;
				height:100%;
				background: #ff0;
				float:left;
				margin-right: 10px;
			}
			.right{
				height:100%;
				width:auto;
				background: #333;
				overflow: hidden;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<div class="head"></div>
			<div class="main">
				<div class="left"></div>
				<div class="right"></div>
			</div>
		</div>
	</body>
</html>

 

谁家菜鸟初养成
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
页面自适应案例，适配pc端和移动端
11-15
页面自适应案例，适配pc端和移动端
自适应性网页demo实例
03-17
自己写的一个自适应网页的小例子，大家可以用来学习如何布局实现自适应网页（也就是随着浏览器窗口自动进行调整的网页啦～）
html自适应例子
12-06
html自适应例子html自适应例子html自适应例子html自适应例子html自适应例子html自适应例子
Flex布局案例练习（二）- 自适应布局
JHY97的博客
01-25 1571
Flex布局简单案例练习 一、自适应布局 不同的设备用不同的页面或局部伸缩 设计思路：判断设备的类型或控制局部的变化
宽度自适应的几个典型案例
lizeyang的专栏
03-06 3052
最近要对网站进行调整，将网页布局从原先的定宽改成宽度自适应，这里总结遇到的几个案例 案例一：设置宽度百分比，让网页中的两栏都按百分比来做宽度调整 -->按比例缩小 这种情况下，如果窗口宽度是1000px，则左右两栏分别是200px和800px，如果宽度是500px，左右两栏也会按比例缩成100px、400px。 案例二、左边栏是
自适应布局
weixin_30505751的博客
06-18 780
　　之前在几个CSS布局问题中，举了上下固定，中间自适应布局的例子，当时的例子父级元素的宽高都给定了，其实并不是个好例子，既然要自适应，父级元素就应该跟着页面大小变化，从而中间子元素也自适应。3种方法，其实是2种，因为是针对body，所以用fixed可以直接替换absolute来用。注意同时给html和body的height100%，只给一个不行。 <!DOCTYPE html>...
Flex布局做出自适应页面(语法和案例)
11-20
Flex布局简介 Flex英文为flexiable box，翻译为弹性盒子，Flex布局即弹性布局。 Flex布局为盒子模型提供了很大的灵活性，任何一个容器都可以指定为Flex布局，设置方法为： .box{ display: flex; } 行内元素使用...
bootstrap实现的自适应页面简单应用示例
08-31
Bootstrap使用了媒体查询（Media Queries）来实现响应式设计，通过设置不同的断点来控制页面布局的变化。 现在，让我们来分析 Bootstrap 实现的自适应页面简单应用示例。该示例使用了Bootstrap的导航栏（Navbar）...
jquery自适应布局的简单实例
01-19
* UIX页面布局 * 290353142@qq.com * exp: * $.uix.layout();//执行布局 * class=uix-layout-container;//标识布局容器 * class=uix_box;//用于调整 布局时将此元素高度铺满父容器(支持设置padding\margin\border) *...
微信小程序-瀑布流布局案例
04-08
在这个“微信小程序-瀑布流布局案例”中，我们主要关注的是瀑布流布局这一设计模式在小程序中的应用。 瀑布流布局，又称流式网格布局，是一种常见的网页和移动应用界面设计方式。它模仿了图书陈列的方式，使得页面...
产品介绍页面布局,实例
08-29
产品介绍页面布局，详细实例，CSS相关，解释如何利用CSS实现图片的页面布局
多种方式实现自适应布局（以两边固定中间自适应为例）
quanquanhe526的博客
10-30 1010
首先常见的两种布局是响应式布局（随着屏幕的大小可以进行不同的排版）与自适应布局（随着屏幕大小的改变只会进行相应的放大或缩小） 自适应的体验http://m.ctrip.com/html5/ 响应式的体验 http://segmentfault.com/ 本片主要讨论自适应布局： 布局的传统解决方案，基于盒状模型，依赖 display 属性 + position属性 + float属 也就
50个自适应Web设计实例
WP8HUB
10-17 795
Responsive Web Design，自适应Web设计，也有翻译成响应式Web设计的，个人认为前者更准确些。可以简单地理解为，网页布局可根据用户的显示屏幕分辨率自动调整宽度及布局，例如4列1292像素宽的布局，转到1025像素宽度，可自动简化成2列。Responsive Web Design是完全不同于传统设计的一项技术，随着智能手机和电脑平板电脑的普及，越来越多的网页设计采用这种人性化的设
CSS之布局系列--三列布局(两边固定，中间自适应)--方法/实例
IT利刃出鞘的博客
11-28 6117
本文用示例介绍CSS三列布局的方案。 三列布局，即：左，中，右。有两种方案：1.两边固定，中间自适应；2.中间固定，两边自适应。本文介绍第一种方案，后边会写一篇博客写第二种方案。 两边固定，中间自适应，一共有如下几种方案： flex布局（推荐） 网格布局 浮动布局 圣杯布局 双飞翼布局 表格布局（不推荐） 绝对定位布局（不推荐）
CSS之布局系列--上中下布局(上下固定，中间自适应)--方法/实例
IT利刃出鞘的博客
11-28 8019
本文用示例介绍CSS三行布局的方案。 三行布局，即：上、中、下。有两种方案：1.上下固定，中间自适应；2.中间固定，上下自适应。本文介绍第1种方案。 两边固定，中间自适应，一共有如下几种方案： flex布局（推荐） 网格布局（grid) vh+calc() 表格布局（table）（不推荐） 绝对定位布局（不推荐） 上下固定，中间自适应，就意味着中间要占满。所以大部分方案中，其父元素都要设置：height: 100%
CSS 布局案例：不会还有人不会布局吧
最新发布
甜心森的博客
10-23 829
一文搞定网页布局，CSS 布局。包含行水平居中，垂直居中，两栏布局，三栏布局，粘性布局，瀑布流布局。浮动布局，定位布局，弹性布局，侧边栏宽度可调节布局。
流式布局案例——京东网页
m0_60264901的博客
09-17 2987
文章目录前言一、京东移动端页面二、制作步骤1.页面整体框架2.注意要点总结 前言 在之前学了关于移动端的基础知识，接下来我们就需要运用这些知识来进行实际应用。 上才艺！看案例！ 一、京东移动端页面 京东移动端的页面基本就是如上图 页面有顶部的导航栏、搜索栏、主体栏里面分成三个部分进行设计。 二、制作步骤 1.页面整体框架 代码框架如图展示： 2.注意要点 我们对于移动端页面采用的是流式布局，代码如下： body { width: 100%; /* width：100%可以在3
Flex布局做出自适应页面--语法和案例
热门推荐
某年某月某条街
01-20 4万+
本文发布在： github项目地址：https://github.com/tenadolanter/flex-layout-demo SegmentFault地址：https://segmentfault.com/a/1190000012916949/ CSDN地址：http://blog.csdn.net/qq_34648000/article/details/79115294 博客
各种页面常见布局以及实例分析
weixin_30266885的博客
03-14 503
一、水平居中 (1)文本/行内元素/行内块级元素▲ “好的”、display:inline、display:inline-block; 原理：text-align只控制行内内容(文字、行内元素、行内块级元素)相对他的块级父元素对齐 <div class="parent"> <div class="son"> ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值