ICode9
精准搜索请尝试： 精确搜索
首页
编程语言>
数据库
系统相关
互联网
其他分享
Python
Java
JavaScript
android
PHP
首页 > 其他分享> 文章详细

学成在线项目（HTML+CSS）

2021-04-03 18:00:07  阅读：218  来源： 互联网

标签：学成 color float height HTML li size CSS left


去年在B站上跟着Pink老师学习的前端成果，衷心的感谢Pink老师！
效果图：

在这里插入图片描述
在这里插入图片描述
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>
    <!-- header部分开始 -->
    <div class="header w">
        <img src="IMAGES/logo.png" alt="" class="logo">
        <div class="nav">
            <ul>
                <li><a href="#">首页</a></li>
                <li><a href="#">课程</a></li>
                <li><a href="#">职业规划</a></li>
            </ul>
        </div>
        <div class="search">
            <input type="text" value="搜索关键词" class="searchInput">
            <button class="btnSearch"></button>
        </div>
        <div class="user">
            <img src="IMAGES/userHeaderImag.png" alt="" class="userHeadImg">qq-lilei
        </div>

    </div>
    <!-- header部分结束 -->

    <!-- banner部分开始 -->
    <div class="banner">
        <div class="w">
            <div class="navLeft">
                <ul>
                    <li><a>前端开发 <span> &gt </span></a></li>
                    <li><a>后端开发 <span> &gt </span></a></li>
                    <li><a>移动开发 <span> &gt </span></a></li>
                    <li><a>人工智能 <span> &gt </span></a></li>
                    <li><a>商业预测 <span> &gt </span></a></li>
                    <li><a>云计算&大数据 <span> &gt </span></a></li>
                    <li><a>运维&测试 <span> &gt </span></a></li>
                    <li><a>UI设计 <span> &gt </span></a></li>
                    <li><a>产品 <span> &gt </span></a></li>
                </ul>
            </div>
            <div class="courseRight">
                <h2 class="courseTitle">我的课程表</h2>
                <ul>
                    <li>
                        <h4>继续学习 程序语言设计</h4>
                        <p>正在学习-使用对象</p>
                    </li>
                    <li>
                        <h4>继续学习 程序语言设计</h4>
                        <p>正在学习-使用对象</p>
                    </li>
                    <li>
                        <h4>继续学习 程序语言设计</h4>
                        <p>正在学习-使用对象</p>
                    </li>
                </ul>
                <a href="#">全部课程</a>
            </div>
        </div>
    </div>
    <!-- banner部分结束 -->

    <!-- 精品推荐模块开始 -->
    <div class="goods w">
        <h3>精品推荐</h3>
        <ul>
            <li><a href="#">jQuery</a></li>
            <li><a href="#">C++</a></li>
            <li><a href="#">Java</a></li>
            <li><a href="#">HTML</a></li>
            <li><a href="#">SQL SERVER</a></li>
        </ul>
        <a href="#" class="mod">修改兴趣</a>
    </div>
    <!-- 精品推荐模块结束 -->
    <!-- 精品推荐详细页面开始 -->
    <div class="jp w">
        <ul>
            <li>
                <img src="IMAGES/YiFu.jpg" alt="" class="yiFu">
                <div><a class="price">￥278.00</a> <a class="type">包邮</a></div>
                <a href="#" class="jieShao">2020秋冬新款针织拼色中长款系带<span>连衣裙</span></a>
                <div>
                    <a href="#" class="shopName">尘常旗舰店</a>
                    <span class="pay">0人付款</span>
                </div>
            </li>
            <li>
                <img src="IMAGES/YiFu.jpg" alt="" class="yiFu">
                <div><a class="price">￥278.00</a> <a class="type">包邮</a></div>
                <a href="#" class="jieShao">2020秋冬新款针织拼色中长款系带<span>连衣裙</span></a>
                <div>
                    <a href="#" class="shopName">尘常旗舰店</a>
                    <span class="pay">0人付款</span>
                </div>
            </li>
            <li>
                <img src="IMAGES/YiFu.jpg" alt="" class="yiFu">
                <div><a class="price">￥278.00</a> <a class="type">包邮</a></div>
                <a href="#" class="jieShao">2020秋冬新款针织拼色中长款系带<span>连衣裙</span></a>
                <div>
                    <a href="#" class="shopName">尘常旗舰店</a>
                    <span class="pay">0人付款</span>
                </div>
            </li>
            <li>
                <img src="IMAGES/YiFu.jpg" alt="" class="yiFu">
                <div><a class="price">￥278.00</a> <a class="type">包邮</a></div>
                <a href="#" class="jieShao">2020秋冬新款针织拼色中长款系带<span>连衣裙</span></a>
                <div>
                    <a href="#" class="shopName">尘常旗舰店</a>
                    <span class="pay">0人付款</span>
                </div>
            </li>
            <li>
                <img src="IMAGES/YiFu.jpg" alt="" class="yiFu">
                <div><a class="price">￥278.00</a> <a class="type">包邮</a></div>
                <a href="#" class="jieShao">2020秋冬新款针织拼色中长款系带<span>连衣裙</span></a>
                <div>
                    <a href="#" class="shopName">尘常旗舰店</a>
                    <span class="pay">0人付款</span>
                </div>
            </li>
            <li>
                <img src="IMAGES/YiFu.jpg" alt="" class="yiFu">
                <div><a class="price">￥278.00</a> <a class="type">包邮</a></div>
                <a href="#" class="jieShao">2020秋冬新款针织拼色中长款系带<span>连衣裙</span></a>
                <div>
                    <a href="#" class="shopName">尘常旗舰店</a>
                    <span class="pay">0人付款</span>
                </div>
            </li>
            <li>
                <img src="IMAGES/YiFu.jpg" alt="" class="yiFu">
                <div><a class="price">￥278.00</a> <a class="type">包邮</a></div>
                <a href="#" class="jieShao">2020秋冬新款针织拼色中长款系带<span>连衣裙</span></a>
                <div>
                    <a href="#" class="shopName">尘常旗舰店</a>
                    <span class="pay">0人付款</span>
                </div>
            </li>
            <li>
                <img src="IMAGES/YiFu.jpg" alt="" class="yiFu">
                <div><a class="price">￥278.00</a> <a class="type">包邮</a></div>
                <a href="#" class="jieShao">2020秋冬新款针织拼色中长款系带<span>连衣裙</span></a>
                <div>
                    <a href="#" class="shopName">尘常旗舰店</a>
                    <span class="pay">0人付款</span>
                </div>
            </li>
            <li>
                <img src="IMAGES/YiFu.jpg" alt="" class="yiFu">
                <div><a class="price">￥278.00</a> <a class="type">包邮</a></div>
                <a href="#" class="jieShao">2020秋冬新款针织拼色中长款系带<span>连衣裙</span></a>
                <div>
                    <a href="#" class="shopName">尘常旗舰店</a>
                    <span class="pay">0人付款</span>
                </div>
            </li>
            <li>
                <img src="IMAGES/YiFu.jpg" alt="" class="yiFu">
                <div><a class="price">￥278.00</a> <a class="type">包邮</a></div>
                <a href="#" class="jieShao">2020秋冬新款针织拼色中长款系带<span>连衣裙</span></a>
                <div>
                    <a href="#" class="shopName">尘常旗舰店</a>
                    <span class="pay">0人付款</span>
                </div>
            </li>
        </ul>
    </div>
    <!-- 精品推荐详细页面结束 -->
    <!-- 尾部开始 -->
    <div class="footer">
        <div class="w">
            <div class="left">
                <img src="IMAGES/logo.png" alt="">
                <p>学成在线致力于普及中国最好的教育，它与中国一流大学和机构合作，提供在线课程 <br>
                    @2020 WangHu 保留所有权利
                </p>
                <a href="#" class="app">下载APP</a>
            </div>
            <div class="right">
                <dl>
                    <dt>关于学成网</dt>
                    <dd><a href="#">关于</a></dd>
                    <dd><a href="#">管理团队</a></dd>
                    <dd><a href="#">工作机会</a></dd>
                    <dd><a href="#">客户服务</a></dd>
                    <dd><a href="#">帮助</a></dd>
                </dl>
                <dl>
                    <dt>关于学成网2</dt>
                    <dd><a href="#">关于</a></dd>
                    <dd><a href="#">管理团队</a></dd>
                    <dd><a href="#">工作机会</a></dd>
                    <dd><a href="#">客户服务</a></dd>
                    <dd><a href="#">帮助</a></dd>
                </dl>
                <dl>
                    <dt>关于学成网3</dt>
                    <dd><a href="#">关于</a></dd>
                    <dd><a href="#">管理团队</a></dd>
                    <dd><a href="#">工作机会</a></dd>
                    <dd><a href="#">客户服务</a></dd>
                    <dd><a href="#">帮助</a></dd>
                </dl>
            </div>
        </div>
    </div>
    <!-- 尾部结束 -->
</body>

</html>

CSS代码

* {
    margin: 0;
    padding: 0;
}

body {
    background-color: #f3f5f7;
    height: 3000px;
}

.w {
    width: 1200px;
    margin: 0 auto;
    /* background-color: blue; */
}

li {
    list-style: none;
}

a {
    text-decoration: none;
}

.header {
    height: 42px;
    margin-top: 10px;
    /* background-color: pink; */
}

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

.nav {
    float: left;
    margin-left: 30px;
}

.nav ul li {
    float: left;
    padding: 0 20px;
    height: 42px;
    line-height: 42px;
    font-size: 16px;
    margin
}

.nav ul li a {
    display: inline-block; 
    color: black;
    text-decoration: none;
}

.nav ul li a:hover {
    border-bottom: 2px solid blue;
    color: blue;
}

.search {
    float: left;
    width: 300px;
    height: 42px;
    margin-left: 120px;
}

.searchInput {
    float: left;     
    width: 219px;
    height: 40px;
    padding-left: 20px;
    border: 1px solid blue;
    border-right: 0px;
    color: gray;
}

.btnSearch {
    float: left;
    width: 60px;
    height: 42px;
    border: 0px;
    background: url(IMAGES/bgcImgSearch.png);
    background-size: 60px 42px;
    background-repeat: no-repeat;
}

.user {
    float: right;
    line-height: 42px;
    color: gray;
    font-size: 14px;
    margin-right: 80px;  
}

.userHeadImg {
    width: 30px;
    height: 30px;   
}

/* banner部分开始 */
.banner {
    height: 421px;
    margin-top: 5px;/*为什么不设置边距会出问题 */
    background-color: #1c036c;
}

.banner .w {
    height: 421px;
    background: url(IMAGES/banner2.png) no-repeat top center;
    background-size: 1400px 421px;
}

.navLeft {
    float: left;
    width: 200px;
    height: 421px;
    background-color: rgba(24, 13, 87, 0.7);
}

.courseRight {
    float: right;
    width: 200px;
    height: 340px;
    margin-top: 40px;
    background-color: white;
}

.banner .navLeft ul li {
    padding: 13px 20px;
}

.banner .navLeft ul li span {
    float: right;
}

.banner .navLeft ul li a {
    display: block;
    font-size: 14px;
    color: white;
}

.banner .navLeft ul li a:hover {
    display: block;
    font-size: 14px;
    color: blue;
}

.banner .courseRight h2 {
    height: 40px;
    font-size: 18px;
    line-height: 40px;
    text-align: center;
    color: white;
    background-color: blue;
}

.banner .courseRight ul
{
    padding: 0 10px;
}

.banner .courseRight ul li {
    height: 70px;
    border-bottom: 1px solid gray;
}

.banner .courseRight h4 {
    height: 40px;
    font-size: 14px;
    line-height: 40px;
    text-align: center;
    color: rgb(30, 30, 30);
}

.banner .courseRight p {
    height: 30px;
    font-size: 12px;
    line-height: 10px;
    text-align: center;
    color: rgb(50, 50, 50);
}

.banner .courseRight a {
    display: block;
    height: 40px;
    width: 120px;
    margin: 20px auto;
    text-decoration: none;
    font-size: 18px;
    line-height: 40px;
    text-align: center;
    color: blue;
    border: 1px solid blue;
}

/* 精品推荐模块 */
.goods {
    height: 60px;
    margin-top: 10px;
    line-height: 60px;
    background-color: #fff;
    box-shadow: 0 2px 2px 2px rgba(0, 0, 0, 0.1);
}

.goods h3 {
    float: left;
    margin: auto 20px;
    font-size: 16px;
    color: #00a4ff;
}

.goods ul {
    float: left;
}

.goods .mod {
    float: right;
    margin-right: 20px;
    font-size: 16px;
    color: #00a4ff;
}

.goods ul li {
    float: left;
    /* text-align: center; */
}

.goods ul li a {
    padding: 0 30px;
    border-left: 1px solid #ccc;
    color: #050505;
}

.goods ul li a:hover {
    padding: 0 30px;
    border-left: 1px solid #ccc;
    color: blue;
}

.jp {
    overflow: hidden;
}

.jp ul {
    width: 1215px;
}

.jp li {
    float: left;  
    width: 212px;
    height: 320px;
    margin-right: 15px;
    margin-bottom: 15px;
    padding: 7px 7px 0px 7px;
    border: 1px solid gray;
    background-color: pink;
}

.jp li .yiFu {
    width: 214px;
}

.jp li .price {
    display: inline-block;
    height: 30px;
    line-height: 30px;
    font-size: 16px;
    color: red;
}

.jp li .type {
    display: inline-block;
    height: 14px;
    line-height: 14px;
    font-size: 12px;
    color: white;
    background-color: red;
}

.jp ul li .jieShao {
    height: 20px;
    line-height: 20px;
    font-size: 12px;
    color: black;
}

.jp ul li span {
    color: red;
}

.jp ul li .shopName {
    float: left;
    height: 30px;
    line-height: 30px;
    font-size: 12px;
    color: gray;
    text-decoration: underline;
}

.jp ul li .pay {
    float: right;
    height: 30px;
    line-height: 30px;
    font-size: 12px;
    color: gray;
}

.footer {
    height: 415px;
    margin-top: 20px;
    border-top: 1px solid gray;
}

.footer .w {
    padding-top: 35px;
}

.footer .w .left {
    float: left;
}

.footer .w .right {
    float: right;
}

.footer .w .left p {
    font-size: 12px;
    color: #666;
    margin: 20px 0 15px 0;
}

.footer .w .left .app {
    display: block;
    width: 118px;
    height: 36px;
    border: 1px solid #00a4ff;
    text-align: center;
    line-height: 36px;
    font-size: 16px;
    color: #00a4ff;
}

.right dt {
    margin-bottom: 5px;
    font-size: 16px;
    color: #333;
}

.right dd a {
    font-size: 12px;
    color: #333;
}

.right dl {
    float: left;
    margin-left: 100px;
}

标签：学成,color,float,height,HTML,li,size,CSS,left
来源： https://blog.csdn.net/qq_40945965/article/details/115418571

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

关于我们 | 联系我们 | 留言反馈

专注分享技术，共同学习，共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有