案例练习目的是总结以前的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. CF#538 C - Trailing Loves (or L'oeufs?) /// 分解质因数

    题目大意: 求n!在b进制下末尾有多少个0 https://blog.csdn.net/qq_40679299/article/details/81167283 一个数在十进制下末尾0的个数取决于10 ...

  2. 2019-9-11-.NET-Standard

    title author date CreateTime categories .NET Standard lindexi 2019-9-11 9:0:29 +0800 2019-9-11 9:0:2 ...

  3. 干货满满!10分钟看懂Docker和K8S

    2010年,几个搞IT的年轻人,在美国旧金山成立了一家名叫“dotCloud”的公司. 这家公司主要提供基于PaaS的云计算技术服务.具体来说,是和LXC有关的容器技术. LXC,就是Linux容器虚 ...

  4. SSL/TLS工作原理

    以前已经介绍过HTTP协议和HTTPS协议的区别,这次就来了解一下HTTPS协议的加密原理. 为了保证网络通信的安全性,需要对网络上传递的数据进行加密.现在主流的加密方法就是SSL (Secure S ...

  5. Python学习笔记(八)——正则表达式

    正则表达式 \d表示匹配一个数字 例如,1\d\d可以匹配以1开头的三位数字 \w可以匹配一个字母或者数字 例如,\d\w可以匹配12,1A等 .可以匹配任意字符 例如,py.表示pyc.pya等 * ...

  6. MySQL 刷题知识点整理

    1. left join on 与 right join on, inner join on 的区别: left join on 把左表中的行全部展示,而将寻找右表中符合的行展示: right joi ...

  7. (getElementBy**)与 querySelector(querySelectorAll) 的区别

    1. 通过类似于 document.getElementByTagName('div') 这种方式获取到的类数组,无法通过 forEach 进行遍历(可以通过for循环):而通过document.qu ...

  8. JS常见的报错类型

    解决错误前,首先要学会阅读报错信息 eg:Uncaught TypeError: ... is not a function Uncaught 表示没有被catch语句捕获到的错误 TypeError ...

  9. Java-Class-C:org.springframework.http.converter.StringHttpMessageConverter

    ylbtech-Java-Class-C:org.springframework.http.converter.StringHttpMessageConverter 1.返回顶部 1.1. impor ...

  10. python数据结构之图的实现方法

    python数据结构之图的实现方法 本文实例讲述了python数据结构之图的实现方法.分享给大家供大家参考.具体如下: 下面简要的介绍下: 比如有这么一张图:     A -> B     A ...