<!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>
<title></title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<style type="text/css">
html,body {
height:100%;
width:100%;
border:0px;
margin:0px;
padding:0px
}
.row {
width:100%;border:0px
}
.col-1 {
float:left;
height:100%;
background-color: red;
width:16.6%
}
.col-2 {
float:left;
height:100%;
background-color: blue;
width:33%
}
.col-3 {
float:left;
height:100%;
background-color: green;
width:50%
}
.col-4 {
float:left;
height:100%;
background-color: lightblue;
width:66.9%
}
.col-5 {
float:left;
height:100%;
background-color: lightgreen;
width:83.4%
}
.col-6 {
float:left;
height:100%;
background-color: orange;
width:100%
}
</style>
</head>
<body>
<div class="row" style="height:200px" >
<div class=" col-2"> <div class="row" style="height:200px" >
<div class=" col-4">444</div> <div class=" col-2">2222</div>
</div></div> <div class=" col-1">1111</div> <div class=" col-3">3333</div>
</div>
<div class="row" style="height:200px" >
<div class=" col-1">111</div> <div class=" col-5">555</div>
</div>
<div class="row" style="height:200px" >
<div class=" col-3">333</div> <div class=" col-3">333</div>
</div>
<div class="row" style="height:200px" >
<div class=" col-2">222</div> <div class=" col-4">4444</div>
</div>
<div class="row" style="height:200px" >
<div class=" col-6">6666</div>
</div>
</body>
</html>
分享到：
相关推荐
你可以利用Bootstrap的栅格系统调整内容在不同设备上的排列方式，确保在任何屏幕尺寸下，信息都能清晰、易读。 在这款模板中，你可能会发现以下关键元素： 1. **头部（Header）**：包含个人头像、姓名和联系信息，...
1. 响应式布局：Bootstrap采用流式栅格系统，可以自动调整网页在不同设备上的显示效果，适应手机、平板电脑和桌面电脑等多种屏幕尺寸。 2. 可定制性：Bootstrap允许开发者通过Sass（预处理器）和LESS（层叠样式表...
考核可能涉及对Bootstrap栅格系统、导航栏、模态框、表单、按钮等基础组件的运用，也可能包括自定义CSS和JavaScript扩展，以展示对框架更深入的理解。 “效果图.png”文件可能是考核目标网站的预览图，学生可以参照...
5. **栅格布局（Grid System）**：栅格布局常见于网站设计，通过划分若干等宽的列来组织内容，如Bootstrap的12列栅格系统。它帮助保持页面结构的一致性和可读性。 6. **盒模型（Box Model）**：理解盒模型是布局的...
5. **Bootstrap框架**：如果模板采用了Bootstrap，那么了解其栅格系统、组件和JS插件也是必要的。 6. **移动优化**：了解如何优化移动网页性能，如减少HTTP请求、压缩文件、优化图片等。 7. **支付接口集成**：...