1、上午考试没去。。

2、下午跟不上。。

变色.html

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>media</title>

        <style type="text/css">

            body {

                /*取消默认的外间距*/

                margin: 0px;

            }

            main {

                margin: 5px;

                /*对子元素开启弹性布局*/

                display: flex;

                /*换行*/

                flex-wrap: wrap;

            }

            div {

                /*将每个div默认4个一行四列*/

                width: calc((100% - 40px) / 4);

                height: 200px;

                background-color: pink;

                margin: 5px;

            }

            /*媒体查询：检索不同视口宽度*/

            @media (max-width:1280px) {

                /*在宽度小于等于1280时的样式*/

                div {

                    background-color: #FFFF00;

                }

            }

            @media (max-width:800px) {

                div {

                    background-color: aqua;

                    width: calc((100% - 30px) / 3);

                }

            }

            @media (max-width:500px) {

                div {

                    background-color: blueviolet;

                    width: calc((100% - 20px) / 2);

                }

            }

            @media (max-width:350px) {

                div {

                    background-color: chartreuse;

                    width: calc((100% - 10px) / 1);

                }

            }

        </style>

    </head>

    <body>

        <!--main>div{??}*20-->

        <main>

            <div>1</div>

            <div>2</div>

            <div>3</div>

            <div>4</div>

            <div>5</div>

            <div>6</div>

            <div>7</div>

            <div>8</div>

            <div>9</div>

            <div>10</div>

            <div>11</div>

            <div>12</div>

            <div>13</div>

            <div>14</div>

            <div>15</div>

            <div>16</div>

            <div>17</div>

            <div>18</div>

            <div>19</div>

            <div>20</div>

        </main>

    </body>

</html>

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

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

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

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

没style的：

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

    </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>

通过添加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. Windows Azure 系列-- 使用Azure + Web API实现图片上传

    1. 创建1个Azure账号,登录之后创建1个AzureStorage.左下方点Manage Access会看到Primary Access Key和Storage Account,记住它们的位置,等 ...

  2. CentOS 7如何设置Linux开机自动获取IP地址

    centos7 minimal版默认安装好后没有获取ip地址,需要手动配置.方法如下: 1.输入“ip addr”并按回车键确定,发现无法获取IP(CentOS 7默认没有ifconfig命令),记录 ...

  3. datagrid使用要点

    table自适应: (fit:true(设置table)) 列自动撑开:fitColumns: true,注意给列的width属性赋值

  4. hdu 4067(最小费用最大流）

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4067 思路:很神奇的建图,参考大牛的: 如果人为添加t->s的边,那么图中所有顶点要满足的条件都 ...

  5. p​h​p​面​试​题​笔​试​题​ ​比较有用

    一.选择题1．php的源代码是 (A )A．开放的 B．封闭的 C．需购买的 D．完全不可见的2．php的输出语句是 ( C )A．out.print B．response.write C．echo ...

  6. 机房收费系统（VB.NET）——超具体的报表制作过程

    之前做机房收费系统用的报表是Grid++Report,这次VB.NET重构中用到了VisualStudio自带的报表控件. 刚開始当然对这块功能非常不熟悉,只是探究了一段时间后还是把它做出来了. 以下 ...

  7. nginx默认访问目录时显示403错误

    author :headsen chen date: 2018-04-25  17:17:25 nginx安装完成后默认的http页面里访问目录的话会报403的错误: 和Apache进行比较,Apac ...

  8. Windows（7）上那些好用的软件及优化技巧（原创）

    *本文为原创内容,转载请注明作者和出处:www.cnblogs.com/wang1024 软件篇 注:以下软件在百度直接搜索软件名均可找到官网,直接官网下载即可 大众的软件哪个好: 杀毒软件专题 基于 ...

  9. 160628、利用Oracle rownum让表排序字段值连续

    利用Oracle rownum让表排序字段值连续 1.需求说明 表(eval_index)中有字段如下: 表字段 描述 说明 ID 主键 GROUP_ID 分组编号 SORT_NUM 排序序号 按照分 ...

  10. 【谷歌浏览器】在任意页面运行JS

    1.使用谷歌浏览器的调试功能: 在任何页面上运行代码片段 · Chrome 开发者工具中文文档 注:比较简单,直接,不过只能本地执行,只能自己使用.且需自行保存JS文件: 2.使用油猴插件: Tamp ...