Web项目————学成在线

最新推荐文章于 2025-04-16 10:51:39 发布

原创最新推荐文章于 2025-04-16 10:51:39 发布

· 1.5k 阅读

15 ·

版权

文章标签：

#前端 #html #css3

前端专栏收录该内容

1 篇文章

订阅专栏

项目介绍

根据学习的前端html+css等相关技术实现一个简易的网页制作

参考资源----黑马程序员

项目展示

代码展示

index.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">
    <title>学成在线</title>
    <link rel="stylesheet" href="./css/index.css">
</head>
<body>
    <div class="w">
            <!-- 网站的首页，所有的网站的首页都叫index.html(服务器找首页就是找index.html) -->
        <!-- 网页的第一部分---头 -->
        <div class="header">
            <div class="logo">  
                <img src="../study/images/学成在线.png" alt="">
            </div>
            <div class="wrapper">   
                <ul>
                    <li><a href="#">首页</a></li>
                    <li><a href="#">课程</a></li>
                    <li><a href="#">职业规划</a></li>
                </ul>
            </div>
            <!-- 搜索框 -->
            <div class="research">
                <input type="text" value="请输入关键字">
                <img src="../study/images/btn.png" alt="">
            </div>
            <div class="user">
                <img src="../study/images/user.png" alt="">
                <div class="username">小明</div>
            </div>

        </div>
    </div>

    <!-- 网页的第二部分--- 颔-->
    <div class="chin">
        <div class="m">
            <div class="left">
                <ul>
                    <li><a href="#">后端开发<span>&gt;</span></a></li>
                    <li><a href="#">后端开发<span>&gt;</span></a></li>
                    <li><a href="#">人工智能<span>&gt;</span></a></li>
                    <li><a href="#">商业预测<span>&gt;</span></a></li>
                    <li><a href="#">云计算&大数据<span>&gt;</span></a></li>
                    <li><a href="#">运维&从测试<span>&gt;</span></a></li>
                    <li><a href="#">UI设计<span>&gt;</span></a></li>
                    <li><a href="#">产品<span>&gt;</span></a></li>
                </ul>
            </div>

            <div class="right">
                <h2>我的课程表</h2>
                <div class="bd">
                    <ul>
                        <li>
                            <h4>继续学习-程序设计语言</h4>
                            <p>正在学习-使用对象</p>
                        </li>
                        <li>
                            <h4>继续学习-程序设计语言</h4>
                            <p>正在学习-使用函数</p>
                        </li>
                        <li>
                            <h4>继续学习-程序设计语言</h4>
                            <p>正在学习-使用指针</p>
                        </li>
                    </ul>
                    <button style="width:100px;height: 35px"><a href="#">全部课程</a></button>
                </div>
            </div>
        </div>
     </div>
        

    <!-- 网页的第三部分---颈-->
   <div class="w">
        <div class="neck">
            <div class="center">
                <ul>
                    <li><a href="https://www.baidu.com">精品推荐</a></li>
                    <li><a href="#">JQuery</a></li>
                    <li><a href="#">Spark</a></li>
                    <li><a href="#">MySQL</a></li>
                    <li><a href="#">JavaWeb</a></li>
                    <li><a href="#">PythonWeb</a></li>
                </ul>
                <div class="centerright"><a href="#">修改兴趣</a></div>
            </div>

            <div class="goods">
                <div class="box-hd">
                    <h3>精品推荐</h3>
                   <a href="#">查看全部</a>
                </div><br>


                <div class="box-bd">
                    <ul>
                        <!-- 将每个盒子的大小控制,使其一行能够刚好装下5个 -->
                        <li>
                            <div class="box-td">
                                <img src="../study/images/pic.png" alt="" style="width: 200px; height: 130px">
                                <h4>"Think PHP 5.0 博客系统实战项目演练</h4>
                                <p><span>高级 </span>· 1125人在学习</p>
                            </div>

                        </li>
                        <li>
                            <div class="box-td">
                                <img src="../study/images/001.png" alt="" style="width: 200px; height: 130px">
                                <h4>""Android 网络图片加载框架详解 </h4>
                                <p><span>高级 </span>· 7564人在学习</p>
                            </div>

                        </li>
                        <li>
                            <div class="box-td">
                                <img src="../study/images/003.png" alt="" style="width: 200px; height: 130px">
                                <h4>"Angular 2 最新框架+主流技术+项目实战</h4>
                                <p><span>高级 </span>· 1545人在学习</p>
                            </div>

                        </li>
                        <li>
                            <div class="box-td">
                                <img src="../study/images/004.png" alt="" style="width: 200px; height: 130px">
                                <h4>"Android Hybrid APP开发实战 H5+原生</h4>
                                <p><span>高级 </span>· 10002人在学习</p>
                            </div>

                        </li>
                        <li>
                            <div class="box-td">
                                <img src="../study/images/005.png" alt="" style="width: 200px; height: 130px">
                                <h4>"Android Hybrid APP开发实战 H5+原生</h4>
                                <p><span>高级 </span>· 9898人在学习</p>
                            </div>

                        </li>
                       
                        <li>
                            <div class="box-td">
                                <img src="../study/images/pic.png" alt="" style="width: 200px; height: 130px">
                                <h4>"Think PHP 5.0 博客系统实战项目演练</h4>
                                <p><span>高级 </span>· 66767人在学习</p>
                            </div>

                        </li>
                        <li>
                            <div class="box-td">
                                <img src="../study/images/001.png" alt="" style="width: 200px; height: 130px">
                                <h4>""Android 网络图片加载框架详解 </h4>
                                <p><span>高级 </span>· 23343人在学习</p>
                            </div>

                        </li>
                        <li>
                            <div class="box-td">
                                <img src="../study/images/003.png" alt="" style="width: 200px; height: 130px">
                                <h4>"Angular 2 最新框架+主流技术+项目实战</h4>
                                <p><span>高级 </span>· 1233人在学习</p>
                            </div>
                        </li>
                        <li>
                            <div class="box-td">
                                <img src="../study/images/004.png" alt="" style="width: 200px; height: 130px">
                                <h4>"Android Hybrid APP开发实战 H5+原生</h4>
                                <p><span>中级 </span>· 12人在学习</p>
                            </div>
                        </li>
                        <li>
                            <div class="box-td">
                                <img src="../study/images/005.png" alt="" style="width: 200px; height: 130px">
                                <h4>"Android Hybrid APP开发实战 H5+原生</h4>
                                <p><span>高级 </span>· 33459人在学习</p>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
   </div>
    <!-- 网页的第四部分---尾 -->
    
    <div class="end">
       <div class="copyleft">
            <img src="../study/images/学成在线.png" alt="" style="width: 200px;height: 42px;">
            <br><br>
            <p> "学成在线致力于普及中国最好的教育它与中国一流大学和机构合作提供在线课程。<br>
            © 2017年XTCG Inc.保留所有权利。-沪ICP备15025210号"</p>
            <button style="width:100px;height: 35px;color:skyblue;"><a href="#">下载APP</a></button>
       </div>
       <div class="copyright">  
            <div class="first">
                <h5>关于学成网</h5>
                <ul>
                    <li>关于</li>
                    <li>管理团队</li>
                    <li>工作机会</li>
                    <li>客户服务</li>
                    <li>帮助</li>
                </ul>
            </div>
            <div class="second">
                <h5>新人指南</h5>
                <ul>
                    <li>如何注册</li>
                    <li>如何选课</li>
                    <li>如何拿到毕业证</li>
                    <li>学分是什么</li>
                    <li>考试未通过怎么办</li>
                </ul>
            </div>
            <div class="third">
                <h5>合作伙伴</h5>
                <ul>
                    <li>合作机构</li>
                    <li>合作导师</li>               
                </ul>
            </div>
       </div>    
    </div>
</body>
</html>

index.css


/* 头部界面 */
.w{
    width: 1200px;
    margin: auto;
}
.header{
    height: 42px;
    /* background-color:darkorange; */
       /* 居中 设置外边距*/
    margin: 30px auto;
}

.logo{
    width: 198px;
	height: 42px;
    float: left;
}

.wrapper{
    margin-left: 60px;
    height: 42px;
    /* background-color: green; */
    float: left;
}
li{
    /* 去除小黑点 */
    list-style: none;
}
.wrapper ul li{
    float: left;
    margin: 0 15px;
}
.wrapper ul li a{
    display: block;
    font-size: 16px;
    color: #050505;
    padding:0 10px;
    margin: 0 auto;
}
a{
    /* 去除下面的线 */
    text-decoration: none;
}
.header .research{
    float: left;
    width: 412px;
	height: 42px;
    margin-left: 70px;
}
.research input{
    float: left;
    height: 37px;
    width: 345px;
    border: 1px solid #00a4ff;
    border-right: 0;
    color: #bfbfbf;
    font-size: 14px;
    padding-left: 15px;
}
.research img{
    float: left;
    height: 39px;

    /* 按钮button默认有个边框需要我们手动去掉 */
    border: 0;
    background: url(images/btn.png);
}
.header .user{
    margin-left: 32px;
    float: left;
    color: #666;    
}
.user img{
    float: left;
    margin-top: 5px;
    width: 30px;
	height: 30px;
}
.user .username{
    float: left;
    margin-top: 10px;
    margin-left: 5px;
    text-align: center;
    font-size: 14px;
}

/* 头部区域结束 */


/* 网页的第二部分--- 颔 */
.chin{
    height: 421px;
    background-color: #1c036c;   
  
    /* 居中s */
    margin: 30px auto;
}
.chin .m{
    /* 将背景图片直接加在这里 */
    height: 421px;
    width: 1200px;
    margin: 30px auto;
    background: url(../images/banner2_20190819_210028.png) no-repeat top center;
}       
.chin .left{    
    float: left;
    height: 420px;
    width:170px;
    background: rgba(0,0,0, 0.3);
    /* background-color:violet; */
}
.left ul li{
    height: 45px;
    line-height: 45px;
    
}
.left ul li a{
    color: #fff;
    font-size: 14px;

}
.left ul li a:hover {
    color: #00a4ff;
}
.left ul li a span {
    float: right;
}
.right{
    float: right;
    width: 230px;
	height: 300px;
    background-color:#fff ;
    margin:50px auto;
}   
.right h2{
    margin-top: 0px;
    height: 48px;
    background-color: #9bceea;
    text-align: center;
    line-height: 48px;
    font-size: 18px;
    color: #fff;
}
.bd{
    height: 33px;
    width: 166px;
}
/* 设置中间的分割线 */
.bd ul li { 
    border-bottom: 0.1px solid rgb(238, 235, 235);
}   
.bd ul li h4 {
    font-size: 10px;
    color: #4e4e4e;
}
.bd ul li p {
    font-size: 6px;
    color: #a5a5a5;
}
.right button{
    margin-left: 50px;
}

/* 网页的颔部完成 */

/* 网页的第三部分---颈 */
.neck{
    width: 1200px;
	height: 600px;
    
}
.neck .center{
    height: 60px;
}
.neck ul{
    float: left;
    margin-left: 30px;
}
.center ul li{
    float: left;
}
.center ul li a{
    padding: 0 30px;
    font-size: 16px;
    color: #050505;
    border-left: 1px solid #ccc;
}.center ul li a:hover {
    color: #00a4ff;
}

.center .centerright{
    float: right;
}
.centerright a{
    padding: 0 30px;
    font-size: 16px;
    color: #00a4ff;
}
.centerright a:hover {
    color: #00a4ff;
}

/* 精品推荐 */
.goods{
    width: 1200px;
    height: 600px;
    /* background-color: skyblue; */
}
.goods .box-hd{
    height: 45px;
}
.box-hd h3{
    float: left;
    margin-left: 80px;
    font-size: 20px;
    color: #494949;
}
.box-hd a{
    float: right;
    font-size: 20px;
    color: #09a337;
    margin-top: 10px;
    margin-right: 85px;
}
.goods .box-bd{   
      /*按照两行中的每行250的1行距算,中间还有30的行距  */
    height: 530px;
    /* 按照1150算,每个230,然后每个间距为6 ,一行刚好*/
    width: 1180px;
    margin-left: 10px;
    margin-right: 10px;
    margin-bottom: 10px;
    background-color: #fff; 
}
.box-bd ul li{
    float: left;
}
.goods .box-bd .box-td{
    padding: 0px    ;
    float: left;
    width: 200px;
    height: 250px;
    margin-top: 5px;
    margin-left: 6px;
    /* background-color: green; */
}
.box-td h4{
    font-size: 14px;
    float: left;
    color: black;
}
.box-td p{
    font-size: 12px;
    color: #999999;
    margin-left: 20px;
}
.box-td span{
    font-size: 12px;
    color: #ff7c2d;
}
/* 网页的第三部分完成 */

/* 网页的第四部分尾部 */
.end{
    margin-top: 20px;
    margin-left: 160px;
    width: 1200px;
    height: 420px;
    /* background-color:darksalmon; */
    /* background-color: #a5a1a1; */
}
.end .copyleft{
    width: 500px;
    height: 350px;
    float: left;
    /* background-color: #fff; */
}
.end .copyleft img{
    float: left;    
}
.end p{
    font-size: 14px;
    color: #666;
    margin: 20px 0 15px 0;
}
.end button{
    background-color: #fff;
}
.end .copyright{
    margin-left: 10px;
    float: left;
    width: 600px;
    height: 350px;
    /* background-color: green; */
}
.copyright .first{
    width: 190px;
    height: 350px;
    float: left;
    margin-left: 10px;
    /* background-color: #fff; */
}
.copyright .first h5{
    margin-left: 40px;
    height: 10px;
	font-size: 16px;
	color: #333333;
}
.copyright .second{
    width: 190px;
    height: 350px;
    float: left;
    margin-left: 10px;
}
.copyright .second h5{
    margin-left: 40px;
    height: 10px;
	font-size: 16px;
	color: #333333;
}
.copyright .third{
    width: 190px;
    height: 350px;
    float: left;
    margin-left: 10px;
}
.copyright .third h5{
    margin-left: 40px;
    height: 10px;
	font-size: 16px;
	color: #333333;
}
/* 网页的第四部分完成 */