❮ 如何在 iframe 中获取元素
如何建立网站 ❯
如何创建 - 制作网站
更新于 2024/9/3 18:57:00
了解如何创建适用于所有设备、PC、笔记本电脑、平板电脑和手机的响应式网站。
从头开始创建网站
Demo
亲自试一试
"布局草稿"
在创建网站之前绘制页面设计的布局草稿可能是明智的:
标题
导航栏
侧边内容
一些文字一些文字..
主要内容
一些文字一些文字..
一些文字一些文字..
一些文字一些文字..
页脚
第一步 - 基本 HTML 页面
HTML 是创建网站的标准标记语言，而 CSS 是描述 HTML 文档样式的语言。 我们将结合 HTML 和 CSS 来创建一个基本的网页。
注释:如果你不懂 HTML 和 CSS，我们建议 您首先要阅读我们的 HTML 教程。
实例
Page Title
charset="UTF-8">
My Website
A website created by me.
亲自试一试 »
实例解析
声明将此文档定义为 HTML5
元素是 HTML 页面的根元素
元素包含有关文档的元信息
元素指定文档的标题</p>
<p><meta> 元素应将字符集定义为 UTF-8</p>
<p>带有 name="viewport" 的 <meta> 元素使网站在所有设备和屏幕分辨率上都看起来不错</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>标题</p>
<p>标题通常位于网站顶部（或顶部导航菜单的正下方）。 它通常包含徽标或网站名称:</p>
<p><div class="header"> <h1>My Website</h1> <p>A website</p>
<p>created by me.</p></div></p>
<p>然后我们使用 CSS 来设置标题的样式:</p>
<p>.header { padding: 80px;</p>
<p>/* 一些填充 */</p>
<p>text-align: center;</p>
<p>/* 将文本居中 */</p>
<p>background: #1abc9c;</p>
<p>/* 绿色背景 */</p>
<p>color: white;</p>
<p>/* 白色文字颜色 */</p>
<p>}</p>
<p>/* 增加 <h1> 元素的字体大小 */</p>
<p>.header h1 { font-size: 40px;}</p>
<p>亲自试一试 »</p>
<p>导航栏</p>
<p>导航栏包含一个链接列表，可帮助访问者浏览您的网站:</p>
<p><div class="navbar"> <a href="#">Link</a> <a href="#">Link</a></p>
<p><a href="#">Link</a> <a href="#" class="right">Link</a></div></p>
<p>使用 CSS 设置导航栏样式:</p>
<p>/* 设置顶部导航栏的样式 */</p>
<p>.navbar { overflow: hidden;</p>
<p>/* 隐藏溢出 */</p>
<p>background-color: #333;</p>
<p>/* 深色背景颜色 */</p>
<p>}</p>
<p>/* 设置导航栏链接的样式 */</p>
<p>.navbar a { float: left;</p>
<p>/* 确保链接保持并排 */</p>
<p>display: block;</p>
<p>/* 出于响应原因，将显示更改为阻止（见下文） */</p>
<p>color: white;</p>
<p>/* 白色文字颜色 */</p>
<p>text-align: center;</p>
<p>/* 将文本居中 */</p>
<p>padding: 14px 20px;</p>
<p>/* 添加一些填充 */</p>
<p>text-decoration: none;</p>
<p>/* 删除下划线 */</p>
<p>}</p>
<p>/* 右对齐链接 */</p>
<p>.navbar a.right { float: right;</p>
<p>/* 将链接浮动到右侧 */</p>
<p>}</p>
<p>/* 在悬停/鼠标悬停时更改颜色 */</p>
<p>.navbar a:hover {</p>
<p>background-color: #ddd;</p>
<p>/* 灰色背景色 */</p>
<p>color: black;</p>
<p>/* 黑色文字颜色 */</p>
<p>}</p>
<p>亲自试一试 »</p>
<p>内容</p>
<p>创建一个 2 列布局，分为"侧边内容" 和"主要内容"。</p>
<p><div class="row"> <div class="side">...</div> <div</p>
<p>class="main">...</div></div></p>
<p>我们使用 CSS Flexbox 来处理布局:</p>
<p>/* 确保合适的尺寸 */</p>
<p>* { box-sizing: border-box;}</p>
<p>/* 列容器 */</p>
<p>.row { display: flex; flex-wrap: wrap;}</p>
<p>/* 创建两个彼此相邻的不等列 */</p>
<p>/* 侧边栏/左栏 */</p>
<p>.side { flex: 30%;</p>
<p>/* 设置侧边栏的宽度 */</p>
<p>background-color: #f1f1f1;</p>
<p>/* 灰色背景色 */</p>
<p>padding: 20px;</p>
<p>/* 一些填充 */</p>
<p>}</p>
<p>/* Main column */</p>
<p>.main {</p>
<p>flex: 70%;</p>
<p>/* 设置主要内容的宽度 */</p>
<p>background-color: white;</p>
<p>/* 白色背景颜色 */</p>
<p>padding: 20px;</p>
<p>/* 一些填充 */</p>
<p>}</p>
<p>亲自试一试 »</p>
<p>然后添加媒体查询以使布局响应。 这将确保您的网站在所有设备（台式机、笔记本电脑、平板电脑和手机）上看起来都不错。 调整浏览器窗口大小以查看结果。</p>
<p>/* 响应式布局 - 当屏幕宽度小于 700px 时，使两列堆叠在一起而不是彼此相邻 */</p>
<p>@media screen and (max-width: 700px) { .row {</p>
<p>flex-direction: column; }}</p>
<p>/* 响应式布局 - 当屏幕宽度小于 400px 时，使导航链接堆叠在一起而不是彼此相邻 */</p>
<p>@media screen and (max-width: 400px) { .navbar a {</p>
<p>float: none; width: 100%; }}</p>
<p>亲自试一试 »</p>
<p>提示:要创建不同类型的布局，只需更改 flex 宽度（但要确保它加起来为 100%）。</p>
<p>提示:你想知道@media 规则是如何工作的吗? 在我们的 CSS 媒体查询章节中了解更多信息。</p>
<p>提示:要了解有关弹性盒布局模块的更多信息，阅读我们的 CSS 弹性盒章节。</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>Footer</h2></div></p>
<p>并设置样式:</p>
<p>.footer { padding: 20px;</p>
<p>/* 一些填充 */</p>
<p>text-align: center;</p>
<p>/* 居中文本 */</p>
<p>background: #ddd;</p>
<p>/* 灰色背景 */</p>
<p>}</p>
<p>亲自试一试 »</p>
<p>恭喜！ 您已经从零开始构建了一个响应式网站。</p>
<p>❮ 如何在 iframe 中获取元素</p>
<p>如何建立网站 ❯</p>
</p>
<div style="text-align: left;background:#f1f1f1;padding:20px;line-height:50px;">
<a href="/6dbe5978a7723bad/870919e8553102d4.html">一站式智能硬件开发服务平台盘点：腾讯云实时互动</a><br><a href="/6326aa15709539f9/1b0625c51b668342.html">起名app排行榜前十名-十大起名软件推荐下载</a>
</div>
</div>
</div></div></article>
<div class="projects-feed clearfix" id="newest">
<ul>
</ul>
</div>
</div>
</div>
<footer id="footer" class="clearfix">
<p class="footer-text">Copyright © 2022 网游最新活动发布中心 All Rights Reserved.
</p>
</footer>
<!--END #wrapper-->
</div>
<script type="text/javascript" src="/static/js/san_praise_sdk.js"></script>
</body></html>