学成在线项目_前端实战项目（学成在线）超详解

最新推荐文章于 2024-07-06 20:10:23 发布
最新推荐文章于 2024-07-06 20:10:23 发布
阅读量829 收藏 2
点赞数
文章标签： 学成在线项目
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_39574708/article/details/111584277
版权

17b3bc3d9f4619235a8605d95f14be2f.png

## CSS书写顺序

67b216eaf9b252d251b1cdd4c9e80842.png

## 导航栏制作方法（头部）

不用很多a而是用li。li包含连接（li+a）的做法

18e5556240286086ff1349580a3c1704.png

代码：

- html

```html

<div class="header w">

<!-- logo部分 -->

<div class="logo">

<img src="image/logo.png" alt="">

</div>

<!-- 导航栏部分 -->

<div class="nav">

<ul>

</ul>

</div>

<!-- 搜索框部分 -->

<div class="search">

</div>

<!-- 用户模块 -->

<div class="user">

</div>

</div>

```

- CSS

```css

.header {

height: 42px;

margin: 30px auto;

}

.logo {

float: left;

width: 198px;

height: 42px;

}

.nav {

float: left;

margin-left: 70px;}

.nav ul li {

float: left;

margin: 0 10px;

}

.nav ul li a {

display: block;

height: 42px;

padding: 0 10px;

line-height: 42px;

font-size: 18px;

color: #050505;

}

.nav ul li a:hover {

border-bottom: 2px sol

color: #737475;

}

/* 搜索模块 */

.search {

float: left;

height: 42px;

width: 412px;

margin-left: 95px;

}

.search input {

float: left;

border: 1px solid #a2d

border-right: 0px;

padding-left: 15px;

height: 40px;

width: 345px;

/* padding会撑大盒子所

font-size: 14px;

color: #bfbfbf;

}

.search button {

float: left;

border: 0;

width: 50px;

height: 42px;

background: url(image/

}

.user {

float: right;

height: 42px;

line-height: 42px;

margin-right: 30px;

font-size: 14px;

color: #666;

}

```

## Banner部分

43c6929484fb641c9f731eb6f41e22a3.png

代码：

- html

```html

<div class="banner">

<!-- 版心部分 -->

<div class="w">

<!-- 右侧导航栏 -->

<div class="subnav">

<ul>

<li><a href="#">前端开发<span>></

<li><a href="#">后端开发<span>></

<li><a href="#">移动开发<span>></

<li><a href="#">人工智能<span>></

<li><a href="#">商业预测<span>></

<li><a href="#">云计算&大数据<spa

<li><a href="#">运维&从测试<span>

<li><a href="#">UI设计<span>></sp

<li><a href="#">产品<span>></span

</ul>

</div>

<!-- 左侧导航栏 -->

<div class="course">

<h3>我的课程表</h3>

<ul>

<li>

<h4>继续学习 程序语言设计</h4

<p>正在使用-程序语言对象</p>

</li>

<li>

<h4>继续学习 程序语言设计</h4

<p>正在使用-程序语言对象</p>

</li>

<li>

<h4>继续学习 程序语言设计</h4

<p>正在使用-程序语言对象</p>

</li>

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

</ul>

</div>

</div>

</div>

```

- css

```css

.banner {

height: 422px;

background-color: #1c036c;

}

.banner .w {

height: 422px;

background: url(image/banner

}

.subnav {

float: left;

width: 190px;

height: 422px;

background-color: rgba(0,0,0

}

.subnav ul li {

height: 45px;

line-height: 45px;

margin: 0 20px;

}

.subnav ul li a {

font-size: 14px;

color: #fff;

}

.subnav ul li a span {

float: right;

}

.subnav ul li a:hover {

color: #00b4ff;

}

.course {

margin-top: 50px;

float: right;

width: 230px;

height: 300px;

background-color: #fff;

}

.course h3 {

height: 48px;

line-height: 48px;

text-align: center;

font-size: 18px;

color: #fff;

background-color: #9bceea;

}

.course ul {

padding: 0 20px;

}

.course ul li {

border-bottom: 1px solid #f7

padding: 15px 0;

}

.course ul li h4 {

font-size: 16px;

color: #4e4e4e;

}

.course ul li p {

font-size: 12px;

color: #a5a5a5;

}

.course ul a {

display: block;

height: 38px;

line-height: 38px;

text-align: center;

margin-top: 6px;

border: 1px solid #00a4ff;

font-size: 16px;

color: #00a4ff;

}

```

## 精品推荐部分

f906e8d4a5b3faa507fa95b08581014c.png

代码：

- html

```html

<div class="goods w">

<h3>精品推荐</h3>

<ul>

<li><a href="#">JQuery</a>|</li>

<li><a href="#">Spark</a>|</li>

<li><a href="#">MYSOL</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>

<!-- 新品推荐部分结束 -->

<!-- 精品推荐核心部分开始 -->

<div class="box w">

<div class="hd">

<h3>精品推荐</h3>

<a href="#">查看全部</a>

</div>

<div class="bd">

<ul>

<li>

<img src="image/b1.png" alt="">

<h4>Think PHP 5.0 博客系统实战项

<div class="info"><span>高级</sp

<!-- info详细信息 -->

</li>

</ul>

<ul>

<li>

<img src="image/b1.png" alt="">

<h4>Think PHP 5.0 博客系统实战项

<div class="info"><span>高级</sp

</li>

</ul>

<ul>

<li>

<img src="image/b1.png" alt="">

<h4>Think PHP 5.0 博客系统实战项

<div class="info"><span>高级</sp

</li>

</ul>

<ul>

<li>

<img src="image/b1.png" alt="">

<h4>Think PHP 5.0 博客系统实战项

<div class="info"><span>高级</sp

</li>

</ul>

<ul>

<li>

<img src="image/b1.png" alt="">

<h4>Think PHP 5.0 博客系统实战项

<div class="info"><span>高级</sp

</li>

</ul>

<ul>

<li>

<img src="image/b1.png" alt="">

<h4>Think PHP 5.0 博客系统实战项

<div class="info"><span>高级</sp

</li>

</ul>

<ul>

<li>

<img src="image/b1.png" alt="">

<h4>Think PHP 5.0 博客系统实战项

<div class="info"><span>高级</sp

</li>

</ul>

<ul>

<li>

<img src="image/b1.png" alt="">

<h4>Think PHP 5.0 博客系统实战项

<div class="info"><span>高级</sp

</li>

</ul>

<ul>

<li>

<img src="image/b1.png" alt="">

<h4>Think PHP 5.0 博客系统实战项

<div class="info"><span>高级</sp

</li>

</ul>

<ul>

<li>

<img src="image/b1.png" alt="">

<h4>Think PHP 5.0 博客系统实战项

<div class="info"><span>高级</sp

</li>

</ul>

</div>

</div>

```

- css

```css

.goods {

margin-top: 10px;

height: 60px;

line-height: 60px;

background-color: #fff;

box-shadow: 0 2px 2px 2

}

.goods h3 {

float: left;

font-size: 16px;

color: #00a4ff;

margin-left: 34px;

}

.goods ul {

float: left;

}

.mod {

float: right;

margin-right: 30px;

}

.goods ul li {

float: left;

}

.goods li a {

padding: 33px;

font-size: 16px;

color: #050505;

line-height: 60px;

}

.goods li a:hover {

color: #00a4ff;

}

/* 精品推荐核心部分开始 */

.box {

margin-top: 38px;

height: 596px;

}

.hd {

height: 40px;

}

.hd h3 {

float: left;

font-style: normal;

font-size: 20px;

color: #494949;

}

.hd a {

float: right;

height: 40px;

line-height: 40px;

font-size: 12px;

color: #a5a5a5;

}

.bd {

height: 556px;

}

.bd ul {

width: 1230px;

}

/* 当ul足够大的时候，子孩子

.bd ul li {

float: left;

margin-right: 15px;

margin-bottom: 15px;

height: 270px;

width: 230px;

}

.bd ul li img {

width: 100%;

}

/* 由于图片过大，所以强制性

.bd ul li h4 {

margin: 25px 20px 20px

}

.info {

margin-left: 25px;

}

.info span {

color: #ff7c2d;

}

```

## 编程入门部分

25b27da202e82878b234a50d49d38061.png

```html

<div class="box2 w">

<div class="hd1">

<h3>编程入门</h3>

<ul>

<li><a href="#">热门</a></li>

<li><a href="#">初级</a></li>

<li><a href="#">中级</a></li>

<li><a href="#">高级</a></li>

</ul>

<a href="#">查看全部</a>

</div>

<div class="bd1">

<div class="bd1i">

<img src="image/bdi1.png" alt="">

</div>

</div>

<div class="br1">

<div class="br1h">

</div>

<div class="br1f">

<ul>

<li>

<img src="image/br1if.png" alt="">

<h4>Android Hybrid APP开发实战 H5+原生！ </h4>

<div class="info"><span>高级</span> • 1125人在学

</li>

<li>

<img src="image/br1if.png" alt="">

<h4>Android Hybrid APP开发实战 H5+原生！ </h4>

<div class="info"><span>高级</span> • 1125人在学

</li>

<li>

<img src="image/br1if.png" alt="">

<h4>Android Hybrid APP开发实战 H5+原生！ </h4>

<div class="info"><span>高级</span> • 1125人在学

</li>

<li class="br1fb">

<img src="image/br1if.png" alt="">

<h4>Android Hybrid APP开发实战 H5+原生！ </h4>

<div class="info"><span>高级</span> • 1125人在学

</li>

</ul>

</div>

</div>

```

## 最终效果图

7dc36c820391d4e73c6884f89e3f6b85.png

## 学习中遇到的问题

- 背景透明色的设置

15da18cec8efaa7ab7066e769f71d137.png

盒子阴影

```css

box-shadow: 0 2px 2px 2px rgba(0, 0, 0, .2);

```

h标签如何去掉字体粗细

```html

font-weight: normal;

```

weixin_39574708
关注
学成在线案例（完整版）
weixin_45592339的博客
11-02 1572
CSS书写顺序 导航栏制作方法 不用很多a而是用li。li包含连接（li+a）的做法
学成在线案例
m0_46548202的博客
12-06 561
学成在线案例 样例： 1、CSS属性书写顺序 建议遵循以下顺序： 布局定位属性：display / position / float / clear / visibility / overflow（建议 display 第一个写，毕竟关系到模式） 自身属性：width / height / margin / padding / border / background 文本属性：color / font / text-decoration / text-align / vertical-align / w
学成在线项目实例web前端
11-29
学成在线项目源码，素材。
第1章（学成在线）： 项目背景，项目介绍，环境搭建
最新发布
aa35434的博客
07-06 1662
1.项目背景 1.1 在线教育市场环境 以下内容摘自https://report.iresearch.cn/content/2021/01/358854.shtml 在线教育行业是一个有着极强的广度和深度的行业，从校内到校外；从早幼教到职业培训；从教育工具到全信息化平台等等。 2020年的新冠疫情外生冲击，让在线教育再次站在聚光灯下。疫情下教育领域获融资最多，而其中在线教育最受资本青睐。据艾瑞咨询统计，2020年教育行业累计融资1164亿元，其中在线教育融资金额1034亿元，占比89%。与此同时，在行业处于
前端基础项目（一）学成在线网站静态网页，HTML+CSS，简单基础，附完整源码
m0_50971744的博客
03-29 9109
简单前端基础项目，网站页面，附完整源码
【前端】学成在线项目
qq_43641035的博客
01-16 601
HTML结构 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-eq...
学成网在线项目
WangZhang_521的博客
12-31 384
学成网在线项目 <!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"> <tit
【玩转CSS】学成在线（文末素材源码自取）
m0_67401270的博客
07-28 237
?一个人走得远了，就会忘记自己为了什么而出发，希望你可以不忘初心，不要随波逐流，一直走下去????欢迎关注????留言????本文由原创，CSDN首发！????首发时间2022年7月24日如果觉得博主的文章还不错的话，希望小伙伴们三连支持一下哦。...
综合案例：学成在线案例
weixin_47481102的博客
05-26 1587
1.准备素材和工具 1.学成在线PDS源文件。 2.开发工具=PS（切图）/cutterman插件+vscode（代码）+Chrome（测试）。 2.案例准备工作 本次采取结构与样式相分离思想： 1.创建study目录文件夹（用于存放页面的相关内容） 2.用vscode打开这么目录文件夹 3.study目录内新建images文件夹，用于保存图片 4.新建首页文件index.heml(网站首页统一规定为index.html 5.新建style.css样式文件，采用外链接样式表 6.使用&l
学成在线案例.zip
07-14
学习一个星期HTML&CSS后做的项目，内含学成在线网站首页PSD、制作静态页面的HTML代码及CSS代码。
学成在线(案例)
独特的懒人
08-13 1676
学成在线 2. CSS属性书写顺序（重点） 生活中衡量一个人有气质： ​ 穿着打扮 举止言行 等等 编程中如何衡量一个人的代码能力： ​ 规范标准 优雅高质量 等等 一个词形容 专业 从代码中看出是否有经验… 建议遵循以下顺序： 布局定位属性：display / position / float / clear / visibility / overflow（建议 display 第一个写，毕竟关系到模式） 自身属性：width / height / margin / padding
HTML5+CSS3案例一：学成在线
zhaoyang_m的博客
07-17 1359
链接：https://pan.baidu.com/s/10KBDVULhIOW698yODAmvSQ?，包含 HTML、CSS、图片、JavaScript等等。布局思路：先整体再局部，从外到内，从上到下，从左到右。标签结构：h1 > a > 网站名称（搜索关键字）调整盒子位置 → flex 布局、内外边距。画盒子，调整盒子范围 → 宽高背景色。搜索引擎优化：提升网站百度搜索排名。文件夹，内部包含当前网站的。网站根目录是指存放网站的。控制图片、文字内容样式。
案例：学成在线案例（html+css）
a_xia_o的博客
01-29 2786
典型的企业级网站案例：附加HTML代码和CSS样式，适合新手练手
综合案例-学成在线
syyy9090的博客
04-06 628
HTML代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>学成在线</title> <link rel="stylesheet" href="style.css"> </head> &lt...
学成在线案例实战（1）
weixin_45147894的博客
06-15 181
把study文件放入一个盘中，然后新建子文件夹和新建文件 页面。并引入css样式。css样式建在同一级下即可。
前端学习笔记（学成在线案例）
zhangfei199507的博客
03-09 232
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="style.css"> </head> <body&...
SpringBoot搭建与部署web项目详解：IDEA实战教程
- **打包与运行**：由于Spring Boot内置支持，可以直接将项目打包成jar并运行，也可以转换为war包，通过Tomcat进行部署。 - **部署流程**：指导用户如何将打包后的war文件复制到Tomcat的webapps目录下，或者通过...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值