欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-06-17 16:08:42
仿制小米官网页面(仅用html+css)提示:这里可以添加系列文章的所有文章的目录,目录需要自己手动添加例如:第一章 Python 机器学习入门之pandas的使用提示:写完文章后,目录可以自动生成,如何生成可参考右边的帮助文档文章目录仿制小米官网页面(仅用html+css)前言一、pandas是什么?二、使用步骤1.引入库2.读入数据总结前言提示:这里可以添加本文要记录的大概内容:例如:随着人工智能的不断发展,机器学习这门技术也越来越重要,很多人都开启了学习机器学习,本文就介绍了机器学...

教你仿制小米官网页面(仅用html+css)

前言

哈哈哈,我又来了。经过前面的不懈探索。我感觉我对html和css已经比较熟练了。这是在学完c语言和java后,学习的第三门语言(HTML算不上编程语言吧,哈)。这次我仿写了一个小米的官方网站,话说小米的官方比起淘宝和京东真的简洁啊!正好适合练手了,嘿嘿嘿~。
PS:我们这里今天下雪了哦!


废话不多说了(已经说了那么多了),请看:


一、使用的工具?

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

二、结果展示

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

代码如下(部分示例):

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小米商城(假的)-小米10Pro</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <!-- 奔跑的熊 -->
    <div class="bear">
        <div class="xiaopingzi">小瓶子出品</div>
        <div class="bear_box">
        </div>
    </div>

    <!-- 网页头部开始 -->
    <div class="ssp">
        <a href="none.html">
            <div class="banner1 clearfix">
                <a href="none.html">
                    <img src="tupian/banner1.jpg" alt="">
                </a>
            </div>
        </a>

        <!-- 导航栏开始 -->
        <div class="nav clearfix">
            <div class="w clearfix">
                <ul>
                    <li><a href="https://www.mi.com/index.html">小米商城</a></li>
                    <li><a href="https://www.miui.com/">MiUi</a></li>
                    <li><a href="https://iot.mi.com/">loT</a></li>
                    <li><a href="https://i.mi.com/">云服务</a></li>
                    <li><a href="https://airstar.com/home">天星科技</a></li>
                    <li><a href="https://youpin.mi.com/">有品</a></li>
                    <li><a href="https://xiaoai.mi.com/">小爱开放平台</a></li>
                    <li><a href="https://qiye.mi.com/">企业团购</a></li>
                    <li><a href="https://www.mi.com/aptitude/list/?id=41">资质证照</a></li>
                    <li><a href="https://www.mi.com/aptitude/list/">协议规则</a></li>
                    <li><a href="https://www.mi.com/appdownload/">下载app</a></li>
                    <li><a href="https://xiaomishare.mi.com/?from=micom">智能生活</a></li>
                    <li><a href="none.html">Select Location</a></li>

                </ul>
                <div>
                    <ul>
                        <li><a href="none.html">登陆</a></li>
                        <li><a href="none.html">注册</a></li>
                        <li><a href="none.html">通知消息</a></li>
                        <span>
                            <a href="https://www.mi.com/buy/cart" class="iconfont"> 购物车(0)</a>
                        </span>
                    </ul>
                </div>
            </div>
        </div>

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

本文地址:https://blog.csdn.net/weixin_44376552/article/details/110495684

相关标签: 前端 css web