案例练习目的是总结以前的css和html

还有ps的使用。

制作步骤:

  1. 准备相关文件。(内部样式表) html文件(index.html) 图片文件
  2. 准备CSS 初始化。 书写结构和样式
  3. 确定版心(是1200像素)和各个模块布局(先行后列)。

头部通栏:

共四部分 logo、导航、搜索栏、个人中心

前两个左浮动,后两个右浮动

banner部分:

背景图片+左侧侧边导航栏+右侧我的课表模块

text-align: center; /* 文字水平居中 */
font-weight: 700; /* 文字加粗 */
letter-spacing: 2px; /* 设置字间距 */
font-family: arial; /* 一般情况我们的符号都用这个字体 */
background: rgba(0, 0, 0, 0.3);/*  盒子背景半透明 */

精品推荐部分:

1.精品推荐导航栏

2.精品推荐大模块

底部

CSS案例3(在线教育网站)的更多相关文章

  1. 强力Django+杀手级xadmin开发在线教育网站

    强力Django+杀手级xadmin开发在线教育网站采用 Python3.7全新开发 整个课程都看完了,这个课程的分享可以往下看,下面有链接,之前做java开发也做了一些年头,也分享下自己看这个视频的 ...

  2. 在线学编程!十大IT在线教育网站推荐

    在线学编程!十大IT在线教育网站推荐 1.CSDN学院(http://edu.csdn.net/) CSDN学院是CSDN推出的一个面向中国软件开发者和IT专业人员的技术教育服务平台.主要提供IT领域 ...

  3. 在线学习体验大PK 云智慧发布在线教育网站性能监测报告

    互联网不但改变了我们的生活.娱乐和消费方式,也推动各行各业进行着快速变革,越来越多的职场人士必须通过不断的学习.充电才能跟上行业发展的步伐,获得职业的提升,而这也引发了国内教育市场的爆炸式发展.据统计 ...

  4. django在线教育网站开发---需求分析

    开发目录: django app设计 user model.py 编写 courses models.py 编写 -Course 课程基本信息 -Lesson 章节信息 -Video -视频 -Cou ...

  5. 又一家自适应学习平台上线,大讲台主攻IT在线教育

    自适应学习技术自2015年以内,越来越受到在线教育公司的关注和重视,极客学院创始人靳岩7月初在接受媒体采访时曾提到,百万用户只是极客学院的第一步,下一步的目标是自适应学习.靳岩认为,自适应学习代表未来 ...

  6. 基于MVC的网站和在线教育系统

    最近老表说要创业,想要做一个网站做宣传,还想要一个在线教育系统. 学习了一部分 Java,  决定用.Net MVC做官网或直接做成静态HTML网站,主要是因为.Net MVC 技术简单,效率高,需求 ...

  7. 第三百八十八节,Django+Xadmin打造上线标准的在线教育平台—网站列表分页

    第三百八十八节,Django+Xadmin打造上线标准的在线教育平台—网站列表分页 分页可以用一个第三方分页模块django-pure-pagination 下载地址:https://github.c ...

  8. 第三百八十七节,Django+Xadmin打造上线标准的在线教育平台—网站上传资源的配置与显示

    第三百八十七节,Django+Xadmin打造上线标准的在线教育平台—网站上传资源的配置与显示 首先了解一下static静态文件与上传资源的区别,static静态文件里面一般防止的我们网站样式的文件, ...

  9. 小D课堂-SpringBoot 2.x微信支付在线教育网站项目实战_1-4.在线教育后台数据库设计

    笔记 4.在线教育后台数据库设计     简介:讲解后端数据库设计    ,字段冗余的好处,及常见注意事项 1.数据库设计:          er图:          实体对象:矩形        ...

随机推荐

  1. ros机器人导航设置原点,目标点

    之前利用movebase导航定位都是通过rviz用鼠标指来指去,实验时非常方便,但实际应用总不能也人工指来指去吧,这怎么体现智能呢 启动导航后,用以前使用的rviz设设置目标点来获取map坐标系下的位 ...

  2. PHP72w安装

    PHP72w #  rpm  -Uvh   https://dl.fedoraproject.org/pub/epel/epel-release-latest-7.noarch.rpm #  rpm ...

  3. linux fcntl 对文件描述符控制

    linux fcntl 对文件描述符控制 linux fcntl 对文件描述符控制 linux fcntl 对文件描述符控制

  4. web storem破解

    话不多说 直接跳地址 http://idea.lanyus.com/ 再加个附带汉化包,使用方法已经放在压缩包里面 网盘链接: https://pan.baidu.com/s/1aEA6SSbDuRg ...

  5. 移动端布局 + iscroll + 滚动事件

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name ...

  6. Python 分解质因数

    def zys(n, value=[]): for i in range(2, int(n / 2 + 1)): if n % i == 0: value.append(i) zys(n / i, v ...

  7. springcloud -zuul(2-执行流程及源码)

    官方图 1.Servlet zuul.servletPath默认配置为/zuul,故请求为/zuul开头的会跳过dispatcherServlet直接进入ZuulServlet,该配置可以自定义配置, ...

  8. 分页工具一Pageable与Page

    import org.springframework.data.domain.Pageable; import org.springframework.data.domain.Page; 1.Page ...

  9. bzoj1005题解

    [解题思路] 引理:Prufer编码 定义:不断删除树中度数为1的最小序号的点,并输出与其相连的节点的序号,直至树中只有两个节点,所得输出序列即为Prufer编码. 性质:任意一棵n节点的树都可以用长 ...

  10. centos6 & centos7搭建ntp服务器

    原理 NTP(Network TimeProtocol,网络时间协议)是用来使计算机时间同步的一种协议.它可以使计算机对其服务器或时钟源做同步化,它可以提供高精准度的时间校正(LAN上与标准间差小于1 ...