html两大布局
html布局之圣杯布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>圣杯布局</title>
<link href="buju1.css" type="text/css" rel="stylesheet"/>
</head>
<body>
<<div class="container">
<div class="main"></div>
<div class="sub"></div>
<div class="extra"></div>
</div>
</body>
</html>
CSS
body {
min-width: 600px; /* 2*sub + extra */
}
.container {
padding-left: 210px;
padding-right: 190px;
}
.main {
float: left;
width: 100%;
height: 300px;
background-color: rgba(255, 0, 0, .5);
}
.sub {
position: relative;
left: -210px;
float: left;
width: 200px;
height: 300px;
margin-left: -100%;
background-color: rgba(0, 255, 0, .5);
}
.extra {
position: relative;
right: -190px;
float: left;
width: 180px;
height: 300px;
margin-left: -180px;
background-color: rgba(0, 0, 255, .5);
}
样式布局之双飞翼布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>双飞翼布局</title>
<link href="buju.css" type="text/css" rel="stylesheet"/>
</head>
<body>
<div class="main-wrapper">
<div class="main"></div>
</div>
<div class="sub"></div>
<div class="extra"></div>
</body>
</html>
css
.main-wrapper {
float: left;
width: 100%;
}
.main {
height: 300px;
margin-left: 210px;
margin-right: 190px;
background-color: rgba(255, 0, 0, .5);
}
.sub {
float: left;
width: 200px;
height: 300px;
margin-left: -100%;//这个地方要注意了margin-left设置为负值得话，位置往左移动，当移出这一行时，就会跑到上一行去，然后继续往左移动，如果margin-left设置为正值的话，位置就会往右移动，并且会一直往右动，并不会跳到下一行去。
background-color: rgba(0, 255, 0, .5);
}
.extra {
float: left;
width: 180px;
height: 300px;
margin-left: -180px;
background-color: rgba(0, 0, 255, .5);
}
html两大布局的更多相关文章
- 【转】Android开发学习笔记：5大布局方式详解
Android中常用的5大布局方式有以下几种: 线性布局(LinearLayout):按照垂直或者水平方向布局的组件. 帧布局(FrameLayout):组件从屏幕左上方布局组件. 表格布局(Tabl ...
- Android开发5大布局方式详解
Android中常用的5大布局方式有以下几种: 线性布局(LinearLayout):按照垂直或者水平方向布局的组件. 帧布局(FrameLayout):组件从屏幕左上方布局组件. 表格布局(Tabl ...
- 【Android开发学习笔记之一】5大布局方式详解
Android中常用的5大布局方式有以下几种: 线性布局(LinearLayout):按照垂直或者水平方向布局的组件. 帧布局(FrameLayout):组件从屏幕左上方布局组件. 表格布局(Tabl ...
- css常见的各种布局上（两列布局）
常见的布局上(两列布局) 1.常见的两列布局 1.1左边固定,右边自适应,左边宽度已知,右边默认占满整行,使用left 左浮动,右边不浮动,设置margin-left:左侧宽度 <style&g ...
- css布局 - 工作中常见的两栏布局案例及分析
突然想到要整理这么一篇平时工作中相当常见但是我们又很忽视的布局的多种处理方法.临时就在我经常浏览的网站上抓的相对应的截图.(以后看到其他类型的我再补充) 既然截了图,咱们就直接看人家使用的布局方式,毕 ...
- Android开发之5大布局方式详解
Android中常用的5大布局方式有以下几种: 线性布局(LinearLayout):按照垂直或者水平方向布局的组件. 帧布局(FrameLayout):组件从屏幕左上方布局组件. 表格布局(Tabl ...
- css 两列布局中单列定宽单列自适应布局的6种思路
前面的话 说起自适应布局方式,单列定宽单列自适应布局是最基本的布局形式.本文将从float.inline-block.table.absolute.flex和grid这六种思路来详细说明如何巧妙地实现 ...
- CSS实现两栏布局
写在前面 两栏布局是指页面布局由主栏和边栏组成,是许多网页的布局方式,一般使用CSS去实现两栏布局. 实现两栏布局的方式有多种,这里采用四种比较常见的实现方式.主要是流体布局(liquid layou ...
- CSS读书笔记（1）---选择器和两列布局
(1)CSS选择器优先权选择. 优先权从大到小的选择如下: 标有!important关键字声明的属性 HTML中的CSS样式属性 <div style="color:red" ...
随机推荐
- [LeetCode] 891. Sum of Subsequence Widths 子序列宽度之和
Given an array of integers A, consider all non-empty subsequences of A. For any sequence S, let the ...
- [LeetCode] 179. Largest Number 最大组合数
Given a list of non negative integers, arrange them such that they form the largest number. Example ...
- 打造个人专属网盘nextcloud
原文 https://edu.aliyun.com/course/150/lesson/list?spm=5176.9278281.815111.sence.114d4f3eLLMS53
- IDEA 最新破解方法，2019 版本已支持（持续更新，更新时间2019-05-14）
一.安装进入官网下载适合自己系统的版本,下载地址:https://www.jetbrains.com/idea/download/#section=windows 2. 安装中选择适合本机的64位 ...
- C# HTTP系列9 GET与POST示例
系列目录 [已更新最新开发文章,点击查看详细] 学习本篇之前,对 HttpWebRequest 与 HttpWebResponse 不太熟悉的同学,请先学习<C# HTTP系列>. ...
- 运行带参数的python脚本
问题描述: 要执行python脚本,有哪几种方法. 特别是看书的时候,书上只讲解了如何在linux下运行,windows根本就没有那些命令,该怎么办呢? 方法1:python自带的IDLE编辑器 Ru ...
- Shell脚本——显示系统上的登录用户数
写一个脚本showlogged.sh,其用法格式为: showlogged.sh -v -c -h|--help 其中,-h选项只能单独使用,用于显示帮助信息:-c选项时,显示当前系统上登录的所有用户 ...
- HTML+css基础 Text文本属性
Text文本属性: 1.颜色 color color:red 2.文本缩进 text-indent 属性值 数字+px: text-indent:10px: 3.文本修饰 text-decorati ...
- 【转帖】修改Windows网卡的MTU
修改Windows网卡的MTU https://blog.csdn.net/sunny05296/article/details/103438653 原创sunny05296 发布于2019-12-0 ...
- IntelliJ idea 撤回(已经commit未push的)操作
VSC => Git => reset head => 退回到上次commit => 退回到第2次提交之前 => 退回到指定commit版本