web品牌手机官网设计源代码
时间: 2023-08-16 19:04:40 浏览: 36
很抱歉,我作为一个AI语言模型,并不能提供完整的web品牌手机官网设计源代码。该代码需要由专业的前端开发人员使用HTML、CSS、JavaScript等技术进行开发。但我可以提供一些常用的代码示例,供参考:
HTML代码示例:
```html
<!DOCTYPE html>
<html>
<head>
<title>品牌手机官网</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<header>
<nav>
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">产品</a></li>
<li><a href="#">关于我们</a></li>
</ul>
</nav>
</header>
<main>
<section id="promo">
<h1>探索全新的品牌手机</h1>
<p>了解我们的产品,享受最好的使用体验</p>
<button>了解更多</button>
</section>
<section id="products">
<h2>我们的产品</h2>
<ul>
<li>
<a href="#">
<img src="product1.jpg" alt="产品1">
<h3>产品1</h3>
</a>
</li>
<li>
<a href="#">
<img src="product2.jpg" alt="产品2">
<h3>产品2</h3>
</a>
</li>
<li>
<a href="#">
<img src="product3.jpg" alt="产品3">
<h3>产品3</h3>
</a>
</li>
</ul>
</section>
</main>
<footer>
<p>版权 © 2021 品牌手机官网</p>
</footer>
</body>
</html>
```
CSS代码示例:
```css
body {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
font-size: 16px;
line-height: 1.5;
color: #333;
}
header {
background-color: #fff;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 99;
}
nav ul {
margin: 0;
padding: 0;
list-style: none;
display: flex;
justify-content: space-between;
}
nav ul li a {
display: block;
padding: 1rem;
text-decoration: none;
color: #333;
transition: all 0.3s ease;
}
nav ul li a:hover {
background-color: #333;
color: #fff;
}
main {
margin-top: 70px;
}
#promo {
background-color: #f9f9f9;
padding: 3rem;
text-align: center;
}
#promo h1 {
font-size: 3rem;
margin-top: 0;
}
#promo p {
font-size: 1.5rem;
margin-bottom: 2rem;
}
#promo button {
background-color: #333;
color: #fff;
border: none;
padding: 1rem 2rem;
font-size: 1.2rem;
border-radius: 5px;
cursor: pointer;
transition: all 0.3s ease;
}
#promo button:hover {
transform: scale(1.1);
}
#products {
padding: 3rem;
}
#products h2 {
font-size: 2rem;
margin-top: 0;
margin-bottom: 2rem;
}
#products ul {
margin: 0;
padding: 0;
list-style: none;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
#products li {
margin-bottom: 2rem;
flex-basis: calc(33.33% - 1rem);
}
#products li h3 {
font-size: 1.5rem;
margin-top: 1rem;
}
#products li a:hover img {
transform: scale(1.1);
}
```
JavaScript代码示例:
```javascript
// 实现按钮点击事件
const btn = document.querySelector('button');
btn.addEventListener('click', function() {
alert('你点击了按钮');
});
// 实现图片缩放效果
const imgs = document.querySelectorAll('li img');
imgs.forEach(img => {
img.addEventListener('mouseenter', function() {
img.style.transform = 'scale(1.1)';
});
img.addEventListener('mouseleave', function() {
img.style.transform = 'scale(1)';
});
});
```