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> <header> header </header> <!-- <aside> aside </aside> --> 1111 </body> </html>
style.css
@charset "utf-8";
body {
margin: 100px;
height: 800px;
border: 1px solid red;
/*这body父元素设置一个不需要top和left定位的相对定位，这个叫做设置参考点*/
position: relative;
}
header {
width: 100px;
height: 100px;
background-color: silver;
/* position: absolute;
top: 0;
left: 0;
z-index: 3;*/
/* position: fixed;
top: 100px;
left: 0;*/
/* position: relative;
top: 10px;
left: 10px;*/
position: absolute;
top: 100px;
left: 100px;
}
/*aside {
width: 100px;
height: 100px;
background-color: green;
position: absolute;
top: 20px;
left: 20px;
z-index: 2;
}*/
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 {
width: 960px;
margin: 0 auto;
position: relative;
}
header {
width: 960px;
height: 120px;
background-color: olive;
position: absolute;
top: 0;
left: 0;
}
aside {
width: 200px;
height: 500px;
background-color: purple;
position: absolute;
top: 120px;
left: 0;
}
section {
width: 760px;
height: 500px;
background-color: maroon;
position: absolute;
top: 120px;
right: 0;
}
footer {
width: 960px;
height: 120;
background-color: gray;
position: absolute;
top: 620px;
left: 0;
}
index3.html
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8"> <title>CSS传统布局[下]</title> <link rel="stylesheet" type="text/css" href="style3.css"> </head> <body> <header> header </header> <aside> aside </aside> <section> section <textarea></textarea> </section> <footer> footer </footer> </body> </html>
style3.css
@charset "utf-8";
body {
width: 960px;
margin: 0 auto;
}
header {
height: 120px;
background-color: olive;
overflow: auto;
resize: both;
}
aside {
width: 200px;
height: 500px;
background-color: purple;
border: 5px solid green;
padding: 10px;
box-sizing: border-box;
float: left;
}
section {
width: 760px;
height: 500px;
background-color: maroon;
float: right;
}
footer {
width: 960px;
height: 120;
background-color: gray;
clear: both;
}
textarea {
resize: none;
}
相关推荐
在本章“第27章 CSS传统布局[上]”中，我们将探讨Web设计中的布局基础知识，特别是那些在现代Flexbox和Grid布局出现之前的方法。这些传统布局技术对于理解Web页面结构和历史演变至关重要。 1. **盒模型**：CSS布局...
在传统布局技术中，position属性提供了static、absolute、relative、fixed四种定位方式。其中，static是默认值，它按照正常的文档流进行布局，不具备移动功能；absolute则是绝对定位，允许开发者将元素移动到相对于...
#### 二、XHTML下的CSS+DIV布局 ##### XHTML与CSS布局结合 - **标准化**：XHTML是一种更加严格的HTML版本，强调文档的正确性和一致性。使用XHTML结合CSS布局有助于提高网页的可维护性和跨浏览器兼容性。 - **示例...
#### 二、XHTML下的CSS+DIV布局总结 - **XHTML代码规范**：XHTML要求所有的标记都有相应的结束标记，所有的标签名和属性名都使用小写，所有的XML标记都必须合理嵌套等。 - **调用样式表**：可以通过内部或外部方式...
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....