前端学习笔记（学成在线案例）

最新推荐文章于 2023-01-29 17:25:28 发布
VIP文章 最新推荐文章于 2023-01-29 17:25:28 发布
阅读量216 收藏
点赞数
文章标签： css html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhangfei199507/article/details/104761430
版权 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
<!--头部开始-->
<div class="w head">
  <div class="logo"><img src="images/logo_03.png" alt=""/></div>
  <div class="nov">
    <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="anu">
    <img src="images/anu_03.jpg">
    <span>qq-leishui</span>
  </div>
</div>
<!--头部结束-->
<!--banner部分开始-->
<div class="banner">
  <div class="w">
    <div class="subnav">
      <ul>
        <li><a href="#">前端开发 <span> > </span></a></li>
        <li><a href="#">后端开发 <span> > </span></a></li>
        <li><a href="#">移动开发 <span> > </span></a></li>
        <li><a href="#">人工智能 <span> > </span></a></li>
        <li><a href="#">商业预测 <span> > </span></a></li>
        <li><a href="#">云计算&大数据 <span> > </span></a></li>
        <li><a href="#">运维&从测试 <span> > </span></a></li>
        <li><a href="#">UI设计 <span> > </span></a></li>
        <li><a href="#">产品 <span> > </span></a></li>
      </ul>
    </div>
    <div class="course">
      <h1>我的课程表 </h1>
      <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>
</div>
<!--banner部分结束-->
<!--goods部分开始-->
<div class="w goods">
  <h1>精品推荐</h1>
  <div class="goods-item">
    | <a href="#">JQuery </a>
    | <a href="#">Spark</a>
    | <a href="#">MySQL</a>
    | <a href="#">JavaWeb</a>
    | <a href="#">MySQL</a>
    | <a href="#">JavaWeb</a>
  </div>
  <div class="mod">修改兴趣</div>
</div>
<!--goods部分结束-->
<!--box部分开始-->
<div class="w box">
  <div class="box-hd">
    <h1>精品推荐</h1>
    <a href="#">查看全部</a>
  </div>
  <div class="box-bd clearfix">
    <ul>
      <li>
        <a>
          <img src="images/kc1_03.jpg">
          <h1>Think PHP 5.0 博客系统实战项目演练 </h1>
          <p><span>高级</span>  •  1125人在学习</p>
        </a>
      </li>
      <li>
        <a>
          <img src="images/kc1_03.jpg">
          <h1>Android 网络图片加载框架详解  </h1>
          <p><span>高级</span>  •  1125人在学习</p>
        </a>
      </li>
      <li>
        <a>
          <img src="images/kc1_03.jpg">
          <h1>Angular 2 最新框架+主流技术+项目实战   </h1>
          <p><span>高级</span>  •  1125人在学习</p>
        </a>
      </li>      <li>
      <a>
        <img src="images/kc1_03.jpg">
        <h1>Android Hybrid APP开发实战 H5+原生！ </h1>
        <p><span>高级</span>  •  1125人在学习</p>
      </a>
    </li>
      <li>
        <a>
          <img src="images/kc1_03.jpg">
          <h1>Think PHP 5.0 博客系统实战项目演练 </h1>
          <p><span>高级</span>  •  1125人在学习</p>
        </a>
      </li>
      <li>
        <a>
          <img src="images/kc1_03.jpg">
          <h1>Think PHP 5.0 博客系统实战项目演练 </h1>
          <p><span>高级</span>  •  1125人在学习</p>
        </a>
      </li>
      <li>
        <a>
          <img src="images/kc1_03.jpg">
          <h1>Think PHP 5.0 博客系统实战项目演练 </h1>
          <p><span>高级</span>  •  1125人在学习</p>
        </a>
      </li>
      <li>
        <a>
          <img src="images/kc1_03.jpg">
          <h1>Think PHP 5.0 博客系统实战项目演练 </h1>
          <p><span>高级</span>  •  1125人在学习</p>
        </a>
      </li>
      <li>
        <a>
          <img src="images/kc1_03.jpg">
          <h1>Think PHP 5.0 博客系统实战项目演练 </h1>
          <p><span>高级</span>  •  1125人在学习</p>
        </a>
      </li>
      <li>
        <a>
          <img src="images/kc1_03.jpg">
          <h1>Think PHP 5.0 博客系统实战项目演练 </h1>
          <p><span>高级</span>  •  1125人在学习</p>
        </a>
      </li>
    </ul>
  </div>
</div>
<!--box部分结束-->
<!--box02部分开始-->
<div class="box w">
  <div class="box-hd">
    <h1>精品推荐</h1>
    <div class="nav1">
      <ul>
        <li>热门</li>
        <li>初级</li>
        <li>中级</li>
        <li>高级</li>
      </ul>
    </div>
    <a href="#">查看全部</a>
  </div>
  <div class="box02-bd">
    <div class="bd-left">
      <h1>PHP入门：<br />基础语法到实际应用</h1>
        <ul>
          <li>零基础入门：语法与界</li>
          <li>进阶：网络与数据缓存</li>
          <li>界面到数据存储</li>
        </ul>
    </div>
    <div class="bd-right">
      <div class="bd-hd"></div>
      <div class="bd-bd">
        <ul>
          <li>
            <a>
              <img src="images/kc1_03.jpg">
              <h1>Think PHP 5.0 博客系统实战项目演练 </h1>
              <p><span>高级</span>  •  1125人在学习</p>
            </a>
          </li>
          <li>
            <a>
              <img src="images/kc1_03.jpg">
              <h1>Think PHP 5.0 博客系统实战项目演练 </h1>
              <p><span>高级</span>  •  1125人在学习</p>
            </a>
          </li>
          <li>
            <a>
              <img src="images/kc1_03.jpg">
              <h1>Think PHP 5.0 博客系统实战项目演练 </h1>
              <p><span>高级</span>  •  1125人在学习</p>
            </a>
          </li>
          <li>
            <a>
              <img src="images/kc1_03.jpg">
              <h1>Think PHP 5.0 博客系统实战项目演练 </h1>
              <p><span>高级</span>  •  1125人在学习</p>
            </a>
          </li>
        </ul>
      </div>
    </div>
  </div>
</div>
<!--box02部分结束-->
<!--box03部分开始-->
<div class="box w">
  <div class="box-hd">
    <h1>精品推荐</h1>
    <div class="nav1">
      <ul>
        <li>热门</li>
        <li>初级</li>
        <li>中级</li>
        <li>高级</li>
      </ul>
    </div>
    <a href="#">查看全部</a>
  </div>
  <div class="box02-bd">
    <div class="bd-left">
      <h1>PHP入门：<br />基础语法到实际应用</h1>
      <ul>
        <li>零基础入门：语法与界</li>
        <li>进阶：网络与数据缓存</li>
        <li>界面到数据存储</li>
      </ul>
    </div>
    <div class="bd-right">
      <div class="bd-hd"></div>
      <div class="bd-bd">
        <ul>
          <li>
            <a>
              <img src="images/kc1_03.jpg">
              <h1>Think PHP 5.0 博客系统实战项目演练 </h1>
              <p><span>高级</span>  •  1125人在学习</p>
            </a>
          </li>
          <li>
            <a>
              <img src="images/kc1_03.jpg">
              <h1>Think PHP 5.0 博客系统实战项目演练 </h1>
              <p><span>高级</span>  •  1125人在学习</p>
            </a>
          </li>
          <li>
            <a>
              <img src="images/kc1_03.jpg">
              <h1>Think PHP 5.0 博客系统实战项目演练 </h1>
              <p><span>高级</span>  •  1125人在学习</p>
            </a>
          </li>
          <li>
            <a>
              <img src="images/kc1_03.jpg">
              <h1>Think PHP 5.0 博客系统实战项目演练 </h1>
              <p><span>高级</span>  •  1125人在学习</p>
            </a>
          </li>
        </ul>
      </div>
    </div>
  </div>
</div>
<!--box03部分结束-->
<!--box04部分开始-->
<div class="box w">
  <div class="box-hd">
    <h1>精品推荐</h1&g
最低0.47元/天 解锁文章
zhangfei199507
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
综合案例：学成在线案例
weixin_47481102的博客
05-26 1526
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
学成在线案例（完整版）
weixin_45592339的博客
11-02 1476
CSS书写顺序 导航栏制作方法 不用很多a而是用li。li包含连接（li+a）的做法
学成在线案例.zip
07-14
学习一个星期HTML&CSS后做的项目，内含学成在线网站首页PSD、制作静态页面的HTML代码及CSS代码。
学成在线案例（完整代码）
m0_63760882的博客
03-06 5842
头部区域 分四个模块： logo（图片） 导航栏（无序列表） 搜索（文本输入框、button按钮） 用户（图片） <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="wi
案例：学成在线案例（html+css）
a_xia_o的博客
01-29 2356
典型的企业级网站案例：附加HTML代码和CSS样式，适合新手练手
前端学习笔记（不断更新中）
01-08
1.img标签中alt：图片加载失败时的提示文字 2.a标签中的target： _blank：在新窗口中打开被链接文档 _top：在窗口主体中打开被链接文档 ..._parent：在父框架中打开被链接文档 3.input标签中的require：将文本输入框...
【前端学习】HTML学习笔记-JS进阶
01-08
JS里面的对象 全局对象window 浏览器上是window window 有以下浏览器私有属性常用： alert（弹窗） prompt（用户填写） comfirm（确认） document(文档 DOM) console（开发者） history（浏览器 BOM） ...
前端工程师学习笔记 超级详细
10-31
正则表达式学习笔记 微信小程序学习笔记 前端部署相关笔记 前端UI库使用记录笔记 前端JS工具库使用笔记 Webpack学习笔记 Vue笔记整合 UmiJS笔记 TypeScrip笔记 Scss笔记 React笔记 ReactHooks笔记 Promise学习笔记 ...
Java 学成在线笔记
04-15
Java 学成在线笔记。 在线教育的markdown笔记 笔记 Java 学成在线笔记。
javaweb 前端 html学习笔记
04-26
javaweb 前端 html学习笔记
学成在线项目实例web前端
11-29
学成在线项目源码，素材。
学成在线项目
08-26
学成在线服务端基于Spring Boot构建，采用Spring Cloud微服务框架。 持久层：MySQL、MongoDB、Redis、ElasticSearch 数据访问层：使用Spring Data JPA 、Mybatis、Spring Data Mongodb等 业务层：Spring IOC、Aop事务控制、Spring Task任务调度、Feign、Ribbon、Spring AMQP、Spring Data Redis 等。 控制层：Spring MVC、FastJSON、RestTemplate、Spring Security Oauth2+JWT等 微服务治理：Eureka、Zuul、Hystrix、Spring Cloud Config等
学成网在线PSD素材 四个文件
06-10
前端css切图练习素材包，包含4个psd文件（学成在线职业规划.psd 学成在线首页.psd 学成在线课程列表页.psd 学成在线课程介绍页.psd）
学成在线案例
qq_45359288的博客
03-15 202
1、准备工作 代码示例： 2、代码
学成在线案例完整版（6）
weixin_45147894的博客
06-16 1559
html代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>学成在线-不是所有的网站都叫学成在线</title> <link rel="stylesheet" href="style.css"> </head> <body> <!-- header头部模块开始 --&g...
学成在线案例 项目流程（完整代码）
baidu_19251585的博客
07-25 465
学成在线项目布局
分享一个简单的前端实战案例——学成在线首页
qq_44715697的博客
07-31 696
一、准备阶段 1.准备工具 一个前端IDE，推荐vscode。 PS软件并且安装cutterman插件（可以去我之前的博文中寻找——居然还在“手动”切图？ 一个PS插件让你爽翻天） 使用浏览器（chrome或者Firefox）进行测试。 2. 准备操作 首先建立一个文件夹，并且在vscode中打开。 新建images文件夹，用于存储图片素材。 新建index.html文件，编写结构代码。 新建style.css文件，编写样式代码。 将样式引入带HTML文件中，使用<link>标签。 在样
web前端开发 学成在线首页案例+源码
phoebemeng的博客
07-03 3043
学成在线首页HTML+css 源代码;
前端网页项目-学成在线案例
m0_51495354的博客
11-16 2003
前端网页项目-学成在线案例
前端学习笔记 javascript
最新发布
08-31
对于前端学习笔记，我可以给你一些常见的主题和要点，帮助你开始学习前端开发。 1. HTML基础： - 了解HTML的基本结构和标签 - 学习如何创建和组织网页内容 - 掌握常用的HTML标签，如标题、段落、链接、图像等 2. CSS样式： - 学习如何使用CSS来为网页添加样式 - 掌握CSS选择器和属性 - 学习如何设置文字样式、颜色、背景、布局等 3. JavaScript基础： - 理解JavaScript的基本概念和语法 - 学习如何操作DOM元素，实现网页交互 - 掌握常用的JavaScript函数和事件处理 4. 响应式设计： - 学习如何使用媒体查询和弹性布局创建响应式网页 - 掌握移动优先设计和流体网格布局 5. 前端框架和工具： - 了解流行的前端框架，如React、Angular、Vue等 - 学习使用前端构建工具，如Webpack、Gulp等 - 掌握前端调试工具和浏览器开发者工具的使用 这些是前端学习的一些基本知识点，你可以根据自己的兴趣和需求深入学习和实践。记得不断练习和实践，通过实际项目来提升自己的前端开发能力。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值