文档章节

html两列布局

黄柳淞
 黄柳淞
发布于 2016/12/14 23:51
字数 154
阅读 14
收藏 0

1.html两列布局:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>两列布局</title>
	<style type="text/css">
		body{margin: 0;padding: 0;}
		.main{width: 800px;height: 500px;margin: 0 auto;}
		.left{width: 20%;background-color: #ccc;height: 500px;float: left;}
		.right{width: 80%;background-color: #666666;height: 500px;float: right;}
	</style>
</head>
<body>
<div class="main">
	<div class="left">1</div>
	<div class="right">1</div>
</div>
	
</body>
</html>

2.效果图:

 

3.html两列布局2

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		body{margin: 0;padding: 0;}
		.left{width: 20%;background-color: #ccc;height: 500px;float: left;}
		.right{width: 80%;background-color: #666666;height: 500px;float: right;}
	</style>
</head>
<body>
	<div class="left">1</div>
	<div class="right">1</div>
</body>
</html>

效果:

© 著作权归作者所有

黄柳淞
粉丝 2
博文 108
码字总数 54251
作品 0
南宁
程序员
私信 提问
Div CSS常用布局方式代码集锦

现在都Div CSS布局了,本文收集整理了一些常用的DivCSS布局代码,比如两行一列、三行一列、两行两列、三行两列、两行三列、单行三列以及float定位的代码集锦,下面逐一帖出各个布局的代码: ...

名字已被取
2016/03/01
496
0
CSS——把“可以动的盒子”更优雅地展示:③ 常用的“布局”

前言: 拿到一张设计稿,我们首要的就是从宏观上考虑这整个页面的“布局”。随着前端技术的不断更替,以前很多老的布局方式现在也慢慢淡化了,那哪些是我们最基本最常用的布局方式呢? 本篇给...

itsOli
05/09
0
0
Web布局连载——两栏固定布局(五)

在上一篇《Web布局连载——两栏固定布局(四)》中留了一个下文,“No div, no float, no clear, no hack”。看起来很有意思,这种没有div,没有float,没有清除浮动和没有hack的布局,还是看...

大漠
2012/09/13
0
0
从css盒子与定位到布局

css盒子模型 原理:padding,border,margin三者构成一个盒子。 图片来自网络 Margin(外边距) - 清除边框外的区域,外边距是透明的。 Border(边框) - 围绕在内边距和内容外的边框。 Padding(内...

黑天很黑
2017/01/26
0
0
主机排行网重大更新,移动端自适应

此前有网友反馈,主机排行网在移动端表现太丑了,希望我改改,今天周末,我专门花了两个多小时来好好把移动短整治了一下,比以前好看多了。 对比改变 对比一下吧,下图是前版本的主机排行网:...

cmlanche
03/31
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Android双向绑定原理简述

Android双向绑定原理简述 双向绑定涉及两个部分,即将业务状态的变化传递给UI,以及将用户输入信息传递给业务模型。 首先我们来看业务状态是如何传递给UI的。开启dataBinding后,编译器为布局...

tommwq
今天
4
0
Spring系列教程八: Spring实现事务的两种方式

一、 Spring事务概念: 事务是一系列的动作,它们综合在一起才是一个完整的工作单元,这些动作必须全部完成,如果有一个失败的话,那么事务就会回滚到最开始的状态,仿佛什么都没发生过一样。...

我叫小糖主
今天
8
0
CentOS 的基本使用

1. 使用 sudo 命令, 可以以 root 身份执行命令, 必须要在 /etc/sudoers 中定义普通用户 2. 设置 阿里云 yum 镜像, 参考 https://opsx.alibaba.com/mirror # 备份mv /etc/yum.repos.d/CentO...

北漂的我
昨天
4
0
Proxmox VE技巧 移除PVE “没有有效订阅” 的弹窗提示

登陆的时候提示没有有效的订阅You do not have a valid subscription for this server. Please visit www.proxmox.com to get a list of available options. 用的是免费版的,所以每次都提示......

以谁为师
昨天
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部