学成在线页面设计案例
html结构
<!DOCTYPE html>
<html lang="zh">
<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="./css/style.css">
</head>
<body>
<!-- 1.头部区域开始啦 -->
<div class="header w">
<!-- logo部分 -->
<div class="logo">
<img src="./img/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="./img/user.png" alt="">qq-leishui
</div>
</div>
<!-- 1.头部区域结束了 -->
<!--2. banner部分start -->
<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="#">前端开发<span>></span></a></li>
<li><a href="#">前端开发<span>></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="#" class="more">全部课程</a>
</div>
</div>
</div>
</div>
<!-- banner部分end -->
<!-- 3.精品推荐模块 开始-->
<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>
<!-- 3.精品推荐模块 结束-->
<!-- 4.box核心内容区 开始-->
<div class="box w">
<div class="box-hd">
<h3>精品推荐</h3>
<a href="#">查看全部</a>
</div>
<div class="box-bd">
<!-- 清除浮动
给浮动的li的父元素添加clearfix
-->
<ul class="clearfix">
<li><img src="./img/pic.png" alt="">
<h4>Think PHP 5.0 博客系统实战项目演练 </h4>
<div class="info">
<span>高级</span>
学成在线页面设计案例相关推荐
- html制作课程导航页面,学成在线页面制作（HTML+CSS部分）（顶部+轮播图部分）...
学成在线页面制作(HTML+CSS部分)(顶部+轮播图部分) 成品截图 前期准备素材 一.项目页面PSD源文件 二.前期准备工作 三.CSS属性书写顺序 四.布局分析 五.布局流程 开始页面制作 头部 ...
- 黑马程序员前端-CSS练手之学成在线页面制作
前端学习笔记教程不定期更新中,传送门: 前端HTML第一天:什么是网页?什么是HTML?网页怎么形成? 黑马程序员前端-CSS入门总结 黑马程序员前端-CSS之emmet语法 黑马程序员前端-CSS的 ...
- 15综合案例之学成在线主页设计
1.确定版心 这个页面的版心是1200px,每个版心都要水平居中对齐,可以定义版心为公共类: .w {width: 1200px;height: auto; } 2.头部制作 1号是版心盒子heade ...
- 学成在线HTML代码,学成在线页面制作（HTML+CSS部分）（顶部+轮播图部分）
成品截图 前期准备素材 一.项目页面PSD源文件 下载地址https://chuenst.lanzous.com/i7hlggnl6vc 二.前期准备工作 创建study目录文件夹 (用于存放这个页面 ...
- 实战！手把手教你实现学成在线网站首页案例【详细源码】
- [万字长文]使用 React 重写学成在线前端项目 I 代码完整可运行，步骤有详解
[万字长文]使用 React 重写学成在线前端项目 I 代码完整可运行,步骤有详解 准备工作 安装必备工具/库 nodejs React 脚手架 需要的 node 依赖包 分析需求 初始化项目 搭建框 ...
- 跟着Pink老师学前端——学成在线
最近跟着pink老师学习html+css,做了一个学成在线页面,后边根据老师的框架更改了一些图片 代码部分: <!DOCTYPE html> <html lang="en ...
- 页面显示格式化的时间、倒计时效果、学成在线案例（创建、添加节点）、学生信息表（重点）、5秒钟之后跳转页面（location.href应用）、学生信息表(页面刷新数据不丢失)（重点）——API练习案例
目录 1. 页面显示格式化的时间 2. 倒计时效果 3. 学成在线案例(创建节点.添加节点) 4.学生信息表案例(重点) 5. 5秒钟之后跳转页面(location.href的应用) 6. 学生信息表 ...
- web前端入门学习 css（5）（浮动）（ps切图）（css属性书写顺序）（学成在线网站案例）
文章目录 传统网页布局的三种方式 标准流(普通流.文档流) 浮动(为什么需要浮动?) 浮动特性 浮动元素会脱离标准流,可以与普通流的元素相重叠 如果多个盒子都设置了浮动,则它们会按照属性值一行内显示并 ...
最新文章
- python高阶函数filter_python 高阶函数之filter
- 深入探索.NET框架内部了解CLR如何创建运行时对象
- 微软开源 MS-DOS 1.25 和 MS-DOS 2.0
- 十、LINQ查询之延迟执行
- 牛客网笔记之JAVA运算符
- Windows下基于python3使用word2vec训练中文维基百科语料资料汇总
- 5、扩展骨架文件内容
- linux命令 renice,Linux命令之nice和renice
- Access SqLDbHelper
- js双击事件条件触发_js页面触发chargeRequest事件和Nginx获取日志信息
- MFC开发——MFC项目创建
- 没有云服务器？内网穿透了解一下
- DSP实验报告四：GMSK 调制与解调
- MATLAB 插值与拟合
- 简易登录以及注册界面制作
- 生命线检查计算机还是连接线,lifeline生命线泰勒到达山脚找到控制室 面对控制室的电脑电线要怎么做...
- 粒子群算法Fortran代码(OMP并行)
- am335x_gpio
- d3.js：取代d3.mouse的d3.pointer
- logstash读取Elasticsearch数据保存为json,logstash接收log数据写入kafka生产者
热门文章