日 - TML/CSS - 项目 ILUGC（网页）-css教程-PHP中文网

：代表网页的主标题。

的副标题。

首页

web前端

css教程

日 - TML/CSS - 项目 ILUGC（网页）

Patricia Arquette

Jan 04, 2025 am 07:11 AM

HTML：

HTML 代表超文本标记语言
HTML 是创建网页的标准标记语言
HTML 描述网页的结构
HTML 由一系列元素组成
HTML 元素告诉浏览器如何显示内容
HTML 元素标记内容片段，例如“这是标题”、“这是一个段落”、“这是一个链接”等

参考- https://www.w3schools.com/Html/html_intro.asp

CSS：

层叠样式表 (CSS) 是一种样式表语言，用于描述用 HTML 编写的文档的呈现方式。
CSS 描述了如何在屏幕、纸张、语音或其他媒体上呈现元素。

参考 - https://developer.mozilla.org/en-US/docs/Web/CSS

Day - TML/CSS - Project ILUGC(web page)

HTML/CSS 和 Javascript 之间的差异。

-->HTML/CSS - 静态页面 - 每次加载时内容都保持不变，除非手动更新。
-->Javascript - 动态页面 - 页面可以响应用户操作，例如单击按钮、提交表单或移动鼠标。

HTML 语法：

<html>
<head>
<title>Page Title</title>
</head>
<body>
   <h1>My First Heading</h1>
   <p>My first paragraph.</p>
</body>
</html>

登录后复制

-->以（.html）扩展名保存文件，然后双击运行程序。

Day - TML/CSS - Project ILUGC(web page)

HTML 元素：
在 HTML 中，元素通常使用开始标记和结束标记来定义其开始和结束。
-->开始标签：标记 HTML 元素的开始。
-->结束标签：在元素名称之前使用正斜杠标记 HTML 元素的结束。
例如：

你好，世界！

独立标签：HTML中的独立标签（也称为自关闭标签）是不需要关闭标签的元素，因为它在开始和结束之间没有任何内容标签。
例如-
- break：用于插入换行符

项目：

准备 ILUGC 网页布局：(https://ilugc.in/)

<html>
<头>
    ILUGC标题>

。容器{
    边框：1px实线；
    高度：200%；
    宽度：85%；
    边距：自动；
}
.标题h4{
    文本转换：大写；
    颜色：#e22d30；
    顶部边框：1px 纯绿色；
    宽度：适合内容；
    顶部填充：10px；
}
.标题{

    边距：25px；
}
</风格>
</头>

   <div>



<p>输出：</p>

<p><img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173594590044719.jpg" class="lazy" alt="Day - TML/CSS - Project ILUGC(web page)"></p>
<p><strong>说明：</strong></p>

<ol>
<li>
：HTML 文档的根元素。</li>
<li>
：包含文档的元数据和资源。</li>
<li>
<title>：设置浏览器选项卡上显示的网页标题。</title>
</li>
<li>
<style>：嵌入 CSS 以设置 HTML 文档的样式。</style>
</li>
</ol>

<ul>
<li><p>.container：设置容器 div 的样式：<br>
a) border: 1pxsolid;: 添加1像素的实心边框。<br>
b) height: 200%;: 将高度设置为视口高度的两倍。<br>
c) width: 85%;：设置宽度为视口宽度的85%。<br>
d) margin: auto;：使容器水平居中。</p></li>
<li>
<p>.header h4：设置 </p>
<h4> 的样式。 .header 类中的元素：<br>
a) text-transform: uppercase;: 将文本转换为大写。<br>
b) color: #e22d30;: 将文本颜色设置为特定的红色阴影。<br>
c) border-top: 1px Solid green;: 添加绿色顶部边框。<br>
d) width: fit-content;: 缩小元素宽度以适应其内容。<br>
e) padding-top: 10px;: 在文本上方添加 10 像素的填充。</h4>
</li>
<li><p>.header：设置标题 div 的样式：<br>
a) margin: 25px;: 在标题周围添加 25 像素的边距。</p></li>
</ul>

<ol>
<li>
：包含网页所有可见内容。</li>
<li>
<div>：用于对内容进行分组和设置样式的容器元素。
<li>
<h1 id="代表网页的主标题">：代表网页的主标题。</h1>
</li>
<li>
<h4>：表示重要性低于 <h1 id="的副标题"> 的副标题。</h1>
</h4>
</li>


<p><strong>属性：</strong><br>
属性提供有关 HTML 元素的附加信息，通常以名称-值对的形式。<br>
例如：`</p>
<div>

<p><strong>填充：</strong><br>
填充是元素的内容与其边框之间的空间。它在内容周围创建一个内部边距，将内容推离元素的边缘。</p>

<p><strong>保证金：</strong><br>
边距是元素边框之外的空间，将元素与其他元素分开。它定义了元素之间的外部空间，在它们周围创建了距离。</p>

<p><strong>类选择器和元素选择器：</strong></p>

<ul>
<li>类选择器针对具有特定类属性的 HTML 元素，使用句点 (.) 后跟类名称。</li>
<li>元素选择器直接通过标签名称定位 HTML 元素</li>
</ul>


          </div>

            
        </div>
</li>
</ol>
</div>

登录后复制

以上是日 - TML/CSS - 项目 ILUGC（网页）的详细内容。更多信息请关注PHP中文网其他相关文章！

本站声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn