/* 重置样式 */ * { margin: 0; padding: 0; box-sizing: border-box; } /* 设置主体颜色 */ :root { --main-color: #FF6700; } /* 设置页面样式 */ body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; color: #333; } /* 头部样式 */ .header { background-color: #fff; display: flex; justify-content: space-between; align-items: center; padding: 20px; box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.1); } .header .logo { font-size: 24px; font-weight: bold; color: var(--main-color); } .header .nav { display: flex; gap: 20px; } .header .nav a { font-size: 16px; color: #333; text-decoration: none; transition: all 0.3s ease; } .header .nav a:hover { color: var(--main-color); } /* 主题内容样式 */ .container { padding: 50px; } .container h1 { font-size: 36px; font-weight: bold; margin-bottom: 20px; } .container .item { display: flex; flex-wrap: wrap; gap: 20px; } .container .item .box { width: 320px; background-color: #fff; box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.1); } .container .item .box img { width: 100%; } .container .item .box .title { font-size: 18px; font-weight: bold; margin: 10px 20px 5px; } .container .item .box .desc { font-size: 14px; margin: 5px 20px 10px; color: #999; }
使用以上CSS代码可以实现仿小米官网的效果,包括重置样式、设置主体颜色、头部样式、主题内容样式等。可以帮助大家构建一个高质量的电商网站。