网页布局基础教程
网页的布局有很多种方式，一般分为以下几个部分：
头部区域部分菜单导航区域部分内容区域部分底部区域部分
一般网页的布局
网页头部区域部分
头部区域部分位于整个网页的顶部，一般用于设置网页的标题或者网页的图标：
实例如下：
代码1
效果1
代码2
效果2
部分代码：
!DOCTYPEhtmlhtmlheadmetacharset=utf-8titleCSS网页布局教程/titlestylebody{margin:0;}/*头部样式*/.header{background-color:darkslategrey;padding:25px;text-align:center;}h1{color:aliceblue;}/style/headbodydivclass=headerh1头部区域部分/h1/div/body/html菜单导航区域
菜单导航条包含了一些链接，可以引导用户浏览其他页面：
代码1
代码1
效果
实现代码：
!DOCTYPEhtmlhtmlheadmetacharset=utf-8titleCSS网页布局/titlestyle*{box-sizing:border-box;}body{margin:0;}/*头部样式*/.header{background-color:#f1f1f1;padding:20px;text-align:center;}/*导航条*/.topnav{overflow:hidden;background-color:midnightblue;}/*导航链接*/.topnava{float:left;display:block;color:#f2f2f2;text-align:center;padding:14px16px;text-decoration:none;}/*链接-修改颜色*/.topnava:hover{background-color:#ddd;color:black;}/style/headbodydivclass=headerh1头部区域/h1/divdivclass=topnavahref=#导航链接/aahref=#导航链接/aahref=#导航链接/a/div/body/html内容区域
内容区域一般形式（根据屏幕分辨率和舒适的视觉体验）:
1例：用于移动端2例：用于平板设备3例：用于PC桌面设备
内容区域一般形式
创建一个响应式布局PC和以设备有不一样的布局，如下：
部分代码
PC换显示
移送设备显示
IPad显示
实现代码：
!DOCTYPEhtmlhtmlheadmetacharset=utf-8titleCSS网页布局(runoob.