html+css学成在线项目

最新推荐文章于 2024-07-26 08:00:00 发布
最新推荐文章于 2024-07-26 08:00:00 发布
阅读量517 收藏 5
点赞数 1
文章标签： css html 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_58425326/article/details/130961283
版权

学成在线项目


要实现的效果：
在这里插入图片描述

1.准备素材和调试工具

  1. 学成在线项目psd源文件（进行切图和选取文字等工作）
  2. ps+vscode+chorme浏览器

2.案例准备

因为书写项目代码量过大，本次我们使用样式与结构相分离思想。

  1. 首先项目开始前我们要创建一个文件夹用于存放html，css和一些png图片（这里创建study文件夹）
  2. 用vscode打开文件夹study，在里面创建文件images用于存放图片
  3. 在study中创建index.html文件（以后网站首页统一规定为index.html，显得更专业）
  4. 再创建一个style.css用于存放css样式
  5. 将style.css用link引到html中去
  6. 测试是否引入成功

3.css的书写顺序（重点）

在这里插入图片描述
确定了书写顺序，这样我们找错会更方便，节省时间提高效率，一般每个公司都有自己的一套书写规范。

4.页面布局整体思路

  • 确定版心（网页的可视区）
  • 分析页面中的行模块，以及行模块中包含那些列模块
  • 制作html结构，永远遵循现有结构再有样式的准则
  • 进行布局，确定行模块列模块的位置，然后进行样式修改（整个过程最重要也最复杂的部分）

5.确定版心

版心也就是我们页面中的可视区，以下的红色部分都是版心部分
在这里插入图片描述
这里我们用ps量出版心的宽度是1200px，不设高度，因为高度限定完后就无法添加更多内容

.w {
    width: 1200px;
    margin: auto;
}

这里我们用类w代表版心，以至于后面用到版心的地方都可以手动添加

6.制作页面头部(header)

效果图：
在这里插入图片描述
首先剖析结构，我们首先创建一个大盒子div用来存放里面的图像以及各种标签…然后往大盒子里放内容，大盒子由四个小盒子组成，分别是图像（学成在线），标签（首页，课程…），input文本框和搜索按钮，以及用户头像。
html：

<body>
    <!-- 头部 -->
    <div class="header w">
        <!-- logo模块 -->
        <div class="logo"><img src="images/logo.png" alt=""></div>
        <!-- 导航栏部分 -->
        <div class="nav">
            <!-- 注意！！！在这里我们用li包含a标签，这样一来结构更清晰，而且也不会被搜索引擎检测为堆砌关键字 -->
            <ul>
                <li><a href="#">首页</a></li>
                <li><a href="#">课程</a></li>
                <li><a href="#">职业规划</a></li>
            </ul>
        </div>
        <!-- 搜索模块 -->
        <div class="serach">
            <input type="text" value="输入关键词">
            <button></button>
        </div>
        <!-- 用户模块 -->
        <div class="user">
            <img src="images/user.png" alt="">
            qq-lilei
        </div>

    </div>

css：

/* 头部    */

.header {
    height: 42px;
    /* background-color: pink; */
    /* 这里没有左右外边距，但也要写auto，否则当前header会层叠w中的auto，导致版心不居中 */
    margin: 30px auto;
}

.logo {
    float: left;
    width: 194px;
    height: 42px;
    /* background-color: purple; */
}

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

.nav ul li {
    float: left;
    margin: 0 15px;
}

/* 注意：有关谁的属性应该写在谁的头上（这里把下面的属性给li就会部分失效） */
.nav ul li a {
    display: block;
    height: 42px;
    padding: 0 10px;
    font-size: 18px;
    line-height: 42px;
    color: #050505;

}

.nav ul li a:hover {
    border-bottom: 2px solid #00a4ff;
}
/* 注意：这里margin—left老师给的是50px，显然老师量的不准确，但后期可以调试，所以没必要把像素扣那么死 */
.serach {
    float: left;
    width: 413px;
    height: 42px;
    background-color: #00a4ff;
    margin-left: 70px;
}

.serach input {
    float: left;
    width: 341px;
    height: 40px;
    padding-left: 20px;
    font-size: 14px;
    color: #bfbfbf;
    border: 1px solid #00a4ff;
}

.serach button {
    float: left;
    width: 50px;
    height: 42px;
    border: 0;
    background: url(images/search.png);
}

.user {
    /* 这里user在版心的最右侧，显然不能左浮动，不然会增加我们的工作量 */
    float: right;
    height: 42px;
    margin-right: 30px;
    font-size: 14px;
    color: #666666;
}

7.制作banner

效果图：
在这里插入图片描述
首先创建一个大盒子（banner），然后banner中创建小盒子（w），w中由左边导航栏（subnav）和右边课程（course）组成
html：

 <div class="banner">
        <div class="w">
            <!-- subnav导航栏 -->
            <div class="subnav">
                <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="#">前端开发<span>&gt;</span></a></li>
                    <li><a href="#">前端开发<span>&gt;</span></a></li>
                    <li><a href="#">前端开发<span>&gt;</span></a></li>
                </ul>
            </div>
            <!-- 课程导航 -->
            <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="#">全部课程</a>
                </div>
            </div>
        </div>

css：

/* < !-- 横幅广告 --> */
/* banner不设置宽度，默认和body一样宽，添加蓝色背景 */
.banner {
    height: 421px;
    background-color: #1c036c;
}
/* 因为所有元素都在版心中，所以这里又添加了类w */
.banner .w {
    height: 421px;
    background: url(images/banner.png) no-repeat top center;
}

.banner .w .subnav {
    float: left;
    width: 191px;
    height: 421px;
    background: rgb(0, 0, 0, .3);
}

.subnav ul li {
    /* 高度的量法：下边缘到下边缘或者上边缘到上边缘 */
    height: 44px;
    line-height: 44px;
    padding: 0 20px;
}

.subnav ul li a {
    font-size: 14px;
    color: #ffffff;
}

.subnav ul li a span {
    float: right;
}

.subnav ul li a:hover {
    color: #00a4ff;
}

.banner .w .course {
    float: right;
    width: 230px;
    height: 300px;
    background-color: #fff;
    margin: 50px 0;
}

.course h2 {
    height: 48px;
    font-size: 18px;
    color: #ffffff;
    line-height: 48px;
    text-align: center;
    background-color: #9bceea;
}

.bd {
    padding: 0 20px;
}

.bd ul li {
    padding: 15px 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 a {
    /* 行内元素要转化为块元素，否则不能设置宽高 */
    display: block;
    margin-top: 5px;
    font-size: 16px;
    color: #00a4ff;
    height: 38px;
    text-align: center;
    line-height: 38px;
    border: 1px solid #00a4ff;
    font-weight: 700;
}

8.制作精品推荐模块

成品图：
在这里插入图片描述
首先有个大盒子，我这里叫goods，goods中由三个小盒子h3，ul，a组成
html:

 <!-- 精品推荐模块 -->
    <div class="goods w">
        <h3>精品推荐</h3>
        <ul>
            <li><a href="#">jQuery</a></li>
            <li><a href="#">jQuery</a></li>
            <li><a href="#">jQuery</a></li>
            <li><a href="#">jQuery</a></li>
            <li><a href="#">jQuery</a></li>
        </ul>
        <a href="#" class="mod">修改兴趣</a>
    </div>

css:

/* 精品推荐模块 */
.goods {
    margin-top: 8px;
    height: 60px;
    /* 这里把行高放在父元素中是一种巧妙地写法，子元素会自动继承 */
    line-height: 60px;
    background-color: #fff;
    /* 盒子阴影：水平阴影位置，垂直阴影位置，模糊距离，阴影尺寸，颜色 */
    box-shadow: 2px 2px 2px 2px rgb(0, 0, 0, .2);
}

.goods h3 {
    float: left;
    margin-left: 34px;
    margin-right: 30px;
    font-size: 16px;
    color: #00a4ff;
}

.goods ul {
    float: left;
}

.goods ul li {
    float: left;
}

.goods ul li a {
    font-size: 16px;
    padding: 0px 33px;
    color: #050505;
    /* "|"的添加十分巧妙，写在a上标签高度刚好是a的高度  */
    border-left: 1px solid #ccc;
}

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

9.制作box核心内容部分

成图：
在这里插入图片描述
首先有个大盒子（box），box里面有小盒子box-hd和box-bd，box-hd中有h3和a标签，box-bd中有十个小li。
html：

<!-- 精品推荐大模块 -->
    <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/pic.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/pic.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/pic.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/pic.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/pic.png" alt="">
                    <h4>Think PHP 5.0 博客系统实战项目演练</h4>
                    <div class="info">
                        <span>高级</span> • 1125人在学习
                    </div>
                </li>
            </ul>
        </div>
    </div>

css：

/* 精品推荐大模块 */
.box {
    
    margin-top: 33px;
  
}

.box-hd {
    height: 45px;
}

.box-hd h3 {
    float: left;
    font-size: 20px;
    color: #494949;
}

.box-hd a {
    float: right;
    font-size: 12px;
    color: #a5a5a5;
    padding: 10px 33px 0 0;
}

.box-bd {
    /* 如果后续还有新的元素要添加这里可以不用给高度，清除浮动即可 */
    height: 558px;
    /* background-color: #00a4ff; */
}

/* 注：这里把父亲ul的宽度调宽做法更简便，否则还要把最后一个盒子的右外边距去掉，反正ul在页面中也看不见 */
.box-bd ul {
    width: 1220px;
}

.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 {
    font-size: 14px;
    color: #050505;
    font-weight: 400;
    padding: 24px 21px 20px 24px;
}

.box-bd ul li .info {
    font-size: 12px;
    color: #999;
    padding: 0 21px 0 24px;
}

.box-bd ul li .info span {
    color: #ff7c2d
}

10.制作页面底部footer

成图：
在这里插入图片描述
首先得有一个大盒子footer，然后footer分两个小盒子（copyrigt）和（links），copyright中有img，p，和a。links中是三个自定义标签dl
html:

<!-- footer模块 -->
    <div class="fotter">
        <div class="w">
            <div class="copyright">
                <img src="images/logo.png" alt="">
                <p>学成在线致力于普及中国最好的教育它与中国一流大学和机构合作提供在线课程。<br />
                    <!-- 这里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>
                    <dd><a href="#">工作机会</a></dd>
                    <dd><a href="#">客户服务</a></dd>
                    <dd><a href="#">帮助</a></dd>
                </dl>
            </div>
        </div>
    </div>
</body>

</html>

css:

/* footer模块 */
.fotter {
/* 因为footer是标准流，而上边的小li又是浮动的，所以这里需要给上边ul添加类classfix使用伪类清除浮动 */
    height: 418px;
    background-color: #fff;
}

.fotter .w {
    padding-top: 35px;
    margin-top: 38px;
}

.copyright {
    float: left;
}

.copyright p {
    font-size: 12px;
    color: #666666;
    margin: 25px 0 15px 0;
}

.copyright .app {
    display: block;
    width: 117px;
    height: 33px;
    font-size: 16px;
    color: #00a4ff;
    line-height: 33px;
    text-align: center;
    border: 1px solid #00a4ff;
}

.links {
    float: right;
}

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

.links dl dt {
    font-size: 16px;
    color: #333333;
    margin-bottom: 10px;
}

.links dl dd a {
    font-size: 12px;
    color: #333333;

}

对了，还有css文件顶部区域的全局修改，附下：

* {
    margin: 0;
    padding: 0;
}

li {
    list-style: none;
}

a {
    text-decoration: none;
}

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

.clearfix:after {
    content: "";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

.clearfix {
    /* IE6、7 专有 */
    *zoom: 1;
}

好了，学成在线项目轻松搞定

码代码的小涛
关注
  • 1
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
HTML+CSS学成在线案例的素材和源码以及切图工具cutterman
07-22
内容概要：HTML+CSS学成在线案例的素材和源码，需要的小伙伴可以下载，里面还有最好用的切图工具cutterman，帮助你一秒切图，下载完注册个cutterman账号即可使用 适合人群：具有一定的前端基础，CSS学完浮动可以尝试...
html+css入门小兔鲜项目
12-05
HTML+CSS入门小兔鲜项目 本项目旨在使用 HTML 和 CSS 来构建一个小兔鲜项目，学习目标是能够在网页中使用精灵图，使用背景大小属性，设置背景图片的大小，认识 CSS 写作顺序，提高代码专业性和浏览器渲染性能，以及...
网页制作基础学习——HTML+CSS常用代码
热门推荐
北辰的博客
02-01 4万+
HTML（HyperText Markup Language）,即超文本标记语言，是用于描述网页文档的一种描述标记语言。是标准通用标记语言下的一个应用，也是一种规范，一种标准，它通过标记符号来标记要显示的网页中的各个部分。
HTML+CSS作品展示（学成在线网）
weixin_42541725的博客
01-21 1705
HTML+CSS作品展示（学成在线网）
HTML+CSS练习小项目——百叶窗
秋刀鱼不做梦的编程日常
05-16 980
HTML+CSS练习小项目——百叶窗
学成在线首页静态页面（HTML+CSS）
m0_68259809的博客
07-11 2661
本文主要介绍学成在线首页静态页面的制作。
HTML+CSS 网页项目
Liu_wen_wen的博客
06-11 3752
新疆旅游网页 博客页面 祝福墙 Happy Wall 学生注册表 商品管理后台
案例：学成在线案例（html+css）
a_xia_o的博客
01-29 2678
典型的企业级网站案例：附加HTML代码和CSS样式，适合新手练手
前端（HTML + CSS + JS）
wuweixiaoyue的博客
11-24 2992
CSS可以控制页面的展示效果，HTML决定页面结构。
前端：【学成在线项目】HTML+CSS详细制作过程（代码只做参考）
weixin_49555741的博客
03-20 8340
1. 案例准备工作 1.1 准备素材和工具 （素材在最后有链接哦） 学成在线PSD源文件 开发工具：Photoshop（切图）/cutterman插件+vscode（写代码）+chrome（测试） 1.2 vscode案例准备 创建目录LearnOnline文件夹，存放页面的相关材料。 用vscode打开文件夹。 在LearnOnline文件夹里新建images文件夹来保存图片。 新建首页文件index.html（首页网站统一命令index.html）。 新建style.css样式
[附相应图片]HTML+CSS学成网首页制作基础案例
weixin_43682519的博客
01-23 8245
这是一个比较基础的html和css基础案例实战，适合刚学习完各种html控件和css标签的应用。
HTML+CSS+JS学习（持续更新中）
m0_46486963的博客
10-28 5323
超链接可以让我们从一个页面跳转到其他页面，或者是当前页面的其他的位置使用a标签来定义超链接，href属性指定跳转的目标路径，值可以是一个外部网站的地址，也可以写一个内部页面的地址超链接是也是一个行内元素，在a标签中可以嵌套除它自身外的任何元素，那么嵌套的元素就相当于一个超链接。在网页中HTML专门用来负责网页的结构，所以在使用HTML标签的时候，应该关注的是标签的语义，而不是他的样式，这里先介绍几个基本的于一标签，还有些常用的标签放在后面具体讲解。标签用来向页面中引入一个外部的音频文件。
HTML+CSS实现淘宝首页
道阻且长，行则将至。
01-03 3万+
一、HTML+CSS实现淘宝首页 仿写淘宝页面，趁着元旦假期终于把这个淘宝页面给做好了，原创不易，欢迎大家点赞和评论，需要源代码的评论区留言或者加我QQ（2997381395），大家记得关注我哦，我会不定期的跟大家分享文章。 二、页面结构如下： ...
学成在线前端练手项目html+css
03-19
本项目“学成在线前端练手项目html+css”是专为学习和提升前端技能设计的一系列练习，它聚焦于HTML（超文本标记语言）和CSS（层叠样式表）两大核心技术。下面将详细阐述这两个知识点及其在实际项目中的应用。 HTML...
【HTML+CSS练习二】学成在线首页
03-06
【HTML+CSS练习二】学成在线首页是一个学习HTML和CSS基础的实践项目，旨在帮助初学者通过实际操作理解这两种语言的基本用法。这个练习包含了HTML结构和CSS样式设计，以及部分图片素材的使用，使得页面看起来更加生动...
2024最新学成在线网页实战项目代码
05-23
在本资源中，“2024最新学成在线网页实战项目代码”是一个涵盖了网页开发基础技术的实践教程，主要涉及HTML和CSS两大部分，并包含了必要的图片素材。这个项目旨在帮助学习者通过实际操作来提升其网页设计和开发技能...
CSS实现图片边框酷炫效果
最新发布
流绪@微梦
07-26 1300
我们在浏览一些网页时，经常会看到一些好看酷炫的元素边框效果（如下图），那么这些效果是怎么实现的呢？我们知道，一般的边框，要么是实线，要么是虚线（点状，短横线），但是遇到一些特殊的边框，传统边框就束手无策了。遇到这种边框，不妨考虑下用 border-image。border-image属性可以给边框添加背景图片，实现图片边框效果。在css中，可以使用border-image属性设置图片边框，只需要给元素添加border-image样式即可。
Web前端：HTML篇（一）
sjb2274540432的博客
07-22 1043
超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。您可以使用 HTML 来建立自己的 WEB 站点，HTML 运行在浏览器上，由浏览器来解析。
html实现酷炫美观的可视化大屏(十种风格示例，附源码)
xcLeigh
07-25 2316
html实现酷炫美观的可视化大屏(十种风格示例，附源码)，大屏源码，可视化大屏模板源码，html可视化大屏源码下载，内含十种不同风格的大屏可视化代码，详细的讲解，酷炫的线条，美观的设计，让图文图表结合的更融洽。兼容各种大屏，调整页面到合适的分辨率，F12全屏观看。各种风格都有，代码上手简单，代码独立，可以直接使用。也可直接预览效果。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值