教你用html和css仿制小米官网页面！

一、使用的工具？

博主使用的是Visual Studio Code。这个是真的方便啊，体型小不说，好用的插件还不少！赞一个。不过为了之后的后端学习，我开始慢慢转向用IDEA 了，这个软件使用起来也是真的不赖啊（想要的小伙伴可以评论区找我哦，我会经常看你们的评论的）

原文地址：教你用html和css仿制小米官网页面_是小瓶子呀的博客-CSDN博客

PS：如有需要Python学习资料的小伙伴可以加点击下方链接自行获取

python免费学习资料以及群交流解答点击即可加入

二、结果展示

 

 

代码如下（部分示例）：

    
    
    
    



    
    

        
小瓶子出品
        

        
    

    
    

        
            

                
                    
                
            
        

        
        

            

                

                    
小米商城
                    
MiUi
                    
loT
                    
云服务
                    
天星科技
                    
有品
                    
小爱开放平台
                    
企业团购
                    
资质证照
                    
协议规则
                    
下载app
                    
智能生活
                    
Select Location

                
                

                    

                        
登陆
                        
注册
                        
通知消息
                        
                             购物车(0)
                        
                    
                
            
        

css代码如下（部分示例）：

* {
     padding: 0;
     margin: 0;
 }
 
 li {
     list-style: none;
 }
 
 a {
     text-decoration: none;
 }
 
 em,
 i {
     font-style: normal;
     padding: 0;
     margin: 0;
 }
 
 @keyframes bear {
     0% {}
     100% {
         background-position: -1280px 0;
     }
 }
 
 .bear {
     position: fixed;
     top: 400px;
     left: 0;
 }
 /*.xiaopingzi {
     background-color: rgb(11, 205, 240);
     color: rgb(253, 78, 47);
     font-size: 18px;
     font-family: "YouYuan";
     text-align: center;
 }*/
 /* ********************* */
 
 .xiaopingzi {
     background-image: -webkit-linear-gradient(left, blue, #66ffff 10%, #cc00ff 20%, #f3150d 30%, #CCCCFF 40%, #00FFFF 50%, #CCCCFF 60%, #cc0000 70%, #CC00FF 80%, #66FFFF 90%, blue 100%);
     -webkit-text-fill-color: transparent;
     /* 将字体设置成透明色 */
     -webkit-background-clip: text;
     /* 裁剪背景图，使文字作为裁剪区域向外裁剪 */
     -webkit-background-size: 200% 100%;
     -webkit-animation: masked-animation 4s linear infinite;
     font-size: 20px;
     text-align: center;
 }
 
 @keyframes masked-animation {
     0% {
         background-position: 0 0;
     }
     100% {
         background-position: -100% 0;
     }
 }
 /* ************************** */
 
 .bear_box {
     width: 160px;
     height: 80px;
     background: url(tupian/百度浏览器奔跑的熊bear-25676f9.png) no-repeat;
     background-color: rgb(182, 58, 58);
     animation: bear 0.8s steps(8) infinite;
 }
 
 @font-face {
     font-family: 'icomoon';
     src: url('fonts/icomoon.eot?bkblej');
     src: url('fonts/icomoon.eot?bkblej#iefix') format('embedded-opentype'), url('fonts/icomoon.ttf?bkblej') format('truetype'), url('fonts/icomoon.woff?bkblej') format('woff'), url('fonts/icomoon.svg?bkblej#icomoon') format('svg');
     font-weight: normal;
     font-style: normal;
     font-display: block;
 }
 
 input {
     outline: none;
 }
 
 .w {
     width: 1226px;
     margin: 0 auto;
     /* background-color: rgb(204, 206, 105); */
 }
 
 .clearfix:after {
     visibility: hidden;
     clear: both;
     display: block;
     content: ".";
     height: 0;
 }
 
 .clearfix {
     *zoom: 1;
 }

因为代码有点多，全部上传后加载太慢，会卡死。所以想要源码的小伙伴们也请在评论区留言吧！看到后我会打包发给你的。

三、总结

学习HTML和css也已经有一两个月了。比起后端的c语言和java感觉前端真的轻松，而且视觉冲击很大，写完后浏览器打开会立刻感受到满满的成就感。就像是看着一个孩子在自己手中慢慢的变成自己想要的模样！因为在学校天天都有琐事的原因，导致学习效率并不是很高。大三了，还有考研，还要参加互联网＋比赛和大创项目。每天真的好忙啊，但有时候又会没有动力学习。这几天又没去图书馆，害，大概是废了。又想考研，又想参加比赛，还想学好编程，要做的事真的太多了，就会导致一事无成。