荣耀下载谷歌帮我写一个html5的页面 突出画面质感,导向栏目分别是:华为、荣耀
时间: 2024-09-27 21:12:02 浏览: 35
华为荣耀手机鸿蒙系统安装谷歌GMS全教程,视频+下载资源,简单操作,一看就懂
创建一个HTML5页面突出显示华为和荣耀的产品质感,我们可以按照以下步骤来做:
```html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>华为与荣耀产品展示</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4; /* 可以选择更高级的背景质感颜色 */
color: #333333;
margin: 0;
padding: 0;
}
.header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem;
background-color: #1976d2; /* 主色调 */
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
}
.logo {
font-size: 2rem;
margin-right: 1rem;
}
.categories {
font-weight: bold;
}
.category-link {
text-decoration: none;
color: white;
transition: all 0.3s ease;
}
.category-link:hover {
color: #e0e0e0;
}
.products-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 1rem;
padding: 1rem;
}
.product-card {
border-radius: 5px;
box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
background-color: white;
}
.product-image {
width: 100%;
height: auto;
}
</style>
</head>
<body>
<div class="header">
<a href="#" class="logo">华为荣耀</a>
<div class="categories">
<a href="#华为" class="category-link">华为</a>
<a href="#荣耀" class="category-link">荣耀</a>
</div>
</div>
<div id="华为" class="products-container" aria-labelledby="华为">
<!-- 华为产品图片和描述 -->
</div>
<div id="荣耀" class="products-container" aria-labelledby="荣耀">
<!-- 荣耀产品图片和描述 -->
</div>
<script>
// 这里可以添加动态加载产品数据的JavaScript代码
</script>
</body>
</html>
```
在这个示例中,我们首先设置了基本的HTML结构,然后用CSS设计了页面样式,包括头部导航、类别链接和产品卡片等元素。`<script>`标签预留了空间用于添加交互或动态加载内容的JavaScript代码。
阅读全文