web-HTML&CSS实战（仿极客学院界面）

最新推荐文章于 2020-02-29 19:20:43 发布

前端小窝

最新推荐文章于 2020-02-29 19:20:43 发布

阅读量259

点赞数 1

分类专栏： # HTML

本文链接：https://blog.csdn.net/weixin_44105459/article/details/102614315

版权

HTML 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

整体结构分为三部分：top标题、中间视频（img代替）、下部介绍。
这里只放HTML部分，其他放在github里一起了，暂时先不做优化，先学js部分。
https://github.com/4o4NotFoundd/HTML/tree/master/%E4%BB%BF%E6%9E%81%E5%AE%A2%E5%AD%A6%E9%99%A2
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo</title>
    <link rel="stylesheet" type="text/css" href="common.css">
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="w-1000">
<!--        w-1000放所有内容width=1000px-->
<!--    1111111111111111111111111111111111111111111111111111111  上   1111111111111111111111111111-->
    <div class="learn-title-nav">
          <!--  大标题-->
            <a href="#">所有课程</a>
            <a href="#">专题</a>
            <span>IOS</span>
    </div>
    <div class="learn-title-des learn-coures-banner-ios">
            <!--      小标题-->
            <div class="learn-title">天气预报应用开发-实战</div>
            <div class="learn-des">课程描述：了解HTML开发实战</div>
    </div>
    <div class="learn-video">
        <img src="./images/video.png" alt="" width="1000">
    </div>
<!--    111111111111111111111111111111111111111111111111111111111  中 111111111111111111111111-->
    <div class="learn-video-info">
<!--        视频界面中包含的信息-->
        <div class="left">
            <p><a href="#">下载全部课程源码</a> </p>
            <p><a href="#">卡顿点我</a></p>
        </div>
        <div class="right">
            <div class="rightnum">
                <a href="#">1</a>
                <a href="#">2</a>
                <a href="#">3</a>
                <a href="#">4</a>
                <a href="#">5</a>
            </div>
        </div>
    </div>
<!--    1111111111111111111111111111111111111111111111    下      11111111111111111111111111111-->
    <div class="right"><!--  问答部分实现-->
        <div class="list-question">
            <span class="bottomline">课程列表</span>
            <span>课程回答</span>
        </div>
        <div class="cf">
            <div class="list-content">
                <div class="lists">
                    <div class="question-title">
                        <a href="#">我希望我们能有更多的机会交流</a>
                        <div class="replynum">
                            <p>已解决：</p>
                            <div class="topbottom">
                                <div class="replynumtop">123neirong</div>
                                <div class="replynumbottom"></div>
                            </div>
                        </div>
                    </div>
                    <div class="reply-img-name-des">
                        <div class="reply-img">
                            <img src="image/topuxiang.jpg" width="302">
                        </div>
                        <div class="reply-name">
                            <span>iwen</span>
                            所有课程》ios路线图》基础知识》实力展示
                        </div>
                        <div class="reply-time"> 最后回答：5小时前</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>

在这里插入图片描述

前端小窝

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
web-HTML&CSS实战（仿极客学院界面）

整体结构分为三部分：top标题、中间视频（img代替）、下部介绍。这里只放HTML部分，其他放在github里一起了，暂时先不做优化，先学js部分。https://github.com/4o4NotFoundd/HTML/tree/master/%E4%BB%BF%E6%9E%81%E5%AE%A2%E5%AD%A6%E9%99%A2<!DOCTYPE html><ht...
复制链接

扫一扫

专栏目录