html css页面制作案例

HTML & CSS 页面制作案例

基础概念

HTML（HyperText Markup Language）是一种用于创建网页的标准标记语言，它定义了网页内容的结构和意义。CSS（Cascading Style Sheets）则是一种样式表语言，用于描述HTML或XML（包括SVG、MathML等各种XML方言）文档的外观和格式。

类型

静态页面：使用HTML和CSS创建的固定布局和内容的网页。
动态页面：结合JavaScript等技术，实现交互性和动态内容的网页。

应用场景

企业官网：展示公司信息、产品和服务。
个人博客：分享个人见解、生活和专业知识。
电商平台：展示商品、提供购物功能。
社交媒体：构建用户交流和互动的平台。

示例代码

以下是一个简单的HTML & CSS页面制作案例，展示一个基本的个人简介页面。

HTML部分：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人简介</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header>
        <h1>个人简介</h1>
    </header>
    <main>
        <section>
            <h2>基本信息</h2>
            <p>姓名：张三</p>
            <p>年龄：28岁</p>
            <p>职业：软件开发工程师</p>
        </section>
        <section>
            <h2>技能专长</h2>
            <ul>
                <li>精通前端开发</li>
                <li>熟悉后端开发</li>
                <li>擅长软件测试</li>
            </ul>
        </section>
    </main>
    <footer>
        <p>版权所有 &copy; 2023 张三</p>
    </footer>
</body>
</html>

CSS部分（styles.css）：

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f4f4f4;
}

header {
    background-color: #333;
    color: #fff;
    text-align: center;
    padding: 1em 0;
}

main {
    padding: 20px;
}

section {
    margin-bottom: 20px;
}

h1, h2 {
    color: #333;
}

ul {
    list-style-type: none;
    padding: 0;
}

li {
    background: #ddd;
    margin: 5px 0;
    padding: 5px;
}

footer {
    text-align: center;
    padding: 1em 0;
    background-color: #333;
    color: #fff;
}

常见问题及解决方法

样式不生效：检查CSS文件路径是否正确，确保HTML文件中的<link>标签引用了正确的CSS文件。
布局错乱：使用浏览器的开发者工具检查元素样式，确保没有遗漏或冲突的CSS规则。
响应式设计问题：使用媒体查询（Media Queries）来为不同屏幕尺寸的设备提供不同的样式。

通过以上案例和解释，你应该能够理解HTML和CSS在页面制作中的基础概念、优势、类型、应用场景以及常见问题的解决方法。

页面内容是否对你有帮助？

有帮助

没帮助

如何使用PHP (简单html、dom解析器)、背景图像和其他网页图像进行解析？

、、、

应该如何解析(简单的html、dom/etc.)网页背景和其他图片？案例1:内联css案例2: html页面中的css <style type=&quo

浏览 7提问于2010-07-10得票数 2

回答已采纳

1回答

如果ul项包含li项，如何将css应用于外部div

、、

在我呈现的HTML页面中有两种情况。案例1: <li>A</li></ul> 案例2:<div class="test"></div> 在<em

浏览 3提问于2018-01-04得票数 2

回答已采纳

1回答

我们使用Oracle BI Publisher创建可写入文件(pdf、excel、html...)的数据。我已经检查了创建的数据，它是一个html页面(包含格式和业务数据，由oracle bi publisher使用XSL-FO创建)。我们使用java将数据写入xls文件(不使用POI )。那么如何才能将这样html数据写入到excel中，而所有excel单元格格式都是“文本”呢？或者任何其他方法来避免excel中的'=cmd|'/C calc'!A0‘问题？<h

浏览 5提问于2017-01-26得票数 0

回答已采纳

1回答

速子对UI开发来说足够了吗？

、

如果我使用http://package.elm-lang.org/packages/justgage/tachyons-elm/1.0.0/Tachyons，我还需要使用像Bootstrap或MDL这样的UI框架吗？或者超速粒子是我在UI中所需要的全部？

浏览 10提问于2020-01-25得票数 0

1回答

基于django加载还是静态加载，jquery和css在同一个浏览器窗口中呈现不同

、、、、

对于使用html、jquery和css编写的网页，在同一个浏览器上，但在两个不同的选项卡中，我得到的页面呈现不同。案例2:从django站点(本地托管)为html/images/css提供服务:在本例中，$window.width所有的图片和整个页面的大小

浏览 2提问于2014-01-24得票数 2

回答已采纳

1回答

在新选项卡中设置图像的宽度

、

我的代码如下所示：img[Attributes Style] {height: 979px;我想让它像这样 img[Attributes Styl

浏览 2提问于2016-04-12得票数 0

回答已采纳

2回答

将引导程序拉入到新项目中

、、

现在，我想在一个纯粹在前端(HTML、CSS、js)构建的新项目中再次使用Bootstrap。我使用espresso作为我的代码编辑器。我如何将所有的引导功能引入到我的新项目中？

浏览 2提问于2013-11-19得票数 0

1回答

@Html.Label值显示问题

、、

我有一个标签：@Html.Label("Task:", new { @class = "labl" }) @Model.insDetails.cntrctname ="Magic lock Test 1.25.18"赋值但如果我

浏览 0提问于2019-02-08得票数 0

1回答

有没有类似于Github的GWT主题？

、

我正在为GWT寻找一个外观和感觉与Github相似的主题。有没有人可以提供任何指向GPL兼容许可下的好的GWT主题的指针？

浏览 3提问于2011-04-14得票数 1

1回答

使用媒体查询加载base64编码的图像

、

因此，我加载了用css编码的base64。<link rel="stylesheet" media="max-resolution: 239dpi" href="small-images-base64.css" /> <link rel="stylesheet" media="min-resolution: 240dpi" href="big-images-base64.css" /&

浏览 2提问于2012-11-29得票数 0

1回答

为输入数学公式实现GUI的简单方法？

、、、、

我可以将任何GUI嵌入到我的页面中。类推是输入日期的日期选择器。

浏览 4提问于2014-08-14得票数 1

回答已采纳

1回答

幻灯片切换导航html页面uiwebview

、、

因此，该网站有点击链接，这将打开一个不同的页面。我的问题是，当从一个页面导航到另一个页面时，如何添加幻灯片切换？就像kCATransitionFromLeft一样？或者我可以注入javascript或使用css转换。假设我不想更改网站的HTML代码。

浏览 6提问于2013-09-23得票数 0

5回答

颜色不显示在浏览器上，而是显示在设计视图中。

、

我制作了一个简单的HTML页面，制作了一个CSS页面并将其链接；在Dreamweaver上，它显示背景是黑色的，但是，当我打开浏览器时，它显示为白色！HTML："http://www.w

浏览 3提问于2013-11-07得票数 0

回答已采纳

2回答

Javascript打印输出

、、

我现在正在使用thins的简单功能来打印整个页面。有没有办法不把其中的一些html打印出来？

浏览 1提问于2012-02-07得票数 2

回答已采纳

1回答

如何将没有索引文件的子文件夹重定向到404？

、、

我的案例是example.com/js/，example.com/images/，example.com/css/，example.com/assets/。这四个url ("js"，"images"，"css“和"assets”子目录)没有索引页面。当访问者访问example.com/js/，example.com/images/，example

浏览 12提问于2017-08-03得票数 0

1回答

osCommerce、ZenCart和CubeCart -哪个更容易定制？

、、

使用自定义设计模板定制OsCommerce、ZenCar和CubeCart中的哪一个是最容易的？我知道ZenCart是osCommerce的一个分支，所以我猜他们应该很相似。

浏览 1提问于2011-03-04得票数 0

回答已采纳

2回答

加载一次母版页

、、、

我试图创建一个基于模板的网站，其中我的背景是所有的html页面的共同。有没有什么特别的解决方案，让我只加载一次背景图像，然后对其余的html文件使用相同的背景图像？

浏览 0提问于2013-05-30得票数 1

1回答

基于下拉选择创建css文件

我想创建css文件的基础上下拉选择在asp.net的变化。从下拉列表中选择Html标签，然后根据创建css文件显示输出。

浏览 1提问于2013-09-18得票数 0

2回答

网页。背景是如何构造的。

、、

我想知道折纸皮肤部分的背景是如何工作的？此网页使用的是哪种编程语言。可以漂浮并有阴影的？

浏览 0提问于2012-01-17得票数 0

1回答

如何在移动视图中删除网站右侧多余的空白

、、、

https://comcube.ae/index.html 当我在移动设备上查看这个网站时，我得到了一个完整的垂直空白区域。

浏览 11提问于2020-01-04得票数 1

回答已采纳

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

html css页面制作案例