当前位置：首页 > 行业动态 > 正文

html制作网页案例

admin
行业动态
2025-05-02
5

HTML网页案例通常包含基础结构（DOCTYPE、html/head/body标签），使用h1/p/a/img等元素搭建内容框架，通过CSS设置字体、颜色、布局样式，结合JavaScript实现表单验证或动态效果，展示网页从结构到视觉呈现的完整设计流程

简单个人网页案例

案例代码

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">个人主页</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
        }
        .header {
            background-color: #333;
            color: white;
            padding: 20px;
            text-align: center;
        }
        .content {
            padding: 20px;
        }
        .footer {
            background-color: #333;
            color: white;
            text-align: center;
            padding: 10px;
            position: fixed;
            bottom: 0;
            width: 100%;
        }
    </style>
</head>
<body>
    <div class="header">
        <h1>我的个人网站</h1>
    </div>
    <div class="content">
        <p>欢迎来到我的个人主页，这里记录了我的学习历程和技术分享。</p>
        <p>联系方式：email@example.com</p>
    </div>
    <div class="footer">
        <p>&copy; 2023 我的个人网站</p>
    </div>
</body>
</html>

效果说明

区域	样式描述
头部	深灰色背景，白色文字，居中显示标题
主体	内边距20px，常规字体
底部	固定在页面底部，深灰色背景，白色文字

代码解析

<!DOCTYPE html>：声明文档类型为HTML5
lang="zh"：设置页面语言为中文
meta charset="UTF-8"：定义字符编码
CSS样式：
- 全局设置字体和取消默认边距
- 头部和底部使用相同颜色方案
- 底部使用position: fixed固定在页面底部

企业宣传网页案例

案例代码

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">公司介绍</title>
    <style>
        body {
            font-family: 'Microsoft YaHei', sans-serif;
            margin: 0;
        }
        .navbar {
            background-color: #2c3e50;
            overflow: hidden;
        }
        .navbar a {
            float: left;
            color: white;
            padding: 14px 16px;
            text-decoration: none;
        }
        .navbar a:hover {
            background-color: #34495e;
        }
        .main-content {
            padding: 20px;
        }
        .product-card {
            border: 1px solid #ddd;
            border-radius: 5px;
            padding: 15px;
            margin-bottom: 20px;
            width: 30%;
            float: left;
            margin-right: 2%;
            box-sizing: border-box;
        }
        .product-card img {
            max-width: 100%;
            height: auto;
        }
        .clearfix {
            clear: both;
        }
        .footer {
            background-color: #2c3e50;
            color: white;
            text-align: center;
            padding: 15px;
        }
    </style>
</head>
<body>
    <div class="navbar">
        <a href="#home">首页</a>
        <a href="#products">产品</a>
        <a href="#about">关于我们</a>
        <a href="#contact">联系我们</a>
    </div>
    <div class="main-content">
        <h2>热门产品</h2>
        <div class="product-card">
            <img src="product1.jpg" alt="产品1">
            <h3>产品名称1</h3>
            <p>产品简介：...</p>
        </div>
        <div class="product-card">
            <img src="product2.jpg" alt="产品2">
            <h3>产品名称2</h3>
            <p>产品简介：...</p>
        </div>
        <div class="product-card">
            <img src="product3.jpg" alt="产品3">
            <h3>产品名称3</h3>
            <p>产品简介：...</p>
        </div>
        <div class="clearfix"></div>
    </div>
    <div class="footer">
        <p>&copy; 2023 公司名称 版权所有</p>
    </div>
</body>
</html>