学成网Html+CSS案例

最新推荐文章于 2022-04-14 15:27:44 发布
最新推荐文章于 2022-04-14 15:27:44 发布
阅读量302 收藏 2
点赞数 1
文章标签： html 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42066969/article/details/121778856
版权

学成网案例
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="style.css">
</head>
<body>
    <!-- 头部区域开始 -->
   <div class="header w">

       <!-- logo部分 -->
       <div class="logo">
           <img src="images/logo.png" alt="">
       </div>

       <!-- 导航栏部分 -->
       <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="输入关键词">
           <button></button>
       </div>

       <!-- 用户模块 -->
       <div class="user">
           <img src="images/user.png" alt="">
           qq-xiangliang
       </div>
   </div> 
   <!-- 头部区域结束 -->

   <!-- banner部分开始 -->
   <div class="banner">
       <!-- 版心 -->
       <div class="w">
           <div class="subnav">
               <ul>
                   <!-- 直接在a中放一个小盒子,在小盒子中放置>  大于号:&gt;   小于号:&lt; -->
                   <li><a href="#">前端开发 <span>&gt;</span></a></li>
                   <li><a href="#">后端开发 <span>&gt;</span></a></a></li>
                   <li><a href="#">移动开发 <span>&gt;</span></a></a></li>
                   <li><a href="#">人工智能 <span>&gt;</span></a></a></li>
                   <li><a href="#">商业预测 <span>&gt;</span></a></a></li>
                   <li><a href="#">云计算&大数据 <span>&gt;</span></a></a></li>
                   <li><a href="#">运维&测试 <span>&gt;</span></a></a></li>
                   <li><a href="#">UI设计 <span>&gt;</span></a></a></li>
                   <li><a href="#">产品 <span>&gt;</span></a></a></li>
               </ul>
           </div>
             <!-- course 课程模块 -->
           <div class="course">
               <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>
                   <a href="#" class="more">全部课程</a>
               </div>
           </div>
       </div>
   </div>
   <!-- banner部分结束 -->

   <!-- 精品推荐模块开始 -->
   <div class="goods w">
        <h3>精品推荐</h3>
        <ul>
            <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="#">MySQL</a></li>
            <li><a href="#">JavaWeb</a></li>
        </ul>
        <a href="#" class="mod">修改兴趣</a>
   </div>
   <!-- 精品推荐模块结束 -->

   <!-- box核心内容区域开始 -->
   <div class="box w">
       <div class="box-hd">
           <h3>精品推荐</h3>
           <a href="#">查看全部</a>
       </div>
       <div class="box-bd">
           <ul class="clearfix">
               <li>
                   <img src="images/pic.png" alt="">
                   <h4>Think PHP 5.0博客系统实战项目演练</h4>
                   <div class="info">
                       <span>高级</span> ●1125人在学习
                   </div>
               </li>
               <li>
                <img src="images/p1.png" alt="">
                <h4>Think PHP 5.0博客系统实战项目演练</h4>
                <div class="info">
                    <span>高级</span> ●1125人在学习
                </div>
            </li>
            <li>
                <img src="images/p2.png" alt="">
                <h4>Think PHP 5.0博客系统实战项目演练</h4>
                <div class="info">
                    <span>高级</span> ●1125人在学习
                </div>
            </li>
            <li>
                <img src="images/p3.png" alt="">
                <h4>Think PHP 5.0博客系统实战项目演练</h4>
                <div class="info">
                    <span>高级</span> ●1125人在学习
                </div>
            </li><li>
                <img src="images/p3.png" alt="">
                <h4>Think PHP 5.0博客系统实战项目演练</h4>
                <div class="info">
                    <span>高级</span> ●1125人在学习
                </div>
            </li><li>
                <img src="images/pic.png" alt="">
                <h4>Think PHP 5.0博客系统实战项目演练</h4>
                <div class="info">
                    <span>高级</span> ●1125人在学习
                </div>
            </li><li>
                <img src="images/p1.png" alt="">
                <h4>Think PHP 5.0博客系统实战项目演练</h4>
                <div class="info">
                    <span>高级</span> ●1125人在学习
                </div>
            </li><li>
                <img src="images/p2.png" alt="">
                <h4>Think PHP 5.0博客系统实战项目演练</h4>
                <div class="info">
                    <span>高级</span> ●1125人在学习
                </div>
            </li><li>
                <img src="images/p3.png" alt="">
                <h4>Think PHP 5.0博客系统实战项目演练</h4>
                <div class="info">
                    <span>高级</span> ●1125人在学习
                </div>
            </li><li>
                <img src="images/p3.png" alt="">
                <h4>Think PHP 5.0博客系统实战项目演练</h4>
                <div class="info">
                    <span>高级</span> ●1125人在学习
                </div>
            </li>
           </ul>
       </div>
   </div>
   <!-- box核心内容区域结束 -->
   <!-- footer 模块 -->
   <div class="footer">
       <div class="w">
           <div class="copyright">
               <img src="images/logo.png" alt="">
               <p>
                学成在线致力于普及中国最好的教育它与中国一流大学和机构合作提供在线课程。<br>
                @ 2017年XTCG Inc .保留所有权利。-沪ICP备15025210号               
               </p>
               <a href="%" class="app">下载app</a>
           </div>
           <div class="links">
               <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>新手指南</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>合作伙伴</dt>
                   <dd><a href="#">合作机构</a></dd>
                   <dd><a href="#">合作导师</a></dd>
                </dl>    
           </div>
       </div>
   </div>
</body>
</html>

样式部分

* {
    margin: 0;
    padding: 0;
}
li {
    list-style: none;
}
a {
    text-decoration: none;
}
/* 清除浮动 给li 的父盒子ul 添加一个清除浮动 */
.clearfix:before,
        .clearfix:after {

            content: "";
            display: table;
        }

        /* 清除浮动方法3 .clearfix 伪元素*/
        .clearfix:after {

            content: "";
            display: block;
            height: 0;
            clear: both;
            visibility: hidden;
        }
        .clearfix {
            /* IE 6 和 7专用 */
            *zoom:1;
        }
body {
    background-color: #f3f5f7;
}
.w {
    /* 版心 */
    width: 1200px;
    margin: auto;
}
.header {
    height: 42px;
    margin: 30px auto;
}
.logo {
    float: left;
    width: 198px;
    height: 42px; 
}
.nav {
    float: left;
    margin-left: 60px;
}
.nav ul li {
    float: left;
    margin: 0 15px;
}
.nav ul li a {
    display: block;
    height: 42px;
    line-height: 42px;
    padding: 0 10px;
    font-size: 18px;
    color: #050505;
}
.nav ul li a:hover {
    border-bottom: 2px solid #00a4ff;
    color: #00a4ff;
}
/* search 搜索模块 */
.search {
    float: left;
    width: 412px;
    height: 42px;
    margin-left: 70px;
}
.search input {
    float: left;
    width: 345px;
    height: 40px;
    border: 1px solid #00a4ff;
    border-right: 0;
    font-size: 14px;
    color: #bfbfbf;
    /* 会撑大盒子，需要减去父级盒子 */
    padding-left: 15px;
}
.search button {
    float: left;
    width: 50px;
    height: 42px;
    /* 按钮默认有个边框，需要手动去掉 */
    border: 0;
    background:url(images/btn.png) ;
}
.user {
    float: right;
    line-height: 42px;
    margin-right: 30px;
    font-size: 14px;
    color: #666;
}

/* banner 区域 */
.banner {
    height: 421px;
    background-color: #1c036c;
}

/* 必须是banner中的w */
.banner .w {
    height: 421px;
    /* background-color: pink; */
    background: url(images/banner2_20190819_210028.png) no-repeat top center;
}
.subnav {
    float: left;
    width: 190px;
    height: 421px;
    background:rgba(0,0,0,0.3);
}
.subnav ul li {
    height: 45px;
    line-height: 45px;
    /* 子盒子之间的距离通过设定 li 来实现 */
    padding: 0 20px;
}
.subnav ul li a {
    font-size: 14px;
    color: #fff;
}
.subnav ul li a span {
    float: right;
}
.subnav ul li a:hover {
    color: #00a4ff;
}
.course {
    float: right;
    width: 230px;
    height: 300px;
    background-color: #fff;
    /* 浮动的盒子不会有外边距合并问题 */
    margin-top: 50px;
}
.course h2 {
    height: 48px;
    background-color: #9bceea;
    font-size: 18px;
    text-align: center;
    line-height: 48px;
    color: #fff;
}
.bd {
    padding: 0 20px;
}
.bd ul li {
    padding: 14px 0;
    border-bottom: 1px solid #ccc;
}
.bd ul li h4 {
    font-size: 16px;
    color: #4e4e4e;
}
.bd ul li p {
    font-size: 12px;
    color: #a5a5a5;
}
.bd .more {
    display: block;
    height: 38px;
    border: 1px solid #00a4ff;
    margin-top: 5px;
    text-align: center;
    line-height: 38px;
    color: #00a4ff;
    font-size: 16px;
    font-weight: 700px;
}
/* 精品推荐模块 */
.goods {
    height: 60px;
    /* 行高会继承给子盒子 */
    line-height: 60px;
    background-color: #fff;
    margin-top: 10px;
    box-shadow: 0 2px 3px 3px rgba(0,0,0,0.1);
}
.goods h3 {
    margin-left: 30px;
    float: left;
    font-size: 16px;
    color: #00a4ff;
}
.goods ul {
    float: left;
    margin-left: 30px;
}
.mod {
    margin-right: 30px;
    float: right;
    font-size: 14px;
    color: #00a4ff;
}
.goods ul li {
    float: left;
}
.goods ul li a {
    padding: 0 30px;
    font-size: 16px;
    color: #050505;
    border-left: 1px solid #ccc;
}

/* box核心内容区域 */
.box {
    margin-top: 30px;
}

.box-hd {
    height: 45px;
}

.box-hd h3 {
    float: left;
    font-size: 20px;
    color: #494949;
}
.box-hd a {
    float: right;
    font-size: 12px;
    color: #a5a5a5;
    margin-top: 10px;
    margin-right: 30px;
}
/* 把li的父亲ul修改的足够宽一行能装开5个盒子就不会换行了 */
.box-bd ul {
    width: 1225px;
}
.box-bd ul li {
    float: left;
    width: 228px;
    height: 270px;
    background-color: #fff;
    margin-right: 15px;
    margin-bottom: 15px;
}
.box-bd ul li img {
    /* 图片比盒子宽，将图片宽度强制设为和盒子一样宽 */
    width: 100%;
}
.box-bd ul li h4 {
    margin: 20px 20px 20px 25px;
    font-size: 14px;
    color: #050505;
    font-weight: normal;
}
.box-bd .info {
    margin: 0 20px 0 25px;
    font-size: 12px;
    color: #999;
}
.box-bd .info span {
    color: #ff7c2d;
}
.footer {
    height: 415px;
    background-color: #fff;
}
.footer .w {
    padding-top: 35px;
}
.copyright {
    float: left;
}
.copyright p {
    font-size: 12px;
    color: #666;
    margin: 20px 0 15px 0;
}
.links {
    float:right
}
.copyright .app {
    /* a 是行内元素，需要转成块元素 */
    display: block;
    width: 118px;
    height: 33px;
    border: 1px #00a4ff solid;
    line-height: 33px;
    text-align: center;
    font-size: 16px;
    color: #00a4ff;
}
.links {
    float: right;
}
.links dl {
    float: left;
    margin-left: 100px;
}
.links dl dt {
    font-size: 16px;
    color: #333;
    margin-bottom: 5px;
}
.links dl dd a {
    color: #333;
    font-size: 12px;
}

在这里插入图片描述

可啪的小学生
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
html+css的简单实例
少爷想养猫的博客
10-29 1062
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>留言本</title> <style> .wrap{ width:...
HTMl+CSS登录小实例
03-21
一个实用的HTML+CSS的登录界面，小实战案例
【无标题】
weixin_62480058的博客
12-08 72
<!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>学成.
B02_html+css小实例
岛主
06-19 322
placeholder=“请输入用户名”，变虚的，输入就覆盖
学成网html
m0_69172270的博客
04-14 201
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>学成网首页</title> <link rel="stylesheet" href="ps案例.css"> </head> <body> <div class="zo"><img src="image/zwq.jpg" .
pink老师htmlcss学习 - 学成在线案例
03-26
"pink老师htmlcss学习 - 学成在线案例"这个资源包显然是一份用于教学或自我提升的学习材料，其中包含了一系列实例，帮助用户深入理解并掌握HTML和CSS的应用。 首先，`style.css`是CSS（层叠样式表）文件，它是用来...
学成在线首页 CSS案例
最新发布
07-26
在"学成在线首页 CSS案例"中，我们主要探讨的是如何利用CSS（层叠样式表）技术来美化和布局一个网站的首页。CSS是网页设计中的核心部分，它允许我们将表现（样式）与内容（HTML）分离，使页面结构更加清晰，易于维护...
学成网首页素材内含html，css，psd
08-14
【学成网首页素材】是一个全面的前端开发学习资源，包含了构建网页所需的关键元素：HTML、CSS和PSD文件。这个压缩包是针对【黑马Pink老师】在B站2020年推出的【最新前端开发入门基础篇】课程中的第七天案例进行设计...
学成网PSD.rar
07-02
总的来说，"学成网PSD.rar"压缩包提供了一套完整的前端CSS切图实战案例，涵盖了从设计解析到切图再到CSS编码的全过程。通过这个实践，开发者不仅可以提升切图技巧，还能深入理解前端开发中的布局和样式控制，为构建...
学成网案例.rar
05-09
在本案例中，我们关注的是一个名为"学成网案例.rar"的压缩文件，它包含了一个基于HTML5的网页开发实例。这个实例是作者跟随视频教程亲手完成的，总共有超过500行的代码，这表明它是一个相对复杂的项目，具有较高的...
html+css+js实例
12-18
用html+css+js做的一个简单小网页，可以作为初学者的参考资料。
HTML+CSS经典案例
09-12
想学好这块的朋友，可以去看看，很适合初学者，希望对你 有所帮助
HTML+css静态网页制作简单实例
06-16
是一款HTML+css的静态网页做成的，没有动态数据库连接
157个HTML+CSS+JavaScript前端开发24实例
10-10
157个HTML+CSS+JavaScript前端开发24实例
html+css小例子-1
qq_47000934的博客
12-06 207
html+css小例子-1 效果图如下： ![在这里插入图片描述](https://img-blog.csdnimg.cn/20201206190133275.png) 代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"&g
HTML+CSS小实战案例
weixin_30469895的博客
08-18 153
HTML+CSS小实战案例 登录界面的美化，综合最近所学进行练习 网页设计先布局，搭建好大框架，然后进行填充，完成页面布局 1 <html> 2 <head> 3 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 4 <title>...
html+css中的项目案例小点
qq_43952245的博客
09-09 1142
文字超过指定最大宽度，超出部分隐藏并用···代替 <style> a{ text-decoration: none; } a:hover{ background: plum; } div{ height: 20px; ...
HTML+CSS案例
zcylxzyh的博客
01-30 996
综合案例1、分析1.1 整体结构1.2 部分结构2、代码部分2.1 初始化_CSS2.2 头部2.2.1 头部_HTML2.2.2 头部_CSS2.3、中间轮播图2.3.1 中间轮播图_HTML2.3.2 中间轮播图_CSS2.4 精品推荐2.4.1 精品推荐_HTML2.4.2 精品推荐_CSS2.5 底部样式2.5.1 底部样式_HTML2.5.2 底部样式_CSS 这个文章主要是将前面学习的CSS和HTML进行一个串联。 最终样式： 图片和各种间距的测量采用photoshop。 1、分析 1.1
学成网html+css案例
倒霉娃不要倒霉的博客
08-08 2090
这是跟着pink老师敲的第一个html+css的静态页面： html部分 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>学成网</title> <link rel="stylesheet" href="style.css"> </head> <body> <!-- 页
HTML+CSS静态网页设计：企业官网实战模板
本资源是一份针对HTML+CSS静态网页设计的详细作业，旨在帮助学生完成HTML5期末考核大作业。作业涵盖了广泛的网页设计场景，包括但不限于个人、美食、公司、学校、旅游等多个主题，总计包含了大约20种不同的类别，能...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值