注：来自https://www.w3schools.com。仅仅是个人学习笔记，不含过多个人思考。
网页的简单布局如图所示
一个简单的html设置为：
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="style.css"> <meta lang="utf-8"> <title>My web page</title> </head> <body> <div id="container"> <header> <h1>City Gallery</h1> </header> <nav> <ul> <li><a href="#">London</a></li> <li><a href="#">Paris</a></li> <li><a href="#">Tokyo</a></li> </ul> </nav> <article> <h1>London</h1> <p>London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p> <p>Standing on the River Thames, London has been a major settlement for two millennia, its history going back to its founding by the Romans, who named it Londinium.</p> </article> <footer> Copyright © W3Schools.com </footer> </div> </body> </html>对应的css样式的设置为：
/* 注: 主要是通过css的float设置浮动窗口来实现网页布局; */ /*注意：此处如果是将body的设置设置为#container,显示的结果与此设置是不同的*/ #container { width:100%; border:1px solid black; } header,footer { padding:1em; color:white; background-color:black; text-align:center; } nav { padding:1em; float:left; width:20%; /*尽量使用相对的设置，避免因为在不同电脑上运行显示的效果不同*/ } nav ul { list-style-type:none; } nav ul a { text-decoration:none; } article { margin-left:21%; overflow:hidden; border-left:1px solid black; padding:1em; }显示的结果为:
