案例练习目的是总结以前的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. 了解GTIN小记

    GTIN为条形码,即"全球贸易项目代码"(Global Trade Item Number ) GTIN用作识别商品品项的全球性独一编码,是编码系统中应用最广泛的标识代码. GTI ...

  2. php array remove empty values

    print_r(array_filter($linksArray)); 參考 Remove empty array elements Remove Empty Array Elements In PH ...

  3. mysql 学习之1 mysql在window系统下的安装

    转载: https://blog.csdn.net/weixin_43295278/article/details/8287440 此方法只 适用 于window系统 坑 此篇文章在使用 alter ...

  4. 34. Thread类的常用方法

    1.构造方法 Thread() 分配新的 Thread 对象. Thread(String name)  分配新的 Thread 对象并指定线程名字 2.方法 1)setName(String nam ...

  5. H5调用百度地图导航

    template <div class="map"> <div class="content_flex"><img src=&qu ...

  6. C中空指针、NULL与0

    空指针是指确保可以没有指向任何一个对象的指针.空指针常量值通常使用宏定义NULL来表示. 空指针和任何非空指针比较都不相等,因此经常作为函数异常时的返回值使用. 链表也经常在数据末尾放一个空指针提示后 ...

  7. checkbox与文字对齐

    checkbox和后面的文字如果不加样式,会导致checkbox和文字对齐,解决办法是对checkbox和文字同时添加如下样式: vertical-align:middle;

  8. java之短路与&&和短路或||

    短路的意思就是惰性计算,符号右边的就不进行计算了. ||和&&就是这样,

  9. NX二次开发-输入X向量Y向量输出一个3*3矩阵UF_MTX3_initialize

    NX9+VS2012 #include <uf.h> #include <uf_csys.h> #include <uf_mtx.h> UF_initialize( ...

  10. day28-描述符应用与类的装饰器

    #!/usr/bin/env python# -*- coding:utf-8 -*-# ------------------------------------------------------- ...