index.html
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8"> <title>CSS传统布局[上]</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <table border="0"> <tr> <td colspan="2" class="header">header</td> </tr> <tr> <td class="aside">aside</td> <td class="section">section</td> </tr> <tr> <td colspan="2" class="footer">footer</td> </tr> </table> </body> </html>
style.css
@charset "utf-8";
body {
margin: 0;
}
table {
/*width: 960px;*/
width: 100%;
margin: 0 auto;
/*border-spacing: 0px;*/
border-collapse: collapse;
}
.header {
height: 120px;
background-color: olive;
}
.aside {
width: 200px;
height: 500px;
background-color: purple;
}
.section {
width: 760px;
background-color: maroon;
}
.footer {
height: 120px;
background-color: gray;
}
index2.html
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8"> <title>CSS传统布局[上]</title> <link rel="stylesheet" type="text/css" href="style2.css"> </head> <body> <header> header </header> <aside> aside </aside> <section> section </section> <footer> footer </footer> </body> </html>
style2.css
@charset "utf-8";
body {
margin: 0 auto;
/*width: 960px;*/
width: auto;
}
header {
height: 120px;
background-color: olive;
}
aside {
/*width: 200px;*/
width: 20%;
/*min-width: 120px;*/
height: 500px;
background-color: purple;
float: left;
}
section {
/*width: 760px;*/
width: 80%;
height: 500px;
background-color: maroon;
float: right;
}
footer {
height: 120px;
background-color: gray;
clear: both;
}
相关推荐
下面将详细介绍CSS传统布局的关键概念和相关知识点。 1. **盒模型**： CSS盒模型是理解布局的核心，它定义了元素如何占据空间。每个HTML元素都可以看作一个矩形盒子，包括内容区域、内边距、边框和外边距。默认...
在传统布局技术中，position属性提供了static、absolute、relative、fixed四种定位方式。其中，static是默认值，它按照正常的文档流进行布局，不具备移动功能；absolute则是绝对定位，允许开发者将元素移动到相对于...
#### 十、网页设计DIV+CSS——第8天: CSS布局入门 - **定义DIV**：介绍如何使用`<div>`标签作为容器来构建页面布局。 - **CSS2盒模型**：理解CSS盒模型的概念，包括内容、填充、边框和外边距。 - **辅助图片的背景...
#### 十、网页设计DIV+CSS——第8天: CSS布局入门 ##### 基本布局概念 - **定义DIV**：讲解如何使用DIV元素创建基本布局单元。 - **CSS2盒模型**：详细介绍CSS2盒模型的概念及其组成部分（内容、填充、边框、外边距...
9. **Grid布局**：网格布局系统则提供了一个二维的布局模型，可以方便地创建复杂的网格结构，适应各种屏幕尺寸。 10. **伪类和伪元素**：如`:hover`、`:active`、`:focus`和`:before`、`:after`等，它们可以为元素...
CSS Grid布局是二维布局系统，允许创建复杂的网格布局，具有强大的对齐和间距控制功能。 **九、文字和字体** 1. **字体家族**：`font-family`属性支持更多的字体类型，包括网络字体（通过`@font-face`）。 2. **...
CSS2是CSS的第二个主要版本，它在1998年由W3C发布，极大地增强了网页设计的灵活性和控制力。本手册详细介绍了CSS2的所有核心概念、语法和用法，是学习和理解CSS2的重要参考资料。 **一、选择器与声明** CSS2的选择...
**十、CSS工具和资源** 1. **在线编辑器**：如CodePen、JSFiddle，方便测试和调试CSS。 2. **浏览器开发者工具**：Chrome DevTools、Firefox Developer Tools等，有助于实时查看和修改CSS。 3. **CSS框架**：...
CSS3（层叠样式表第三版）是Web设计者用来控制网页外观的样式语言的最新版本。相比CSS2.1，它引入了许多新特性，提高了网页设计的灵活性和可扩展性。CSS3.0不仅支持传统桌面浏览器，还特别考虑了移动设备的浏览需求...
4.12.htm 用delete移除了myArry的第二个元素 4.13.htm 用“()”改变运算优先级的例子 4.14.htm 一个运算符结合性的例子 第5章（/C05/） 5.1.htm 一个最简单的条件语句 5.2....