项目实战-1 学成在线

最新推荐文章于 2021-09-12 23:27:31 发布

pandaHe_Status

最新推荐文章于 2021-09-12 23:27:31 发布

阅读量244

点赞数

分类专栏：前端文章标签： html css

本文链接：https://blog.csdn.net/weixin_43321726/article/details/104853869

版权

前端专栏收录该内容

101 篇文章 1 订阅

订阅专栏

今天对着网页敲了一天,～～～～～～～成果如下！！！！！
⚠️老规矩照片还是要自己加。
在这里插入图片描述
index.html

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>学成在线教育平台-不是每个网站都叫学成在线</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div class="bigbox">
        <!-- 顶部 -->
        <div class="top">
            <div><img src="images/logo.png" alt=""></div>
            <div><a href="#">首页</a></div>
            <div><a href="#">课程</a></div>
            <div><a href="#">职业规划</a></div>
            <!-- 输入框 -->
            <div class="search" id="search">
                <div><input type="search" name="search" value="请输入关键字"></div>
                <button></button>
            </div>
            <!-- 个人中心 -->
            <div id="man">个人中心</div>
            <!-- 铃铛图片 -->
            <div id="ld"><img src="images/ld.png" alt=""></div>
            <!-- 人头像 -->
            <div id="ren"><img src="images/pic.png" alt=""></div>
        </div>


        <!-- 横幅 -->
        <div class="banner">
            <!-- bianlan边栏 -->
            <div class="bianlan">
                <a href="#">前端开发<span>></span></a>
                <a href="#">前端开发<span>></span></a>
                <a href="#">前端开发<span>></span></a>
                <a href="#">前端开发<span>></span></a>
                <a href="#">前端开发<span>></span></a>
                <a href="#">前端开发<span>></span></a>
                <a href="#">前端开发<span>></span></a>
                <a href="#">前端开发<span>></span></a>
                <a href="#">前端开发<span>></span></a>
                <a href="#">前端开发<span>></span></a>
            </div>
            <ul class="timebook">
                <!-- timebook课程表 -->
                <h4>我的课程表</h4>
                <li id="xian">继续学习 编程语言设计
                    <p>正在学习-面向对象</p>
                </li>

                <li>继续学习 编程语言设计
                    <p>正在学习-面向对象</p>
                    <p></p>
                </li>

                <li style="border: 0px;">继续学习 编程语言设计
                    <p>正在学习-面向对象</p>

                </li>

                <a href="#" id="buyiyang">全部课程</a>
            </ul>

        </div>

        <div>

        </div>
    </div>

    <!-- 推荐栏 -->
    <div class="rec"></div>
    <!-- 推荐栏列表1 -->
    <div class="rec-l-one"></div>
    <!-- 推荐栏列表2 -->
    <div class="rec-l-two"></div>

    <!-- 底部 -->
    <div class="bottom"></div>

    </div>
</body>

</html>

style.css

* {
    margin: 0;
    padding: 0;
}


/* 整个屏幕 */

body {
    background-color: #f3f5f7;
}


/* ----------------顶部(nav)-----------------*/

.top {
    width: 100%;
    height: 100px;
}


/* 顶部所有div样式 */

.top>div {
    float: left;
    padding: 25px 0 0px;
    margin: 0 40px 0 0;
    height: 70px;
}


/* 链接 */

.top>div a {
    display: block;
    font-size: 18px;
    height: 44px;
    color: #050505;
    text-decoration: none;
    text-align: center;
    margin: 7px 0;
    padding: 0 10px;
}


/* 鼠标经过的时候变色 */

.top a:hover {
    color: red;
    border-bottom: 2px solid #00a4ff;
}


/* 输入框样式 */

#search {
    margin-left: 80px;
}

.search input {
    font-size: 6px;
    color: gray;
    float: left;
    width: 361px;
    height: 40px;
    border: 1px solid #00a4ff;
}


/* 输入框点击按钮 */

.search button {
    width: 49px;
    height: 40px;
    float: right;
    background: url(images/search-button.png) no-repeat;
    margin-top: -40px;
    margin-right: -46px;
    border: 1px solid #00a4ff;
}


/* 个人中心 */

#man {
    height: 21px;
    width: 48px;
    font-size: 12px;
    margin-left: 47px;
    margin-top: 12px;
}


/* 铃铛 */

#ld {
    height: 20px;
    margin-left: -10px;
    margin-top: 12px;
}


/* 人头像 */

#ren {
    height: 9px;
    width: 8px;
    margin-left: -7px;
    margin-top: 3px;
    border-radius: 0px;
}


/* --------------顶部到此--------------- */


/* --------------横幅------------------  */


/* 背景图 */

.banner {
    width: 1265px;
    height: 420px;
    background: url(images/banner.jpg);
    background-color: #fff;
}


/* 边栏 */

.bianlan {
    float: left;
    width: 190px;
    height: 420px;
    background-color: #14024b;
}

.bianlan a {
    display: block;
    text-decoration: none;
    font-size: 14px;
    color: #fff;
    padding-top: 20px;
    text-indent: 2em;
}


/* 边栏鼠标经过变色 */

.bianlan a:hover {
    color: #00b4ff;
}

.bianlan a span {
    float: right;
    margin-right: 10px;
}


/* 课程表 */

.timebook {
    float: right;
    width: 228px;
    height: 300px;
    background-color: #fff;
}

.timebook h4 {
    font-size: 17.5px;
    width: 228px;
    height: 50px;
    color: #fff;
    background-color: #9bcaea;
    text-align: center;
    line-height: 50px;
}

.timebook li {
    font-size: 16px;
    width: 228px;
    height: 50px;
    text-align: center;
    list-style: none;
    margin-top: 15px;
    border-bottom: 1px solid gray;
}

.timebook li p {
    font-size: 10px;
    color: gray;
    text-align: center;
    text-indent: -6.2em;
}


/* 框 */

#buyiyang {
    display: block;
    width: 188px;
    height: 40px;
    border: 1px solid #2288f6;
    line-height: 40px;
    text-align: center;
    margin: 0 auto;
    text-decoration: none;
}


/* 鼠标经过变色 */

#buyiyang:hover {
    background-color: #2288f6;
}


/* ---------横幅到此 ----------*/

在这里插入图片描述
持续更新中～～～

pandaHe_Status

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
项目实战-1 学成在线

今天对着网页敲了一天,～～～～～～～成果如下！！！！！⚠️老规矩照片还是要自己加。index.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-wi...
复制链接

扫一扫

专栏目录