页面布局-上中下/左右

1、上下固定,中间自适应的布局

 1 <!--flex布局-->
 2 <section class="top-center-bottom">
 3     <style type="text/css">
 4         .top-center-bottom{
 5            width: 500px;
 6            height:500px;
 7            display: flex;
 8            flex-direction: column;
 9         }
10         .top{
11             width: 100%;
12             height: 100px;
13             background: yellow;
14         }
15         .bottom{
16             width: 100%;
17             height: 100px;
18             background: #49a094;
19         }
20         .center{
21             flex: 1;
22             width: 100%;
23             background: #ff3c4a;
24         }
25     </style>
26     <div class="top">上</div>
27     <div class="center">flex布局 -中</div>
28     <div class="bottom">下</div>
29 </section>
30 <!--grid布局-->
31 <section class="grid-top-center-bottom">
32     <style type="text/css">
33         .grid-top-center-bottom{
34            width: 500px;
35            height:500px;
36             margin-top: 50px;
37            display: grid;
38             grid-template-rows: 100px auto 100px;
39         }
40         .grid-top{
41             width: 100%;
42             background: yellow;
43         }
44         .grid-center{
45             width: 100%;
46             background: #ff3c4a;
47         }
48         .grid-bottom{
49             width: 100%;
50             background: #49a094;
51         }
52     </style>
53     <div class="grid-top">上</div>
54     <div class="grid-center">grid-布局 -中</div>
55     <div class="grid-bottom">下</div>
56 </section>
57 <!--table布局-->
58 <section class="table-top-center-bottom">
59     <style type="text/css">
60         .table-top-center-bottom{
61            width: 500px;
62            height:500px;
63             margin-top: 50px;
64            display: table;
65         }
66         .table-top{
67             display: table-row;
68             height: 100px;
69             width: 100%;
70             background: yellow;
71         }
72         .table-center{
73             display: table-row;
74             width: 100%;
75             background: #ff3c4a;
76         }
77         .table-bottom{
78             display: table-row;
79             height: 100px;
80             width: 100%;
81             background: #49a094;
82         }
83     </style>
84     <div class="table-top">上</div>
85     <div class="table-center">table-布局 -中</div>
86     <div class="table-bottom">下</div>
87 </section>

2、左右布局--左边固定右边自适应或右边固定左边自适应

  1 <!--左右布局-->
  2 <!--左固定,右自适应或右固定左自适应-->
  3 <section class="float-left-right">
  4     <style type="text/css">
  5         .float-left-right{
  6             height: 100px;
  7             overflow: hidden;
  8         }
  9         .float-left{
 10             width: 200px;
 11             height: 100px;
 12             float: right;
 13             background: yellow;
 14         }
 15         .float-right{
 16             height: 100px;
 17             background: #49a094;
 18             margin-right: 200px;
 19         }
 20     </style>
 21     <div class="float-left">左</div>
 22     <div class="float-right"> 浮动定位---右</div>
 23 </section>
 24 <section class="absolute-left-right">
 25     <style type="text/css">
 26         .absolute-left-right{
 27             height: 100px;
 28             position: relative;
 29             margin-top: 50px;
 30         }
 31         .absolute-left{
 32             width: 200px;
 33             height: 100px;
 34             background: yellow;
 35             position: absolute;
 36             top: 0;
 37             right: 0;
 38         }
 39         .absolute-right{
 40             height: 100px;
 41             background: #49a094;
 42             margin-right: 200px;
 43         }
 44     </style>
 45     <div class="absolute-left">左</div>
 46     <div class="absolute-right">绝对定位----右</div>
 47 </section>
 48 <section class="flex-left-right">
 49     <style type="text/css">
 50         .flex-left-right{
 51             margin-top: 50px;
 52             height: 100px;
 53             display: flex;
 54         }
 55         .flex-left{
 56             width: 200px;
 57             height: 100px;
 58             background: yellow;
 59         }
 60         .flex-right{
 61             flex: 1;
 62             height: 100px;
 63             background: #49a094;
 64         }
 65     </style>
 66     <div class="flex-left">左</div>
 67     <div class="flex-right">flex 定位----右</div>
 68 </section>
 69 <section class="grid-left-right">
 70     <style type="text/css">
 71         .grid-left-right{
 72             margin-top: 50px;
 73             height: 100px;
 74             display: grid;
 75             grid-template-rows: 100px;
 76             grid-template-columns: 200px auto;
 77         }
 78         .grid-left{
 79             background: yellow;
 80         }
 81         .grid-right{
 82             background: #49a094;
 83         }
 84     </style>
 85     <div class="grid-left">左</div>
 86     <div class="grid-right">grid 定位----右</div>
 87 </section>
 88 <section class="table-left-right">
 89     <style type="text/css">
 90         .table-left-right{
 91             margin-top: 50px;
 92             width: 100%;
 93             height: 100px;
 94             display:table;
 95         }
 96         .table-left{
 97             width: 200px;
 98             display: table-cell;
 99             background: yellow;
100         }
101         .table-right{
102             display: table-cell;
103             background: #49a094;
104         }
105     </style>
106     <div class="table-left">左</div>
107     <div class="table-right">table 定位----右</div>
108 </section>

原文地址:https://www.cnblogs.com/yuxingyoucan/p/9427028.html

时间: 2024-11-05 16:03:36

页面布局-上中下/左右的相关文章

css12---实战---布局---上中下布局,中间2列

<!DOCTYPE html><html><head><meta charset="utf-8"><title>浮动布局测试</title><link rel="stylesheet" type="text/css" href="layout2.css"><script src="layout2.js"><

上中下结构DIV CSS布局实例

实例布局之上中下结构DIV CSS布局 上中下结构为常见布局结构,一般普通(企业网站)网页我们可以大致分为上(头部).中(内容区).下(底部版权)组成.而这其实是由最简单上下结构CSS布局演变而成,只不过多了一个DIV层结构而且,本质布局方法技巧不变. 一.主要思维   -   TOP 不管多少个上下结构或单一结构,一般主体内容都是居中的,这个使用就需要使用css margin样式(让布局居中兼容各大浏览器),同时一般网页都会固定宽度,也就是要使用css width设置好每个DIV层宽度. 这里

网页上中下三分布局,上下固定,中间自适应

<!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> <!-- 禁止浏览器从本地缓存中调阅页面.--> <

找人上门官网的CSS布局:上中下三栏自适应高度CSS布局

<!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-Typ

前端设计之CSS布局:上中下三栏自适应高度CSS布局

网页代码: <!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="Co

HTML——上中下布局

上中下布局是最基本的布局方式,本例假设用户屏幕分辨率为800*600像素. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en"> <head> <met

jquery-easyui实现页面布局和增删改查操作(SSH2框架支持)转载

http://blessht.iteye.com/blog/1069749/ 已注册:ooip 关联的csdn 前几天心血来潮用jquery-easyui+spring.struts2.hibernate实现了一个系统的一小部分功能,下面给大家分享一下. 首先看运行效果: [图一:登录页] [图二:页面布局] [图三:用户编辑层] [图四:确认弹出框] 准备 easyui插件简介在这就不赘述了,大家可以在iteye上找到很多该插件的相关消息. 如果页面需要使用easyui插件,需要引进一下js和

CSS3与页面布局学习总结(八)——浏览器兼容与前端性能优化

目录 一.浏览器兼容 1.1.概要 1.2.浏览器内核 1.3.浏览器市场份额(Browser Market Share) 1.4.兼容的一般标准 1.5.CSS Reset 1.6.CSS Hack 1.6.1.条件注释法 1.6.2.样式内属性标记法 1.6.3.选择器前缀法 1.7.文档模式 (X-UA-Compatible) 1.8.javascript兼容 二.前端性能优化 2.1.概要 2.2.减少HTTP请求数量 2.2.1.图片地图 2.2.2.精灵图片(Sprite) 2.2.

蓝懿IOS页面布局AuToLayou

今天接触了页面布局的东西,刘国斌老师详细的用图形编程的方式和代码都将解了一遍.代码和stroyboard感觉都比较麻烦,而且逻辑思维要求比较高. Editor菜单上有一个Resolve Auto Layout Issues子菜单.从这个菜单中,选中Update Constraints.就我这个情况来说,这会告诉Interface Builder需要将约束变大64点,像这样: 很好,T-bars又变蓝了,布局是有效的.在Document Outline中,你可以看到Horizontal Space