AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

实训-利用HTML+CSS制作某米官网首页（二）

2022-12-30 252
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 实训-利用HTML+CSS制作某米官网首页

7.手机

从这里开始到最后的页脚都属于主体内容


先写我们的HTML框架


 

    <!-- 主体部分开始 -->
    <div class="content">
        <div class="wrap">
            <!-- 手机部分开始 -->
            <div class="phone">
                <h3 class="title">手机</h3>
                <div class="phone-box">
                    <div class="phone-box-left">
                        <a href="#">
                            <img src="../media/phone_left.jpg" alt="">
                        </a>
                    </div>
                    <div class="phone-box-right">
                        <div class="item">
                            <a href="#">
                                <img class="item-img" src="../media/phone-right.jpg" alt="">
                                <p class="item-name">小米10至尊纪念版</p>
                                <p class="item-desc">120X 变焦/120W秒充/120Hz屏幕</p>
                                <p class="item-price">5299元起</p>
                            </a>
                        </div>
                        <div class="item">
                            <a href="#">
                                <img class="item-img" src="../media/phone-right.jpg" alt="">
                                <p class="item-name">小米10至尊纪念版</p>
                                <p class="item-desc">120X 变焦/120W秒充/120Hz屏幕</p>
                                <p class="item-price">5299元起</p>
                            </a>
                        </div>
                        <div class="item">
                            <a href="#">
                                <img class="item-img" src="../media/phone-right.jpg" alt="">
                                <p class="item-name">小米10至尊纪念版</p>
                                <p class="item-desc">120X 变焦/120W秒充/120Hz屏幕</p>
                                <p class="item-price">5299元起</p>
                            </a>
                        </div>
                        <div class="item">
                            <a href="#">
                                <img class="item-img" src="../media/phone-right.jpg" alt="">
                                <p class="item-name">小米10至尊纪念版</p>
                                <p class="item-desc">120X 变焦/120W秒充/120Hz屏幕</p>
                                <p class="item-price">5299元起</p>
                            </a>
                        </div>
                        <div class="item">
                            <a href="#">
                                <img class="item-img" src="../media/phone-right.jpg" alt="">
                                <p class="item-name">小米10至尊纪念版</p>
                                <p class="item-desc">120X 变焦/120W秒充/120Hz屏幕</p>
                                <p class="item-price">5299元起</p>
                            </a>
                        </div>
                        <div class="item">
                            <a href="#">
                                <img class="item-img" src="../media/phone-right.jpg" alt="">
                                <p class="item-name">小米10至尊纪念版</p>
                                <p class="item-desc">120X 变焦/120W秒充/120Hz屏幕</p>
                                <p class="item-price">5299元起</p>
                            </a>
                        </div>
                        <div class="item">
                            <a href="#">
                                <img class="item-img" src="../media/phone-right.jpg" alt="">
                                <p class="item-name">小米10至尊纪念版</p>
                                <p class="item-desc">120X 变焦/120W秒充/120Hz屏幕</p>
                                <p class="item-price">5299元起</p>
                            </a>
                        </div>
                        <div class="item">
                            <a href="#">
                                <img class="item-img" src="../media/phone-right.jpg" alt="">
                                <p class="item-name">小米10至尊纪念版</p>
                                <p class="item-desc">120X 变焦/120W秒充/120Hz屏幕</p>
                                <p class="item-price">5299元起</p>
                            </a>
                        </div>
                    </div>
                </div>
                <div class="big-img">
                    <a href="#">
                        <img src="../media/phone_ad.jpg" alt="">
                    </a>
                </div>
            </div>
            <!-- 手机部分结束 -->
        </div>
    </div>
    <!-- 主体部分结束 -->


接着写css样式


/* 主体部分样式开始 */
.content{
    width: 100%;
    background-color: #f5f5f5;
    overflow: hidden;
    padding: 4px 0 12px;
}
/* 主体部分样式结束 */
/* 手机部分样式开始 */
.title{
    text-align: left;
    color: #333;
    font-size: 22px;
    font-weight: 200;
    line-height: 58px;
}
.phone-box{
    width: 100%;
    height: 614px;
}
.phone-box-left{
    width: 234px;
    height: 100%;
    float: left;
}
.phone-box-right{
    width: 1006px;
    height: 614px;
    float: left;
}
.item{
    width: 234px;
    height: 298px;
    background-color: #fff;
    padding: 20px 0;
    margin: 0 0 17.5px 17.5px;
    float: left;
    box-sizing: border-box;
    transition: all 0.2s linear;
}
.item:hover{
    transform: translateY(-3px);
    box-shadow: 0 15px 30px rgba(0,0,0,.1);
}
.item-img{
    width: 160px;
    margin-bottom: 18px;
}
.item-name{
    width: 214px;
    height: 21px;
    color: #333;
    font-size: 14px;
    line-height: 21px;
    margin: 0 auto 2px;
}
.item-desc{
    width: 214px;
    height: 18px;
    color: #b0b0b0;
    font-size: 12px;
    line-height: 18px;
    margin: 0 auto 10px;
}
.item-price{
    color: #ff6700;
    font-size: 14px;
}
.big-img{
    margin-top: 20px;
}
/* 手机部分样式结束 */

看一下最后效果



效果还不错，继续！


8.家电

这个部分跟上面手机部分大部分相似，可直接用上面的css样式再稍作修改，留下的空白部分自由发挥


先写我们的HTML框架

             <!-- 家电部分开始 -->
            <div class="elc">
                <h3 class="title">家电</h3>
                <div class="elc-box">
                    <div class="item elc-item">
                        <a href="#">
                            <img src="../media/elc-left.jpg" alt="">
                        </a>
                    </div>
                    <div class="item">
                        <a href="#">
                            <img class="item-img" src="../media/elc-right.jpg" alt="">
                            <p class="item-name">Redmi 红米电视 70英寸 </p>
                            <p class="item-desc">70英寸震撼巨屏，4K画质，细腻如真</p>
                            <p class="item-price">3199元 <del>3799元</del></p>
                        </a>
                    </div>
                    <div class="item">
                        <a href="#">
                            <img class="item-img" src="../media/elc-right.jpg" alt="">
                            <p class="item-name">Redmi 红米电视 70英寸 </p>
                            <p class="item-desc">70英寸震撼巨屏，4K画质，细腻如真</p>
                            <p class="item-price">3199元 <del>3799元</del></p>
                        </a>
                    </div>
                    <div class="item">
                        <a href="#">
                            <img class="item-img" src="../media/elc-right.jpg" alt="">
                            <p class="item-name">Redmi 红米电视 70英寸 </p>
                            <p class="item-desc">70英寸震撼巨屏，4K画质，细腻如真</p>
                            <p class="item-price">3199元 <del>3799元</del></p>
                        </a>
                    </div>
                    <div class="item">
                        <a href="#">
                            <img class="item-img" src="../media/elc-right.jpg" alt="">
                            <p class="item-name">Redmi 红米电视 70英寸 </p>
                            <p class="item-desc">70英寸震撼巨屏，4K画质，细腻如真</p>
                            <p class="item-price">3199元 <del>3799元</del></p>
                        </a>
                    </div>
                    <div class="item elc-item">
                        <a href="#">
                            <img src="../media/elc-left.jpg" alt="">
                        </a>
                    </div>
                    <div class="item">
                        <a href="#">
                            <img class="item-img" src="../media/elc-right.jpg" alt="">
                            <p class="item-name">Redmi 红米电视 70英寸 </p>
                            <p class="item-desc">70英寸震撼巨屏，4K画质，细腻如真</p>
                            <p class="item-price">3199元 <del>3799元</del></p>
                        </a>
                    </div>
                    <div class="item">
                        <a href="#">
                            <img class="item-img" src="../media/elc-right.jpg" alt="">
                            <p class="item-name">Redmi 红米电视 70英寸 </p>
                            <p class="item-desc">70英寸震撼巨屏，4K画质，细腻如真</p>
                            <p class="item-price">3199元 <del>3799元</del></p>
                        </a>
                    </div>
                    <div class="item">
                        <a href="#">
                            <img class="item-img" src="../media/elc-right.jpg" alt="">
                            <p class="item-name">Redmi 红米电视 70英寸 </p>
                            <p class="item-desc">70英寸震撼巨屏，4K画质，细腻如真</p>
                            <p class="item-price">3199元 <del>3799元</del></p>
                        </a>
                    </div>
                    <div class="item-last">
                        <div></div>
                        <div></div>
                    </div>
                </div>
                <div class="big-img">
                    <a href="#">
                        <img src="../media/phone_ad.jpg" alt="">
                    </a>
                </div>
            </div>
            <!-- 家电部分结束 -->


接着写css样式

/* 家电部分样式开始 */
.elc-box{
    width: 100%;
    height: 614px;
}
.elc-item{
    margin-left: 0;
    padding: 0;
}
.item-price>del{
    color: #b0b0b0;
}
.item-last{
    width: 234px;
    height: 300px;
    float: left;
    margin-left: 14px;
}
.item-last>div{
    width: 234px;
    height: 143px;
    background-color: #fff;
    transition: all 0.2s linear;
}
.item-last>div:first-child{
    margin-bottom: 13px;
}
.item-last>div:hover{
    transform: translateY(-2px);
    box-shadow: 0 15px 30px rgba(0,0,0,.1);
}
/* 家电部分样式结束 */


看一下最后效果



9.视频

先写我们的HTML框架


    

            <!-- 视频部分开始 -->
            <div class="video">
                <h3 class="title">视频</h3>
                <div class="video-box">
                    <div>
                        <div class="video-img">
                            <img src="../media/video.jpg" alt="">
                            <div class="btn">
                                <div class="sanjiao"></div>
                            </div>
                        </div>
                        <p class="video-name">Redmi 10X系列发布会</p>
                        <p class="video-desc">Redmi 10X系列发布会</p>
                    </div>
                    <div>
                        <div class="video-img">
                            <img src="../media/video.jpg" alt="">
                            <div class="btn">
                                <div class="sanjiao"></div>
                            </div>
                        </div>
                        <p class="video-name">Redmi 10X系列发布会</p>
                        <p class="video-desc">Redmi 10X系列发布会</p>
                    </div>
                    <div>
                        <div class="video-img">
                            <img src="../media/video.jpg" alt="">
                            <div class="btn">
                                <div class="sanjiao"></div>
                            </div>
                        </div>
                        <p class="video-name">Redmi 10X系列发布会</p>
                        <p class="video-desc">Redmi 10X系列发布会</p>
                    </div>
                    <div>
                        <div class="video-img">
                            <img src="../media/video.jpg" alt="">
                            <div class="btn">
                                <div class="sanjiao"></div>
                            </div>
                        </div>
                        <p class="video-name">Redmi 10X系列发布会</p>
                        <p class="video-desc">Redmi 10X系列发布会</p>
                    </div>
                </div>
            </div>
            <!-- 视频部分结束 -->


接着写我们的css样式

/* 视频部分样式开始 */
.video-box{
    width: 100%;
    height: 299px;
}
.video-box>div{
    width: 296px;
    height: 285px;
    background-color: #fff;
    float: left;
    margin-bottom: 14px;
    margin-right: 14.9px;
    transition: all 0.2s linear;
}
.video-box>div:hover{
    transform: translateY(-2px);
    box-shadow: 0 15px 30px rgba(0,0,0,.1);
}
.video-box>div:nth-child(4){
    margin-right: 0;
}
.video-img{
    width: 100%;
    height: 180px;
    margin-bottom: 28px;
    position: relative;
}
.btn{
    width: 32px;
    height: 20px;
    border-radius: 12px;
    border: 2px solid #fff;
    position: absolute;
    left: 20px;
    bottom: 10px;
}
.sanjiao{
    border-left: 8px solid #fff;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    width: 0;
    height: 0;
    margin: 3px auto;
}
.video-img:hover>.btn{
    background-color: #ff6700;
    border-color: #ff6700;
}
.video-name{
    color: #333;
    font-size: 16px;
    height: 286px;
    height: 21px;
    margin: 0 auto 6px;
}
.video-desc{
    color: #b0b0b0;
    width: 286px;
    height: 18px;
    margin: 0 auto;
    font-size: 14px;
}
/* 视频部分样式结束 */

看一下最后效果



效果可以，继续干！


10.页脚

写到页脚的时候，HTML框架要与上面的主体内容分离开


先写我们的HTML框架

<!-- 页脚部分开始 -->
    <div class="footer">
        <div class="wrap">
            <div class="footer-service">
                <ul>
                    <li><a href="#">
                            <i class="iconfont">&#xe629;</i>
                            <span>预约维修服务</span>
                        </a>
                    </li>
                    <li><a href="#">
                            <i class="iconfont">&#xe60e;</i>
                            <span>7天无理由退货</span>
                        </a>
                    </li>
                    <li><a href="#">
                            <i class="iconfont">&#xe606;</i>
                            <span>15天无理由退货</span>
                        </a>
                    </li>
                    <li><a href="#">
                            <i class="iconfont">&#xe624;</i>
                            <span>满69包邮</span>
                        </a>
                    </li>
                    <li><a href="#">
                            <i class="iconfont">&#xe617;</i>
                            <span>520余家售后网点</span>
                        </a>
                    </li>
                </ul>
            </div>
            <div class="footer-link">
                <dl class="link-list">
                    <dt class="link-title">帮助中心</dt>
                    <dd class="link-item"><a href="#">账户管理</a></dd>
                    <dd class="link-item"><a href="#">账户管理</a></dd>
                    <dd class="link-item"><a href="#">账户管理</a></dd>
                </dl>
                <dl class="link-list">
                    <dt class="link-title">帮助中心</dt>
                    <dd class="link-item"><a href="#">账户管理</a></dd>
                    <dd class="link-item"><a href="#">账户管理</a></dd>
                    <dd class="link-item"><a href="#">账户管理</a></dd>
                </dl>
                <dl class="link-list">
                    <dt class="link-title">帮助中心</dt>
                    <dd class="link-item"><a href="#">账户管理</a></dd>
                    <dd class="link-item"><a href="#">账户管理</a></dd>
                    <dd class="link-item"><a href="#">账户管理</a></dd>
                </dl>
                <dl class="link-list">
                    <dt class="link-title">帮助中心</dt>
                    <dd class="link-item"><a href="#">账户管理</a></dd>
                    <dd class="link-item"><a href="#">账户管理</a></dd>
                    <dd class="link-item"><a href="#">账户管理</a></dd>
                </dl>
                <dl class="link-list">
                    <dt class="link-title">帮助中心</dt>
                    <dd class="link-item"><a href="#">账户管理</a></dd>
                    <dd class="link-item"><a href="#">账户管理</a></dd>
                    <dd class="link-item"><a href="#">账户管理</a></dd>
                </dl>
                <dl class="link-list">
                    <dt class="link-title">帮助中心</dt>
                    <dd class="link-item"><a href="#">账户管理</a></dd>
                    <dd class="link-item"><a href="#">账户管理</a></dd>
                    <dd class="link-item"><a href="#">账户管理</a></dd>
                </dl>
                <div class="footer-aside">
                    <p class="tel">400-100-5678</p>
                    <p class="time">8:00-18:00（仅收市话费）</p>
                    <a href="#" class="kefu"><i class="iconfont">&#xe710;</i> 人工客服</a>
                    <div class="follow">
                        关注小米：
                        <img src="../media/wb.png" alt="">
                        <img src="../media/wx.png" alt="">
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- 页脚部分结束 -->

接着写css样式

/* 页脚部分开始 */
.footer-service{
    width: 100%;
    height: 25px;
    line-height: 25px;
    padding: 27px 0;
    border-bottom: 1px solid #e0e0e0;
}
.footer-service li{
    float: left;
    width: 19.8%;
    border-right: 1px solid #e0e0e0;
}
.footer-service li:last-child{
    border-right: none;
}
.footer-service i{
    font-size: 24px;
    margin-right: 6px;
}
.footer-service a{
    color: #616161;
}
.footer-service a:hover{
    color: #ff6700;
}
.footer-link{
    width: 100%;
    height: 172px;
    padding: 40px 0;
}
.link-list{
    float: left;
    width: 160px;
    text-align: left;
    color: #424242;
    font-size: 14px;
    line-height: 20px;
}
.link-title{
    margin: 0 0 26px;
    font-size: 16px;
    color: #424242;
}
.link-item{
    margin-top: 15px;
    font-size: 14px;
    color: #757575;
}
.link-item a{
    color: #757575;
}
.link-item a:hover{
    color: #ff6700;
}
.footer-aside{
    width: 251px;
    height: 111px;
    border-left: 1px solid #e0e0e0;
    float: right;
    color: #616161;
}
.tel{
    font-size: 22px;
    line-height: 22px;
    color: #ff6700;
    margin-bottom: 5px;
}
.time{
    font-size: 12px;
    margin-bottom: 5px;
}
.kefu{
    font-size: 13px;
    display: block;
    width: 120px;
    height: 30px;
    line-height: 25px;
    border: 1px solid #ff6700;
    box-sizing: border-box;
    margin: 0 auto;
    color: #ff6700;
    transition: all 0.4s;
}
.kefu>i{
    color: #ff6700;
}
.footer-link .kefu:hover{
    background: #f25807;
    border-color: #f25807;
    color: #fff;
}
.footer-link .kefu:hover>i{
    color: #fff;
}
.follow{
    font-size: 12px;
    margin-top: 10px;
}
.follow img{
    width: 24px;
    margin-left: 6px;
    position: relative;
    top: 7px;
}
/* 页脚部分结束 */

看一下最后效果



写到这里基本上已经大功告成了，就剩最后一步！


11.icon

这里只需要在<head>标签下加一个<link>标签


<link rel="shortcut icon" href="../media/favicon.ico" type="image/x-icon">

这样我们的网页图标就显示出来了



网页总体效果图



总结

笔者只是完成了网页的大致效果，其中里面还有很多内容没有具体完善， 布局也不是最美观的，与官网比还相差甚远。但是此次制作过程中让笔者收益颇丰。最后希望笔者的制作过程可以帮助到刚刚入门HTML以及CSS的小伙伴，不足之处也请大家多多评判指正！今日的网页界面制作分享到此结束，感谢！


源码

链接：https://pan.baidu.com/s/1wq3ODSX4VF1jzCbeSc_xgg

提取码：4jdc


文章标签：
前端开发
关键词：
CSS html
HTML CSS
HTML css官网
HTML官网
HTML首页
艾派森_
目录
相关文章
东方睿赢
|
29天前
|
前端开发 测试技术 定位技术
如何利用HTML和CSS构建企业级网站的全过程。从项目概述到页面结构设计，再到HTML结构搭建与CSS样式设计，最后实现具体页面并进行优化提升，全面覆盖了网站开发的关键步骤
本文深入介绍了如何利用HTML和CSS构建企业级网站的全过程。从项目概述到页面结构设计，再到HTML结构搭建与CSS样式设计，最后实现具体页面并进行优化提升，全面覆盖了网站开发的关键步骤。通过实例展示了主页、关于我们、产品展示、新闻动态及联系我们等页面的设计与实现，强调了合理布局、美观设计及用户体验的重要性。旨在为企业打造一个既专业又具吸引力的线上平台。
东方睿赢
59 7
土木林森
|
29天前
|
前端开发 JavaScript 搜索推荐
HTML与CSS在Web组件化中的核心作用及前端技术趋势
本文探讨了HTML与CSS在Web组件化中的核心作用及前端技术趋势。从结构定义、语义化到样式封装与布局控制，两者不仅提升了代码复用率和可维护性，还通过响应式设计、动态样式等技术增强了用户体验。面对兼容性、代码复杂度等挑战，文章提出了相应的解决策略，强调了持续创新的重要性，旨在构建高效、灵活的Web应用。
土木林森
37 6
龙大吉
|
29天前
|
存储 移动开发 前端开发
高效的 HTML 与 CSS 编写技巧，涵盖语义化标签、文档结构优化、CSS 预处理、模块化设计、选择器优化、CSS 变量、媒体查询等内容
本文深入探讨了高效的 HTML 与 CSS 编写技巧，涵盖语义化标签、文档结构优化、CSS 预处理、模块化设计、选择器优化、CSS 变量、媒体查询等内容，旨在提升开发效率、网站性能和用户体验。
龙大吉
45 5
土木林森
|
29天前
|
前端开发 JavaScript UED
在数字化时代，Web 应用性能优化尤为重要。本文探讨了CSS与HTML在提升Web性能中的关键作用及未来趋势
在数字化时代，Web 应用性能优化尤为重要。本文探讨了CSS与HTML在提升Web性能中的关键作用及未来趋势，包括样式表优化、DOM操作减少、图像优化等技术，并分析了电商网站的具体案例，强调了技术演进对Web性能的深远影响。
土木林森
38 5
LALA
|
1月前
|
移动开发 JavaScript 前端开发
html table+css实现可编辑表格的示例代码
html table+css实现可编辑表格的示例代码
LALA
63 12
温轻舟
|
1月前
|
前端开发 JavaScript
用HTML CSS JS打造企业级官网 —— 源码直接可用
必看！用HTML+CSS+JS打造企业级官网-源码直接可用，文章代码仅用于学习，禁止用于商业
温轻舟
143 1
二二*一一
|
1月前
|
前端开发
如何利用 HTML 和 CSS 实现椭圆形布局，并在椭圆形路径上渲染可点击座位？
html 的椭圆形布局实现
二二*一一
109 1
游客fz577umxdejsg
|
4月前
|
前端开发
2s 利用 HTML+css动画实现企业官网效果
2s 利用 HTML+css动画实现企业官网效果
游客fz577umxdejsg
92 2
游客fz577umxdejsg
|
4月前
HTML+CSS 实现通用的企业官网页面（记得收藏）
HTML+CSS 实现通用的企业官网页面（记得收藏）
游客fz577umxdejsg
92 2
aliyun8599273441-30642
|
2月前
|
前端开发 JavaScript 搜索推荐
打造个人博客网站：从零开始的HTML和CSS之旅
【9月更文挑战第32天】在这个数字化的时代，拥有一个个人博客不仅是展示自我的平台，也是技术交流的桥梁。本文将引导初学者理解并实现一个简单的个人博客网站的搭建，涵盖HTML的基础结构、CSS样式的美化技巧以及如何将两者结合来制作一个完整的网页。通过这篇文章，你将学会如何从零开始构建自己的网络空间，并在互联网世界留下你的足迹。
aliyun8599273441-30642
323 65

热门文章

最新文章

  • 1
    CSS滚动效果和视差滚动的原理、应用及其对用户体验的影响。从平滑滚动到元素跟随，再到滚动触发动画
  • 2
    jQuery和CSS3滑动展开菜单按钮插件
  • 3
    探讨了CSS媒体查询在移动端开发中的应用，介绍了媒体查询的基本概念、常见条件及其在响应式布局、导航菜单、图片优化和字体调整等方面的具体应用
  • 4
    页面滚动触发css3动画js插件
  • 5
    纸屑飘落生日蛋糕场景js+css3动画特效
  • 6
    纯CSS3+SVG实现的节日庆祝五彩纸屑动画效果源码
  • 7
    jQuery和CSS3精美翻页式电子时钟特效
  • 8
    Foundation CSS 可见性1
  • 9
    Foundation CSS 参考手册1
  • 10
    Foundation CSS 参考手册2
  • 1
    【HTML】——VSCode 基本使用入门和常见操作
    16
  • 2
    前端基础之HTML
    16
  • 3
    将html_table2结果转化为tibble的最佳实践
    34
  • 4
    利用 html_table 函数轻松获取网页中的表格数据
    34
  • 5
    HTML（HyperText Markup Language，超文本标记语言）
    62
  • 6
    HTML（HyperText Markup Language）和XML（Extensible Markup Language）
    47
  • 7
    html5 + Three.js 3D风雪封印在棱镜中的梅花鹿动效源码
    63
  • 8
    html5 canvas五彩碎纸屑飘落动画特效
    35
  • 9
    HTML5 3D地球仪可按经纬坐标定位特效
    31
  • 10
    HTML5实现人机对战的国际象棋AI版
    30

    • 相关课程

    更多
  • CSS 快速掌握
  • HTML 入门与实战
  • HTML基础入门学习
  • HTML5 新特性教程
  • 零基础学前端HTML+CSS
  • 前端开发CSS基础

    • 相关电子书

    更多
  • 零基础CSS入门教程
  • 天猫 HTML5 互动技术实践
  • 天猫HTML5互动技术实践

    • 相关实验场景

    更多
  • WordPress自助建站教程
  • 搭建微信小程序
  • 前端开发基础3：CSS3常见显示属性
  • Html5和Webpack3：Webpack5的常见用法
  • Html5和Webpack2：Webpack5打包JS和样式表
  • Html5和Webpack1：Webpack5打包工具介绍
    • 下一篇
    手把手教你白嫖阿里云服务器(免费领服务器)