010.页面结构分析
2021/11/10 6:12:02
本文主要是介绍010.页面结构分析,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>HTML网页布局</title> <style> body { font: 14px Arial,sans-serif; margin: 0px; } header { padding: 10px 20px; background: #acb3b9; } header h1 { font-size: 24px; } .container { width: 100%; background: #f2f2f2; } nav, section { float: left; padding: 20px; min-height: 170px; box-sizing: border-box; } section { width: 80%; } nav { width: 20%; background: #d4d7dc; } nav ul { list-style: none; line-height: 24px; padding: 0px; } nav ul li a { color: #333; } .clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } footer { background: #acb3b9; text-align: center; padding: 5px; } </style> </head> <body> <div class="container"> <header> <h1>C语言中文网</h1> </header> <div class="wrapper clearfix"> <nav> <ul> <li><a href="http://c.biancheng.net/">首页</a></li> <li><a href="http://c.biancheng.net/html/">HTML教程</a></li> <li><a href="http://c.biancheng.net/css3/">CSS教程</a></li> <li><a href="http://c.biancheng.net/js/">JS教程</a></li> <li><a href="http://c.biancheng.net/java/">Java教程</a></li> <li><a href="http://c.biancheng.net/python/">Python教程</a></li> </ul> </nav> <section> <h2>网站简介</h2> <p>C语言中文网创办于 2012 年初,是一个在线学习<b>编程</b>的网站。C语言中文网已经发布了众多优质编程教程,包括C语言、C++、Java、Python 等,它们都通俗易懂,深入浅出。</p> <p>C语言中文网将会持续更新,并且不忘初心,坚持创作优质教程。</p> </section> </div> <footer> <p>www.biancheng.net</p> </footer> </div> </body> </html>
这篇关于010.页面结构分析的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-11-02Java管理系统项目实战入门教程
- 2024-11-02Java监控系统项目实战教程
- 2024-11-02Java就业项目项目实战:从入门到初级工程师的必备技能
- 2024-11-02Java全端项目实战入门教程
- 2024-11-02Java全栈项目实战:从入门到初级应用
- 2024-11-02Java日志系统项目实战:初学者完全指南
- 2024-11-02Java微服务系统项目实战入门教程
- 2024-11-02Java微服务项目实战:新手入门指南
- 2024-11-02Java项目实战:新手入门教程
- 2024-11-02Java小程序项目实战:从入门到简单应用