小白教程
所有教程
关于
Search
108.162.216.60
108.162.216.60
参数设置
贡献
退出
操作
编辑
移动
保护
信息
历史
删除
查看“HTML 网页布局”的源代码
本页内容
上一节:
HTML_head_标签
下一节:
HTML响应式网页设计
因为以下原因,您没有权限编辑本页:
您请求的操作仅限属于该用户组的用户执行:
用户
您可以查看和复制此页面的源代码。
[[Category:HTML教程|36]] == HTML 元素结构 == HTML 有几个语义元素来定义网页的不同部分: [[文件:Layout.gif]] * ''' <nowiki><header></nowiki> '''- 定义文档顶栏或部分的标题 * ''' <nowiki><nav></nowiki> '''- 定义一组导航链接 * ''' <nowiki><section></nowiki> '''- 定义文档中的一个部分 * ''' <nowiki><article></nowiki> '''- 定义一个独立的、自包含的内容 * ''' <nowiki><aside></nowiki> '''- 定义内容之外的内容(如侧边栏) * ''' <nowiki><footer></nowiki> '''- 定义文档或部分的页脚 * ''' <nowiki><details></nowiki> '''- 定义用户可以按需打开和关闭的其他详细信息 * ''' <nowiki><summary></nowiki> '''- 定义''' <nowiki><details></nowiki> '''元素的标题 == CSS 框架 == 如果您想快速创建布局,可以使用 CSS 框架,[https://getbootstrap.com/ Bootstrap] 或者对国内用户友好的 [https://layui.itze.cn/ layui]。xiaobai.wang就是构建在Bootstrap上。 == CSS float 布局 == ''' <nowiki> float</nowiki> '''使用 CSS属性进行整个 Web 布局是很常见的。Float 很容易学习——你只需要记住''' <nowiki>float</nowiki> '''和''' <nowiki> clear</nowiki> '''属性是如何工作的。 缺点:浮动元素与文档流相关,可能会损害灵活性。 <sample title="" desc="" hererun="1"> <!DOCTYPE html> <html lang="en"> <head> <title>CSS Template</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> * { box-sizing: border-box; } body { font-family: Arial, Helvetica, sans-serif; } / * header样式 */ header { background-color: #666; padding: 30px; text-align: center; font-size: 35px; color: white; } /* 创建两个漂浮在彼此相邻的列 */ nav { float: left; width: 30%; height: 300px; background: #ccc; padding: 20px; } /* 菜单中的列表 */ nav ul { list-style-type: none; padding: 0; } article { float: left; padding: 20px; width: 70%; background-color: #f1f1f1; height: 300px; } /* 清除浮动 */ section::after { content: ""; display: table; clear: both; } /* 页脚 */ footer { background-color: #777; padding: 10px; text-align: center; color: white; } /* 响应布局 - 在小屏幕上 使两个列/盒子彼此堆叠,而不是彼此相邻, */ @media (max-width: 600px) { nav, article { width: 100%; height: auto; } } </style> </head> <body> <h2>CSS浮动布局</h2> <p>在示例中,我们创建了一个header,两个列/box和一个页脚。在较小的屏幕上,这些列将彼此堆叠。</p> <p>点击底部调整设备即可预览效果</p> <header> <h2>城市</h2> </header> <section> <nav> <ul> <li><a href="#">伦敦</a></li> <li><a href="#">巴黎</a></li> <li><a href="#">东京</a></li> </ul> </nav> <article> <h1>伦敦</h1> <p>伦敦是英格兰首都。它是英国人口最多的城市,拥有超过1300万居民的大都市地区.</p> <p>伦敦站在泰晤士河上</p> </article> </section> <footer> <p>Footer</p> </footer> </body> </html> </sample> == CSS flexbox 布局 == 使用 flexbox 可确保当页面布局必须适应不同的屏幕尺寸和不同的显示设备时元素的行为是可预测的。 <sample title="" desc="" hererun="2"> <!DOCTYPE html> <html lang="en"> <head> <title>CSS Template</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> * { box-sizing: border-box; } body { font-family: Arial, Helvetica, sans-serif; } /* Style the header */ header { background-color: #666; padding: 30px; text-align: center; font-size: 35px; color: white; } /* Container for flexboxes */ section { display: -webkit-flex; display: flex; } /* Style the navigation menu */ nav { -webkit-flex: 1; -ms-flex: 1; flex: 1; background: #ccc; padding: 20px; } /* Style the list inside the menu */ nav ul { list-style-type: none; padding: 0; } /* Style the content */ article { -webkit-flex: 3; -ms-flex: 3; flex: 3; background-color: #f1f1f1; padding: 10px; } /* Style the footer */ footer { background-color: #777; padding: 10px; text-align: center; color: white; } /* 响应式布局 */ @media (max-width: 600px) { section { -webkit-flex-direction: column; flex-direction: column; } } </style> </head> <body> <h2>CSS Flexbox布局</h2> <p>在此示例中,我们创建了一个header,两个列/box和一个页脚。在较小的屏幕上,这些列将彼此堆叠展示。</p> <p>修改底部设备即可查看效果</p> <p><strong>Note:</strong> Flexbox Internet Explorer 10和更早版本中不支持.</p> <header> <h2>城市</h2> </header> <section> <nav> <ul> <li><a href="#">伦敦</a></li> <li><a href="#">巴黎</a></li> <li><a href="#">东京</a></li> </ul> </nav> <article> <h1>伦敦</h1> <p>伦敦是英格兰首都。它是英国人口最多的城市,拥有超过1300万居民的大都市地区.</p> <p>伦敦在泰晤士河上,其历史可以追溯到罗马人的创立.</p> </article> </section> <footer> <p>Footer</p> </footer> </body> </html> </sample> == CSS Grid 布局 == CSS Grid 布局模块提供了基于网格的布局系统,具有行和列,无需使用浮动和定位就可以更轻松地设计网页。
返回至“
HTML 网页布局
”。
上一节:
HTML_head_标签
下一节:
HTML响应式网页设计