1、上午考试没去。。

2、下午跟不上。。

变色.html

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title>media</title>
  6.         <style type="text/css">
  7.             body {
  8.                 /*取消默认的外间距*/
  9.                 margin: 0px;
  10.             }
  11.             main {
  12.                 margin: 5px;
  13.                 /*对子元素开启弹性布局*/
  14.                 display: flex;
  15.                 /*换行*/
  16.                 flex-wrap: wrap;
  17.             }
  18.             div {
  19.                 /*将每个div默认4个一行四列*/
  20.                 width: calc((100% - 40px) / 4);
  21.                 height: 200px;
  22.                 background-color: pink;
  23.                 margin: 5px;
  24.             }
  25.             /*媒体查询：检索不同视口宽度*/
  26.             @media (max-width:1280px) {
  27.                 /*在宽度小于等于1280时的样式*/
  28.                 div {
  29.                     background-color: #FFFF00;
  30.                 }
  31.             }
  32.  
  33.             @media (max-width:800px) {
  34.                 div {
  35.                     background-color: aqua;
  36.                     width: calc((100% - 30px) / 3);
  37.                 }
  38.             }
  39.  
  40.             @media (max-width:500px) {
  41.                 div {
  42.                     background-color: blueviolet;
  43.                     width: calc((100% - 20px) / 2);
  44.                 }
  45.             }
  46.  
  47.             @media (max-width:350px) {
  48.                 div {
  49.                     background-color: chartreuse;
  50.                     width: calc((100% - 10px) / 1);
  51.                 }
  52.             }
  53.         </style>
  54.     </head>
  55.     <body>
  56.         <!--main>div{??}*20-->
  57.         <main>
  58.             <div>1</div>
  59.             <div>2</div>
  60.             <div>3</div>
  61.             <div>4</div>
  62.             <div>5</div>
  63.             <div>6</div>
  64.             <div>7</div>
  65.             <div>8</div>
  66.             <div>9</div>
  67.             <div>10</div>
  68.             <div>11</div>
  69.             <div>12</div>
  70.             <div>13</div>
  71.             <div>14</div>
  72.             <div>15</div>
  73.             <div>16</div>
  74.             <div>17</div>
  75.             <div>18</div>
  76.             <div>19</div>
  77.             <div>20</div>
  78.         </main>
  79.     </body>
  80. </html>

后来基本就打酱油了///

下周也不计划去了。。。。

稍微了解了一下html基本结构就好了。。。

网上资源。http://www.w3school.com.cn

没style的：

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title></title>
  6.     </head>
  7.     <body>
  8.         <header>
  9.             <h1>City Gallery</h1>
  10.         </header>
  11.  
  12.         <nav>
  13.             London<br>
  14.             Paris<br>
  15.             Tokyo<br>
  16.         </nav>
  17.  
  18.         <section>
  19.             <h1>London</h1>
  20.             <p>London is the capital city of England. It is the most populous city in the United Kingdom,
  21. with a metropolitan area of over 13 million inhabitants.</p>
  22.             <p>Standing on the River Thames, London has been a major settlement for two millennia,
  23. its history going back to its founding by the Romans, who named it Londinium.
  24. </p>
  25.         </section>
  26.  
  27.         <footer>
  28.             Copyright W3School.com.cn
  29.         </footer>
  30.     </body>
  31. </html>

通过添加style就可以变成各种样子：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
header {
background-color:black;
color:white;
text-align:center;
padding:5px;
}

nav {
line-height:30px;
background-color:#eeeeee;
height:300px;
width:100px;
float:left;
padding:5px;
}

section {
width:350px;
float:left;
padding:10px;
}
footer {
background-color:black;
color:white;
clear:both;
text-align:center;
padding:5px;
}
</style>
</head>
<body>
<header>
<h1>City Gallery</h1>
</header>

<nav>
London<br>
Paris<br>
Tokyo<br>
</nav>

<section>
<h1>London</h1>
<p>London is the capital city of England. It is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.</p>
<p>Standing on the River Thames, London has been a major settlement for two millennia,
its history going back to its founding by the Romans, who named it Londinium.
</p>
</section>

<footer>
Copyright W3School.com.cn
</footer>
</body>
</html>

【HTML5校企公益课】第四天的更多相关文章

  1. 【HTML5校企公益课】第一天

    1.搭建基本的开发环境.学校电脑用的是浏览器是Chrome,编辑器是HBuilder. 2.初步介绍HTML5的Web项目基本结构. css:样式表 img:存放图片 js:存放脚本文件 .html: ...

  2. 【HTML5校企公益课】第二天

    1.上午讲昨天的作业. <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> & ...

  3. 【HTML5校企公益课】第三天

        1.上午2D.旋转变色的... 基本思路就是先写静态画面然后添加动画. <!--告诉浏览器该文件为网页格式--> <html> <!--网页的头部标签--> ...

  4. HTML5和css3的总结四

    HTML5的新东西总结四: 1>video和audio 声明方法(可以制作背景音乐) var oV/oA=new Video()/Audio(); oV/oA.src=''; oV/oA.pla ...

  5. HTML5 —— 自学第一课

    1.心得 首先遇见问题要寻根源,而不是将问题抛出:其次要经常查看参考文档.参考示例:学会百度. 2.技能需求 HTML5.XHTML.CSS3.JavaScript.jQuery(jQuery-UI/ ...

  6. HTML5简单入门系列（四）

    前言 今天这篇内容主要讲述HTML 5 Web Worker(一种支持前端js多线程的技术). 工作线程(Web Worker) web worker介绍 W3C 在 HTML5 的规范中提出了工作线 ...

  7. 如何制作一款HTML5 RPG游戏引擎——第四篇，情景对话

    今天我们来实现情景对话.这是一个重要的功能,没有它,游戏将变得索然无味.所以我们不得不来完成它. 但是要知道,使用对话可不是一件简单的事,因为它内部的东西很多,比如说人物头像,人物名称,对话内容... ...

  8. 《数据挖掘导论》实验课——实验四、数据挖掘之KNN,Naive Bayes

    实验四.数据挖掘之KNN,Naive Bayes 一.实验目的 1. 掌握KNN的原理 2. 掌握Naive Bayes的原理 3. 学会利用KNN与Navie Bayes解决分类问题 二.实验工具 ...

  9. CODING 敏捷实战系列课第四讲：从头搭建持续集成 DevOps 流水线

    <从头搭建持续集成 DevOps 流水线>由资深敏捷教练.极限编程学院高级讲师.CODING 特邀敏捷顾问李小波老师主讲,将基于 CODING 展示如何编写 Jenkinsfile 搭建 ...

随机推荐

  1. DMSFrame 之查询表达式用法（一）

    where条件 WhereClip<Adm_User> where = new WhereClip<Adm_User>(q => q.DeleteFlag == fals ...

  2. 第7步：安装Grid

    7.1解压文件 注意,安装Grid时需要以grid用户身份执行,在那之前需要以root身份执行xhost+,即命令: 代码1 [root@sgdb1~]# xhost+ [root@sgdb1~]# ...

  3. Windows应用程序运行权限设置

    在Vista以后的windows版本中,有些时候需要提升编译后生成程序的权限,即希望让生成的程序以管理员身份运行.虽然在一般情况下,可以使用鼠标右键选择的方式来强行以管理员身份运行,但它并没有屏蔽普通 ...

  4. Configuration注解类 Bean解析顺序

    @PropertySource 加载properties @ComponentScan 扫描包 @Import 依赖的class @ImportResource 依赖的xml @Bean 创建bean ...

  5. Redis 连接失败redis Can't init enough connections amount!

    Can't init enough connections amount! Only 0 from 10 were initialized. Server: IP:6379 无法初始化足够的连接数量! ...

  6. C语言数据类型大小

    数据类型大小是由操作系统和编译器共同决定的,但必须满足: short和int至少为16bit:long至少为32bit: short不能超过int,int不能超过long. 在主流编译器中,32位机和 ...

  7. MVC Model验证疑难杂症

    Q1:有验证但是还是能进入控制器(Controller) 排查之后发现js报错:VM109:1 Uncaught SyntaxError: Unexpected token u in JSON at ...

  8. 【BZOJ4345】[POI2016]Korale 堆（模拟搜索）

    [BZOJ4345][POI2016]Korale Description 有n个带标号的珠子,第i个珠子的价值为a[i].现在你可以选择若干个珠子组成项链(也可以一个都不选),项链的价值为所有珠子的 ...

  9. 【文章阅读】Java虚拟机系列学习

    总目录: Java虚拟机 - 随笔分类 - 五月的仓颉 - 博客园 http://www.cnblogs.com/xrq730/category/731395.html 已读: Java虚拟机1:什么 ...

  10. Lock wait timeout exceeded; try restarting transaction 3千万数据删除

    Lock wait timeout exceeded; try restarting transaction 0DELETE FROM sta_addr WHERE date="2018-1 ...