CSS布局设计 CSS布局|CSS2

CSS布局易于设计。我们可以使用CSS布局来设计我们的网页, 例如主页, 与我们联系, 关于我们等。
有3种设计网页布局的方法：

带有CSS的HTML Div：现在已广泛使用。
HTML表格：速度较慢, 较不受欢迎。
HTML框架集：现已弃用。

CSS布局可以包含页眉, 页脚, 左窗格, 右窗格和正文部分。让我们看一个CSS布局的简单示例。
CSS布局示例

< !DOCTYPE html> < html> < head> < style> .header{margin:-8px -8px 0px; background-image:linear-gradient(145deg, #7379ff, #b524ef); color:white; text-align:center; padding:10px; } .container{width:100%} .left{width:15%; float:left; } .body{width:65%; float:left; background-color:pink; padding:5px; } .right{width:15%; float:left; } .footer{margin:-8px; clear:both; background-image:linear-gradient(145deg, #7379ff, #b524ef); color:white; text-align:center; padding:10px; } < /style> < /head> < body> < div class="header"> < h2> srcmini< /h2> < /div> < div class="container"> < div class="left"> < p> Left Page< /p> < /div> < div class="body"> < h1> Body Page< /h1> < p> Page Content goes here< /p> < p> Page Content goes here< /p> < p> Page Content goes here< /p> < p> Page Content goes here< /p> < p> Page Content goes here< /p> < p> Page Content goes here< /p> < p> Page Content goes here< /p> < p> Page Content goes here< /p> < p> Page Content goes here< /p> < p> Page Content goes here< /p> < p> Page Content goes here< /p> < p> Page Content goes here< /p> < p> Page Content goes here< /p> < /div> < div class="right"> < p> Right Page< /p> < /div> < /div> < div class="footer"> < p> Footer< /p> < /div> < /body> < /html>

【CSS布局设计】输出：