HTML layout
On the Internet, you can see formatted columns like newspapers everywhere.
Most websites can use the <div> or <table> elements to create multiple columns. CSS is used to position elements or create backgrounds and colorful looks for pages.
Use <div> elements to layout
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> </head> <body> <div id="container" style="width:500px"> <div id="header" style="background-color:#00FFFF;"> <h1 style="margin-bottom:0;">标题</h1></div> <div id="menu" style="background-color:#FFD700;height:200px;width:100px;float:left;"> <b>菜单</b><br> HTML<br> CSS<br> </div> <div id="content" style="background-color:#00FF00;height:200px;width:400px;float:left;"> 内容</div> <div id="footer" style="background-color:#FF00FF;clear:both;text-align:center;"> 版权 © php.cn</div> </div> </body> </html>
Use tables for layout
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> </head> <body> <table width="500" border="0"> <tr> <td colspan="2" style="background-color:#FFA500;"> <h1>标题</h1> </td> </tr> <tr> <td style="background-color:#FFD700;width:100px;"> <b>菜单</b><br> HTML<br> CSS<br> </td> <td style="background-color:#eeeeee;height:200px;width:400px;"> 内容</td> </tr> <tr> <td colspan="2" style="background-color:#FFA500;text-align:center;"> 版权 © php.cn</td> </tr> </table> </body> </html>
HTML Layout - Helpful Tips
Tip: The biggest advantage of using CSS is that if the CSS code is stored in an external style sheet, the site will be easier to maintain. By editing a single file, you can change the layout of all pages. To learn more about CSS, visit our CSS tutorials.
#Tip: Since creating advanced layouts is time-consuming, using templates is a quick option. There are many free website templates available through search engines (you can use these pre-built website layouts and optimize them).
new file
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>布局教程</title>
<style type="text/css">
#Container{
width:1000px;
margin:0 auto;/*设置整个容器在浏览器中水平居中*/
background:#CF3;
}
#Header{
height:80px;
background:#093;
}
#logo{
padding-left:50px;
padding-top:20px;
padding-bottom:50px;
}
#Content{
height:600px;
/*此处对容器设置了高度，一般不建议对容器设置高度，一般使用overflow:auto;属性设置容器根据内容自适应高度，如果不指定高度或不设置自适应高度，容器将默认为1个字符高度，容器下方的布局元素（footer）设置margin-top:属性将无效*/
margin-top:20px;/*此处讲解margin的用法，设置content与上面header元素之间的距离*/
background:#0FF;
}
#Content-Left{
height:400px;
width:200px;
margin:20px;/*设置元素跟其他元素的距离为20像素*/
float:left;/*设置浮动，实现多列效果，div+Css布局中很重要的*/
background:#90C;
}
#Content-Main{
height:400px;
width:720px;
margin:20px;/*设置元素跟其他元素的距离为20像素*/
float:left;/*设置浮动，实现多列效果，div+Css布局中很重要的*/
background:#90C;
}
/*注：Content-Left和Content-Main元素是Content元素的子元素，两个元素使用了float:left;设置成两列，这个两个元素的宽度和这个两个元素设置的padding、margin的和一定不能大于父层Content元素的宽度，否则设置列将失败*/
#Footer{
height:40px;
background:#90C;
margin-top:20px;
}
.Clear{
clear:both;
}
</style>
</head>
<body>
<div id="Container">
<div id="Header">
<div id="logo">这里设置了padding属性介绍一下padding的用法,padding将设置文本与边框的距离。</div>
</div>
<div id="Content">
<div id="Content-Left">Content-Left</div>
<div id="Content-Main">Content-Main</div>
</div>
<div class="Clear"><!--如何你上面用到float,下面布局开始前最好清除一下。--></div>
<div id="Footer">Footer</div>
</div>
</body>
</html>
Preview
Clear
- Course Recommendations
- Courseware download
The courseware is not available for download at the moment. The staff is currently organizing it. Please pay more attention to this course in the future~
Students who have watched this course are also learning
Let's briefly talk about starting a business in PHP
Quick introduction to web front-end development
Large-scale practical Tianlongbabu development of Mini version MVC framework imitating the encyclopedia website of embarrassing things
Getting Started with PHP Practical Development: PHP Quick Creation [Small Business Forum]
Login verification and classic message board
Computer network knowledge collection
Quick Start Node.JS Full Version
The front-end course that understands you best: HTML5/CSS3/ES6/NPM/Vue/...[Original]
Write your own PHP MVC framework (40 chapters in depth/big details/must read for newbies to advance)