HTML简易自适应布局

效果图：

第一步：在body下先建三个块级，代码如下：

<div class="one">第1个元素中的内容</div>
<div class="two">第2个元素中的内容</div>
<div class="three">第3个元素中的内容</div>

第二步：设置全局边框，代码如下：

* {margin: 0;/*被设置的对象相对四周的边距是0*/padding: 0;/*内边距为0*/}

第三步：设置块级的高度以及水平方向布局，代码如下：

div {      /*<div> 定义文档中的分区或节*/height: 100px;float: left;/*float(浮动):用于元素水平方向的布局*/}

第四步：设置每个块级的宽度以及背景颜色，代码如下：

.one {width: 30%;background-color: #b6a2dc;}.two {width: 40%;background-color: #9ee2ac;}.three {width: 30%;background-color: #f69654;}

每个块级的宽度，所占比例、背景颜色可自己去调。

全文代码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>自适应布局</title><style>* {margin: 0;/*被设置的对象相对四周的边距是0*/padding: 0;/*内边距为0*/}div {      /*<div> 定义文档中的分区或节*/height: 100px;float: left;/*float(浮动):用于元素水平方向的布局*/}.one {width: 30%;background-color: #b6a2dc;}.two {width: 40%;background-color: #9ee2ac;}.three {width: 30%;background-color: #f69654;}</style>
</head>
<body><div class="one">第1个元素中的内容</div><div class="two">第2个元素中的内容</div><div class="three">第3个元素中的内容</div></body>
</html>

HTML简易自适应布局相关推荐

为iPhone6 设计自适应布局（一）
译者的话: 本文是自适应布局的巩固篇,所以对布局约束的添加操作步骤等没有详细的说明.如果看着吃力的话请先移步Swift自适应布局(Adaptive Layout)教程. Apple从iOS6加入了Au ...
CSS 负边距自适应布局
单列定宽单列自适应布局: <!DOCTYPE HTML> <html> <head><meta charset="UTF-8">&l ...
静态布局、自适应布局、流式布局、响应式布局、弹性布局简析、BFC
静态布局:给页面元素设置固定的宽度和高度,单位用px,当窗口缩小,会出现滚动条,拉动滚动条显示被遮挡内容.针对不同分辨率的手机端,分别写不同的样式文件.例如:浏览器窗口是1000px,那么最小的宽度是 ...
android中自适应布局教程,Android自适应布局设计技巧
由于目前在做的一款app需要适配手机和平板,所以我在研究怎么构建可适应所有屏幕尺寸的布局方法. 在web的自适应布局上我有很多经验,比如使用网格流,CSS3中的media queries属性等等,这些 ...
使用CSS实现三栏自适应布局（两边宽度固定，中间自适应）
所谓三列自适应布局指的是两边定宽,中间block宽度自适应.这里主要分为两大类,一类是基于position传统的实现,一类是基于css3新特性弹性盒模型布局实现. 1. 基于传统的position和m ...
【Flutter】Flutter Gallery 官方示例简介 ( 学习示例 | 邮件应用 | 零售应用 | 理财应用 | 旅行应用 | 新闻应用 | 自适应布局应用 )
文章目录一.Reply 邮件应用二.Shrine 零售应用三.Rally 理财应用四.Crane 旅行应用五.Fortnightly 新闻应用六.Starter 自适应布局应用 Flutt ...
CSS三栏自适应布局，左中右，上中下
本文对可以实现三栏布局的方法进行了整理左右固定宽度,中间自适应(5种方法) 1.float方法 2.absolute方法 3.flexbox方法 4.table方法 5.grid方法 <htm ...
css经典布局——头尾固定高度中间高度自适应布局
今天说说一个经典布局:头尾固定高度中间高度自适应布局! 转文请标明 --- 出处:穆乙 http://www.cnblogs.com/pigtail/ 相信做过后台管理界面的同学,都非常清楚这个布局. ...
前端切图:手机端自适应布局demo
手机端自适应布局demo 原型如下: 图片发自简书App 要求如下:适应各种机型源码如下: <!DOCTYPE html > <html><head><met ...
Web自适应布局你需要知道的所有事儿
有这样一个问题. 请说说你知道的所有web布局方式? 一般来说,有以下这些布局方法: 浮动 float:left|right inline-block display:inline-block fle ...

HTML简易自适应布局

HTML简易自适应布局相关推荐

最新文章

热门文章