html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
width: 100%;
height: 100%;
}
:focus {
outline: 0;
}
body {
line-height: 1;
color: black;
background: white;
}
ol, ul {
list-style: none;
}
table {
border-collapse: separate;
border-spacing: 0;
}
caption, th, td {
text-align: left;
font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: "";
}
blockquote, q {
quotes: "" "";
}
fieldset,img { border:0 }
.al { text-align: left; }
.ar { text-align: right; }
.ac { text-align: center; }
.lc { margin: 0 auto; }
.fl, .il .fl { float: left; }
.fr, .il .fr { float: right; }
.fc, .il .fc { float: none; clear: both; }
.rel { position: relative; }
.abs { position: absolute; }
.il { list-style: none; }
.il li { float: left; }
.clearfix:after {
content: " ";
display: block;
clear: both;
height: 0;
}
.clearfix {
zoom: 1;
}
.container{ width:100%; overflow:hidden; } .header { background: #aaa; height: 66px; } .content{ overflow: hidden; } .aside{ float: left; width: 200px; background: #eee; } .main{ margin-left: 200px; background-color: #ddd; }
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>业务管理</title>
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/index.css">
</head>
<body>
<div class="container">
<div class="header">
header
</div>
<div class="content clearfix">
<div class="aside">
aside
</div>
<div class="main">
aside
</div>
</div>
</div>
</body>
</html>
相关推荐
2. 等高布局实现：文件中还提到了实现左右两列等高布局的要求。要实现这种效果，通常需要确保左右两列内容高度一致，即使一侧内容不足以填满另一侧。一个常用的技术是利用表格布局（display: table 和 display: ...
打开这个文件，你可以看到HTML结构、CSS样式以及可能的JavaScript代码，它们共同协作实现了三列的高度自适应和等高效果。通过学习和理解这个demo，开发者可以掌握创建响应式三列布局的关键技巧，并应用于自己的项目...
1. **CSS Flexbox**：在现代浏览器中，使用CSS Flexbox是最简便的实现等高布局的方法。通过设置容器的`display: flex`属性，并配合`align-items: stretch`，可以让子元素（图片）自动拉伸至与最长的子元素等高。 2....
【CSS等高布局详解】 等高布局是一种网页设计中常见的需求，目的是使页面中的不同内容区域在不预先设定固定高度的情况下，保持相同的高度，从而达到视觉上的平衡和整洁。本文将介绍两种纯CSS方法实现等高布局：1) ...
本文将详细讲解如何使用CSS实现两列布局和三列布局，以及如何实现宽度和高度的自适应。 首先，我们来看一种基于BFC（块格式化上下文，Block Formatting Context）原理的三列布局方法。BFC是一个独立的渲染区域，它...
本实例探讨了常见的CSS布局模式，包括两列布局和三列布局，以及等高布局的实现方法。 首先，我们来看两列布局。两列布局通常用于创建一个有侧边栏和主要内容区域的网页结构。在描述中提到了两种不同的两列布局方式...
在网页设计中，布局是至关重要的，特别是在CSS中创建响应式和适应性的界面。...对于等高布局和最小高度，现代CSS布局技术提供了强大的工具。理解并掌握这些技术对于任何前端开发者来说都是至关重要的。
- **等高列布局**：可以通过使用JavaScript、CSS Flexbox或CSS Grid来实现左右两列等高的效果，确保即使内容长度不同，两栏的高度也保持一致。 - **固定中栏宽度**：对于三栏布局，可以固定中间栏的宽度，而左右...
3. Flex布局：现代浏览器支持的Flexbox模型，提供了更灵活的布局方式，可以轻松实现等宽、等高或自适应布局。 4. Grid布局：CSS Grid为二维网格布局系统，适用于复杂的网页布局，如杂志式设计。 四、实战应用 1. ...
）简单的tab切换，要压住下边线哦左小图，右自适应宽度的布局，小三角箭头的应用箭头以及垂直排列tag标签，注意文字垂直居中，标签要水平对齐表格布局小应用，如何变得更精美复杂的下单列表筛选排序功能筛选价格功能...
流体布局允许元素根据浏览器宽度自适应；固定布局则保持元素尺寸不变；响应式布局结合媒体查询，使网站在不同设备上都能良好显示。 第四步：浮动与清除 浮动常用于创建多列布局，但需注意清除浮动，避免父元素高度...
- 流动布局（Float Layout）：利用float属性使元素浮动，从而实现多列并排布局，适用于传统的固定宽度布局。 - 定位布局（Positioning）：使用position属性（static, relative, absolute, fixed），可以精确控制...
瀑布流布局是一种非传统的一列或多列布局方式，它不按照等宽或等高的规则来排列元素，而是允许元素根据其内容或浏览器窗口的宽度动态调整大小和位置。这种布局方式在图片展示网站和社交媒体平台中非常流行，因为它...
CSS Grid布局是现代浏览器支持的一种强大的二维布局系统，允许开发者在行和列上精确控制元素的位置。 4. **Flex布局（Flexible Box Layout）** Flex布局，也称为Flexbox，主要用于一维布局，处理元素的对齐、顺序...
对于需要等高布局的浮动元素，可以使用负margin或JavaScript方法实现自适应高度。例如，可以使用`display:table-cell;`将div模拟成表格单元格，实现高度自适应。 以上是一些常见的CSS浏览器兼容性问题及其解决方案...
13. **Flexbox**：用于创建灵活的布局，可以轻松实现水平或垂直居中、自适应大小的子元素等，适用于响应式设计。 14. **创建三角形**：利用边框宽度为0的三角形漏洞，通过设置不同颜色的边框来实现。 15. **品字...