021-Web前端-练习记录-6

最新推荐文章于 2021-11-22 13:28:17 发布
最新推荐文章于 2021-11-22 13:28:17 发布
阅读量462 收藏
点赞数
分类专栏： Web前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/fenfen_vyron/article/details/106624163
版权

练习记录-6

#6.8 小米主页完

主页

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>仿小米主页</title>
    <link rel="icon" href="images/favicon.ico">
    <link rel="stylesheet" href="CSS/Reset.css">
    <link rel="stylesheet" href="CSS/iconfont.css">
    <link rel="stylesheet" href="CSS/XiaomiCSS.css">
</head>
<body>

<!--黑色导航条-->
<div class="nav-black">
    <!--导航条内容-->
    <div class="wrap">
        <ul class="left-ul">
            <li><a href="#">小米商城</a><span>|</span></li>
            <li><a href="#">MIUI</a><span>|</span></li>
            <li><a href="#">Iot</a><span>|</span></li>
            <li><a href="#">云服务</a><span>|</span></li>
            <li><a href="#">金融</a><span>|</span></li>
            <li><a href="#">有品</a><span>|</span></li>
            <li><a href="#">小爱开放平台</a><span>|</span></li>
            <li><a href="#">政企服务</a><span>|</span></li>
            <li><a href="#">资质证照</a><span>|</span></li>
            <li><a href="#">协议规则</a><span>|</span></li>
            <li><a href="#">下载App</a><span>|</span></li>
            <li><a href="#">Select Region</a><span></span></li>
        </ul>
        <ul class="right-ul">
            <li><a href="#">登陆</a><span>|</span></li>
            <li><a href="#">注册</a><span>|</span></li>
            <li style="margin-right: 7px"><a href="#">消息通知</a></li>
            <li class="cart">
                <a href="#"><i class="iconfont">&#xe610;</i>购物车(0)</a>
                <div class="hidden-cart">购物车中还没有商品，赶紧选购吧！</div>
            </li>
        </ul>
    </div>
</div>

<!--白色导航条-->
<div class="nav-white">
    <div class="wrap">
        <img src="images/logo-footer.png" alt="" class="logo">
        <ul class="mi-nav">
            <li>
                <a href="#">小米手机</a>
                <div class="mi-nav-hidden">暂时没有内容</div>
            </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>
            <li class="search">
                <input type="text">
                <button class="iconfont">&#xe60b;</button>
            </li>
        </ul>
    </div>
</div>

<!--轮播图与滑动门-->
<div class="wrap carousel">
    <div>
        <ul class="hdm">
            <li>
                <a href="#">手机 电话卡</a><i class="iconfont">&#xe635;</i>
                <div class="hdm-hidden">
                    一面隐藏的背景墙
                </div>
            </li>
            <li><a href="#">电视盒子</a><i class="iconfont">&#xe635;</i></li>
            <li><a href="#">笔记本 平板</a><i class="iconfont">&#xe635;</i></li>
            <li><a href="#">家电 插线板</a><i class="iconfont">&#xe635;</i></li>
            <li><a href="#">电视盒子</a><i class="iconfont">&#xe635;</i></li>
            <li><a href="#">电视盒子</a><i class="iconfont">&#xe635;</i></li>
            <li><a href="#">电视盒子</a><i class="iconfont">&#xe635;</i></li>
            <li><a href="#">电视盒子</a><i class="iconfont">&#xe635;</i></li>
            <li><a href="#">电视盒子</a><i class="iconfont">&#xe635;</i></li>
            <li><a href="#">电视盒子</a><i class="iconfont">&#xe635;</i></li>
        </ul>
    </div>
    <div class="prev"></div>
    <div class="next"></div>
</div>

<!--小广告位-->
<div class="wrap ad">
    <ul>
        <li><i class="iconfont">&#xe60b;</i><br/>选购手机</li>
        <li><i class="iconfont">&#xe60b;</i><br/>选购手机</li>
        <li><i class="iconfont">&#xe60b;</i><br/>选购手机</li>
        <li><i class="iconfont">&#xe60b;</i><br/>选购手机</li>
        <li><i class="iconfont">&#xe60b;</i><br/>选购手机</li>
        <li><i class="iconfont">&#xe60b;</i><br/>选购手机</li>
    </ul>
    <img src="./images/xmad_15500580021576_iymFx.jpg" alt="">
    <img src="./images/xmad_15410029988871_TdzPQ.jpg" alt="">
    <img src="./images/xmad_15500580021576_iymFx.jpg" alt="">
</div>

<!--小米闪购-->
<div class="wrap sg">
    <div>
        <h2>小米闪购</h2>
        <div class="sg-arrow">
            <span>&lt;</span>   <!--    "<"      -->
            <span>&gt;</span>   <!--    ">"      -->
        </div>
    </div>
    <div class="sg-box">
        <div><img src="images/sj.png" alt=""></div>
        <div class="sg-item">
            <img src="./images/pms_1538031692.35815325!220x220.jpg" alt="">
            <h4>米价智能家具看护套装</h4>
            <p>智能家庭家具</p>
            <span>259元<s>296元</s></span>
        </div>
        <div><img src="images/sj.png" alt=""></div>
        <div><img src="images/sj.png" alt=""></div>
        <div><img src="images/sj.png" alt=""></div>
    </div>
    <img src="images/xmad_15500232485691_uYPkv.jpg" alt="" class="ad-img"/>
</div>

<!--小木手机-->
<div class="phone-container">
    <div class="wrap">
        <div class="phone-box">
            <h2>手机 <a href="#">查看全部 <i class="iconfont">&#xe635;</i></a></h2>
        </div>
        <div class="phone-item">
            <div class="item-left"><img src="images/xmad_1544580545953_UvEXK.jpg" alt=""></div>
            <div class="item-right">
                <div>
                    <b>新品</b>
                    <img src="./images/pms_1545457703.71734471!220x220.png" alt="">
                    <h4>米价智能家具看护套装</h4>
                    <p>智能家庭家具</p>
                    <span>259元<s>296元</s></span>
                </div>
                <div><b>新品</b>
                    <img src="./images/pms_1545457703.71734471!220x220.png" alt="">
                    <h4>米价智能家具看护套装</h4>
                    <p>智能家庭家具</p>
                    <span>259元<s>296元</s></span></div>
                <div><b>新品</b>
                    <img src="./images/pms_1545457703.71734471!220x220.png" alt="">
                    <h4>米价智能家具看护套装</h4>
                    <p>智能家庭家具</p>
                    <span>259元<s>296元</s></span></div>
                <div><b>新品</b>
                    <img src="./images/pms_1545457703.71734471!220x220.png" alt="">
                    <h4>米价智能家具看护套装</h4>
                    <p>智能家庭家具</p>
                    <span>259元<s>296元</s></span></div>
                <div><b>新品</b>
                    <img src="./images/pms_1545457703.71734471!220x220.png" alt="">
                    <h4>米价智能家具看护套装</h4>
                    <p>智能家庭家具</p>
                    <span>259元<s>296元</s></span></div>
                <div><b>新品</b>
                    <img src="./images/pms_1545457703.71734471!220x220.png" alt="">
                    <h4>米价智能家具看护套装</h4>
                    <p>智能家庭家具</p>
                    <span>259元<s>296元</s></span></div>
                <div><b>新品</b>
                    <img src="./images/pms_1545457703.71734471!220x220.png" alt="">
                    <h4>米价智能家具看护套装</h4>
                    <p>智能家庭家具</p>
                    <span>259元<s>296元</s></span></div>
                <div><b>新品</b>
                    <img src="./images/pms_1545457703.71734471!220x220.png" alt="">
                    <h4>米价智能家具看护套装</h4>
                    <p>智能家庭家具</p>
                    <span>259元<s>296元</s></span></div>
            </div>
        </div>
    </div>
</div>
</body>
</html>

CSS

/*<!--黑色导航条-->*//*<!--黑色导航条-->*//*<!--黑色导航条-->*/
.nav-black{
    width: 100%;
    height: 40px;
    line-height: 40px;  /*全体居中*/
    background-color: #333;
    color: #424242;
}
/*<!--导航条内容-->*/
.wrap{
    width: 1226px;
    height: 40px;
    margin: 0 auto;
    /*background-color: #333;*/
}
/*导航左侧块与左右侧列表左浮动*/
.left-ul,.left-ul>li,.right-ul>li{
    float: left;
}
/*左侧右侧超链接左浮动*/
.left-ul a,.right-ul a{
    color: #b0b0b0;
    font-size: 12px;
    font-family: "Arial Black";
}
/*左右侧列表超链接悬停*/
.left-ul a:hover,.right-ul a:hover{
    color: #ffffff;
    font-family: "Arial Black";
}
/*右侧列表块右浮动*/
.right-ul{
    float: right;
}
/*购物车 字符图标*/
.cart i{
    margin-right: 10px;
}
/*购物车*/
.cart{
    width: 120px;
    height: 40px;
    background-color: #424242;
    position: relative;
}
/*悬停购物车*/
.cart:hover{
    background-color: #ffffff;
}
/*悬停购物车的字体*/
.cart:hover a{
    color: orange;
}
/*购物车隐藏框*/
.hidden-cart{
    width: 320px;
    height:0;
    /*height: 100px;*/
    background-color: #ffffff;
    position: absolute;
    right: 0;
    top:40px;
    overflow: hidden; /*溢出部分隐藏*/
    transition: 0.5s;
    /*line-height: 100px;*/
    z-index: 99;
}
/*购物车悬停时的隐藏框的显示*/
.cart:hover .hidden-cart{
    height: 100px;
    line-height: 100px;
    box-shadow: 0 2px 10px rgba(0,0,0,.2);
}


/*<!--白色导航条-->*//*<!--白色导航条-->*//*<!--白色导航条-->*/
.nav-white{
    clear: both;
    width: 100%;
    height: 100px;
    background-color: #ffffff;
    line-height: 100px;
    position: relative;
}
/*图标与列表*/
.logo,.mi-nav{
    float: left;
}
/*列表的内容*/
.mi-nav>li{
    float: left;
}
/*图标样式*/
.logo{
    margin-top:21.5px;
    margin-right: 190px;
}
/*列表内容的超链接*/
.mi-nav>li>a{
    color: #757575;
    font-size: 16px;
    margin-right: 20px;
    font-family: 'Arial Black';
}
/*列表内容的超链接悬停*/
.mi-nav>li>a:hover{
    color: #ff6700;
}
/*列表*/
.mi-nav{
    width: 980px;
}
/*搜索框*/
.mi-nav>.search{
    float: right;
}
/*搜索框*/
.search{
    margin-top:25px;
}
/*搜索框的框*/
.search>input{
    width: 243px;
    height: 48px;
    border: 1px solid #e0e0e0;
    float: left;
    border-right: hidden;
    outline: none; /*外部线条*/
    transition:all .3s;
}
/*搜索框按钮*/
.search>button{
    width: 50px;
    height: 50px;
    border: 1px solid #e0e0e0;
    float: left;
    background-color: #ffffff;
    font-weight: bold;
    font-size: 20px;
    outline: none; /*外部线条*/
    transition:all .3s;

}
/*搜索框按钮的悬停*/
.search>button:hover{
    background-color:#ff6700;
    color: #ffffff;

    border-color:#ff6700;
}
/*搜索框的悬停全体变橙*/
.search>input:focus,.search>input:focus+button{
    border-color:#ff6700;
}
/*小米手机li隐藏部分*/
.mi-nav-hidden{
    width: 100%;
    height: 0;
    background-color: #fffdef;
    position: absolute;
    left:0;
    top:100px;
    transition: all 0.5s;
    line-height: 230px;
    font-size: 30px;
    font-weight: bold;
    color: #55a532;
    overflow: hidden;
    z-index: 88;
}

.mi-nav-hidden{
    font-family: 'Arial Black';
}

/*小米手机li隐藏部分悬停时显示*/
.mi-nav>li:hover>.mi-nav-hidden{
    height: 230px;
    display: block;
    box-shadow: 0 2px 10px rgba(0,0,0,.2);
}


/*<!--轮播图与滑动门-->*//*<!--轮播图与滑动门-->*//*<!--轮播图与滑动门-->*/
/*这一总大块*/
.carousel{
    width: 1226px;
    height: 460px;
    background-image: url("../images/xmad_15481253648514_fHtzd.jpg");
    background-size: cover;
    -webkit-animation: carousel 10s infinite;
    position: relative;
}
/*轮播图动画*/
@-webkit-keyframes carousel {
    0%{
        background-image: url("../images/xmad_15481253648514_fHtzd.jpg");
    }
    25%{
        background-image:url("../images/xmad_15489036241498_XVwut.jpg");
    } 50%{
        background-image:url("../images/xmad_15488151829917_hENZU.jpg");
    } 75%{
        background-image:url("../images/xmad_15500560064953_Bgumq.jpg");
    }100%{
        background-image:url("../images/xmad_15481253648514_fHtzd.jpg");
    }
}
/*滑动门*/
.hdm{
    width: 234px;
    height: 460px;
    background-color: rgba(0,0,0,.5);
    padding: 20px 0;/*添加上下内边距*/
    box-sizing: border-box; /*怪异盒子更容易计算*/
    position: relative;
}

.hdm li{
    height: 42px;
    line-height: 42px;
    text-align: left;   /*文字居左*/
    padding-left: 30px; /*添加左内边距*/
/*    此处如果用margin则hover的时候高亮块会不全*/
}
.hdm li a{
    color: #ffffff;
}
.hdm li:hover{
    background-color: #ff6700;
}
.hdm i{
    float: right;
    margin-right: 30px;
    color: rgba(255,255,255,.5);
    font-weight: bold;
    font-size: 20px;
}
/*滑动门的隐藏部分*/
.hdm-hidden{
    width: 0px;
    height: 460px;
    /*background-color: #ffffff;*/
    background-color: rgba(0,255,255,.5);
    position: absolute;
    top: 0;
    left: 234px;
    box-shadow: 5px 5px 10px rgba(0,0,0,.2);/*水平 垂直 模糊*/
    display: none;
    line-height: 460px;
    font-size: 40px;
    font-family: "Arial Black";
    font-weight: bold;
    text-align: center;
    color: red;
    overflow: hidden;
}
.hdm li:hover>.hdm-hidden{
    width: 992px;
    display: block;
}
/*两个轮播图的小三角*/
.prev,.next{
    width: 41px;
    height: 69px;
    background-image: url("../images/icon-slides.png");
    position: absolute;
    top:50%;
    margin-top: -34.5px;
    cursor: pointer;
}
.prev{
    left: 234px;
    background-position: -83px 0;
}
.next{
    right:0;
    background-position: -124px 0;
}
.prev:hover{
    background-position: 0 0;
}
.next:hover{
    background-position: -42px 0;
}

/*<!--小广告位--><!--小广告位--><!--小广告位-->*/
.ad{
    margin-top: 15px;
}
.ad>ul,.ad>img{
    float: left;
}
.ad>img{
    width: 316px;
    height: 170px;
    /*overflow: hidden;*/
}
.ad>ul{
    width: 234px;
    height: 170px;
    background-color: #5f5750;
}
.ad>ul>li{
    float: left;
    width: 70px;
    color: rgba(255,255,255,.7);
    padding: 25px 0;
    font-size: 12px;
    margin-left: 4px ;
    border-right:3px solid #665e57;
}
.ad>ul>li:nth-child(3),.ad>ul>li:nth-child(6){
    border-right:0;
}
.ad .before{
    border-right:3px solid #665e57;
}
.ad>img{
    margin-left: 14.6px;
}

/*<!--小米闪购--><!--小米闪购--><!--小米闪购-->*/
/*闪购总*/
.sg{
    margin-top: 160px;
}
.sg h2{
    text-align: left;
    float: left;
    font-weight: normal;
}
/*小尖头*/
.sg-arrow{
    float: right;
}
.sg-arrow>span{
    width: 36px;
    height: 24px;
    border: 1px solid #e0e0e0;
    display: inline-block;
    line-height: 24px;
    font-weight: bolder;
    float: left;
    color: #e0e0e0;
}
.sg-box{
    padding-top: 20px;
    clear: both;                /*浮动的清除！*/
}
.sg-box>div{
    width: 234px;
    height: 339px;
    background-color: #fafafa;
    /*background-color: #55a532;*/
    float: left;
    margin-right: 14px;
}
.sg-box>div:last-child{
    margin-right: 0;
}
.sg-box>div:first-child{
    border-top:1px solid #e53935;
}
.sg-box>div:nth-child(2){
    border-top:1px solid #ffac13;
}
.sg-box>div:nth-child(3){
    border-top:1px solid #b3d4fc;
}
.sg-box>div:nth-child(4){
    border-top:1px solid #990055;
}
.sg-box>div:nth-child(5){
    border-top:1px solid #0077aa;
}
/*四个物品里面的那个图片*/
.sg-item>img,.item-right img{   /*小米手机·复用*/
    width: 160px;
    margin: 30px 0 25px 0;
}
.sg-item>h4,.item-right h4{  /*小米手机·复用*/
    font-weight: normal;
    margin-bottom: 10px;
}
.sg-item>p,.item-right p{    /*小米手机·复用*/
    font-size: 12px;
    color: #b0b0b0;
    margin-bottom: 20px;
}
.sg-item>span,.item-right span{  /*小米手机·复用*/
    color: #ff6700;
}
.sg-item>span>s,.item-right s{  /*小米手机·复用*/
    color: #b0b0b0;
    margin-left: 10px;
}
/*底下的长条图片*/
.ad-img{        /*复用*/
    width: 100%;
    margin: 40px 0;
}

/*<!--小木手机--><!--小木手机--><!--小木手机-->*/
.phone-container{
    background-color: #f5f5f5;
    /*background-color: #63a35c;*/
    width: 100%;
    padding-top: 20px;
    margin-top: 550px;
    overflow: hidden;
}
.phone-box>h2 {
    margin-top: 6px;
    text-align: left;
    font-weight: normal;
}
.phone-box>h2>a{
    float: right;
    font-size: 16px;
    color: #333333;
}
.phone-box>h2>a:hover{
    color: #ff6700;
}
.phone-box>h2 i{
    font-size: 20px;
    vertical-align: middle;
}
.item-left,.item-right{
    height: 614px;
    float: left;
}
.item-left{
    width: 234px;
    /*background-color: #0077aa;*/
    transition: all .5s;
}
.item-left>img{
    width: 100%;
}
.phone-item{
    margin-top: 20px;
}
.item-right{
    width: 992px;
    /*background-color: #ff6700;*/
}
.item-right>div{
    width: 234px;
    height: 300px;
    /*background-color: chartreuse;*/
    float: left;
    background-color: #fff;
    margin-left: 14px;
    margin-bottom: 14px;
    position: relative;
    transition: all .5s;
}
.item-right b{      /*'新品绿框'部分*/
    width: 64px;
    height: 20px;
    background-color: #83c44e;
    display: inline-block;
    color: #fff;
    font-weight: normal;
    line-height: 20px;
    font-size: 12px;
    position: absolute;
    top:0;
    left: 50%;
    margin-left: -32px;
}
/*悬浮阴影*/
.item-left:hover,.item-right>div:hover{
    transform: translate(0,-5px);
    box-shadow: 0 15px 30px rgba(0,0,0,.2);
}

字符图标

@font-face {font-family: "iconfont";
  src: url('iconfont.eot?t=1591277751034'); /* IE9 */
  src: url('iconfont.eot?t=1591277751034#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAPkAAsAAAAACBQAAAOYAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCDHAqDRIMOATYCJAMQCwoABCAFhG0HUhsKB1GUDkqK7EeBu6cI0BYDQ2nTLiAsJtsYP/k3/DuC7/d73XPf/YgqiQKUYIFlWEWFC0aTap1oNRvVqWbd2r+1lnlA9UJm/AMVFaFCv7+XpeNcrjC+TlepCsm+86+Xyf1USQoQG8DppFKTMEKYhLfr4JjpUjzPZnPJSCsc4ChaBxaRX0Ev9i+MP4xdeRGnCdTNGGvsnd3cQ19mTArEc28V9FMKuSY9VIVyycos3kIl1fSasAO88f8+/loGP0mpYMw8vj+N4OAH9mMd1P3XuXIREHM8Hdg6CqwCmXgsNVxrhYFVLXWlf9sGUFWVGKur+7j+/49YexFUzX95hEIiyozUJlhDwYIfmE0m+CHCKBNawhQJXsiKKhp4gfcMydQ4tyTllTiOSMOwAIyryqWfnUWdn0efnkaenCRZvIiAlrz77Kw8Sj+ykA7TWVJZtOkRrmRmBqVutFM6W5ouDZej0bzx+rGOkRS0jjnYOcyGWdxbOraFCnmL6kYx4c7BUa5MBGMexSn6csHOc+Xo7rOE+jEUT+ras0JbILBZkonUQUyQPr6v0Q+uroATPXB12Y8MIHQGGAD9V1cDD1Swvk6gmlSYRQU0sLYOqJAK31083exqIeZqHjoOUCoIHIv2uAmZQG4t1M21bzWXNW8ivNXVNSBLlLWR+TP+M7F/PEjaRvilS6nrRZjv0+SzejbgToMg4qHiIUIQ+0oIdfF4TeeXjH7wUPYQjjbyttz2fCVi7oNaIh4i07MFve0mlu2+zxLH7VZb7I0E9789HFIATE7AO2AASN/TfyZTGSlOfuUoX32P/pI7Dv+qjWup+PYvO+uzsBD+B7M188flZIjJT86cbShzljk2Q3Nmp/7MtIS6OibA0vc1hmjUOpVQNYohqZiGQtUsMmNXoaRhDcqqNqFuxfn6hgHWErmGZW8AQtc7JG0foND1gczYTygZ+4eybgCouwzxHRvmI3fozqSEIty8otd5Ziy1DIP0W7J1ojjJ9nGPxJV348LIJBs+p4x4jDnVk12KGDScp3gGzqMkybHgPJCWqRMp9mfGWWWfNNV5CkO7GFEEiaCNV8jTchnjlhfD3O/fIlYtoXBNUYXyEWEV3ztamJq3QJ4LslZF1/KcyhNrSQgDGSyXQmdARxIzkENF+bCAaGLK9fAV9s1QKdNWMJ1flD7hBqgzdsmRoogcJfV7ldlIBe+KR1dATWSpTPJ6q5/txD/X2hEA') format('woff2'),
  url('iconfont.woff?t=1591277751034') format('woff'),
  url('iconfont.ttf?t=1591277751034') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
  url('iconfont.svg?t=1591277751034#iconfont') format('svg'); /* iOS 4.1- */
}

.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-fangdajing:before {
  content: "\e60b";
}

.icon-iconfontjiantou5:before {
  content: "\e635";
}

.icon-gouwuche:before {
  content: "\e610";
}

重制ResetCSS

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, legend, input, textarea, button, p, blockquote, th, td{margin: 0;padding: 0;}
body {padding:0;margin:0;text-align:center;color:#333;font-size:14px;font-family:"宋体", arial;}
li{list-style-type:none;}
a{text-decoration: none;}
img,input{border:none;vertical-align:middle;}

效果图（新节）

其他部分见前几篇​​​​​​​

我的肚肚有点儿疼
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
web-application-server:Web 应用程序服务器练习的骨架
08-04
搭建实践开发环境 Fork 项目到您自己的帐户。... 在 eclipse 或终端中克隆分叉的项目。 将分叉的项目导入eclipse后，使用Maven构建工具将其转换为eclipse项目（mvn eclipse:... 实施完成后，记录实施过程中新学到的信息
IconFont图标库
weixin_46822367的博客
05-29 2956
图标库 <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>IconFont</title> <link rel="stylesheet" href="demo.css"> <link rel="stylesheet" href="iconfont.css"> </head> <body&gt
html %3cp%3e字体斜体,icon.html
weixin_34024811的博客
06-03 1219
Simple - 简！ 首页基础框架组件库页面库色彩排版按钮徽标导航面包屑表格表单面板进度条图标前台空页面后台空页面辅助类图标·iconfont图标，展示，装饰Layui内置图标一览表(140个)半星&#xe6c9;layui-icon-rate-half星星-空心&#xe67b;layui-icon-rate星星-实心&#xe67a;layui-i...
HTML特殊字符编码对照表
gangli_8的博客
03-13 1250
HTML特殊字符编码对照表
C#使用IconFont字体图标的动态加载（＆#xe格式转换）
MaFeng
12-04 9905
IconFont 矢量字体图标由于文件小，资源多，可任意放大缩小不失真，方便着色等特点，在网页、Winform、WPF中被广泛使得。网页上介绍使用的文件很多，但动态加载并不多,本文将重点介绍利用C#语言动态加载IconFont 字体，以便显示矢量字体图标。 一、IConFont 基本使用参考 下面两遍文章介绍很详细，相关链接如下： 将IconFont的字体图标库转为图片 WPF自定义控件与样式(......
前端每日记录第一天.md
07-23
本人听课整理出来的笔记，学习是一个分享的过程，希望前端小白使用愉快。 按照时间顺序多加练习，前端小白也可以入门，努力吧，整理了一些自己认为比较重要的，有什么问题可私聊。
learning_spider:这其实是一份学习笔记。包括学习记录、爬虫练习平台（网站）、自制工具脚本
04-28
简介此项目主要分为三个部分爬虫案例对一些网站的数据进行爬取，标记出 难度和要点web网站 根据反反爬经验，尝试去接入、编写各类爬虫障碍，顺便研究前端/后端/服务器知识辅助工具/脚本制造尝试制作各种工具/脚本已...
parks-redux：带有API练习的ReactRedux Thunk
02-18
使用API​​练习React Redux，2020年5月11日-2020年13月13日蒂芙尼·萧（Tiffany Siu），阿黛拉·达曼瑟（Adela Darmansyah），克里斯塔·鲁兹（Krista Rutz），安德烈·韦雷梅耶夫（Andriy Veremyeyev）目录描述这...
projects-floral-accessories
04-17
此网页为前端练习作品 网页主要功能 前端： 商品展示 购物车功能 愿望清单功能 用户注册和登入 检视我的账户 商品下单、结账 连结到Firebase 后端服务： 利用Authentication 管理新用户注册和用户登入 利用Firestore...
超详细实现淘宝静态页面(附全部代码)
热门推荐
x1037490413的博客
09-12 2万+
文章目录一:基本结构与样式 一:基本结构与样式 1.划分结构的顺序是自上而下,从左往右,保证内容在一行内能显示 2.考虑的因素有内容,颜色块,间距
使用jQuery实现实时模糊查询功能
丶Melody
06-07 6696
使用jQuery实现实时模糊查询功能
uni-app 图标字体引用
XiaoYi0215的博客
12-03 1万+
不一样的配方，一样的味道 1.先说官网上的使用方法： 不支持本地路径，替换方式：使用本地图片或将字体图标转换为base64格式字符串。 网络路径必须加协议头 https。 从 http://www.iconfont.cn 上拷贝的代码，默认是没加协议头的。 示例 &lt;template&gt; &lt;view&gt; &lt;view&gt; ...
demo_unicode.html
mikibiubiu的博客
02-23 309
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>IconFont</title> <link rel="stylesheet" href="demo.css"> <style type="text/cs...
HTML5期末大作业：电商网站设计——粉色的鲜花礼品电商(4页) HTML+CSS+JavaScript 学生网上商城网页设计作业成品 web课程设计网页规划与设计 计算机毕设网页设计源码
11-22 388
HTML5期末大作业：电商网站设计——粉色的鲜花礼品电商(4页) HTML+CSS+JavaScript 学生网上商城网页设计作业成品 web课程设计网页规划与设计 计算机毕设网页设计源码 常见网页设计作业题材有 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、 动漫、 明星、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、 军事、 游戏、 节日、 戒烟、 电影、 摄影、 文化、 家乡、 鲜花、 礼品、 汽车、 其他 等网页设计题目, A+水平
抖音字体加密
Thor的博客
03-28 1107
抖音==起因==:==分析==:字体文件：==获取字体文件==:==获取字体映射规则:====安装:====使用:====分析映射规则==:==代码部分==:==效果:== 起因: 前天本来接的一个小单子，一开始客户上来问抖音粉丝能获取吗？我寻思这玩意看起来是字体加密，但是我并不知道这个字体文件时多久更新一次，要是像猫眼字体反爬那样，刷新一下就变，那我就太孤儿了，所以就延长了工期，结果，人客户走了...
编写高质量代码-web前端开发pdf
最新发布
10-31
编写高质量的Web前端代码是每个前端开发者都应该努力追求的目标。以下是一些关键要点，帮助我们编写高质量的Web前端代码： 1. 代码结构和组织：良好的代码结构和组织是编写高质量代码的基础。我们应该遵循一致的...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值