html+css网页设计，我的网站

标签：网页 HTML color padding html background 20px margin css

一、技术简介

HTML：超文本标记语言（HyperText Markup Language），用于创建网页的基本结构和内容。
CSS：层叠样式表（Cascading Style Sheets），用于设置网页的样式和布局，包括字体、颜色、边距、对齐方式等。
JavaScript：一种用于创建动态和交互式网页的脚本语言。通过JavaScript，可以实现网页的动画效果、表单验证、数据交互等功能。

二、创建多页网站的基本步骤

规划网站结构：
- 确定网站的页面数量和内容。
- 设计每个页面的布局和样式。
创建HTML文件：
- 使用HTML标签创建每个页面的基本结构。
- 添加内容，如文本、图像、链接等。
编写CSS样式：
- 创建一个CSS文件，用于定义网站的样式。
- 使用CSS选择器选择HTML元素，并为其设置样式。
- 可以使用内部样式表（在HTML文件的<head>部分使用<style>标签）或外部样式表（创建一个单独的CSS文件，并在HTML文件中使用<link>标签链接）。
添加JavaScript功能：
- 根据需要，在HTML文件中添加JavaScript代码。
- 可以使用内部脚本（在HTML文件的<body>部分使用<script>标签）或外部脚本（创建一个单独的JavaScript文件，并在HTML文件中使用<script>标签的src属性链接）。

三、示例代码

以下是一个简单的多页网站示例，包括首页、关于我们、联系我们三个页面。

1. 首页（index.html）

<!DOCTYPE html>  
<html lang="en">  
<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>  
        <nav>  
            <ul>  
                <li><a href="index.html">首页</a></li>  
                <li><a href="about.html">关于我们</a></li>  
                <li><a href="contact.html">联系我们</a></li>  
            </ul>  
        </nav>  
    </header>  
    <main> <!-- 主要内容区域 -->  
        <div class="container">  
            <section class="hero">  
                <h2>探索无限可能</h2>  
                <p>我们致力于提供优质的服务和解决方案</p>  
                <a href="#services" class="btn">了解更多</a>  
            </section>  
  
            <section class="features"> <!-- 功能或特点区域 -->  
                <h2>我们的特点</h2>  
                <div class="feature-list">  
                    <div class="feature">  
                        <h3>专业团队</h3>  
                        <p>我们拥有一支经验丰富、技术精湛的团队。</p>  
                    </div>  
                    <div class="feature">  
                        <h3>优质服务</h3>  
                        <p>我们致力于提供高质量、个性化的服务。</p>  
                    </div>  
                    <div class="feature">  
                        <h3>客户至上</h3>  
                        <p>我们始终将客户的满意度放在首位。</p>  
                    </div>  
                </div>  
            </section>  
  
        </div>  
    </main>  
    <footer>  
        <p>&copy; 2024 我的网站</p>  
    </footer>  
</body>  
</html>

2. 关于我们（about.html）

<!DOCTYPE html>  
<html lang="en">  
<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>  
        <nav>  
            <ul>  
                <li><a href="index.html">首页</a></li>  
                <li><a href="about.html">关于我们</a></li>  
                <li><a href="contact.html">联系我们</a></li>  
            </ul>  
        </nav>  
    </header>  
    <main>  
        <div class="container">  
            <section class="about-us">  
                <h2>我们的故事</h2>  
                <p>我们的公司成立于XXXX年，由一群热爱技术和创新的人共同创立。我们的使命是...</p>  
  
                <h2>我们的团队</h2>  
                <div class="team-members">  
                    <div class="team-member">  
                        <img src="https://tse1-mm.cn.bing.net/th/id/OIP-C.duz6S7Fvygrqd6Yj_DcXAQHaF7?rs=1&pid=ImgDetMain" alt="团队成员1">  
                        <h3>张三</h3>  
                        <p>职位：首席执行官</p>  
                        <p>简介：张三拥有丰富的行业经验和领导力...</p>  
                    </div>  
                    <div class="team-member">  
                        <img src="https://ts1.cn.mm.bing.net/th/id/R-C.e7c08007274a71f8d2c9dfa008580c13?rik=udR8tXEAVJb%2b8Q&riu=http%3a%2f%2fn.sinaimg.cn%2fsinacn10109%2f320%2fw1200h720%2f20200127%2fc1f3-innckch0109190.jpg&ehk=AGCVAoayOwueckg0YOPNGEJRzEtXqfS%2fmTYesK6zzkI%3d&risl=&pid=ImgRaw&r=0" alt="团队成员2">  
                        <h3>李四</h3>  
                        <p>职位：首席技术官</p>  
                        <p>简介：李四是一位技术专家，擅长...</p>  
                    </div>  
                    <!-- 可以添加更多团队成员 -->  
                </div>  
  
                <h2>我们的使命与愿景</h2>  
                <p>我们的使命是...</p>  
                <p>我们的愿景是...</p>  
            </section>  
        </div>  
    </main>  
  
    <footer>  
        <p>&copy; 2024 我的网站</p>  
    </footer>  
</body>  
</html>

3. 联系我们（contact.html）

<!DOCTYPE html>  
<html lang="en">  
<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>  
        <nav>  
            <ul>  
                <li><a href="index.html">首页</a></li>  
                <li><a href="about.html">关于我们</a></li>  
                <li><a href="contact.html">联系我们</a></li>  
            </ul>  
        </nav>  
    </header>  
    <main>  
        <div class="container">  
            <section class="contact-info">  
                <h2>我们的联系方式</h2>  
                <p>电话: <strong>123-456-7890</strong></p>  
                <p>邮箱: <a href="[email protected]">[email protected]</a></p>  
                <p>地址: 北京市xx区xx街道xx号</p>  
                <p>工作时间: 周一至周五，上午9点至下午6点</p>  
            </section>  
  
            <section class="contact-form">  
                <h2>给我们留言</h2>  
                <form action="/submit_form" method="post"> 
                    <label for="name">姓名:</label>  
                    <input type="text" id="name" name="name" required>  
  
                    <label for="email">邮箱:</label>  
                    <input type="email" id="email" name="email" required>  
  
                    <label for="subject">主题:</label>  
                    <input type="text" id="subject" name="subject" required>  
  
                    <label for="message">信息:</label>  
                    <textarea id="message" name="message" rows="4" required></textarea>  
  
                    <button type="submit">提交</button>  
                </form>  
            </section>  
        </div>  
    </main>   
    <footer>  
        <p>&copy; 2024 我的网站</p>  
    </footer>  
</body>  
</html>

4. css

body {  
    font-family: Arial, sans-serif;  
    margin: 0;  
    padding: 0;  
}  
  
header {  
    background-color: #333;  
    color: #fff;  
    padding: 1em 0;  
    text-align: center;  
}  
  
nav ul {  
    list-style: none;  
    padding: 0;  
}  
  
nav ul li {  
    display: inline;  
    margin: 0 1em;  
}  
  
nav ul li a {  
    color: #fff;  
    text-decoration: none;  
}  
  
main {  
    padding: 2em;  
}  
  
footer {  
    background-color: #333;  
    color: #fff;  
    text-align: center;  
    padding: 1em 0;  
    position: fixed;  
    bottom: 0;  
    width: 100%;  
}

main {  
    padding: 20px 0;  
}  
  
.hero {  
    background: #77aaff;  
    color: #fff;  
    text-align: center;  
    padding: 50px 20px;  
}  
  
.hero h2 {  
    margin-top: 0;  
    font-size: 36px;  
}  
  
.hero p {  
    font-size: 18px;  
}  
  
.btn {  
    display: inline-block;  
    padding: 10px 20px;  
    background: #fff;  
    color: #333;  
    text-decoration: none;  
    border-radius: 5px;  
    margin-top: 20px;  
}  
  
.features {  
    background: #f4f4f4;  
    padding: 20px 0;  
    text-align: center;  
}  
  
.feature-list {  
    display: flex;  
    justify-content: space-around;  
    flex-wrap: wrap;  
}  
  
.feature {  
    background: #fff;  
    padding: 20px;  
    margin: 10px;  
    box-shadow: 0 0 10px rgba(0,0,0,0.1);  
    width: calc(33.333% - 40px); /* 减去两倍的外边距 */  
}  
  
.feature h3 {  
    margin-top: 0;  
    font-size: 20px;  
}  
.current { /* 为当前页面导航项添加样式 */  
    color: #ff6347; /* 例如，设置为一个醒目的颜色 */  
}  
  
.about-us {  
    padding: 20px 0;  
}  
  
.team-members {  
    display: flex;  
    justify-content: space-around;  
    flex-wrap: wrap;  
}  
  
.team-member {  
    background: #f4f4f4;  
    padding: 20px;  
    margin: 10px;  
    box-shadow: 0 0 10px rgba(0,0,0,0.1);  
    width: calc(33.333% - 40px); /* 减去两倍的外边距，确保三列布局 */  
    text-align: center;  
}  
  
.team-member img {  
    border-radius: 50%; /* 圆形图片 */  
    width: 100px;  
    height: 100px;  
    object-fit: cover; /* 保持图片比例 */  
}  
  
.team-member h3 {  
    margin-top: 10px;  
    font-size: 18px;  
}  
  
.team-member p {  
    font-size: 14px;  
    color: #555;  
}
/* 通用样式，这里只列出与“联系我们”页面相关的部分 */  
  
.current { /* 为当前页面导航项添加样式 */  
    color: #ff6347; /* 例如，设置为一个醒目的颜色 */  
}  
  
.contact-info, .contact-form {  
    margin-bottom: 20px;  
}  
  
.contact-info p {  
    margin-bottom: 10px;  
}  
  
.contact-form label {  
    display: block;  
    margin-bottom: 5px;  
    font-weight: bold;  
}  
  
.contact-form input, .contact-form textarea {  
    width: 100%;  
    padding: 8px;  
    margin-bottom: 15px;  
    border: 1px solid #ccc;  
    border-radius: 4px;  
}  
  
.contact-form button {  
    background-color: #4CAF50; /* 绿色背景 */  
    color: white; /* 白色文字 */  
    padding: 10px 20px;  
    border: none;  
    border-radius: 4px;  
    cursor: pointer;  
}  
  
.contact-form button:hover {  
    background-color: #45a049; /* 鼠标悬停时稍微改变颜色 */  
}

四、网站效果

五、运行网站

将上述HTML文件和CSS文件保存在同一目录下。
使用浏览器打开index.html文件，即可查看网站的首页。
点击导航栏中的链接，可以浏览其他页面。

标签：网页,HTML,color,padding,html,background,20px,margin,css
From： https://blog.csdn.net/2301_78133614/article/details/143178828

html+css网页设计，我的网站

一、技术简介

二、创建多页网站的基本步骤

三、示例代码

1. 首页（index.html）

2. 关于我们（about.html）

3. 联系我们（contact.html）

4. css

四、网站效果

五、运行网站

相关文章

赞助商

阅读排行