精华内容
下载资源
问答
  • css 小米200w Logo

    2021-04-01 14:07:55
    代码来源 B站 CodingStartup起码课 用一个div画小米新Logo ...css body{ display: flex; justify-content: center; align-items: center; min-height: 100vh; } div{ position: relative; width: 44

    代码来源

    B站 CodingStartup起码课 用一个div画小米新Logo

    在线查看

    CodePen:小米 logo 前端渲染

    效果

    在这里插入图片描述

    代码

    html

    <div></div>
    

    css

    body{
        display: flex;
        justify-content: center;
        align-items: center;
        min-height: 100vh;
    }
    div{
        position:  relative;
        width:  440px;
        height: 440px;
        background-color: #ea6102;
        border-radius: 150px;
        animation:  6s rotate ease-in-out infinite;
        perspective: 3000px;
    }
    
    @keyframes rotate {
        0% , 100% {
            transform: rotate3d(0,1,0,-30deg);
        }
        50% {
            transform: rotate3d(0,1,0,30deg);
        }
    }
    
    div::before{
        content: "";
        display:block;
        position: absolute;
        width: 190px;
        height: 170px;
        top:132px;
        left: 86px;
    
        box-sizing: border-box;
        border-color:#fff;
        border-style:solid;
        
        border-left-width: 40px;
        border-right-width: 40px;
        border-top-width: 36px;
        border-radius: 4px;
        border-top-right-radius: 56px;
        border-bottom-width: 0;
    }
    div::after{
        content:'';
        display:block;
        position:absolute;
        top: 198px;
        left:160px;
        width:42px;
        height: 42px;
        background-color: #fff;
        border-radius:4px;
        box-shadow: 0px 36px 0px 0px #fff,
                    0px 63px 0px 0px #fff,
                    150px -66px 0px 0px #fff,
                    150px -33px 0px 0px #fff,
                    150px 0px 0px 0px #fff,
                    150px 36px 0px 0px #fff,
                    150px 63px 0px 0px #fff;
                    
    
    }
    
    展开全文
  • html+css小米官网练习

    2020-10-20 21:49:07
    小米官网练习 html样式 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title&...

    小米官网练习

    html样式

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>小米商城 - 小米10 Pro、Redmi K30 Pro、小米MIX Alpha,小米电视官方网站</title>
        <link rel="stylesheet" href="./mi.css">
        <link rel="stylesheet" href="./base.css">
        <!-- 设置网站的图标(在标题栏和收藏栏)
                -网站图片一般储存在网站的根目录下,名字一般叫做favicon.ico
         -->
         <link rel="icon" href="./photo/favicon.ico">
    </head>
    <body>
        <!-- 外部容器 -->
        <div class="top_bar_wrapper">
            <!-- 内部镶嵌容器 -->
            <div class="bar_wrapper">
                <!-- 左侧头部列表 -->
                <div class="left_list">
                    <ul>
                        <li><a href="javascript">小米商城</a></li>
                    <li class="line"></li>
                        <li><a href="javascript">MIUI</a></li>
                    <li class="line"></li>
                        <li><a href="javascript">loT</a></li>
                    <li class="line"></li>
                        <li><a href="javascript">云服务</a></li>
                    <li class="line"></li>
                        <li><a href="javascript">金融</a></li>
                    <li class="line"></li>
                        <li><a href="javascript">有品</a></li>
                    <li class="line"></li>
                        <li><a href="javascript">小爱开放平台</a></li>
                    <li class="line"></li>
                        <li><a href="javascript">企业团购</a></li>
                    <li class="line"></li>
                        <li><a href="javascript">资质证照</a></li>
                    <li class="line"></li>
                        <li><a href="javascript">协议规则</a></li>
                    <li class="line"></li>
                    <li>
                        <a class="box3" href="javascript">
                        下载app
                        <div class="code">
                            <img src="./photo/二维码.jpg">
                            <span class="box2">小米商城app</span>
                        </div> 
                        </a>
                    </li>
                        <li class="line"></li>                    
                    <li><a href="javascript">智能生活</a></li>
                    <li class="line"></li>
                        <li><a href="javascript">Select location</a></li>
                    </ul>
                </div>
                <div class="right_list">
                    <ul>
                        <li><a href="javascript">登录</a></li>
                        <li class="line"></li>
                        <li><a href="javascript">注册</a></li>
                        <li class="line"></li>
                        <li><a href="javascript">消息通知</a></li> 
                        <li class="box1"><a href="javascript">购物车(0)</a></li>
                    </ul>
                </div>
            </div>
        </div>
        
        <!-- 第二块容器 -->
        <div class="first">
            <div class="second_bar_wrapper">
                <!-- 左侧小米图标 -->
                <div class="xbt_box">
                    <a href="javascript">
                        <img src="./photo/小米图标.png">
                    </a>
                </div>
            <!-- 中间部分 -->
            <div class="middle_wrapper">
                <!-- 中间列表 -->
                <div class="middle_list">
                    <ul class="middle_menu">
                        <li>
                            <a class="hidden" href="javascript">全部商品分类</a>
                            <!-- 创建左侧菜单栏 -->
                                <ul class="left_menu">
                                    <li><a class="left_border"href="javascript"></a>手机 电话卡</li>
                                    <li><a class="left_border"href="javascript"></a>电视 盒子</li>
                                    <li><a class="left_border"href="javascript"></a>笔记本 显示器</li>
                                    <li><a class="left_border"href="javascript"></a>家电 插线板</li>
                                    <li><a class="left_border"href="javascript"></a>出行 穿戴</li>
                                    <li><a class="left_border"href="javascript"></a>智能 路由器</li>
                                    <li><a class="left_border"href="javascript"></a>电源 配件</li>
                                    <li><a class="left_border"href="javascript"></a>健康 儿童</li>
                                    <li><a class="left_border"href="javascript"></a>耳机 音响</li>
                                    <li><a class="left_border"href="javascript"></a>生活 箱包</li>
                                </ul>
                           
                        </li>
                        <li><a class="xiala_shows" href="javascript">小米手机</a></li>
                        <li><a class="xiala_shows" href="javascript">Redmi红米</a></li>
                        <li><a class="xiala_shows" href="javascript">电视</a></li>
                        <li><a class="xiala_shows" href="javascript">笔记本</a></li>
                        <li><a class="xiala_shows" href="javascript">家电</a></li>
                        <li><a class="xiala_shows" href="javascript">路由器</a></li>
                        <li><a class="xiala_shows" href="javascript">智能硬件</a></li>
                        <li><a href="javascript">服务</a></li>
                        <li><a href="javascript">社区</a></li>
                        <div class="xiala_info"></div>
                    </ul>
                </div>
            </div>
           
            <!-- 右侧 -->
            <div class="right">
                <!-- 右侧搜索框 -->
                <form class="right_search"action="#">
                    <input class="search" type="text">
                    <button class="submit">搜索</button>
                </form>
            </div>
        </div>
    </div>
       <!-- 创建中间背景轮播图 -->
       <div class="banner_wrapper">
           <div class="banner_img">
               <a href="javascript"><img src="./photo/中间背景.jpg"></a>
           </div>
           <!-- <div class="pointer">
               <a href="javascript"></a>
               <a href="javascript"></a>
               <a href="javascript"></a>
               <a href="javascript"></a>
               <a href="javascript"></a>
               <a href="javascript"></a>
           </div> -->
       </div>
    </body>
    </html>
    

    css样式

    *{
        margin: 0;
        padding: 0;
    }
    li{
        list-style: none;
    }
    .top_bar_wrapper{
        width: 100%;
        min-width: 1250px;
        height: 40px;
        background-color: rgba(0, 0, 0, 0.8);
    }
    .bar_wrapper{
        width: 1250px;
        height: 40px;
        line-height: 40px;
        /* background-color:rgba(0, 0, 0, 0.8); */
        margin: 0 auto;
    }
    .left_list li{
        float: left;
       
        /* margin-right: 10px; */
    }
    .left_list a,
    .right_list a{
        display: block;
        text-decoration: none;
        color: rgba(255, 255, 255, 0.562);
        font-size: 4px;
    }
    .right_list{
        float: right;
    }
    .right_list li{
        float: left;
        display: block;
    }
    .left_list a:hover{
        color: #fff;
    }
    .right_list a:hover{
        color: #fff;
    }
    .line{
        width: 1px;
        height: 10px;
        background-color: rgb(128, 123, 123);
        margin: 15px 8px;
    }
    .box1{
        width: 60px;
        background-color: rgba(255, 255, 255, 0.2);
        text-align: center;
        margin-left: 20px;
    }
    .box1 a:hover{
        color: orange;
        background-color: #fff;
    }
    .box3:hover .code,
    .box3:hover::after{
        display: block;
        height: 148px;
    }
    /* 设置app下拉 */
    .code{
        position: absolute;
        z-index: 1;
        left: -40px;
        width: 124px;
        height: 0;
        overflow: hidden;
        line-height: 1;
        background-color:#fff;
        text-align:center;
        /* padding:10px; */
        box-shadow: 0 0 6px rgba(0, 0, 0, 0.3);
        /* transition用于为样式添加过渡效果 */
        transition: height 0.5s;  
    }
    .box3{
        position: relative;
    }
    .box3::after{
        display: none;
        content: "";
        position: absolute;
        width: 0;
        height: 0;
        border: 8px solid transparent;
        border-bottom-color: white;
        bottom: 0;
        left:14px;
    }
    
    .code .img{
        margin-bottom: 10px;
    }
    .box2{
        color: black;
        font-size: 16px;
    }
    .first{
        width: 100%;
        height: 100px;
        position: relative;
    }
    .second_bar_wrapper{
        width: 1250px;
        background-color: #fff;
        margin: 0 auto;
    }
    .xbt_box img{
        float: left;
        width: 55px;
        height: 55px;
        margin-top: 22.5px;
    }
    /* 隐藏全部商品 */
    .hidden{
        visibility: hidden;
    }
    .second_bar_wrapper .middle_wrapper{
        float: left;
        width: 800px;
        height: 100px;
        line-height: 100px;
        background-color: #fff;
        margin-left: 70px;
    }
    .middle_menu li>a {
        float: left;
        display: block;
        text-decoration: none;
        color: black;
        margin-right: 25px;
    }
    .middle_list li a:hover{
        color: orange;
    }
    /* 下拉层 */
    .xiala_info{
        width: 100%;
        /* height: 228px; */
        height: 0;
        overflow: hidden;
        background-color: #fff;
        position: absolute;
        z-index: 5;
        top: 100px;
        left: 0;
        /* 下拉过渡 */
        transition: height 0.5s;
    }
    /* 设置除第九个和第十个外都可以弹出下拉层 */
    .middle_menu >li:not(.left_border):not(:nth-child(9)):not(:nth-child(10)):not(.left_menu):hover ~ .xiala_info,
    /* .middle_menu li >.xiala_shows:hover ~.xiala_info, */
    /* .middle_menu li :not(.left_border):hover ~ .xiala_info, */
    .middle_menu .xiala_shows:hover ~ .xiala_info,
    .xiala_info:hover{
        height: 228px; 
        border-top: 1px solid rgb(224, 224, 224);
        box-shadow: 0 2px 2px rgba(0, 0, 0, 0.3);
    }
    .second_bar_wrapper .right{
        float: right;
        width: 240px;
        height: 50px;
        padding: 0px;
        margin-top: 25px;
    }
    .right_search .search{
        box-sizing: content-box;
        float: left;
        width: 165px;
        height: 50px;
        font-size: 16px;
        padding: 0 10px;
        border: none;
        border: 1px solid rgb(224, 224, 224);
        outline: none;
    }
    /* :focus设置input和button获取焦点后的样式 */
    .right_search .search:focus,
    .right_search .search:focus+.submit{
        border-color: #ff6700;
    }
    .right_search .submit{
        width: 50px;
        height: 50px;
        border-top: none;
        border: 1px solid rgb(224, 224, 224);
        background-color: #fff;
    }
    .right_search .submit:hover{
        background-color: #ff6600;
        color: white;
    }
    /* 左侧列表 */
    .left_menu{
        width: 234px;
        height: 450px;
        position: absolute;
        z-index: 2;
        left: 146px;
        top: 100px;
        background-color: rgb(0, 0, 0,.6);
        line-height: 1;
        padding-bottom: 0px;
        padding: 10px 0;
        /* padding-left: 20px; */
    }
    .left_menu li{
        width: 194px;
        height: 45px;
        line-height: 45px;
        color: #fff;
        padding: 0 20px;
    }
    .left_menu li:hover{
        background-color: #ff6700;
    }
    /* banner轮播图 */
    .banner_wrapper{
        width: 1010px;
        height: 470px;
        position: absolute;
        float: right;
        right: 146px;
    }
    .banner_wrapper .banner_img img{
        width: 1010px;
        height: 470px;
    }
    /* .pointer{
        position: absolute;
        float: left;
        z-index: 100;
    }
    .pointer a{
        width: 6px;
        height: 6px;
        background-color: brown;
    } */
    
    

    写了大概400行,有关用js实现的因为还没学到js,所以用的css代替,里面有一个问题,就是下面这一段关于导航条控制下拉层的。

    1 .middle_menu >li:not(.left_border):not(:nth-child(9)):not(:nth-child(10)):not(.left_menu):hover ~ .xiala_info,

    2 /* .middle_menu li >.xiala_shows:hover ~.xiala_info, */

    3 /* .middle_menu li :not(.left_border):hover ~ .xiala_info, */

    4 /.middle_menu .xiala_shows:hover ~ .xiala_info,/
    .xiala_info:hover{
    height: 228px;
    border-top: 1px solid rgb(224, 224, 224);
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.3);
    }
    只有1可以让下拉层出来,个人感觉4挺对的,但就是出不来下拉层。
    哎,让人难受。

    展开全文
  • HTML+CSS 小米页面

    千次阅读 多人点赞 2018-09-19 21:52:28
    <link rel="stylesheet" href="style.css"> <!-- 右侧固定定位导航栏 --> <a href="#" class="rn-1"></a> <a href="#" class="rn-2"></a> <a href="#" class="rn-3"></a> <a href="#top" class="rn-4...

    效果图
    在这里插入图片描述
    HTML部分

    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>Document</title>
    	<link rel="stylesheet" href="style.css">
    </head>
    <body>
    
    	<!-- 右侧固定定位导航栏 -->
    	<div class="right-nav">
    		<a href="#" class="rn-1"></a>
    		<a href="#" class="rn-2"></a>
    		<a href="#" class="rn-3"></a>
    		<a href="#top" class="rn-4"></a>
    	</div>
    
    	<!-- top-header -->
    	<div class="top" id="top">
    		<div class="w">
    
    			<!-- 左侧导航 -->
    			<div class="top-nav-1">
    				<ul>
    					<li>
    						<a href="#" >小米商城</a>
    						<span class="sep">|</span>
    					</li>
    					<li>
    						<a href="#">MIUI</a>
    						<span class="sep">|</span>
    					</li>
    					<li>
    						<a href="#">IoT</a>
    						<span class="sep">|</span>
    					</li>
    					<li>
    						<a href="#">云服务</a>
    						<span class="sep">|</span>
    					</li>
    					<li>
    						<a href="#">金融</a>
    						<span class="sep">|</span>
    					</li>
    					<li>
    						<a href="#">有品</a>
    						<span class="sep">|</span>
    					</li>
    					<li>
    						<a href="#">小爱开放平台</a>
    						<span class="sep">|</span>
    					</li>
    					<li>
    						<a href="#">政企服务</a>
    						<span class="sep">|</span>
    					</li>
    					<li>
    						<a href="#">Select Region</a>
    						<span class="sep">|</span>
    					</li>
    				</ul>
    			</div>
    			
    			<!-- 购物车 -->
    			<a href="#" class="gouwu">
    				<div class="gou"></div>
    				<div class="gou-in">
    					<img src="images/top-icon3.png" >
    				</div>
    			
    			</a>
    
    			<!-- 右侧导航 -->
    			<div class="top-nav-2">
    				<a href="#">登录</a>
    				<span class="sep">|</span>
    				<a href="#">注册</a>
    				<span class="sep">|</span>
    				<a href="#" class="massage">消息通知</a>
    				
    			</div>
    		</div>
    	</div>
    
    	<!-- header -->
    	<div class="header w">
    
    		<!-- logo -->
    		<div class="logo">
    		</div>
    
    		<!-- nav -->
    		<div class="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>
    				<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>
    		</div>
    
    		<!-- search -->
    		<div class="search">
    			<input type="text" >
    			<button></button>
    			<div class="sea-1">
    				<span class="sea-11">小米8</span>
    				<span class="sea-12">小米MIX 2S</span>
    			</div>
    			
    		</div>
    	</div>
    
    	<!-- banner -->
    	<div class="banner w">
    		<img src="images/banner1.jpg" alt="">	
    		<!-- subnav -->
    		<div class="subnav">
    			<ul>
    				<li><a href="#">手机 电话卡<span class="icon1">></span></a></li>
    				<li><a href="#">电视 盒子<span class="icon1">></span></a></li>
    				<li><a href="#">笔记本 平板<span class="icon1">></span></a></li>
    				<li><a href="#">家电 插线板<span class="icon1">></span></a></li>
    				<li><a href="#">出行 穿戴<span class="icon1">></span></a></li>
    				<li><a href="#">智能 路由器<span class="icon1">></span></a></li>
    				<li><a href="#">电源 配件<span class="icon1">></span></a></li>
    				<li><a href="#">个护 儿童<span class="icon1">></span></a></li>
    				<li><a href="#">耳机 音箱<span class="icon1">></span></a></li>
    				<li><a href="#">生活 箱包<span class="icon1">></span></a></li>
    			</ul>
    		</div>
    
    		<!-- 轮播图 -->
    		<div class="ban-l"><</div>
    		<div class="ban-r">></div>
    		<ol>
    			<li></li>
    			<li></li>
    			<li></li>
    			<li></li>
    			<li></li>
    		</ol>
    	</div>
    	
    	<!-- goods -->
    	<div class="goods w">
    		<ul>
    			<li><a href="#"><img src="images/goods1.png" ></a></li>
    			<li><a href="#"><img src="images/goods2.png" ></a></li>
    			<li><a href="#"><img src="images/goods3.png" ></a></li>
    			<li><a href="#"><img src="images/goods4.png" ></a></li>
    		</ul>
    	</div>
    	
    	<!-- shangou -->
    	<div class="shangou w">
    		
    		<!-- 上部分 -->
    		<div class="sg-hd">
    			<h4>小米闪购</h4>
    			<img src="images/sg-hd.png" >
    		</div>
    
    		<!-- 下部分 -->
    		<div class="sg-bd clearfix">
    			<ul>
    				<li><img src="images/shangou1.png" class="special"></li>
    				<li>
    					<a href="#" >
    						<img src="images/shangou2.png" >
    						<h4>最生活毛巾-青春系列 白色</h4>
    						<p>3秒吸水,杀菌无刺激</p>
    						<span><em>1 元</em> <del>19.9元</del></span>
    					</a>
    				</li>
    				<li>
    					<a href="#">
    						<img src="images/shangou3.png" >
    						<h4>90分旅行箱 1A 20英寸 星空灰</h4>
    						<p>可随身携带</p>
    						<span><em>149 元</em> <del>299元</del></span>
    					</a>
    				</li>
    				<li>
    					<a href="#">
    						<img src="images/shangou4.png" >
    						<h4>90分旅行箱 1A 20英寸 星空灰</h4>
    						<p>长途旅行航空托运箱</p>
    						<span><em>224 元</em> <del>449元</del></span>
    					</a>
    				</li>
    				<li>
    					<a href="#">
    						<img src="images/shangou5.png" >
    						<h4>小米插线板 (含3口USB)</h4>
    						<p>3个USB充电口,支持快充</p>
    						<span><em>44 元</em> <del>49元</del></span>
    					</a>
    				</li>
    			</ul>
    		</div>
    	</div>
    
     	<!-- ads -->
     	<div class="ads w">
     		<a href="#"><img src="images/ads1.png" ></a>
     	</div>
     	
     	<!-- page-main -->
     	<div class="page-main ">
     		
     		<!-- phone -->
     		<div class="phone w">
    
     			<!-- 上部分 -->
     			<div class="pho-hd">
     				<h4>手机</h4>
     				<a href="#">查看全部></a>
     			</div>
    
     			<!-- 下部分 -->
     			<div class="pho-bd">
     				<div class="pho-bd-le">
     					<a href="#"><img src="images/pho-bd1.png" ></a>
     				</div>
     				<div class="pho-bd-ri">
     					<ul>
     						<li>
    							<a href="#" >
    								<img src="images/pho-bd2.png" >
    								<h4>红米6A</h4>
    								<p>AI人脸解锁,小巧全面屏,高性能</p>
    								<span><em>549元</em> <del>599元</del></span>
    							</a>
    							<div class="jian50">
    								减 50 元
    							</div>
    						</li>
    						<li>
    							<a href="#" >
    								<img src="images/pho-bd2.png" >
    								<h4>红米6A</h4>
    								<p>AI人脸解锁,小巧全面屏,高性能</p>
    								<span><em>549元</em> <del>599元</del></span>
    							</a>
    						</li>
    						<li>
    							<a href="#" >
    								<img src="images/pho-bd2.png" >
    								<h4>红米6A</h4>
    								<p>AI人脸解锁,小巧全面屏,高性能</p>
    								<span><em>549元</em> <del>599元</del></span>
    							</a>
    							<div class="jian50">
    								减 50 元
    							</div>
    						</li>
    						<li>
    							<a href="#" >
    								<img src="images/pho-bd2.png" >
    								<h4>红米6A</h4>
    								<p>AI人脸解锁,小巧全面屏,高性能</p>
    								<span><em>549元</em> <del>599元</del></span>
    							</a>
    							<div class="jian50">
    								减 50 元
    							</div>
    						</li>
    						<li>
    							<a href="#" >
    								<img src="images/pho-bd2.png" >
    								<h4>红米6A</h4>
    								<p>AI人脸解锁,小巧全面屏,高性能</p>
    								<span><em>549元</em> <del>599元</del></span>
    							</a>
    						</li><li>
    							<a href="#" >
    								<img src="images/pho-bd2.png" >
    								<h4>红米6A</h4>
    								<p>AI人脸解锁,小巧全面屏,高性能</p>
    								<span><em>549元</em> <del>599元</del></span>
    							</a>
    						</li>
    						<li>
    							<a href="#" >
    								<img src="images/pho-bd2.png" >
    								<h4>红米6A</h4>
    								<p>AI人脸解锁,小巧全面屏,高性能</p>
    								<span><em>549元</em> <del>599元</del></span>
    							</a>
    						</li>
    						<li>
    							<a href="#" >
    								<img src="images/pho-bd2.png" >
    								<h4>红米6A</h4>
    								<p>AI人脸解锁,小巧全面屏,高性能</p>
    								<span><em>549元</em> <del>599元</del></span>
    							</a>
    						</li>
    
     					</ul>
     				</div>
     			</div>
     		</div>
    
     		<!-- ads -->
     		<div class="ads w">
     			<a href="#"><img src="images/ads2.png" ></a>
     		</div>
    
     		<!-- jiadain -->
     		<div class="jiadian w clearfix">
     			
     			<!-- 上部分 -->
     			<div class="jia-hd ">
     				<h4>家电</h4>
     				<ul>
     					<li><a href="#">热门</a></li>
     					<li><a href="#">电视影音</a></li>
     					<li><a href="#">电脑</a></li>
     					<li><a href="#">家居</a></li>
     				</ul>
     			</div>
     			<div class="jia-bd clearfix">
     				<ul>
     					<li><a href="#"><img src="images/jia-bd1.png" ></a></li>
     					<li><a href="#"><img src="images/jia-bd2.png" ></a></li>
     					<li><a href="#"><img src="images/jia-bd3.png" ></a></li>
     					<li><a href="#"><img src="images/jia-bd4.png" ></a></li>
     					<li><a href="#"><img src="images/jia-bd5.png" ></a></li>
     					<li><a href="#"><img src="images/jia-bd6.png" ></a></li>
     					<li><a href="#"><img src="images/jia-bd2.png" ></a></li>
     					<li><a href="#"><img src="images/jia-bd3.png" ></a></li>
     					<li><a href="#"><img src="images/jia-bd4.png" ></a></li>
     					<li><a href="#"><img src="images/jia-bd5.png" ></a></li>
     				</ul>
     			</div>
     		</div>
     	</div>
    
     	<!-- footer -->
     	<div class="footer">
     		
     		<!-- weixiu -->
     		<div class="weixiu w">
    	 		<ul>
    	 			<li><a href="#">预约维修服务</a><span class="seu">|</span></li>
    	 			<li><a href="#">7天无理由退货</a><span class="seu">|</span></li>
    	 			<li><a href="#">15天免费换货</a><span class="seu">|</span></li>
    	 			<li><a href="#">满150包邮</a><span class="seu">|</span></li>
    	 			<li><a href="#">520余家售后网点</a></li>
    	 		</ul>
    	 	</div>
    
    	 	<!-- fuwu -->
    	 	<div class="fuwu w">
    	 		
    	 		<div class="fu-le">
    	 			<dl>
    		 			<dt><a href="#">帮助中心</a></dt>
    		 			<dd><a href="#">账户管理</a></dd>
    		 			<dd><a href="#">购物指南</a></dd>
    		 			<dd><a href="#">订单操作</a></dd>
    	 			</dl>
    	 			<dl>
    		 			<dt><a href="#">服务支持</a></dt>
    		 			<dd><a href="#">售后政策</a></dd>
    		 			<dd><a href="#">自助服务</a></dd>
    		 			<dd><a href="#">相关下载</a></dd>
    	 			</dl>
    	 			<dl>
    		 			<dt><a href="#">线下门店</a></dt>
    		 			<dd><a href="#">小米之家</a></dd>
    		 			<dd><a href="#">服务网点</a></dd>
    		 			<dd><a href="#">授权体验店</a></dd>
    	 			</dl>
    	 			<dl>
    		 			<dt><a href="#">关于小米</a></dt>
    		 			<dd><a href="#">了解小米</a></dd>
    		 			<dd><a href="#">加入小米</a></dd>
    		 			<dd><a href="#">投资者关系</a></dd>
    	 			</dl>
    	 			<dl>
    		 			<dt><a href="#">关注我们</a></dt>
    		 			<dd><a href="#">新浪微博</a></dd>
    		 			<dd><a href="#">官方微信</a></dd>
    		 			<dd><a href="#">联系我们</a></dd>
    	 			</dl>
    	 			<dl>
    		 			<dt><a href="#">特色服务</a></dt>
    		 			<dd><a href="#">F码通道</a></dd>
    		 			<dd><a href="#">礼物码</a></dd>
    		 			<dd><a href="#">防伪查询</a></dd>
    	 			</dl>
    	 		</div>
    			
    			<div class="fu-ri">
    				<h4>400-100-5678</h4>
    				<p>周一至周日 8:00-18:00 </p>
    				<p>(仅收市话费)</p>
    				<a href="#">联系客服</a>
    			</div>
    	 	</div>
    		
    		<!-- copyright -->
    	 	<div class="copyright w">
    	 		<div class="logo"></div>
    	 		<div class="co-nav">
    	 			<a href="#">小米商城</a><span>|</span>
    	 			<a href="#">MIUI</a><span>|</span>
    	 			<a href="#">米家</a><span>|</span>
    	 			<a href="#">米聊</a><span>|</span>
    	 			<a href="#">多看</a><span>|</span>
    	 			<a href="#">游戏</a><span>|</span>
    	 			<a href="#">路由器</a><span>|</span>
    	 			<a href="#">米粉卡</a><span>|</span>
    	 			<a href="#">政企服务</a><span>|</span>
    	 			<a href="#">小米天猫店</a><span>|</span>
    	 			<a href="#">隐私政策</a><span>|</span>
    	 			<a href="#">问题反馈</a><span>|</span>
    	 			<a href="#">廉政举报</a><span>|</span>
    	 			<a href="#">Select Region</a><br>
    	 			<p>@mi.com 京ICP证110507号 京ICP备10046444号 京公网安备11010802020134号 京网文[2017]1530-131号 <br>
    				违法和不良信息举报电话: 185-0130-1238,    本网站所列数据,除特殊说明,所有数据均出自我司实验室测试</p>
    	 		</div>
    	 		<div class="co-img">
    	 			<img src="images/co-img.png" >
    	 		</div>
    	 	</div>
    
    	 	<!-- end -->
    	 	<div class="xiaomi w">
    	 		<h4>探索黑科技,小米为发烧而生! </h4>
    	 	</div>
    	 	
    	</div>
    
    </body>
    </html>
    

    css部分

    * {
    	margin: 0;
    	padding: 0;
    	outline: none;
    	list-style:none;
    	text-decoration: none;
    	border: none;
    }
    body {
    }
    .clearfix:before,.clearfix:after { 
    	content:"";
    	display:table; 
    }
    .clearfix:after {
    	clear:both;
    }
    .clearfix {
    	*zoom:1;
    }
    .w {
    	width: 1226px;
    	margin: 0 auto;
    }
    /*------------------------右侧导航栏*/
    .right-nav {
    	position: fixed;
    	z-index: 999;
    	right: 50%;
    	margin-right: -640px;
    	bottom: 30px;
    	width: 27px;
    	height: 176px;
    }
    .right-nav a {
    	float:left;
    	width: 25px;
    	height: 39px;
    	border: 1px solid #F5F5F5;
    	border-collapse: collapse;
    }
    .rn-1 {
    	background: url(images/right-nav1.png) no-repeat 0 0;
    }
    .rn-2 {
    	background: url(images/right-nav2.png) no-repeat 0 0;
    }
    .rn-3 {
    	background: url(images/right-nav3.png) no-repeat 0 0;
    }
    .rn-4 {
    	margin-top: 14px;
    	background: url(images/right-nav4.png) no-repeat 0 0;
    }
    /*--------------------------------------------*/
    /*-------------------------top-header*/
    .top {
    	width: 100%;
    	height: 40px;
    	line-height: 40px;
    	background-color: #333333;
    }
    .top a {
    	font-size: 12px;
    	color: #B0B0B0;
    }
    .top a:hover {
    	color: #fff;
    }
    .top-nav-1 li {
    	float: left;
    }
    .top-nav-1 li a {
    	float: left;
    	padding: 0 7px;
    }
    .top-nav-1 li:first-child a {
    	padding-left: 0;
    }
    .sep {
    	float: left;
    	color: #393E3E;
    }
    .top-nav-2 {
    	float: right;
    }
    .top-nav-2 a {
    	float: left;
    	margin: 0 7px;
    }
    .massage {
    	padding: 0 26px 0 10px;
    }
    .gouwu {
    	position: relative;
    }
    .gou {
    	float: right;
    	width: 120px;
    	height: 40px;
    	background: url(images/top-icon.png) no-repeat 0 0;
    }
    .gou-in {
    	position: absolute;
    	top: 40px;
    	left: 910px;
    	z-index: 2;
    	display: none;
    	width: 316px;
    	height: 83px;
    	box-shadow: 2px 2px 2px rgba(0,0,0,.2)
    }
    .gouwu:hover .gou {
    	background: url(images/top-icon2.png) no-repeat 0 0;
    }
    .gouwu:hover .gou-in {
    	display: block;
    }
    /*-------------------------------*/
    
    /*----------------------header*/
    .header {
    	height: 55px;
    	line-height: 55px;
    	padding: 22px 0;
    }
    .logo {
    	float: left;
    	width: 55px;
    	height: 55px;
    	background: url(images/logo.png) no-repeat 0 0 ;
    }
    .nav {
    	padding-left: 190px;
    }
    .nav li {
    	float: left;
    	padding: 0 10px;
    }
    .nav li a {
    	font-size: 16px;
    	color: #333333;
    }
    .nav li a:hover {
    	color: #ff6700;
    }
    .search {
    	float: right;
    	position: relative;
    }
    .search input {
    	float: left;
    	width: 243px;
    	height: 48px;
    	border: 1px solid #E0E0E0;
    	padding-left: 10px;
    	color: #E0E0E0;
    }
    .search button {
    	float: left;
    	width: 51px;
    	height: 50px;
    	background: url(images/search.png) no-repeat 0 0;
    }
    .sea-1 span {
    	position: absolute;
    	top: 15px;
    	height: 18px;
    	line-height: 18px;
    	font-size: 12px;
    	background-color: #EEEEEE;
    }
    .sea-11 {
    	right: 141px;
    }
    .sea-12 {
    	right: 62px;
    }
    /*---------------------------------*/
    
    /*--------------------------banner*/
    .banner {
    	position: relative;
    	height: 460px;
    }
    .banner img {
    	height: 460px;
    	width: 1226px;
    }
    .subnav {
    	position: absolute;
    	left: 0;
    	top: 0;
    	z-index: 1;
    	height: 420px;
    	width: 234px;
    	padding: 20px 0;
    	background-color: rgba(0,0,0,.6);
    }
    .subnav li a {
    	display: block;
    	height: 42px;
    	line-height: 42px;
    	padding: 0 24px 0 30px;
    	font-size: 14px;
    	color: #fff;
    }
    .subnav li a:hover {
    	background-color: #ff6700;
    }
    .icon1 {
    	float: right;
    }
    .ban-l,
    .ban-r {
    	position: absolute;
    	top: 230px;
    	margin-top: -35px;
    	width: 41px;
    	height: 69px;
    	line-height: 69px;
    	text-align: center;
    	font-size: 32px;
    	color: #fff;
    	background: rgba(0,0,0,.3);
    }
    .ban-l {
    	left: 234px;
    	border-radius: 0 5px 5px 0;
    }
    .ban-r {
    	right: 0;
    	border-radius: 5px 0 0 5px;
    }
    .banner ol {
    	position: absolute;
    	right: 30px;
    	bottom: 25px;
    	width: 100px;
    	height: 10px;
    }
    .banner  ol li {
    	float: left;
    	width: 6px;
    	height: 6px;
    	border-radius: 50%;
    	border: 2px solid #ccc;
    	background-color: rgba(76,80,97,.5);
    	margin: 0 5px;
    }
    .banner ol li:hover {
    	background-color: #fff;
    }
    /*----------------------------------*/
    
    /*---------------------------------goods*/
    .goods {
    	height: 170px;
    	padding: 14px 0 44px 0;
    }
    .goods li {
    	float: left;
    	width: 316px;
    	height: 170px;
    	margin-left: 14px;
    }
    .goods li:first-child {
    	width: 234px;
    	margin-left: 0;
    }
    /*----------------------------------------------*/
    
    /*--------------------------shangou*/
    .shangou {
    	height: 380px;
    }
    .sg-hd {
    	height: 40px;
    	list-style: 40px; 
    }
    .sg-hd h4 {
    	float: left;
    	font-size: 22px;
    	font-weight: 200;
    }
    .sg-hd img {
    	float: right;
    }
    .sg-bd li {
    	float: left;
    	height: 339px;
    	width: 234px;
    	border-top: 1px solid;
    	margin-right: 14px; 
    	text-align: center;
    }
    .sg-bd li:first-child {
    	border-color: #E53935;
    }
    .sg-bd li:nth-child(2) {
    	border-color: #FFAC13;
    }
    .sg-bd li:nth-child(3) {
    	border-color: #83C44E;
    }
    .sg-bd li:nth-child(4) {
    	border-color: #2196F3;
    }
    .sg-bd li:last-child {
    	border-color: #E53935;
    	margin-right: 0;
    }
    .sg-bd li img {
    	display: inline-block;
    	padding-top: 20px;
    }
    .special {
    	padding-top: 0!important;
    }
    .sg-bd li h4 {
    	margin-top: 20px;
    	font-size: 14px;
    	font-weight: 400;
    	color: #202020;
    }
    .sg-bd li p {
    	margin-top: 10px;
    	font-size: 12px;
    	font-weight: 400;
    	color: #ADADBD;
    }
    .sg-bd li span {
    	display: inline-block;
    	margin-top: 20px;
    	font-size: 14px;
    	font-weight: 400;
    	color: #ADADBD;
    }
    .sg-bd li em {
    	font-style: normal;
    	color: #FA6553;
    }
    .sg-bd li del {
    	text-decoration: line-through;
    }
    /*----------------------------------------*/
    
    /*----------------------------------ads*/
    .ads a {
    	display: block;
    	height: 120px;
    	margin: 42px auto;
    }
    /*-------------------------------------*/
    
    /*page-main*/
    .page-main {
    	width: 100%;
    	background-color: #F5F5F5;
    }
    
    /*---------------------------------phone*/
    .phone {
    	height: 674px;
    }
    .pho-hd {
    	height: 22px;
    	padding:19px 0;
    	line-height: 22px;
    }
    .pho-hd h4 {
    	float: left;
    	font-size: 22px;
    	color: #333333;
    	font-weight: 200;
    }
    .pho-hd a {
    	float: right;
    	font-size: 14px;
    	color: #333;
    }
    .pho-hd a:hover {
    	color: #ff6700;
    }
    .pho-bd-le {
    	float: left;
    	width: 234px;
    	height: 614px;
    }
    .pho-bd-ri {
    	float: right;
    	width: 992px;
    	height: 614px;
    }
    .pho-bd-ri li {
    	position: relative;
    	float: left;
    	width: 234px;
    	height: 300px;
    	text-align: center;
    	margin: 0 0 14px 14px;
    	background-color: #fff;
    }
    .pho-bd-ri li:hover {
    	top: -2px;
    	left: 0;
    	box-shadow: 2px 2px 2px 2px rgba(0,0,0,.2);
    }
    .pho-bd-ri li img {
    	padding-top: 20px;
    }
    .pho-bd-ri li h4 {
    	margin-top: 20px;
    	font-size: 14px;
    	font-weight: 400;
    	color: #202020;
    }
    .pho-bd-ri li p {
    	margin-top: 10px;
    	font-size: 12px;
    	font-weight: 400;
    	color: #ADADBD;
    }
    .pho-bd-ri li span {
    	display: inline-block;
    	margin-top: 20px;
    	font-size: 14px;
    	font-weight: 400;
    	color: #ADADBD;
    }
    .pho-bd-ri li em {
    	font-style: normal;
    	color: #FA6553;
    }
    .pho-bd-ri li del {
    	text-decoration: line-through;
    }
    .jian50 {
    	position: absolute;
    	top: 0;
    	left: 117px;
    	margin-left: -32px;
    	width: 64px;
    	height: 20px;
    	line-height: 20px;
    	background: red;
    	font-size: 12px;
    	color: #fff;
    }
    /*-------------------------------------*/
    
    /*---------------------------------jiadian*/
    
    .jia-hd {
    	width: 1226px;
    	height: 22px;
    	padding:19px 0;
    	line-height: 22px;
    }
    .jia-hd h4 {
    	float: left;
    	font-size: 22px;
    	color: #333333;
    	font-weight: 200;
    }
    .jia-hd ul {
    	float: right;
    }
    .jia-hd li {
    	float: left;
    	padding: 0 16px;
    	height: 22px;
    	line-height: 22px;
    }
    .jia-hd li a {
    	font-size: 16px;
    	color: #424242;
    }.jia-bd {
    	width: 1240px;
    }
    .jia-bd li {
    	float: left;
    	height: 300px;
    	width: 234px;
    	margin: 0 14px 14px 0;
    }
    /*----------------------------------------------*/
    
    /*footer*/
    .footer {
    	width: 100%;
    	background-color: #fff;
    }
    /*--------------------------------weixiu*/
    .weixiu {
    	height: 79px;
    	border-bottom: 1px solid #E0E0E0;
    }
    .weixiu li {
    	float: left;
    	height: 79px;
    	line-height: 79px;
    	font-size: 16px;
    }
    .weixiu a {
    	float: left;
    	padding: 0 70px;
    	color: #616161;
    }
    .seu {
    	float: left;
    	color: #E0E0E0;
    }
    .weixiu a:hover {
    	color: #ff6700;
    }
    /*------------------------------------------*/
    
    /*----------------------------------------fuwu*/
    .fuwu {
    	height: 192px;
    }
    .fu-le {
    	float: left;
    	height: 192px;
    	width: 974px;
    }
    .fu-le dl {
    	float: left;
    	font-size: 12px;
    }
    .fu-le dt {
    	padding: 42px 104px 32px 0;
    }
    .fu-le dt a {
    	color: #424242;
    }
    .fu-le dd {
    	padding-bottom: 16px;
    }
    .fu-le dd a {
    	color: #757575;
    }
    .fu-le a:hover {
    	color: #ff6700;
    }
    .fu-ri {
    	text-align: center;
    }
    .fu-ri h4 {
    	padding: 42px 0 14px 0;
    	font-size: 18px;
    	color: #ff6700;
    	font-weight: 400;
    }
    .fu-ri p {
    	margin-bottom: 6px;
    	font-size: 12px;
    	color: #757575;
    }
    .fu-ri a {
    	display: inline-block;
    	margin-top: 20px;
    	height: 28px;
    	line-height: 28px;
    	width: 118px;
    	font-size: 14px;
    	color: #ff6700;
    	border: 1px solid #ff6700;
    }
    .fu-ri a:hover {
    	background-color: #ff6700;
    	color: #fff;
    }
    /*------------------------------------------------*/
    /*------------------------------------------------copyright*/
    .copyright {
    	height: 55px;
    	padding: 40px 10px 0 0;
    }
    .logo {
    	float: left;
    	width: 55px;
    	height: 55px;
    	background: url(images/logo.png) no-repeat 0 0 ;
    }
    .co-nav {
    	float: left;
    	padding-left: 10px;
    	width: 688px;
    	height: 55px;
    }
    .co-nav a,
    .co-nav span,
    .co-nav p {
    	font-size: 12px;
    }
    .co-nav a,
    .co-nav span {
    	color: #757575;
    }
    .co-nav p {
    	color: #B0B0B0;
    }
    .co-img {
    	float: right;
    	height: 55px;
    	width: 438px;
    }
    /*-----------------------------------------------*/
    .xiaomi {
    	text-align: center;
    	height: 80px;
    	line-height: 80px;
    }
    .xiaomi h4 {
    	font-size: 18px;
    	font-weight: 400;
    	font-family: "楷体" ;
    	color: #BEBEBE;
    }
    
    
    展开全文
  • 设计思路定义一个只有单个logo大小的盒子,背景为小米橙色。然后将两张图片用绝对定位的方式脱标排成一排,顺序是主页icon在前,小米logo在后,注意子绝父相。此时呈现的是主页icon,给主页icon一个等于其宽度的负的...

    实现效果

    25bf1bfab9c8

    鼠标放上时向右滚动显示主页icon。

    设计思路

    定义一个只有单个logo大小的盒子,背景为小米橙色。

    然后将两张图片用绝对定位的方式脱标排成一排,顺序是主页icon在前,小米logo在后,注意子绝父相。

    此时呈现的是主页icon,给主页icon一个等于其宽度的负的margin-left,就会呈现小米logo。

    给logo盒子添加hover效果,鼠标放上时margin-left为0,鼠标离开时还原。

    给logo盒子添加transition过渡效果,可以是margin,也可以是all,(这里偷懒只写了all),还有动画所需的时间(这里为0.2s)。

    给logo盒子添加溢出隐藏属性overflow:hidden;大功告成。

    代码

    注:仅做学习使用,切勿侵权。

    小米图标

    *{

    margin: 0;

    padding: 0;

    }

    body{

    background-color: skyblue;

    }

    .logo{

    overflow: hidden;

    position: relative;

    margin: 100px auto;

    width: 55px;

    height: 55px;

    background-color: #ff6700;

    }

    /*方法二:伪元素法*/

    .logo::after,.logo::before{

    /*float: left;*/

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    z-index: 1;

    content: '';

    background: url("mi-logo.png") no-repeat center;

    transition: all .2s;

    }

    .logo::after{

    margin-left: -55px;

    background: url("mi-home.png") no-repeat center;

    }

    .logo:hover::after{

    margin-left: 0;

    }

    .logo:hover::before{

    margin-left: 55px;

    }

    展开全文
  • HTML+CSS实现小米官网首页

    千次阅读 多人点赞 2020-12-28 18:49:53
    一、HTML+CSS实现小米官网首页 仿写小米官网的页面,熬了两个晚上终于把这个页面做好了,原创不易,欢迎大家点赞和评论,需要源代码的评论区留言或者加我QQ(2997381395),大家记得关注我哦!我会不定期的跟大家...
  • 1、2D转换: ...伪元素可以帮助我们利用css新建新标签元素,而不需要HTML标签,从而简化HTML结构。 ::before 在元素内部的前面插入内容 ::after 在元素内部的后面插入内容 语法:element::before{ conte
  • 一个登录界面大家都有见过,...登录主题相关代码 Document 注册 用户协议 隐私政策 帮助中心 | 中文(简体) 账号登录 | 扫码登录 登录 请使用小米手机/米家等小米APP扫码登录 忘记密码? 手机号登录 其它方式登录
  • HTML5+css仿小米金融首页学习文档
  • 小米商城HTML/CSS

    2017-03-23 16:53:39
    小米商城HTML/CSS
  • html+css制作小米官网

    2020-07-18 12:44:11
    学习前端的时候制作的网页,有需要的可以下载看看,前期学习html和css只要做出来这个我局的基本可以了,剩下的就是查缺补漏,把一些技巧再掌握的熟练一下就好了。
  • HTML+CSS实现小米官网首页.pdf
  • HTML+CSS实现小米登录界面.pdf
  • css仿小米商城首页

    2021-02-23 14:21:50
    网页布局小练习
  • html+css+jQuery小米商城

    2021-05-07 21:11:01
    html+css+jQuery小米商城
  • 小米商城HTMLCSS实战

    2020-03-08 15:52:54
    小米商城实战index.html(包含疫情期间的弹出页),基本效果都已实现,可根据自己需要稍加更改,适合网页设计与制作的大作业。备注:并不是全部页面,中间有一些简单部分懒得去做用图片代替了。
  • 一款黑色风格的仿小米官方网站css3导航下拉菜单代码,简洁实用的css3下拉导航菜单网页特效。
  • 仿小米官网HTML+css,有特效小米.zip
  • 小米官网css3导航菜单代码是一款黑色风格的小米官方网站css3导航下拉菜单代码。
  • HTML+CSS实现小米账号注册界面.pdf
  • HTML+CSS实现小米登录界面

    千次阅读 2020-12-29 16:34:10
    HTML+CSS实现登录界面
  • css3仿小米官网导航下拉菜单代码
  • 小米首页手工代码html+CSS,未使用任何框架,供学习参考。
  • 小米官网html+css
  • 整套html和css小米官网主页全代码
  • 小米官网css3导航菜单代码是一款黑色风格的小米官方网站css3导航下拉菜单代码。
  • 学习前端知识时写的一个仿小米官网的一些页面+css样式+js验证代码 学习前端知识时写的一个仿小米官网的一些页面+css样式+js验证代码
  • 小米主页CSS样式布局源代码,用html5和CSS样式开发的,界面还是比较简单易懂的。
  • 纯html+css实现小米官网html页面![在这里插入图片描述](https://img-blog.csdnimg.cn/2020121613541141.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 10,407
精华内容 4,162
关键字:

css小米4