admin管理员组

文章数量:1567521

实现的结果与原版有些差异，毕竟没用上js,很多效果都只能低配版实现

不得不说细节拉满hhhh,如果基础不扎实很可能顶部导航框就卡半天hhh，遇到下拉框更是会直接懵掉，有很多细节的东西需要用伪类去处理，比如左下角的六个框里其实是有细线的用::after和::before 去处理效果会更好

想知道一些动态细节的朋友们去官网看就好了，有疑问可以交流

效果图:

基础配置:

/* 公共样式 */
.clearfix::before,
.clearfix::afer{
    content:" ";
    display: table;
    clear:both;
}
body{
    font:14px/1.5 Helvetica Neue,Helvetica,Arial,Microsoft Yahei,Hiragino Sans GB,Heiti SC,WenQuanYi Micro Hei,sans-serif;
    color: #333;
    min-width: 1226px;
}
/* 设置一个类，用来表示中间容器的宽度 */
.w{
    width: 1226px;
    /* 设置容器居中 */
    margin: 0 auto;
}

重置样式表:

/* http://meyerweb/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

布局:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 引入重置样式表 -->
    <link rel="stylesheet" href="./css/reset.css">
    <!-- 引入图标字体库 -->
    <link rel="stylesheet" href="fa/css/all.css">
    <!-- 引入当前页面的样式 -->
    <link rel="stylesheet" href="./css/index.css">
    <!-- 引入公共的样式表 -->
    <link rel="stylesheet" href="./css/base.css">
    <!-- 引入最上方logo图标 -->
    <link rel="icon" href="//s01.mifile/favicon.ico" type="image/x-icon" />
</head>
<body>
    <!-- 顶部导航条 -->
       <!-- 设置外围容器 -->
           <div >
               <!-- 设置内部居中容器 -->
               <div >
                    <!-- 设置容器左侧导航 -->
                    <ul >
                        <li><a href="javascrpt:;">小米商城</a></li>
                        <li >|</li>
                        <li><a href="javascrpt:;">MIUI</a></li>
                        <li >|</li>
                        <li><a href="javascrpt:;">IoT</a></li>
                        <li >|</li>
                        <li><a href="javascrpt:;">云服务</a></li>
                        <li >|</li>
                        <li><a href="javascrpt:;">天星数科</a></li>
                        <li >|</li>
                        <li><a href="javascrpt:;">有品</a></li>
                        <li >|</li>
                        <li><a href="javascrpt:;">小爱开放平台</a></li>
                        <li >|</li>
                        <li><a href="javascrpt:;">企业团购</a></li>
                        <li >|</li>
                        <li><a href="javascrpt:;">资质证照</a></li>
                        <li >|</li>
                        <li><a href="

本文标签： 小米静态页面商城css

版权声明：本文标题：小米商城静态页面html+css 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：https://www.elefans.com/dianzi/1726414208a1069609.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。