案例练习目的是总结以前的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. jmeter-测试webservice接口

    测试webservice接口(soap类型接口) 一.webservice协议的本质 一个经过封装的post类型的HTTP请求 Web service一般就是用SOAP协议通过HTTP来调用它,其实他 ...

  2. sanic+aiohttp爬虫demo(爬图片,新闻,数据)

    直接上代码,都是很简单的一些demo,爬取的网站,都没有什么加密措施,所以应该不涉及违法数据,哈哈 1.爬取网页数据(aiohttp+sanic+scrapy+xpath解析html) from sa ...

  3. keepAlived常见问题

    1.脑裂问题 1.定义: 在一个高可用(HA)系统中,当关联着的两个结点互相之间断开通信时,本来为一个独立的对外提供服务的系统分裂为两个独立的结点,这时两个结点会争抢资源.(keepAlived 中表 ...

  4. python 对象的删除

  5. cross compile 交叉编译 ffmpeg

    ffmpeg 支持各种压缩格式的视频解码库,经常出现在各种播放器中,交叉编译也是一项麻烦的事情. 1. 下载ffmpeg 源码包   http://ffmpeg.org/releases/ffmpeg ...

  6. 二进制中1的个数(Java实现)

    问题: 输入一个整数,求其二进制中1的个数 看到这个问题,我们应该想到数的位运算: 解法一:我们每次将此数&1 ,如果结果等于1,证明此数的最后一位是1,,count++: 然后在将数右移一位 ...

  7. PHP rand() 函数

    定义和用法 rand() 函数生成随机整数. 提示:如果您想要一个介于 10 和 100 之间(包括 10 和 100)的随机整数,请使用 rand (10,100). 提示:mt_rand() 函数 ...

  8. 查看hadoop压缩方式

    bin/hadoop checknative  来查看我们编译之后的hadoop支持的各种压缩,如果出现openssl为false,那么就在线安装一下依赖包 bin/hadoop checknativ ...

  9. NX二次开发-UFUN删除链表函数UF_MODL_delete_list

    NX9+VS2012 #include <uf.h> #include <uf_modl.h> #include <uf_obj.h> #include <u ...

  10. (转)RSA加密解密及数字签名Java实现

    转:http://my.oschina.net/jiangli0502/blog/171263?fromerr=hc4izFe2  RSA公钥加密算法是1977年由罗纳德·李维斯特(Ron Rives ...