《手把手教你用HTML/CSS/JavaScript制作小米网站，完整代码案例分享》

小米网站一直以来都备受网友的喜爱，它的精美和实用性让人们趋之若鹜。今天，我们将手把手教你用HTML/CSS/JavaScript制作一个五页的小米网站，让你也能轻松打造一个网站，展示你的网页制作能力。

首先，我们需要设计好小米网站的五个页面的页面结构和样式。代码如下：

HTML

 

 

 

 

  

   小米网站
  
  
 


 

  
  

   
小米多功能电视
   
紧凑外观，内在强大，吸引眼球，音质更出众，专为大屏幕设计，体验更佳，快来选购吧！
   
立即选购
  
 


 

  
小米产品
  

   

    

    
小米笔记本 Pro
    
轻薄便携，高配置，专为办公设计，配有英特尔处理器，让你的工作变得更高效！
   
   

    

    
小米智能手表
    
智能穿戴新体验，全新升级，支持多种运动模式，让你的生活更健康！
   
   

    

    
小米VR眼镜
    
虚拟现实全新升级，看电影，玩游戏更爽，没有距离和空间的限制！
   
  
 


 

  
新闻动态
  

   

    
小米新品发布会圆满落幕
    
经过半年的研发，小米终于在本月正式发布了多款新品，其中包括小米电视、小米笔记本等多个产品。这次发布会圆满落幕，赢得了广大用户的一致好评。
   
   

    
小米智能家居概念机亮相
    
小米智能家居概念机近日在国内某科技展上亮相，这是小米第一次进军智能家居领域。这款概念机采用了大量的AI技术，让你的居家生活更加便利。
   
   

    
小米CEO雷军接受百度CEO发起的PK赛
    
小米CEO雷军与百度CEO李彦宏在某小学展开了一场趣味PK赛，场面十分火爆。经过激烈角逐，最终雷军获得了胜利。
   
  
 


 

  
关于我们
  
小米公司成立于2010年，是一家以智能硬件及电子产品研发、制造与销售为主的公司。小米走的是“互联网+”的路线，以消费互联网的全新商业模式为基础，既有掌握了硬件技术的核心能力，又拥有了深厚的“互联网基因”。
 


 

  
联系我们
  

   

   

   

   
提交留言
  
 



 

接下来，我们需要为网站添加CSS样式，使其更具美感和易用性。代码如下：

/* 基础样式 */
body Arial
.container
max-width: 1000px;
margin: 0 auto;
padding: 0 20px;
/* 导航栏样式 */
header
background: #333;
color: #fff;
padding: 20px 0;
.logo
float: left;
font-size: 28px;
font-weight: bold;
nav
float: right;
nav ul
list-style: none;
margin: 0;
padding: 0;
nav li
display: inline-block;
margin-left: 20px;
nav a
color: #fff;
text-decoration: none;
nav a:hover
color: #ff6700;
/* 轮播图 */
.carousel-img {
background-image: url('img/carousel-img.jpg');
background-size: cover;
background-position: center center;
height: 500px;
width: 100%;
}
.carousel-text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
color: #fff;
}
.carousel-text h1
font-size: 50px;
margin-bottom: 20px;
.carousel-text p
font-size: 18px;
line-height: 1.5;
margin-bottom: 20px;
.btn
display: inline-block;
background: #ff6700;
color: #fff;
font-size: 18px;
padding: 10px 30px;
border-radius: 5px;
text-decoration: none;
.btn:hover
background: #ff4500;
/* 产品介绍 */
.product
padding: 80px 0;
.product h2
font-size: 36px;
text-align: center;
margin-bottom: 50px;
.product-list .product-item
display: inline-block;
margin-right: 30px;
vertical-align: top;
width: 32%;
.product-item img
width: 100%;
.product-item h3
font-size: 24px;
margin: 20px 0 10px 0;
.product-item p
font-size: 16px;
line-height: 1.5;
margin: 10px 0;
/* 新闻动态 */
.news
background: #f5f5f5;
padding: 80px 0;
.news h2
font-size: 36px;
text-align: center;
margin-bottom: 50px;
.news-list .news-item {
margin-bottom: 50px;
padding: 20px;
background: #fff;
border-radius: 5px;
box-shadow: 0 5px 10px rgba(0,0,0,0.1);
}
.news-item h3
font-size: 24px;
margin: 0 0 10px 0;
.news-item p
font-size: 16px;
line-height: 1.5;
margin: 10px 0;
/* 关于我们 */
.about
padding: 80px 0;
text-align: center;
.about h2
font-size: 36px;
margin-bottom: 50px;
.about p
font-size: 18px;
line-height: 1.5;
margin: 0 auto;
max-width: 800px;
/* 联系我们 */
.contact
padding: 80px 0;
.contact h2
font-size: 36px;
margin-bottom: 50px;
.contact form
max-width: 600px;
margin: 0 auto;
.contact input[type="text"],
.contact input[type="email"],
.contact textarea
display: block;
width: 100%;
padding: 10px;
margin-bottom: 20px;
border-radius: 5px;
border: none;
.contact textarea
height: 150px;
.contact button[type="submit"]
display: block;
margin: 0 auto;
padding: 10px 30px;
background: #ff6700;
color: #fff;
font-size: 18px;
border: none;
border-radius: 5px;
cursor: pointer;
/* Footer */
footer
background: #333;
color: #fff;
padding: 20px 0;
text-align: center;
footer p
margin: 0;
footer a
color: #fff;
text-decoration: none;
/* 响应式布局 */
@media (max-width: 767px) {
.logo
float: none;
nav
float: none;
margin-top: 20px;
nav ul
display: flex;
flex-wrap: wrap;
justify-content: center;
nav li
display: block;
margin: 0 10px;
margin-bottom: 10px;
.carousel-text
top: 70%;
.product-list .product-item,
.news-list .news-item
width: 100%;
margin-right: 0;
.contact form
width: 100%;
}

最后，我们需要使用JavaScript为网站添加动态效果，如实现轮播图、动画等。代码如下：

Script
/* 轮播图 */
var index = 0; // 当前显示的图片索引
var timer = null; // 定时器
function changeImg() {
var imgs = document.querySelectorAll('.carousel-img');
var len = imgs.length;
imgs[index].className = 'carousel-img';
index = (index + 1) % len; // 取模运算，使index不超出图片数量的范围
imgs[index].className = 'carousel-img active';
}
function startTimer() {
timer = setInterval(changeImg, 3000);
}
function stopTimer() {
clearInterval(timer);
}
window.onload = function() {
// 启动轮播定时器
startTimer();
// 监听鼠标移入和移出事件，停止或启动定时器
var carousel = document.querySelector('.carousel');
carousel.addEventListener('mouseover', stopTimer);
carousel.addEventListener('mouseout', startTimer);
}
/* 页面出现动画 */
window.onload = function() {
var carouselText = document.querySelector('.carousel-text');
carouselText.style.opacity = 0;
carouselText.style.transform = 'scale(0.5)';
setTimeout(function() {
carouselText.style.opacity = 1;
carouselText.style.transform = 'translate(0, 0)';
}, 500);
}

通过以上的代码实现，我们成功制作了一个小米网站，并为其添加了轮播图和动态效果，使其更具交互性和美观性。

相似文章

友情链接
• 网站定制开发
• 帮你发
• 小蓄群站获客
• 雅圣洁家政