Register
> 博客>

html产品介绍网页设计代码作业

新速特源码 1年前 40 0

<!DOCTYPE html>
<html>
<head>
<title>产品介绍</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
header {
background-color: #333;
color: #fff;
padding: 20px;
text-align: center;
}
h1 {
margin: 0;
font-size: 36px;
}
nav {
background-color: #f2f2f2;
padding: 10px;
text-align: center;
}
nav a {
display: inline-block;
padding: 10px;
color: #333;
text-decoration: none;
font-weight: bold;
}
nav a:hover {
background-color: #333;
color: #fff;
}
section {
padding: 20px;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}
.product {
background-color: #f2f2f2;
padding: 20px;
margin: 20px;
width: 300px;
text-align: center;
box-shadow: 0 0 10px rgba(0,0,0,0.2);
}
.product img {
max-width: 100%;
height: auto;
margin-bottom: 10px;
}
.product h2 {
margin: 0;
font-size: 24px;
}
.product p {
margin: 10px 0;
font-size: 16px;
}
.product button {
background-color: #333;
color: #fff;
padding: 10px;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 16px;
margin-top: 10px;
}
.product button:hover {
background-color: #fff;
color: #333;
border: 1px solid #333;
}
footer {
background-color: #333;
color: #fff;
padding: 20px;
text-align: center;
}
</style>
</head>
<body>
<header>
<h1>产品介绍</h1>
</header>
<nav>
<a href="#">产品1</a>
<a href="#">产品2</a>
<a href="#">产品3</a>
<a href="#">产品4</a>
</nav>
<section>
<div class="product">
<img src="product1.jpg" alt="产品1">
<h2>产品1</h2>
<p>这是产品1的介绍文字。这是产品1的介绍文字。这是产品1的介绍文字。</p>
<button>了解更多</button>
</div>
<div class="product">
<img src="product2.jpg" alt="产品2">
<h2>产品2</h2>
<p>这是产品2的介绍文字。这是产品2的介绍文字。这是产品2的介绍文字。</p>
<button>了解更多</button>
</div>
<div class="product">
<img src="product3.jpg" alt="产品3">
<h2>产品3</h2>
<p>这是产品3的介绍文字。这是产品3的介绍文字。这是产品3的介绍文字。</p>
<button>了解更多</button>
</div>
<div class="product">
<img src="product4.jpg" alt="产品4">
<h2>产品4</h2>
<p>这是产品4的介绍文字。这是产品4的介绍文字。这是产品4的介绍文字。</p>
<button>了解更多</button>
</div>
</section>
<footer>
<p>版权所有 © 2021 产品介绍</p>
</footer>
</body>
</html>

接下来我会对这个代码进行详细的解释和说明。

首先，这是一个完整的HTML文档，包括了DOCTYPE声明、html标签、head标签和body标签。在head标签中，我们设置了网页的标题、字符集和视口大小。

<!DOCTYPE html>
<html>
<head>
    <title>产品介绍</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

接下来是CSS样式的设置，我们设置了整个网页的字体、背景颜色、边距和内边距等。其中，header、nav、section、product和footer都是我们自己定义的类名，用于设置不同的元素样式。

    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
        }
        header {
            background-color: #333;
            color: #fff;
            padding: 20px;
            text-align: center;
        }
        h1 {
            margin: 0;
            font-size: 36px;
        }
        nav {
            background-color: #f2f2f2;
            padding: 10px;
            text-align: center;
        }
        nav a {
            display: inline-block;
            padding: 10px;
            color: #333;
            text-decoration: none;
            font-weight: bold;
        }
        nav a:hover {
            background-color: #333;
            color: #fff;
        }
        section {
            padding: 20px;
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            align-items: center;
        }
        .product {
            background-color: #f2f2f2;
            padding: 20px;
            margin: 20px;
            width: 300px;
            text-align: center;
            box-shadow: 0 0 10px rgba(0,0,0,0.2);
        }
        .product img {
            max-width: 100%;
            height: auto;
            margin-bottom: 10px;
        }
        .product h2 {
            margin: 0;
            font-size: 24px;
        }
        .product p {
            margin: 10px 0;
            font-size: 16px;
        }
        .product button {
            background-color: #333;
            color: #fff;
            padding: 10px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            font-size: 16px;
            margin-top: 10px;
        }
        .product button:hover {
            background-color: #fff;
            color: #333;
            border: 1px solid #333;
        }
        footer {
            background-color: #333;
            color: #fff;
            padding: 20px;
            text-align: center;
        }
    </style>

在body标签中，我们设置了网页的头部、导航栏、产品展示区和页脚。其中，header中包含了网页的标题，nav中包含了四个产品的链接，section中包含了四个产品的展示区，每个展示区都包含了产品的图片、标题、介绍和了解更多的按钮，footer中包含了版权信息。

</head>
<body>
    <header>
        <h1>产品介绍</h1>
    </header>
    <nav>
        <a href="#">产品1</a>
        <a href="#">产品2</a>
        <a href="#">产品3</a>
        <a href="#">产品4</a>
    </nav>
    <section>
        <div class="product">
            <img src="product1.jpg" alt="产品1">
            <h2>产品1</h2>
            <p>这是产品1的介绍文字。这是产品1的介绍文字。这是产品1的介绍文字。</p>
            <button>了解更多</button>
        </div>
        <div class="product">
            <img src="product2.jpg" alt="产品2">
            <h2>产品2</h2>
            <p>这是产品2的介绍文字。这是产品2的介绍文字。这是产品2的介绍文字。</p>
            <button>了解更多</button>
        </div>
        <div class="product">
            <img src="product3.jpg" alt="产品3">
            <h2>产品3</h2>
            <p>这是产品3的介绍文字。这是产品3的介绍文字。这是产品3的介绍文字。</p>
            <button>了解更多</button>
        </div>
        <div class="product">
            <img src="product4.jpg" alt="产品4">
            <h2>产品4</h2>
            <p>这是产品4的介绍文字。这是产品4的介绍文字。这是产品4的介绍文字。</p>
            <button>了解更多</button>
        </div>
    </section>
    <footer>
        <p>版权所有 © 2021 产品介绍</p>
    </f_
腾讯云最新优惠活动，点击查看

Related

热门文章

微海报