【CSS】小米页面

这篇文章距离上次修改已过186天，其中的内容可能已经有所变动。

为了创建一个类似小米官网的页面布局，你可以使用以下的HTML和CSS代码作为起点。请注意，这里只提供了基础的结构和样式，实际的小米页面会包含更多的交互和动画效果。

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="style.css">
</head>
<body>
<header>
    <nav>
        <ul>
            <li><a href="#">首页</a></li>
            <li><a href="#">产品</a></li>
            <li><a href="#">服务</a></li>
            <li><a href="#">社区</a></li>
            <li><a href="#">关于我们</a></li>
        </ul>
    </nav>
</header>
<main>
    <div class="banner">
        <img src="banner.jpg" alt="小米官方网站">
    </div>
    <section class="products">
        <h2>热门产品</h2>
        <div class="product-grid">
            <!-- 产品卡片 -->
        </div>
    </section>
    <!-- 其他内容 -->
</main>
<footer>
    <div class="footer-content">
        <!-- 页脚信息 -->
    </div>
</footer>
</body>
</html>

CSS (style.css):




body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #F3F3F3;
}
 
header {
    background-color: #FFFFFF;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}
 
nav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
}
 
nav li {
    float: left;
}
 
nav a {
    display: block;
    padding: 14px 16px;
    text-decoration: none;
    color: #000000;
    font-weight: bold;
}
 
nav a:hover {
    background-color: #555555;
    color: white;
}
 
main {
    margin: 0 auto;
    max-width: 1200px;
    padding: 20px;
}
 
.banner img {
    width: 100%;
}
 
.products {
    margin-top: 20px;
    padding: 20px;
    background-color: #FFFFFF;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}
 
.product-grid {
    /* 添加实际的样式和布局 */
}
 
footer {
    background-color: #333333;
    color: #FFFFFF;
    text-align: center;
    padding: 20px;
}
 
footer a {
    color: #FFFFFF;
}
 
/* 更多样式根据需要添加 */

这个简单的布局包括了导航栏、banner、产品展示区域和页脚。你可以根据实际的设计需求添加更多的CSS样式和布局。记得为.product-grid添加实际的样式，以展示小米官网中的产品卡片布局。

【CSS】小米页面

评论已关闭

推荐阅读