HTML如何制作一个简单的单页布局（代码分享）

原创

ithorizon 7个月前 (10-19) 阅读数 65 #HTML

之前的文章《一步步教你使用css制作一个简单美观的导航栏（代码详解）》中，给大家介绍了怎样使用css制作简单美观的导航栏。下面本篇文章给大家介绍如何用html制作简单的面页布局，我们一起看看怎么做。

互联网多数的网页都是由html编写的，html配合css布局做成一个简单的漂亮网页。

代码示例

<!DOCTYPE html>
<html>
<head>
<title>css网页布局 </title>
<meta charset="utf-8">

<style>
* {
  box-sizing: border-box;
}

body {
  margin: 0;
}

.header {
  background-color: #f1f1f1;
  }

.topnav {
  overflow: hidden;
  background-color: #f61137;
}

.topnav a {
  float: left;
  color: #0017f9;
  padding: 10px 100px;
  text-decoration: none;
}

.topnav a:hover {
 background-color:#7efe51;
 

</style>
</head>
	
	
<body>
<div class="responsive">
  <div class="img">
    <a target="_blank" href="//static.runoob.com/images/demo/demo1.jpg">
      <img src="//static.runoob.com/images/demo/demo1.jpg" alt="#" width="800"    style="max-width:90%">
    </a>
	  </div>
	</div>
 <div class="topnav">
  <a href="#">图片</a>
  <a href="#">视频</a>
  <a href="#">关于</a>
</div>

<div class="responsive">
  <div class="img">
    <a target="_blank" href="//static.runoob.com/images/demo/demo4.jpg">
      <img src="//static.runoob.com/images/demo/demo4.jpg" alt="#" width="800"    style="max-width:90%">
	</a>
	</div>
</div>
</body>
</html>

代码效果图如下：

立即学习“前端免费学习笔记（深入）”；

代码步骤：

1、开始HTML 源码，标签语言有【开始标签】和【结束标签】，中间为标签的内容，先我们输入头和尾。

<html>
</html>

2、一个简单的 HTML 文档，带有最基本的必需的元素。在中间加入标题标签，在title标题中加入网页标题名：css面页布局，可以不写。<pre class="brush:php;toolbar:false"><html> <head> <title>css网页布局 </title> </head> </html></pre> 3、网页布局<style> 标签用于为 HTML 文档定义样式信息，创建高级的布局非常耗时，使用模板是一个快速的话，搜索引擎可以找到很多免费的网站模板。<pre class="brush:php;toolbar:false"><html> <head> <title>css网页布局 </title> </head> <style>...网页布局... </style> </html></pre> 4、<body>元素包含文档的所有内容，比如：文本、超链接、图像、表格和列表等。<pre class="brush:php;toolbar:false"><html> <head> <title>css网页布局</title> </head> <body> body 元素的内容会显示在浏览器中。 title 元素的内容会显示在浏览器的标题栏中。 </body> </html></pre> 推荐学习：Html视频教程以上就是HTML如何制作一个简单的单页布局（代码分享）的详细内容，更多请关注IT视界其它相关文章！  HTML速学教程(入门课程) HTML怎么学习？HTML怎么入门？HTML在哪学？HTML怎么学才快？不用担心，这里为大家提供了HTML速学教程(入门课程)，有需要的小伙伴保存下载就能学习啦！ 下载 相关标签： css html 搜索引擎来源：IT视界 收藏 点赞 上一篇：某些HTML字符打不出来怎么办 下一篇：学习中值得了解html网页的基本结构（总结） 本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn 作者最新文章 <ul> <li> ace-guard client exe是什么程序 2023-03-17 10:54:01 </li> <li> 开gzip有什么好处？php如何判断服务器是否支持gzip压缩 2023-03-11 10:02:01 </li> <li> Python邮件处理示例 2023-03-11 09:30:01 </li> <li> php局域网如何获取所有用户的电脑IP和主机名、mac地址 2023-03-11 09:24:01 </li> <li> 马上实习如何选择前端后端？ 2023-03-11 09:22:02 </li> <li> php特性包括哪些？php的优势有6种 2023-03-11 09:08:02 </li> <li> 详细介绍：php前端和后端有什么区别？ 2023-03-11 08:54:01 </li> <li> 常见的软件开发模型有哪些 2023-02-16 14:31:53 </li> <li> mpg格式是什么意思？ 2023-02-16 14:31:33 </li> <li> 大数据在生活中的应用有哪些 2023-02-16 14:31:12 </li> </ul> 最新问题用了gard("admin")还需要单独验证吗？在控制器中用了gard("admin")->attempt($rules)后还需要单独写查询语句验证吗？ P粉709840553来自于2024-09-24 11:07:51 0 0 445 为什么password密码在数据据值都不样自动生成后在数据库password这个字段中为什么会出现值不一样，生成都是用的是：admin888 P粉709840553来自于2024-09-24 11:06:02 0 0 372 运行视频看不了啊运行视频看不了啊 P粉109248948来自于2024-09-24 10:21:09 0 0 280 为啥开头不写结束符号？> 就写一个<?php 为啥开头不写结束符号？> 就写一个<?php P粉052048067来自于2024-09-11 18:01:19 0 1 700 按照老师的方法不传值给TP6后台，再接收参数。出现以下错误。怎么办 http://localhost/index.php/admin/index/userliste 的远程资源。（原因：CORS 头缺少 'Access-Control-Al... 凡人来自于2024-07-09 15:20:49 1 39 2107 请问写php项目都要用到git吗请问写php项目都要用到git吗 IT视界用户-4202961来自于2024-06-11 14:28:59 0 57 2711 请问能提供下源码么请问能提供下源码么？想对照着看 周珂儿来自于2024-06-06 08:56:32 0 47 2427 为什么我用的laravel10不走handle文件中的render方法，无法输出断点内容为什么我用的laravel10不走handle文件中的render方法，无法输出断点内容 许飞来自于2024-06-02 14:41:32 0 50 1877 小鱼AI助手免费使用！http://ai.52xuejs.cn/#/chat 小鱼AI助手免费使用！http://ai.52xuejs.cn/#/chat 会飞的汤姆来自于2024-05-28 03:09:58 0 47 2472 function_exists()无法判定自定义函数 function test() { return true; } ... 凡人来自于2024-04-29 11:01:01 0 64 3304 相关专题更多> <ul> <li class="ul-li"> css </li> <li class="ul-li"> css居中 </li> <li class="ul-li"> css如何插入图片 </li> <li class="ul-li"> css超出显示... </li> <li class="ul-li"> css字体颜色 </li> <li class="ul-li"> 什么是css </li> <li class="ul-li"> css三角形怎么写 </li> <li class="ul-li"> css设置文字颜色 </li> </ul> 广告  热门推荐 <ul> <li> html css怎么隐藏滚动条 </li> <li> 如何使用HTML制作一个简单美观的导航栏（代码详解） </li> <li> 速学！通过PHP输出HTML表格并显示变量值 </li> <li> HTML速学教程(入门课程) </li> </ul>  广告 热门教程更多> 相关推荐热门推荐最新课程 <ul class="one"> <li> HTML 中文开发手册 0次学习收藏 </li> <li> HTML/CSS技术小知识每日分享 96002次学习收藏 </li> <li> HTML每日小知识（第二季） 80407次学习收藏 </li> </ul> <ul class="two" style="display: none;"> <li> 最新ThinkPHP 5.1全球首发视频教程(60天成就PHP大牛线上培训班课) 1404623次学习收藏 </li> <li> phpStudy极速入门视频教程 517619次学习收藏 </li> <li> 独孤九贱(4)_PHP视频教程 1205265次学习收藏 </li> <li> PHP实战天龙八部之仿爱奇艺电影网站 748041次学习收藏 </li> <li> 独孤九贱(1)_HTML5视频教程 600341次学习收藏 </li> </ul> <ul class="three" style="display: none;"> <li> 支付宝沙箱支付（个人也能用的支付） 486次学习收藏 </li> <li> 麻省理工大佬Python课程 7008次学习收藏 </li> <li> Swoole5 Hyperf3 php8新版本协程框架讲说 5253次学习收藏 </li> <li> 【web前端】Node.js快速入门 4255次学习收藏 </li> <li> 国外Web开发全栈课程全集 2805次学习收藏 </li> </ul> 最新下载更多> <ul class="swiper-wrapper"> <li class="swiper-slide"> </li> <li class="swiper-slide"> </li> <li class="swiper-slide"> </li> </ul> 网站特效网站源码网站素材前端模板 <ul class="onef"> <li> [表单按钮] jQuery企业留言表单联系代码 </li> <li> [播放器特效] HTML5 MP3音乐盒播放特效 </li> <li> [菜单导航] HTML5炫酷粒子动画导航菜单特效 </li> <li> [表单按钮] jQuery可视化表单拖拽编辑代码 </li> <li> [播放器特效] VUE.JS仿酷狗音乐播放器代码 </li> <li> [html5特效] 经典html5推箱子小游戏 </li> <li> [图片特效] jQuery滚动添加或减少图片特效 </li> <li> [相册特效] CSS3个人相册封面悬停放大特效 </li> </ul> <ul class="twof" style="display:none"> <li> [Bootstrap模板] 有机果蔬供应商网页模板 Bootstrap5 </li> <li> [后端模板] Bootstrap3多功能数据信息后台管理响应式网页模板-Novus </li> <li> [Bootstrap模板] 房产资源服务平台网页模板 Bootstrap5 </li> <li> [Bootstrap模板] 简约简历资料网页模板 Bootstrap4 </li> <li> [Bootstrap模板] bootstrap响应式宽屏图书教育网站模板-DREAMLIFE </li> <li> [后端模板] MAC风格响应式蓝色企业CMS后台管理系统模版 </li> <li> [后端模板] 响应式渐变大气后台管理系统网站模板-usinessbox </li> <li> [Bootstrap模板] 响应式蔬菜水果商店网站模板-Organio </li> </ul> <ul class="threef" style="display:none"> <li> [网站素材] 可爱的夏天元素矢量素材(EPS+PNG) </li> <li> [网站素材] 四个红的的 2023 毕业徽章矢量素材(AI+EPS+PNG) </li> <li> [网站素材] 唱歌的小鸟和装满花朵的推车设计春天banner矢量素材(AI+EPS) </li> <li> [网站素材] 金色的毕业帽矢量素材(EPS+PNG) </li> <li> [网站素材] 黑白风格的山脉图标矢量素材(EPS+PNG) </li> <li> [网站素材] 不同颜色披风和不同姿势的超级英雄剪影矢量素材(EPS+PNG) </li> <li> [网站素材] 扁平风格的植树节banner矢量素材(AI+EPS) </li> <li> [网站素材] 九个漫画风格的爆炸聊天气泡矢量素材(EPS+PNG) </li> </ul> <ul class="fourf" style="display:none"> <li> [前端模板] HTML5汉堡美食服务宣传网站模板 </li> <li> [前端模板] 时尚服饰配饰在线商城网站模板 </li> <li> [前端模板] 房地产智能家居服务公司网站模板 </li> <li> [前端模板] 宗教文化在线教育服务网站模板 </li> <li> [前端模板] 犬类护理服务机构网站模板 </li> <li> [前端模板] IT软件技术服务公司网站模板 </li> <li> [前端模板] HTML5石油天然气工业网站模板 </li> <li> [前端模板] 战略营销咨询服务公司网站模板 </li> </ul>   <dl> <dt> 关于我们免责申明意见反馈讲师合作广告合作  最新更新 </dt> <dd class="cont1">IT视界：公益在线php培训，帮助PHP学习者快速成长！</dd> <dd class="cont2"> 关注服务号 微信扫码 关注IT视界服务号 技术交流群 QQ扫码 加入技术交流群 </dd> </dl> app下载 扫描下载App <dl> <dt>IT视界订阅号</dt> <dd>每天精选资源文章推送</dd> </dl> <dl> <dt>IT视界APP</dt> <dd>随时随地碎片化学习</dd> </dl> <dl> <dt>IT视界抖音号</dt> <dd>发现有趣的</dd> </dl> Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号 <input type="hidden" id="verifycode" value="/captcha.html">  <input type="hidden" id="verifycode" value="/captcha.html"> <link rel='stylesheet' id='_main-css' href='/static/css/viewer.min.css?2' type='text/css' media='all'/> <style> .content img{max-width:100%;} .copy-button { padding: 5px 10px; background-color: #666; border: none; color: #FFF; font-size: 12px; cursor: pointer; border-radius: 5px; position: relative; top: 33px; right: 5px; z-index: 99; float: right; } .copy-button:hover { background-color: #fc3930; } </style>    <style> .layui-fixbar{display: none;} </style> <li> PHP学习 </li> <li> 技术支持 </li> <li> 返回顶部 </li>  <style> .google-cn { position: fixed; bottom: 0; left: 0; width: 200px; max-width: 100%; z-index: 9999; } </style>