网页练习：学成在线网页制作

于 2024-03-06 13:05:08 发布
阅读量363 收藏 7
点赞数 7
文章标签： 前端 html css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_63342197/article/details/136502867
版权

学成在线网站，大部分a标签没设置，图片没进行替换，先自己写一下

具体效果如下：

代码如下：

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            background-color: #f3f5f7;
        }

        * {
            margin: 0;
            padding: 0;
        }

        li {
            list-style: none;
        }

        a {
            list-style: none;
            color: black;
            text-decoration: none;
        }

        .top {
            height: 101px;
            /* background-color: red; */

        }

        .box2 {
            background-image: url(banner2.png);
            height: 420px;
            background-color: aqua;
        }

        .box3 {
            width: 1200px;
            height: 60px;
            margin: 8px auto;
            background-color: #ffffff;
        }

        .box4 {
            width: 1204px;
            height: 595px;

            margin: 37px auto 0;

        }

        .box5 {
            width: 1209px;
            height: 433px;
            background-color: #ffffff;
            margin: 38px auto 0;

        }

        .box6 {
            width: 1205px;
            height: 433px;
            background-color: #ffffff;
            margin: 40px auto 0;
        }

        .box7 {
            width: 1206px;
            height: 309px;
            background-color: #ffffff;
            margin: 41px auto 0;
        }

        .box8 {
            width: 1204px;
            height: 310px;
            background-color: #ffffff;
            margin: 39px auto;
        }

        .box9 {
            height: 433px;
            background-color:#ffffff;
            margin: 40px auto 0;
        }

        /* .cebian {
        display:inline-block;
        position: absolute;
            width: 100px;
            height: 425px;
    
           margin-top: 1000px;
           background-color:  aquamarine;
        } */
        .top img {
            float: left;
            margin-top: 30px;
            margin-left: 170px;

        }

        .top .daohang {
            float: left;
            margin-left: 79px;
            margin-top: 30px;
        }

        .top .daohang li {
            display: inline-block;
            height: 42px;
            line-height: 42px;
            margin-left: 20px;
        }

        .top .daohang .shouye {
            border-bottom: #00a4ff solid;
            margin-left: 0px;
        }

        .top .sousuo {
            margin-left: 94px;
            margin-top: 30px;
            float: left;
            width: 412px;
            height: 40px;
            border: #00a4ff solid;
        }

        .top .sousuo li input {
            float: left;
            margin-left: 0;
            width: 362px;
            height: 38px;
            border: transparent;
        }

        .top .sousuo li img {
            float: top;
            margin-top: 0;
            margin-left: 0;
            border: transparent;
        }

        .top .xinxi {
            float: left;
            margin-top: 40px;
            margin-left: 30px;
            width: 118px;
            height: 33px;
        }

        .top .xinxi img {
            margin-left: 0;
            margin-top: 0;
        }

        .box2 .daohanglan {
            float: left;
            background-color: #13024b;
            color: aliceblue;
            background: rgba(red, green, blue, 0.5);
            margin-left: 170px;
            width: 190px;
            height: 420px;
            overflow: hidden;
        }

        .box2 .daohanglan li {
            text-indent: 1em;
            height: 40px;
            line-height: 40px;
        }

        .box2 .daohanglan .diyige {
            margin-top: 32px;
        }

        .box2 .youbiandaohang {
            background-color: #ffffff;
            float: right;
            width: 228px;
            height: 320px;
            margin-right: 180px;

        }

        .box2 .youbiandaohang .ge1 {
            background-color: #00a4ff;
            color: white;
            text-align: center;
            height: 48px;
            line-height: 48px;
        }

        .box2 .youbiandaohang .ge2 {
            text-align: left;
            height: 51px;
            width: 200px;
            border-bottom: #efefef solid;
            margin: 19px 46px 12px 15px;

        }

        .box2 .youbiandaohang .ge3 {
            text-align: left;
            height: 51px;
            width: 200px;
            border-bottom: #efefef solid;
            margin: 0px 46px 12px 15px;

        }

        .box2 .youbiandaohang .ge4 {
            text-align: left;
            height: 51px;
            width: 200px;
            border-bottom: #efefef solid;
            margin: 0px 46px 12px 15px;

        }

        .box2 .youbiandaohang .ge5 {
            text-align: center;
            color: #00a4ff;
            border: #00a4ff solid;
            height: 41px;
            width: 200px;
            margin: 0 auto;
            line-height: 41px;

        }

        .box2 .youbiandaohang .xiaodian {
            font-size: 12px;
            color: #b1b1b1;
        }

        .box3 .zhongjianlan li {
            display: inline-block;
            width: 100px;
            margin: 18px 0;
            text-align: center;
            border-right: #b1b1b1 solid;
        }

        .box3 .zhongjianlan .zhongjianlan_end {
            color: #00a4ff;
            float: right;
            margin-right: 20px;
            border: transparent;
        }

        .box4 .jingpintuijian li {
            float: left;
            width: 228px;
            height: 270px;
            margin-left: 15px;
            margin-top: 15px;
            background-color: #ffffff;

        }

        .box4 .jingpintuijian h4 {
            margin-bottom: 6px;

        }

        .box4 .jingpintuijian li img {
            width: 100%;
            height: 155px;


        }

        .box4 .jingpintuijian .diyige1 {
            margin-left: 0px;
        }

        .box4 .jingpintuijian li p {
            width: 184px;
            height: 32px;
            margin: 25px 20px 20px 24px;


        }

        .box4 .jingpintuijian li h6 {
            width: 184px;
            height: 32px;
            margin: 0 0 0 25px;


        }

        .box5 .leftkuai {
            float: left;

        }

        .box5 .dinghang li {
            display: inline-block;
            height: 41px;
            margin-left: 65px;
        }

        .box5 .dinghang .remen {
            margin-left: 352px;
        }

        .box5 .dinghang .diyigehaha {
            margin-left: 0px;
        }

        .box5 .dinghang .chakanquanbu {
            margin-left: 352px;
        }

        .box5 .right_topkuai {
            float: right;
            margin-bottom: 22px;
        }

        .box5 .right-bottom {
            float: right;
            width: 957px;

        }

        .box5 .right-bottom li {
            display: inline-block;
            width: 228px;
            height: 270px;
            margin-left: 11px;
        }

        .box5 .right-bottom li img {
            width: 100%;
            height: 154px;
        }

        .box5 .right-bottom .one {
            margin-left: 0;

        }

        .box5 .right-bottom li p {
            width: 184px;
            height: 32px;
            margin: 25px 20px 20px 24px;


        }

        .box5 .right-bottom li h6 {
            width: 184px;
            height: 32px;
            margin: 0 0 0 25px;


        }

        .box6 .leftkuai1 {
            float: left;

        }

        .box6 .dinghang1 li {
            display: inline-block;
            height: 41px;
            margin-left: 65px;
        }

        .box6 .dinghang1 .remen1 {
            margin-left: 352px;
        }

        .box6 .dinghang1 .diyigehaha1 {
            margin-left: 0px;
        }

        .box6 .dinghang1 .chakanquanbu1 {
            margin-left: 352px;
        }

        .box6 .right_topkuai1 {
            float: right;
            margin-bottom: 22px;
        }

        .box6 .right-bottom1 {
            float: right;
            width: 957px;

        }

        .box6 .right-bottom1 li {
            display: inline-block;
            width: 228px;
            height: 270px;
            margin-left: 11px;
        }

        .box6 .right-bottom1 li img {
            width: 100%;
            height: 154px;
        }

        .box6 .right-bottom1 .one1 {
            margin-left: 0;

        }

        .box6 .right-bottom1 li p {
            width: 184px;
            height: 32px;
            margin: 25px 20px 20px 24px;


        }

        .box6 .right-bottom1 li h6 {
            width: 184px;
            height: 32px;
            margin: 0 0 0 25px;


        }

        .box7 .changkuai li {
            float: left;
            width: 228px;
            height: 270px;
            margin-left: 16.5px;
        }

        .box7 .changkuai .diyi {

            margin-left: 0px;

        }

        .box7 .changkuai li img {
            width: 100%;
            height: 155px;
        }

        .box7 .changkuai li p {
            width: 184px;
            height: 32px;
            margin: 25px 20px 20px 24px;
        }

        .box7 .changkuai li h6 {
            width: 184px;
            height: 32px;
            margin: 0 0 0 25px;

        }

        .box7 .dinghang11 li {
            display: inline-block;
            height: 41px;
            margin-left: 65px;
        }

        .box7 .dinghang11 .remen11 {
            margin-left: 352px;
        }

        .box7 .dinghang11 .diyigehaha11 {
            margin-left: 0px;
        }

        .box7 .dinghang11 .chakanquanbu11 {
            margin-left: 352px;
        }

        .box8 .changkuai111 li {
            float: left;
            width: 228px;
            height: 270px;
            margin-left: 16px;
        }

        .box8 .changkuai111 .diyi111 {

            margin-left: 0px;

        }

        .box8 .changkuai111 li img {
            width: 100%;
            height: 155px;
        }

        .box8 .changkuai111 li p {
            width: 184px;
            height: 32px;
            margin: 25px 20px 20px 24px;
        }

        .box8 .changkuai111 li h6 {
            width: 184px;
            height: 32px;
            margin: 0 0 0 25px;

        }

        .box8 .dinghang111 li {
            display: inline-block;
            height: 41px;
            margin-left: 65px;
        }

        .box8 .dinghang111 .remen111 {
            margin-left: 352px;
        }

        .box8 .dinghang111 .diyigehaha111 {
            margin-left: 0px;
        }

        .box8 .dinghang111 .chakanquanbu111 {
            margin-left: 352px;
        }

        .box9 .zuoceneirong {
            float: left;
            margin-left: 150px;
            margin-top: 33px;
        }

        .box9 .zuoceneirong li img {

            margin-bottom: 25px;
        }

        .box9 .zuoceneirong .xiazai {
            width: 120px;
            height: 36px;
            margin-top: 15px;
            text-align: center;
            line-height: 36px;
            border: #00a4ff solid;
        }
        .box9 .hezuo,
        .you,
        .zhong {
            float: right;
            margin-top: 33px;
            margin-right: 50px;
          
        }
        .box9 ul li {
              margin-bottom: 5px;
        }
        .box9 .hezuo {
            margin-right: 200px;
        }
        .box9 ul .a12 {
            width: 80px;
            height: 17px;
            margin-bottom: 14px;
        }
    </style>
</head>

<body>
    <div class="cebian">

    </div>
    <div class="top">
        <img src="xczx.png">
        <ul class="daohang">
            <li class="shouye"><a href="#">首页</a></li>
            <li><a href="#">课程</a></li>
            <li><a href="#">职业规划</a></li>
        </ul>
        <ul class="sousuo">
            <li>
                <input type="text">
                <img src="fa-search.png">
            </li>
        </ul>
        <ul class="xinxi">
            <img src="登录状态.png" ; </ul>
    </div>
    <div class="box2">
        <ul class="daohanglan">
            <li class="diyige">前端开发</li>
            <li>后端开发</li>
            <li>移动开发</li>
            <li>人工智能</li>
            <li>商业预测</li>
            <li>云计算&大数据</li>
            <li>运维&从测试</li>
            <li>UI设计</li>
            <li>产品</li>
        </ul>
        <ul class="youbiandaohang">
            <li class="ge1">我的课程表</li>
            <li class="ge2">
                继续学习 程序语言设计<br>
                <a href="#" class="xiaodian">正在学习-使用对象</a>
            </li>
            <li class="ge3">
                继续学习 程序语言设计<br>

                <a href="#" class="xiaodian">正在学习-使用对象</a>
            </li>
            <li class="ge4">
                继续学习 程序语言设计<br>
                <a href="#" class="xiaodian">正在学习-使用对象</a>
            </li>
            <li class="ge5">
                全部课程
            </li>
        </ul>
    </div>
    <div class="box3">
        <ul class="zhongjianlan">
            <li>mysql</li>
            <li>mysql</li>
            <li>mysql</li>
            <li>mysql</li>
            <li>mysql</li>
            <li>mysql</li>
            <li>mysql</li>
            <li class="zhongjianlan_end">修改喜好</li>
        </ul>

    </div>
    <div class="box4">
        <ul class="jingpintuijian">
            <h4>精品推荐</h4>
            <li class="diyige1"><img src="Snipaste_2024-03-02_17-17-38.png" alt="">
                <p>Androld 网络图片加载框架详解</p>
                <h6>高级·1125人在学习</h6>
            </li>
            <li><img src="Snipaste_2024-03-02_17-17-38.png" alt="">
                <p>Androld 网络图片加载框架详解</p>
                <h6>高级·1125人在学习</h6>
            </li>
            <li><img src="Snipaste_2024-03-02_17-17-38.png" alt="">
                <p>Androld 网络图片加载框架详解</p>
                <h6>高级·1125人在学习</h6>
            </li>
            <li><img src="Snipaste_2024-03-02_17-17-38.png" alt="">
                <p>Androld 网络图片加载框架详解</p>
                <h6>高级·1125人在学习</h6>
            </li>
            <li><img src="Snipaste_2024-03-02_17-17-38.png" alt="">
                <p>Androld 网络图片加载框架详解</p>
                <h6>高级·1125人在学习</h6>
            </li>
            <li class="diyige1"><img src="Snipaste_2024-03-02_17-17-38.png" alt="">
                <p>Androld 网络图片加载框架详解</p>
                <h6>高级·1125人在学习</h6>
            </li>
            <li><img src="Snipaste_2024-03-02_17-17-38.png" alt="">
                <p>Androld 网络图片加载框架详解</p>
                <h6>高级·1125人在学习</h6>
            </li>
            <li><img src="Snipaste_2024-03-02_17-17-38.png" alt="">
                <p>Androld 网络图片加载框架详解</p>
                <h6>高级·1125人在学习</h6>
            </li>
            <li><img src="Snipaste_2024-03-02_17-17-38.png" alt="">
                <p>Androld 网络图片加载框架详解</p>
                <h6>高级·1125人在学习</h6>
            </li>
            <li><img src="Snipaste_2024-03-02_17-17-38.png" alt="">
                <p>Androld 网络图片加载框架详解</p>
                <h6>高级·1125人在学习</h6>
            </li>
        </ul>
    </div>
    <div class="box5">
        <ul class="dinghang">
            <li class="diyigehaha">编程入门</li>
            <li class="remen">热门</li>
            <li>初级</li>
            <li>中级</li>
            <li>高级</li>
            <li class="chakanquanbu">查看全部</li>
        </ul>
        <div class="leftkuai">
            <img src="PHP入门： 基础语法到实际运用      零基础入门：语法与界      进阶：网络与数据缓存      界面到数据存储_.png" alt="">
        </div>
        <div class="right_topkuai">
            <img src="图层 155.png" alt="">
        </div>
        <ul class="right-bottom">
            <li class="one"><img src="Snipaste_2024-03-02_17-17-38.png" alt="">
                <p>Androld 网络图片加载框架详解</p>
                <h6>高级·1125人在学习</h6>
            </li>
            <li><img src="Snipaste_2024-03-02_17-17-38.png" alt="">
                <p>Androld 网络图片加载框架详解</p>
                <h6>高级·1125人在学习</h6>
            </li>
            <li><img src="Snipaste_2024-03-02_17-17-38.png" alt="">
                <p>Androld 网络图片加载框架详解</p>
                <h6>高级·1125人在学习</h6>
            </li>
            <li><img src="Snipaste_2024-03-02_17-17-38.png" alt="">
                <p>Androld 网络图片加载框架详解</p>
                <h6>高级·1125人在学习</h6>
            </li>
        </ul>
    </div>
    <div class="box6">
        <ul class="dinghang1">
            <li class="diyigehaha1">编程入门</li>
            <li class="remen1">热门</li>
            <li>初级</li>
            <li>中级</li>
            <li>高级</li>
            <li class="chakanquanbu1">查看全部</li>
        </ul>
        <div class="leftkuai1">
            <img src="PHP入门： 基础语法到实际运用      零基础入门：语法与界      进阶：网络与数据缓存      界面到数据存储_.png" alt="">
        </div>
        <div class="right_topkuai1">
            <img src="图层 155.png" alt="">
        </div>
        <ul class="right-bottom1">
            <li class="one1"><img src="Snipaste_2024-03-02_17-17-38.png" alt="">
                <p>Androld 网络图片加载框架详解</p>
                <h6>高级·1125人在学习</h6>
            </li>
            <li><img src="Snipaste_2024-03-02_17-17-38.png" alt="">
                <p>Androld 网络图片加载框架详解</p>
                <h6>高级·1125人在学习</h6>
            </li>
            <li><img src="Snipaste_2024-03-02_17-17-38.png" alt="">
                <p>Androld 网络图片加载框架详解</p>
                <h6>高级·1125人在学习</h6>
            </li>
            <li><img src="Snipaste_2024-03-02_17-17-38.png" alt="">
                <p>Androld 网络图片加载框架详解</p>
                <h6>高级·1125人在学习</h6>
            </li>
        </ul>
    </div>
    <div class="box7">
        <ul class="dinghang11">
            <li class="diyigehaha11">编程入门</li>
            <li class="remen11">热门</li>
            <li>初级</li>
            <li>中级</li>
            <li>高级</li>
            <li class="chakanquanbu11">查看全部</li>
        </ul>
        <ul class="changkuai">
            <li class="diyi"><img src="Snipaste_2024-03-02_17-17-38.png" alt="">
                <p>Androld 网络图片加载框架详解</p>
                <h6>高级·1125人在学习</h6>
            </li>
            <li><img src="Snipaste_2024-03-02_17-17-38.png" alt="">
                <p>Androld 网络图片加载框架详解</p>
                <h6>高级·1125人在学习</h6>
            </li>
            <li><img src="Snipaste_2024-03-02_17-17-38.png" alt="">
                <p>Androld 网络图片加载框架详解</p>
                <h6>高级·1125人在学习</h6>
            </li>
            <li><img src="Snipaste_2024-03-02_17-17-38.png" alt="">
                <p>Androld 网络图片加载框架详解</p>
                <h6>高级·1125人在学习</h6>
            </li>
            <li><img src="Snipaste_2024-03-02_17-17-38.png" alt="">
                <p>Androld 网络图片加载框架详解</p>
                <h6>高级·1125人在学习</h6>
            </li>
        </ul>
    </div>
    <div class="box8">
        <ul class="dinghang111">
            <li class="diyigehaha111">编程入门</li>
            <li class="remen111">热门</li>
            <li>初级</li>
            <li>中级</li>
            <li>高级</li>
            <li class="chakanquanbu111">查看全部</li>
        </ul>
        <ul class="changkuai111">
            <li class="diyi111"><img src="Snipaste_2024-03-02_17-17-38.png" alt="">
                <p>Androld 网络图片加载框架详解</p>
                <h6>高级·1125人在学习</h6>
            </li>
            <li><img src="Snipaste_2024-03-02_17-17-38.png" alt="">
                <p>Androld 网络图片加载框架详解</p>
                <h6>高级·1125人在学习</h6>
            </li>
            <li><img src="Snipaste_2024-03-02_17-17-38.png" alt="">
                <p>Androld 网络图片加载框架详解</p>
                <h6>高级·1125人在学习</h6>
            </li>
            <li><img src="Snipaste_2024-03-02_17-17-38.png" alt="">
                <p>Androld 网络图片加载框架详解</p>
                <h6>高级·1125人在学习</h6>
            </li>
            <li><img src="Snipaste_2024-03-02_17-17-38.png" alt="">
                <p>Androld 网络图片加载框架详解</p>
                <h6>高级·1125人在学习</h6>
            </li>
        </ul>
    </div>
    <div class="box9">
        <ul class="zuoceneirong">
            <li><img src="xczx.png" alt=""></li>
            <li>学成在线致力于普及中国最好的教育它与中国一流大学和机构合作提供在线课程。</li>
            <li>C2017年XTCG Ino.保留所有权利。-沪ICP备15025210</li>
            <li class="xiazai">
                下载APP
            </li>
        </ul>
        <ul class="hezuo">
            <li class="a12">合作伙伴</li>
            <li>合作机构</li>
            <li>合作导师</li>
        </ul>
        <ul class="zhong">
            <li class="a12">关于学成网</li>
            <li>关于</li>
            <li>管理团队</li>
            <li>工作机会</li>
            <li>客户服务</li>
            <li>帮助</li>
        </ul>
        <ul class="you">
            <li class="a12">新手指南</li>
            <li>如何注册</li>
            <li>如何选课</li>
            <li>如何拿到毕业证</li>
            <li>学分是什么</li>
            <li>考试未通过怎么办</li>
        
        </ul>
    </div>

</body>

</html>

COLDEHY
关注
学成在线网页制作
qq_48222936的博客
04-10 809
对于菜鸡的我来说，磨蹭磨蹭一天把学成在线网页制作完了，中途遇到很多烦心事，不过越做越顺利。 这个是例图，B站黑马pink老师讲的案例，他只讲了前半部分，后半部分需要自己做，如果新入坑的小伙伴想要下图的就拿去吧。 这个案例大量使用了浮动(float:left/right)很好的锻炼了对网页整体的构造。浮动就是将内容脱离文档流，使内容漂浮起来，影响布局，不过要值得注意的是浮动后容器没有指定高度则会变为0变为一条线，这时就必须要清除浮动。 在这里因为不知道有多少个课程板块，所以不能给容器添加高.
Web前端—网页制作（以“学成在线”为例）
放下华子我只抽RuiKe5的博客
11-05 2285
Web前端是网页制作的重要组成部分，它负责将设计师的设计稿转化为实际的网页。以“学成在线”为例，Web前端需要使用HTML、CSS和JavaScript等技术来构建网页结构、样式和交互功能。通过学习Web前端，你可以掌握这些技能，为成为一名优秀的前端工程师打下坚实的基础。
简单制作一个小网站
m0_55684960的博客
12-02 325
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>学成在线-不是所有的网站都叫学成在线</title> <link rel="stylesheet" href="style.css"> </head> <body> <!-- header头部模块开始 --> <div class=".
css-学成在线页面
xiaoyuyully的博客
02-20 269
学成在线页面 app.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
学成在线页面制作
LIJIWEI0611的博客
08-29 863
1.1 前期准备素材 学成在线PSD源文件 开发工具 = PS（切图） + sublime（代码） + chrome（测试） 1.2 前期准备工作 欲先善其事，必先利其器。 先把我们的前期准备工作做好， 我们本次采取结构与样式相分离思想。 创建 study 目录文件夹 (用于存放我们这个页面的相关内容) study目录内新建images 文件夹 用于保存图片。 新建index.html 首页html 文件（以后我们的网站首页统一规定为index.html)
前端第二篇-学成在线首页（作品）
DVchengxuyuan的博客
10-13 1370
学成在线页面制作 页面展示： 学成在线，是典型的企业级网站。 学习学成网的目的，是为了整体感知企业级网站布局流程，带着大家复习以前的知识 1.前期准备素材 学成在线PSD源文件 开发工具 = PS（切图） + sublime（代码） + chrome（测试） 2.前期准备工作 先把我们的前期准备工作做好， 我们本次采取结构与样式相分离思想。 创建 study 目录文件夹 (用于存放我们这个页面的相关内容)。 用vscode打开study目录文件夹. study 目
HTML黑马 学成在线网页制作.zip
02-25
"HTML黑马 学成在线网页制作.zip"这个压缩包显然包含了学习这两种语言的相关资源，让我们来详细了解一下HTML和CSS以及它们如何协同工作创建出美观且功能丰富的网页。 HTML，全称HyperText Markup Language，即超...
学成网在线PSD素材 四个文件
06-10
本文将详细讨论“学成网在线PSD素材 四个文件”这一资源，以及它如何帮助前端开发者进行CSS切图练习。 首先，PSD文件是Adobe Photoshop的原生格式，用于保存具有完整图层、蒙版、通道、文字等信息的图像设计。在这...
js练习3：制作课工场论坛发贴.zip
08-27
在本实践项目“js练习3：制作课工场论坛发贴”中，我们将深入探讨JavaScript在Web开发中的应用，特别是如何使用JavaScript实现一个论坛的发帖功能。这个练习旨在提升你的JavaScript编程技能，理解DOM操作、事件处理...
学成在线**静态网页项目**前端html&css&flex
最新发布
03-12
运用了html，css，flex布局等知识，适用于前端初学者练习静态网页的制作，以便于熟练掌握前端基础知识的运用。这个项目还可以帮助初学者理解网页布局和样式设计的基本原则，同时提供了一个实践的机会来加强对HTML和...
学成在线网站首页制作
07-31
使用HTML和CSS完成的学成在线网站首页案例，压缩包中附有完成制作所需要的图片素材，代码大概1000多行，适合初学者练手。
学成在线img.zip
04-22
学成在线首页的各个图片，从photoshop处切片而出。仅仅只有首页的图片，内附学成在线首页的jpg图片，
前端页面练习：学成在线首页
11-12
个人练习的一个静态页面，只有HTML和CSS，内容和逻辑较为简单，素材来源于黑马的pink老师，算是自己跟着做好的第一个项目
学成在线项目实训内容
qq_50651123的博客
06-09 355
学成在线项目实训内容 效果图： 使用的工具是HBuilder X 左边的目录 html内容： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-
学成在线
小欠的博客
02-11 8054
学成在线网站代码及效果图
CSS学习——案例：学成在线网页
2301_79729136的博客
11-25 1393
网页布局
学成在线网页制作（详细）
热门推荐
egg_er的博客
10-25 2万+
项目分析 如图： 分为四个模块： header头部模块 精品推荐模块 编程入门模块 数据分析师模块 机器学习模块 前端工程师开发模块 footer模块 如果仔细观察的话，第2，5，6属于一个模块，样式结构相同。同样的3，4模块相同，这样只要做出一个另外一个复制黏贴即可。 详细制作 先确定版心，版心的宽度，然后给他封装成类，这样方便后面每个模块的父盒子调用。 初始化一些值： * { margin: 0; padding: 0; } .ul { list-style: none;
学习制作网页——学成在线首页
kuiini的博客
12-19 1115
一、准备工作 1、项目目录 网站根目录是指存放网站的第一层文件夹，内部包含当前网站的所有素材，包含 HTML、CSS、图片、JavaScript等等。 建立文件夹： study images 文件夹：存放固定使用1的图片素材，例如：logo、样式修饰图等等 uploads 文件夹：存放非固定使用的图片素材，例如：商品图、宣传图需要上传的图片 css 文件夹：存放 CSS 文件（link 标签引入） base.css：基础公共样式，例如：清除默认样式、设置网页基本样式 index.css：首页 C
学成在线--10.页面预览
fanxindong0620的博客
03-18 439
文章目录一.需求分析二. 搭建环境1.在cms服务中集成freemarker：2.在application.yml配置freemarker三.Service四.Controller五.页面预览测试-- 配置Nginx代理六.页面预览测试-- 添加“页面预览”链接 一.需求分析 页面在发布前增加页面预览的步骤，方便用户检查页面内容是否正确。页面预览的流程如下： 1）用户进入cms前端，点击“页面预...
南京财经大学网页设计与制作练习及答案
"南京财经大学成人高等教育网页设计与制作单元练习5，包含了选择题、判断题、填空题和简答题，附有答案，适用于学习和复习网页设计知识。" 在网页设计领域，本练习涉及了多个核心概念，以下是部分知识点的详细说明...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值