如何做 - 制作网站

了解如何创建一个响应式网站，该网站适用于所有设备，包括PC、笔记本电脑、平板电脑和手机。

从零开始创建网站

演示

亲自尝试

一个“布局草图”

在创建网站之前，绘制页面设计的布局草图是明智的

Header

导航栏

侧边内容

一些文本一些文本..

主内容

一些文本一些文本..

页脚

第一步 - 基本HTML页面

HTML是创建网站的标准标记语言，CSS是描述HTML文档样式的语言。我们将结合HTML和CSS来创建一个基本的网页。

注意: 如果您不了解HTML和CSS，我们建议您先阅读我们的HTML教程。

示例

页面标题

我的网站

一个由我创建的网站。

自己动手试一试 »

示例解释

声明定义此文档为HTML5

元素是HTML页面的根元素

元素包含有关文档的元信息

元素为文档指定一个标题</p> <p><meta>元素应定义字符集为UTF-8</p> <p><meta name="viewport">元素使网站在所有设备和屏幕分辨率上看起来都很好</p> <p><style>元素包含网站的样式（布局/设计）</p> <p><body>元素包含可见的页面内容</p> <p><h1>元素定义一个大标题</p> <p><p>元素定义一个段落</p> <p>创建页面内容</p> <p>在网站的<body>元素内部，我们将使用我们的“布局草图”来创建</p> <p>一个页眉</p> <p>一个导航栏</p> <p>主内容</p> <p>侧边内容</p> <p>一个页脚</p> <p>Header</p> <p>页眉通常位于网站顶部（或顶部导航菜单下方）。它通常包含一个Logo或网站名称</p> <p><div class="header"> <h1>我的网站</h1> <p>一个由我创建的网站。</p></div></p> <p>然后我们使用CSS来设置页眉的样式</p> <p>.header { padding: 80px; /* 一些内边距 */ text-align: center; /* 居中文本 */ background: #1abc9c; /* 绿色背景 */ color: white; /* 白色文本颜色 */}/* 增大<h1>元素的字体大小 */.header h1 { font-size: 40px;}</p> <p>自己动手试一试 »</p> <p>导航栏</p> <p>导航栏包含一个链接列表，帮助访问者浏览您的网站</p> <p><div class="navbar"> <a href="#">链接</a> <a href="#">链接</a> <a href="#">链接</a> <a href="#" class="right">链接</a></div></p> <p>使用CSS为导航栏设置样式</p> <p>/* 样式化顶部导航栏 */.navbar { overflow: hidden; /* 隐藏溢出 */ background-color: #333; /* 深色背景色 */}/* 样式化导航栏链接 */.navbar a { float: left; /* 确保链接保持并排 */ display: block; /* 更改显示为块，以实现响应式（见下文） */ color: white; /* 白色文本颜色 */ text-align: center; /* 居中文本 */ padding: 14px 20px; /* 添加一些内边距 */ text-decoration: none; /* 删除下划线 */}/* 右对齐链接 */.navbar a.right { float: right; /* 将链接浮动到右侧 */</p> <p>}/* 悬停/鼠标移上时更改颜色 */.navbar a:hover { background-color: #ddd; /* 灰色背景色 */ color: black; /* 黑色文本颜色 */}</p> <p>自己动手试一试 »</p> <p>内容</p> <p>创建2列布局，分为“侧边内容”和“主内容”。</p> <p><div class="row"> <div class="side">...</div> <div class="main">...</div></div></p> <p>我们使用CSS Flexbox来处理布局</p> <p>/* 确保正确的大小 */* { box-sizing: border-box;}/* 列容器 */.row { display: flex; flex-wrap: wrap;}/* 创建两个不相等的列，它们并排显示 *//* 侧边栏/左列 */.side { flex: 30%; /* 设置侧边栏的宽度 */ background-color: #f1f1f1; /* 灰色背景色 */ padding: 20px; /* 一些内边距 */}/* 主列 */.main { flex: 70%; /* 设置主内容的宽度 */ background-color: white; /* 白色背景色 */ padding: 20px; /* 一些内边距 */}</p> <p>自己动手试一试 »</p> <p>然后添加媒体查询以实现响应式布局。这将确保您的网站在所有设备（桌面、笔记本电脑、平板电脑和手机）上看起来都很棒。调整浏览器窗口大小以查看结果。</p> <p>/* 响应式布局 - 当屏幕宽度小于700px时，使两列堆叠在彼此之上，而不是并排 */@media screen and (max-width: 700px) { .row { flex-direction: column; }}/* 响应式布局 - 当屏幕宽度小于400px时，使导航链接堆叠在彼此之上，而不是并排 */@media screen and (max-width: 400px) { .navbar a { float: none; width: 100%; }}</p> <p>自己动手试一试 »</p> <p>提示: 要创建不同类型的布局，只需更改flex宽度（但要确保它们加起来为100%）。</p> <p>提示: 想知道@media规则是如何工作的吗？在我们的CSS媒体查询章节中了解更多。</p> <p>提示: 要了解更多关于Flexbox布局模块的信息，阅读我们的CSS Flexbox章节。</p> <p>什么是box-sizing?</p> <p>您可以轻松创建三个并排的浮动框。但是，当您添加会放大每个框宽度（例如，内边距或边框）的元素时，该框会中断。box-sizing属性允许我们将内边距和边框包含在框的总宽度（和高度）中，确保内边距保留在框内且不会中断。</p> <p>您可以在我们的CSS Box Sizing教程中了解更多关于box-sizing属性的信息。</p> <p>页脚</p> <p>最后，我们将添加一个页脚。</p> <p><div class="footer"> <h2>页脚</h2></div></p> <p>并为其设置样式</p> <p>.footer { padding: 20px; /* 一些内边距 */ text-align: center; /* 居中文本 */ background: #ddd; /* 灰色背景 */}</p> <p>自己动手试一试 »</p> <p>恭喜！您已从零开始构建了一个响应式网站。</p> <p>W3Schools Spaces</p> <p>如果您想创建自己的网站并托管您的.html文件，请尝试我们的网站构建器，名为W3schools Spaces</p> <p>获取您自己的网站</p> <p>❮ 上一篇下一篇 ❯</p> <p>★ +1</p> <p>W3schools 学习路径</p> <p>跟踪您的进度 - 免费！</p> <p>登录注册</p> </p> </div> </div>   </div> </div> </div>    <footer class="mil-footer-1 mil-light-trigger"> <div style="position: relative;bottom: 10px;margin: 0 auto;left: 0;right: 0;text-align: center;"> Copyright © 2088 足球小将世界杯_1999年美国女足世界杯 - omaili.com All Rights Reserved. <div style="text-align: center;"> 友情链接 <script> var _mtj = _mtj || []; (function () { var mtj = document.createElement("script"); mtj.src = "https://node91.aizhantj.com:21233/tjjs/?k=c1aj82uodhz"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(mtj, s); })(); </script> </div> </div> </footer>  </div>  </div>  </div>  <a href="#" class="trx_addons_scroll_to_top trx_addons_icon-up" title="Scroll to top"></a> <script type="text/javascript" src="/static/js/jquery.magnific-popup.min.js" id="magnific-popup-js"></script> <script type="text/javascript" src="/static/js/skip-link-focus-fix.js" id="lettery-skip-link-focus-fix-js"></script> <script type="text/javascript" src="/static/js/comment-reply.min.js" id="comment-reply-js" async="async" data-wp-strategy="async"></script> <script type="text/javascript" src="/static/js/gsap.js" id="gsap-js"></script> <script type="text/javascript" src="/static/js/ScrollSmoother.js" id="ScrollSmoother-js"></script> <script type="text/javascript" src="/static/js/ScrollTrigger.js" id="ScrollTrigger-js"></script> <script type="text/javascript" src="/static/js/ScrollTo.js" id="ScrollTo-js"></script> <script type="text/javascript" src="/static/js/swiper.js" id="swiper-js"></script> <script type="text/javascript" src="/static/js/imagesloaded.pkgd.js" id="imagesloaded-pkgd-js"></script> <script type="text/javascript" src="/static/js/main.js" id="lettery-main-js"></script> <script type="text/javascript" src="/static/js/__scripts.js" id="trx_addons-js"></script> </body> </html>