Div+Css实现经典左中右布局

三栏布局，中间自适应高度

效果图:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Div+Css实现经典左中右布局</title><style>/* 三栏布局，中间自适应高度... */* {margin: 0;padding: 0;}    .head{height: 100px;width: 100%;background-color: gold;text-align: center;}.container{position: absolute;width: 100%;display: flex;top: 100px;bottom: 100px;}.left-group, .right-group{width: 200px;background-color: #7ecff2;text-align: center;}.mid-group{flex: 1;background-color: #ff5000;text-align: center;}.foot{position: absolute;width: 100%;height: 100px;bottom: 0;background-color: purple;text-align: center;}</style></head>
<body><div class="content"><div class="head">head</div><div class="container"><div class="left-group">left-group</div><div class="mid-group">mid-group</div><div class="right-group">right-group</div></div><div class="foot">foot</div></div></body>
</html>

Div+Css实现经典左中右布局相关推荐

html div左中右布局,求助css。一个div包含两个div，左右布局，左边css宽30%，右边div宽70%。高度均自...
求助css. 一个div包含两个div,左右布局,左边css宽30%,右边div宽70%.高度均自以下文字资料是由(历史新知网www.lishixinzhi.com)小编为大家搜集整理后发布的内容,让 ...
黑客内参告诉你一个：设计师用div+css 必须知道的网页布局类型
今天我在黑客内参受到了很多的留言,很多小伙伴在表示想要建立一个属于自己的站点,让我觉得现在建站是大部分人都比较感兴趣的一个技术吧! 碰巧今天整理以前的笔记发现了一本之前遗留下来的建站笔记,现在我就手打 ...
Vue大屏实战二：页面三分实现左中右布局
文章目录 1.最终效果 2.左中右布局 3.页面样式 4.页面逻辑 1.最终效果页面整体效果 2.左中右布局 <div><div cla ...
css的经典三栏布局如何实现,css 实现三栏布局的四种方式
三栏布局就是左中右,左右两边固定,中间自适应. 1. 绝对定位左边中间右边 body { padding: ; margin: ; } /* 绝对定位 */ .left, .right { po ...
金典 DIV+CSS 3行2列布局详解--企业网站通用的基本布局详解
我们遇到过很多的企业网站或其它小型的展示类网站,有一些共同的特点,即顶部放一个大的导航或BANNER,右侧是链接或图片,左侧放置内容,页面底部放置版权信息等.这样的形式是国内经典式的布局,我们这里不对 ...
CSS中经典的双飞翼布局(
笔者在一些博客和论坛中经常看到经典的双飞翼布局,淘宝的首页也运用了这种兼容性很好的双飞翼布局 1.何谓双飞翼布局? 简单来说,双飞翼布局是将一个网页分为左列,中列和右列三部分,并且我们要得到的效果是: ...
使用DIV+CSS布局设计个人主页设计个人主页，使用DIV+CSS的方式进行页面布局。
(1)构思个人主页的版面布局: (2)使用DIV+CSS技术设计出构思好的个人主页. 先来看看效果: <!DOCTYPE html> <html lang="zh" ...
DIV+CSS最常用的网页布局代码11例。
转载自品略图书馆 http://www.pinlue.com/article/2019/03/2104/598296899335.html div css布局不同于table布局,它主要是按列来计算, ...
HTML中的div怎么左中右布局,CSS 之 div 左中右布局
无标题文档 #header{ width:780px;height:80px;background:#069;margin:0 auto; } #box { width:780px; margin:0 ...
CSS左中右布局，规范案例
html部分 <body> <form id="form1" runat="server"> <div id="wrap ...

Div+Css实现经典左中右布局

三栏布局，中间自适应高度

Div+Css实现经典左中右布局相关推荐

最新文章

热门文章