Home Explore Help
Sign In
lovecoding
/
Web1020
10
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

html

e 6 months ago
commit
1bf6bbd841
14 changed files with 758 additions and 0 deletions
Split View Show Diff Stats
  1. 73 0
      day1/html/demo.html
  2. 59 0
      day1/html/文档流.html
  3. 169 0
      day1/html/标签.html
  4. BIN
      day1/images/1.jpg
  5. 4 0
      day1/笔记.md
  6. 68 0
      day2/1.表单.html
  7. 50 0
      day2/2.表格.html
  8. 31 0
      day2/3.引入css.html
  9. 81 0
      day2/4.常用样式.html
  10. 59 0
      day2/5.文字样式.html
  11. 82 0
      day2/6.样式.html
  12. 77 0
      day2/demo.html
  13. BIN
      day2/img01.gif
  14. 5 0
      day2/index.css

+ 73 - 0
day1/html/demo.html
View File 

@@ -0,0 +1,73 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>Document</title>
 
+</head>
 
+<body>
 
+    <div>
 
+        <h1>个人简历</h1>
 
+        <!-- 第一部分 -->
 
+         <div>
 
+            <h3>个人信息</h3>
 
+            <p>
 
+                <span>姓       名：  韦城城</span>
 
+                <!-- 特殊符号 半个 -->
 
+                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
 
+                <span>电      话：  186-5106-7589</span>
 
+            </p>
 
+            <p>
 
+                <span>姓       名：  韦城城</span>
 
+                <!-- 特殊符号 半个 -->
 
+                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
 
+                <span>电      话：  186-5106-7589</span>
 
+            </p>
 
+            <p>
 
+                <span>姓       名：  韦城城</span>
 
+                <!-- 特殊符号 半个 -->
 
+                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
 
+                <span>电      话：  186-5106-7589</span>
 
+            </p>
 
+         </div>
 
+         <!-- 第二部分 -->
 
+          <div>
 
+            <h3>求职意向</h3>
 
+            <p>
 
+                <span>工作性质：  全职</span>
 
+                <!-- 特殊符号 半个 -->
 
+                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
 
+                <span>工作地区：  北京</span>
 
+            </p>
 
+            <p>
 
+                <span>工作性质：  全职</span>
 
+                <!-- 特殊符号 半个 -->
 
+                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
 
+                <span>工作地区：  北京</span>
 
+            </p>
 
+            <p>
 
+                <span>工作性质：  全职</span>
 
+                <!-- 特殊符号 半个 -->
 
+                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
 
+                <span>工作地区：  北京</span>
 
+            </p>
 
+          </div>
 
+          <!-- 第三部分 -->
 
+           <div>
 
+            <h3>个人技能</h3>
 
+            <ul>
 
+                <li><a href="">熟练使用HTML+CSS+JavaScript以及Scss/Sass预处理器;</a></li>
 
+                <li><a href="">熟练使用HTML+CSS+JavaScript以及Scss/Sass预处理器;</a></li>
 
+                <li><a href="">熟练使用HTML+CSS+JavaScript以及Scss/Sass预处理器;</a></li>
 
+                <li><a href="">熟练使用HTML+CSS+JavaScript以及Scss/Sass预处理器;</a></li>
 
+                <li><a href="">熟练使用HTML+CSS+JavaScript以及Scss/Sass预处理器;</a></li>
 
+                <li><a href="">熟练使用HTML+CSS+JavaScript以及Scss/Sass预处理器;</a></li>
 
+                <li><a href="">熟练使用HTML+CSS+JavaScript以及Scss/Sass预处理器;</a></li>
 
+                <li><a href="">熟练使用HTML+CSS+JavaScript以及Scss/Sass预处理器;</a></li>
 
+                <li><a href="">熟练使用HTML+CSS+JavaScript以及Scss/Sass预处理器;</a></li>
 
+                <li><a href="">熟练使用HTML+CSS+JavaScript以及Scss/Sass预处理器;</a></li>
 
+            </ul>
 
+           </div>
 
+    </div>
 
+</body>
 
+</html>

+ 59 - 0
day1/html/文档流.html
View File 

@@ -0,0 +1,59 @@
 
+<!-- html页面中所有东西全部写在文档流中 -->
 
+ <!-- 文档流并不在页面上展示 -->
 
+<!DOCTYPE html>
 
+<!-- 
+    声明页面类型 html类型
 
+    告诉浏览器 遵循html开发规范
 
+-->
 
+<html lang="en">
 
+<!-- 
+    html标签 所有内容全部包含在内
 
+    lang=>language 缩写 告诉浏览器语言
 
+    en 英文
 
+    zh-CN 中文
 
+-->
 
+<head>
 
+    <!-- head 头部标签 主要作用：为了告知浏览器要做什么操作 不在网页上显示 -->
 
+     <meta charset="UTF-8"/>
 
+     <!-- meta 元数据标签 告诉浏览器一些代码信息 -->
 
+      <!-- charset 转编译符 -->
 
+       <!-- utf-8 转编译码 -->
 
+    <title>文档流</title>
 
+    <!-- 标题标签 title  作用于页签上-->
 
+</head>
 
+<body>
 
+    <!-- body 主体标签 在浏览器上显示的所有内容全部写在body标签内 -->
 
+     今天天气真好1111
 
+     <!-- 
+        html页面修改后 一定要保存 否则网页不更新
 
+        ctrl + s 保存
 
+     -->
 
+</body>    
+</html>
 
+<!-- 快捷键
 
+ 
+shift + ！回车
 
+-->
 
+<!-- <!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>Document</title>
 
+</head>
 
+<body>
 
+    
+</body>
 
+</html> -->
 
+<!-- <!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    viewport 可视窗口
 
+    <title>Document</title>
 
+</head>
 
+<body>
 
+    
+</body>
 
+</html> -->

+ 169 - 0
day1/html/标签.html
View File 

@@ -0,0 +1,169 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+  <head>
 
+  <meta charset="UTF-8" />
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 
+    <title>Document</title>
 
+  </head>
 
+  <body>
 
+    <!-- 
+        标签：
 
+            <x>:开始标签
 
+
 
+            </x>:结束标签
 
+            1.文档标签 => 文档流
 
+            2.按照是否换行区分
 
+                a.换行标签 独占一行 块级元素 宽高生效
 
+                    h(h1-h6) 逐级递减 放大/缩小 加粗
 
+                    p 放置段落文本
 
+                    br 换行
 
+                    hr 换行标签
 
+                    div 划分区域
 
+                    ul li 组成 无序列表
 
+                        属性：type类型
 
+                        circle 空心圆 square正方形  disc实心圆（默认）
 
+                    ol li 组成 有序列表
 
+                        属性：type类型
 
+                        i I a A 1
 
+                        start 从...开始
 
+                        reversed 倒序
 
+                    dl dt dd 组成 图文混排列表
 
+                    dt 放置图片
 
+                    dd 放置文字
 
+                b.不换行标签 在一行显示 行内元素 宽高不生效
 
+                    em 倾斜 语义上的
 
+                    i  倾斜 形式上的
 
+                    strong 加粗 语义上的
 
+                    b  加粗 形式上的
 
+                    u 下划线
 
+                    s 删除线
 
+                    sub 下标
 
+                    sup 上标
 
+                    span 划分区域
 
+                    a 跳转 超链接
 
+                    href:
 
+                    1.放置要跳转的路径
 
+                    2.# 跳回顶部
 
+                    3."" 刷新页面
 
+            3.按照是否闭合区分:
 
+                闭合(双)：由开始标签与结束标签组成，中间允许嵌套内容
 
+                空（单）：由开始标签组成，并且自动闭合的标签
 
+            4.H5新特性标签（暂时不讲）
 
+    -->
 
+    <div style="color: #f00">
 
+        <a href="">你好3</a>
 
+        <!-- 
+            锚点：
 
+         跳转到指定位置
 
+         在a标签中:
 
+         href属性中 #xxx
 
+         在指定位置的标签上：
 
+         id="xxx"       
+        -->
 
+        <a href="#child">你好4</a>
 
+      <h1 style="width: 200px;height: 200px;background: #ff0;">你好</h1>
 
+      <h2 style="width: 200px;height: 200px;background: #ff0;">你好</h2>
 
+      <h3>你好</h3>
 
+      <h4>你好</h4>
 
+      <h5>你好</h5>
 
+      <h6>你好</h6>
 
+      <p>
 
+        我有一个帽衫我有一个帽衫我有一个帽衫我有一个帽衫我有一个帽衫我有一个帽衫我有一个帽衫我有一个帽衫我有一个帽衫我有一个帽衫我有一个帽衫我有一个帽衫我有一个帽衫
 
+      </p>
 
+
 
+      哈哈哈哈哈哈哈
 
+    </div>
 
+    111111111111111
 
+
 
+    <!-- <p></p> -->
 
+    <p style="color: #00f">
 
+      <em>明天星期</em>一明天<i>星期一</i>明天星期一明天星期一明天星期一<br />
 
+      <b>明天星期</b>一明天<strong>星期一</strong>明天星期一明天星期一明天星期一<br />
 
+      <u  style="width: 200px;height: 200px;background: #ff0;">明天星期2</u>一明天<s>星期一</s>明天星期一明天星期一明天星期一<br />
 
+      明天 <sub>2</sub>一明天<sup>1</sup>明天星期一明天星期一
 
+    </p>
 
+    <hr />
 
+    <hr />
 
+    <p style="color: plum">
 
+      明天<span style="color: red;">星期一</span>明天<span style="color: blue;">星期一</span>明天<span style="color: aqua;">星期一</span>明天<span style="color: purple;">星期一</span>明天<span style="color: orange;">星期一</span>111<br>
 
+      明天星期一明天星期一明天星期一明天星期一明天星期一<br />
 
+      明天星期一明天星期一明天星期一明天星期一明天星期一<br />
 
+      明天星期一明天星期一明天星期一明天星期一
 
+    </p>
 
+    <a href="https://www.baidu.com">你好</a>
 
+    <a href="https://detail.tmall.com/item.htm?spm=a2113w.29464347.9033939260.2.39ec70e1SZO8zF&id=765762068121&utparam=%7B%22ald_res%22%3A%2234816083%22%2C%22ald_solution%22%3A%22commonHorseRace%22%2C%22ald_biz%22%3A443%2C%22utcP%22%3A%2215_161%22%2C%22ump_item_price%22%3A%226.47%22%2C%22traceId%22%3A%222150426317293915515217292edec3%22%2C%22ald_st%22%3A%221729391551605%22%2C%22sourceTypeKey%22%3A%2234_promotionVenue%22%2C%22item_price%22%3A%228.08%22%2C%22ump_invoke%22%3A%222%22%2C%22t_s%22%3A%221729391552584%22%2C%22sku_id%22%3A%225437662487562%22%2C%22price_stage%22%3A%220%22%7D&xxc=promotionVenue&skuId=5437662487562&priceTId=2150426317293915515217292edec3">你好1</a>
 
+    <a href="#">你好2</a>
 
+    <ul type="disc">
 
+        <li id="child">小孩</li>
 
+        <li>小花</li>
 
+        <li>妹妹</li>
 
+    </ul>
 
+    <ul>
 
+        <li>小孩</li>
 
+        <li>小花</li>
 
+        <li>妹妹</li>
 
+    </ul>
 
+    <ol type="1" start="56" reversed>
 
+        <li>小孩</li>
 
+        <li>小花</li>
 
+        <li>妹妹</li>
 
+    </ol>
 
+    <ol>
 
+        <li>小孩</li>
 
+        <li>小花</li>
 
+        <li>妹妹</li>
 
+    </ol>
 
+    <dl>
 
+        <dt>放置图片</dt>
 
+        <dd>描述图片的文字</dd>
 
+    </dl>
 
+    <dl>
 
+        <dt>放置图片</dt>
 
+        <dd>描述图片的文字</dd>
 
+    </dl>
 
+    <dl>
 
+        <dt>放置图片</dt>
 
+        <dd>描述图片的文字</dd>
 
+    </dl>
 
+    <dl>
 
+        <dt>放置图片</dt>
 
+        <dd>描述图片的文字</dd>
 
+    </dl>
 
+    <dl>
 
+        <dt>放置图片</dt>
 
+        <dd>描述图片的文字</dd>
 
+    </dl>
 
+    <dl>
 
+        <dt>放置图片</dt>
 
+        <dd>描述图片的文字</dd>
 
+    </dl>
 
+    <dl>
 
+        <dt>放置图片</dt>
 
+        <dd>描述图片的文字</dd>
 
+    </dl>
 
+    <dl>
 
+        <dt>放置图片</dt>
 
+        <dd>描述图片的文字</dd>
 
+    </dl>
 
+    <dl>
 
+        <dt>放置图片</dt>
 
+        <dd>描述图片的文字</dd>
 
+    </dl>
 
+    <!-- 
+        行内块元素：宽高可生效 在一行显示
 
+        img 图片标签 
+        属性：
 
+        同级路径 ./
 
+        上级路径 ../
 
+        src:放置图片路径
 
+        1.从网上获取的 绝对路径
 
+        2.从本地获取的 相对路径
 
+        alt:当图片无法展示时 所显示的替换文字
 
+        图片为什么无法展示？
 
+        1.图片侵权 违禁
 
+        2.网速过慢
 
+    -->
 
+        <img style="width: 200px;height: 200px;" src="../images/1.jpg" alt="月亮">
 
+    <img style="width: 200px;height: 200px;" src="https://pic2.zhimg.com/v2-5fb13110e1de13d4c11e6e7f5b8026da_r.jpg" alt="">
 
+  </body>
 
+</html>

BIN
day1/images/1.jpg
View File


+ 4 - 0
day1/笔记.md
View File 

@@ -0,0 +1,4 @@
 
+## 1.新建文件夹 切记：名字一定是英文/英文+数字 不能是中文
 
+## 2.打开文件夹  a.将文件夹直接拖到vscode上  b.打开vscode 选择open folder 点击新建的文件夹即可
 
+## 3.一个网页是由什么构成：结构（html） 样式(css) 逻辑交互(javascript=>js)
 
+## 4.新建文件:点击new file；名字.后缀（html/css/js）

+ 68 - 0
day2/1.表单.html
View File 

@@ -0,0 +1,68 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>Document</title>
 
+    <style>
 
+        /* input {
 
+            width: 200px;
 
+            height: 100px;
 
+        } */
 
+    </style>
 
+</head>
 
+<body>
 
+    <!-- 
+        form 表单
 
+        属性：action 讲表单上的内容提交到服务端 一般不去使用
 
+        1.input 输入框  行内块元素
 
+        属性：
 
+        placeholder 提示信息
 
+        value 值
 
+        type类型
 
+            text 文本
 
+            password 密码
 
+            submit 提交按钮
 
+            reset 重置
 
+            radio 单选框  必须保证name属性名字相同
 
+            checkbox 复选框 disabled 禁用 checked选中
 
+        2.select与option共同组成下拉框
 
+        有多少可选项 就有多少option
 
+        value属性 内容不显示在页面上  而是为了方便提交
 
+        selected 默认选择
 
+        disabled 禁止选择
 
+        3.textarea 文本域
 
+        placeholder 提示信息
 
+        rows 行数
 
+        cols 列数
 
+        maxlength 最大字符 
+    -->
 
+    <form action="">
 
+        <input type="text" placeholder="你好 星期日">
 
+        <input type="text" placeholder="你好 星期日">
 
+        <input type="text" placeholder="你好 星期日">
 
+        <input type="password">
 
+        <br>
 
+        <br>
 
+        <input type="submit">
 
+        <input type="reset">
 
+        <input type="button" value="哈哈">
 
+        <br><br>
 
+        <input type="radio" name="111">男
 
+        <input type="radio" name="111">女
 
+        <br><br>
 
+        <input type="checkbox">篮球
 
+        <input type="checkbox" disabled>足球
 
+        <input type="checkbox">羽毛球
 
+        <input type="checkbox" checked>排球
 
+        <br><br>
 
+        <select>
 
+            <option disabled value="a">1</option>
 
+            <option selected value="b">2</option>
 
+            <option value="c">3</option>
 
+        </select>
 
+        <br><br>
 
+        <textarea placeholder="请输入一段自我介绍" maxlength="10" rows="100" cols="200"></textarea>
 
+    </form>
 
+</body>
 
+</html>

+ 50 - 0
day2/2.表格.html
View File 

@@ -0,0 +1,50 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>Document</title>
 
+</head>
 
+<body>
 
+    <!-- 
+        table 表格
 
+        tr 行
 
+        th 表头
 
+        td 单元格
 
+        cellspacing 单元格和表格的边框距离
 
+        cellpadding 内容和单元格之间的距离
 
+        border 边框
 
+        caption 表格标题
 
+        align 文本对齐 right left center
 
+        colspan 列合并
 
+    -->
 
+    <table border="2" cellpadding="40">
 
+        <caption>个人信息</caption>
 
+        <tr>
 
+            <th>姓名</th>
 
+            <th>性别</th>
 
+            <th>年龄</th>
 
+        </tr>
 
+        <tr>
 
+            <td colspan="2" align="center">小红</td>
 
+            <!-- <td>男</td> -->
 
+            <td>10</td>
 
+        </tr>
 
+        <tr>
 
+            <td>小黄</td>
 
+            <td rowspan="3">男</td>
 
+            <td>20</td>
 
+        </tr>
 
+        <tr>
 
+            <td>小粉</td>
 
+            <!-- <td >女</td> -->
 
+            <td>30</td>
 
+        </tr>
 
+        <tr>
 
+            <td>小紫</td>
 
+            <!-- <td>女</td> -->
 
+            <td align="center">5</td>
 
+        </tr>
 
+    </table>
 
+</body>
 
+</html>

+ 31 - 0
day2/3.引入css.html
View File 

@@ -0,0 +1,31 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>Document</title>
 
+    <!-- 引入 -->
 
+     <!-- 外部样式表 -->
 
+      <!-- 
+        link 导入外部文件
 
+        rel 关系
 
+        stylesheet 样式表
 
+        href 路径
 
+      -->
 
+      <link rel="stylesheet" href="./index.css">
 
+    <style>
 
+        /* 内部样式表 */
 
+        div {
 
+            width: 200px;
 
+            height: 200px;
 
+            background: #00f;
 
+        }
 
+    </style>
 
+</head>
 
+<body>
 
+    <!-- 行内 > 内部 > 外部 -->
 
+    <!-- 行内样式/内联样式 -->
 
+     <div></div>
 
+    <!-- <div style="width: 200px;height: 200px;background-color: red;"></div> -->
 
+</body>
 
+</html>

+ 81 - 0
day2/4.常用样式.html
View File 

@@ -0,0 +1,81 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>Document</title>
 
+    <style>
 
+        /* 
+            选择器：
 
+                1.标签选择器：
 
+                div {}
 
+                标签名 {样式}
 
+
 
+            样式：
 
+            宽度：width
 
+            高度：height
 
+            颜色：color
 
+            像素单位:px 
+            单位：px %
 
+            边框：border:width style color
 
+            width
 
+            style:solid 实线 dashed 虚线  double 双边框 dotted 点线
 
+            color
 
+            复合属性
 
+            上边框：border-top
 
+            下边框 border-bottom
 
+            左边框 border-left
 
+            右边框 border-right
 
+            border-radius 圆角边框
 
+            50% 原型
 
+            单独一个方向
 
+            border-上下-左右-radius
 
+            同选择器 同样式 后面的会覆盖前面的
 
+            background:背景 复合属性
 
+            background-color:背景色
 
+
 
+            background-image:url("图片路径")
 
+            background:color image repeat position;
 
+            background-repeat: 背景平铺
 
+            no-repeat 不平铺
 
+            repeat-x x轴平铺
 
+            repeat-y y轴平铺
 
+            repeat 平铺
 
+            background-position:x y;
 
+            背景位置
 
+            background-size 背景尺寸：
 
+            contain 等比例放置最大
 
+            cover 完全覆盖
 
+        */
 
+        div {
 
+            width: 900px;
 
+            height: 900px;
 
+            color: purple;
 
+            /* border-width: 10px;
 
+            border-style: double;
 
+            border-color: #0f0; */
 
+            border:2px solid #f00;
 
+            /* border-left: 10px solid rgb(123, 0, 255); */
 
+            /* border-top: 1px solid #f00; */
 
+            /* border-radius: 20px; */
 
+            border-top-left-radius: 20px;
 
+            /* background: #ff0;
 
+            background-image: url("./img01.gif");
 
+            background-color: yellowgreen;
 
+            background-repeat: no-repeat; */
 
+            /* background-position: center 20px; */
 
+            /* background-size: cover; */
 
+            background: #f00 url('./img01.gif') no-repeat center center;
 
+        }
 
+    </style>
 
+</head>
 
+<body>
 
+    <!-- 
+        常用样式：
 
+        
+    -->
 
+        <div>
 
+            你好，我有一个帽衫
 
+        </div>
 
+</body>
 
+</html>

+ 59 - 0
day2/5.文字样式.html
View File 

@@ -0,0 +1,59 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>Document</title>
 
+    <style>
 
+        /* 
+            font-weight 字体粗细
 
+            粗 bold bolder 600-900
 
+            正常 normal 400 500
 
+            细 lighter 100-300
 
+            font-size 字体大小
 
+            浏览器跟字体 16px
 
+            浏览器最小字体 12px
 
+            font-family 字体
 
+            font-style 字体样式
 
+            italic 倾斜
 
+            normal 正常
 
+        */
 
+        p {
 
+            color: #f00;
 
+            /* font-weight: 300; */
 
+            font-size: 30px;
 
+            font-family: 'Courier New', Courier, monospace;
 
+            font-style: normal;
 
+        }
 
+         /* p {
 
+            color: blue;
 
+         } */
 
+        #aaa {
 
+            color: #00f;
 
+        }
 
+        .bbb {
 
+            color: #ff0;
 
+        }
 
+        /* 
+            2.id选择器
 
+            在body中：
 
+                在开始标签中 id='xxx'
 
+            在style中：
 
+                #xxx{样式}
 
+            3.类选择器
 
+            在body中：
 
+                在开始标签中 class='xxx'
 
+            在style中：
 
+                .xxx{样式}
 
+
 
+        */        
+    </style>
 
+</head>
 
+<body>
 
+    <p>
 
+        你好啊
 
+    </p>
 
+    <p id="aaa">哈哈哈</p>
 
+    <p class="bbb">哦哦哦哦</p>
 
+</body>
 
+</html>

+ 82 - 0
day2/6.样式.html
View File 

@@ -0,0 +1,82 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>Document</title>
 
+    <style>
 
+        a {
 
+            color: plum;
 
+            /* 取消a标签默认样式 */
 
+            text-decoration: none;
 
+            /* 
+                下划线underline 
+                上划线 overline
 
+                删除线 line-through
 
+            */
 
+            text-decoration: line-through;
 
+        }
 
+        ul {
 
+            /* 去做列表默认样式 */
 
+            list-style: none;
 
+        }
 
+        div {
 
+            width: 300px;
 
+            height: 300px;
 
+            font-size: 30px;
 
+            font-weight: bold;
 
+            color: #ff0;
 
+            background: rgba(255,0,0,transparent);
 
+            /* opacity: .1; */
 
+        }
 
+        a {
 
+            width: 100px;
 
+            height: 100px;
 
+            background: #0f0;
 
+            /* 将元素转成块元素 */
 
+            display: block;
 
+        }
 
+        /* 
+            opacity与rgba区别
 
+            opacity全透明
 
+            rgba 背景色透明
 
+            transparent 透明
 
+            opacity 0-1
 
+            颜色  16进制    缩写     rgb        rgba=>(alpha) 0-1
 
+            红    #ff0000   #f00    255,0,0
 
+            黄    #ffff00   #ff0    255,255,0
 
+            蓝    #0000ff   #00f    0,0,255
 
+            绿    #00ff00   #0f0    0,255,0
 
+            黑    #000000   #000    0,0,0
 
+            白    #ffffff   #fff    255,255,255
 
+        
+        */
 
+        /* 案例：画一个倒三角css */
 
+        p {
 
+            width: 300px;
 
+            height: 300px;
 
+            background: #ff0;
 
+            /* 缩进：
 
+                    2em两字符
 
+            */
 
+            text-indent: 2em;
 
+            /* 将元素转成行内元素 */
 
+            /* display: inline; */
 
+            /* 将元素转成行内块元素 */
 
+            display: inline-block;
 
+        }
 
+    </style>
 
+</head>
 
+<body>
 
+    <div>哈哈哈哈</div>
 
+    <a href="">你好</a>
 
+    <ul>
 
+        <li>a</li>
 
+        <li>a</li>
 
+        <li>a</li>
 
+        <li>a</li>
 
+    </ul>
 
+    <p>你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好</p>
 
+    <p>你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好</p>
 
+</body>
 
+</html>

+ 77 - 0
day2/demo.html
View File 

@@ -0,0 +1,77 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>Document</title>
 
+</head>
 
+<body>
 
+    <table border="1" cellpadding="15">
 
+        <caption>课程表</caption>
 
+        <tr>
 
+            <th>课程\星期</th>
 
+            <th>星期一</th>
 
+            <th>星期二</th>
 
+            <th>星期三</th>
 
+            <th>星期四</th>
 
+            <th>星期五</th>
 
+        </tr>
 
+        <tr>
 
+            <td>第一节</td>
 
+            <td></td>
 
+            <td></td>
 
+            <td></td>
 
+            <td></td>
 
+            <td></td>
 
+        </tr>
 
+        <tr>
 
+            <td>第二节</td>
 
+            <td></td>
 
+            <td></td>
 
+            <td></td>
 
+            <td></td>
 
+            <td></td>
 
+        </tr>
 
+        <tr>
 
+            <td colspan="5" rowspan="2" align="center">大课间</td>
 
+            <!-- <td></td>
 
+            <td></td>
 
+            <td></td>
 
+            <td></td> -->
 
+            <td></td>
 
+        </tr>
 
+        <tr>
 
+            <!-- <td colspan="5">大课间</td> -->
 
+            <!-- <td></td> -->
 
+            <!-- <td></td> -->
 
+            <!-- <td></td> -->
 
+            <!-- <td></td> -->
 
+            <td></td>
 
+        </tr>
 
+        <tr>
 
+            <td colspan="6" align="center">午休</td>
 
+            <!-- <td></td>
 
+            <td></td>
 
+            <td></td>
 
+            <td></td> -->
 
+            <!-- <td></td> -->
 
+        </tr>
 
+        <tr>
 
+            <td>第五节</td>
 
+            <td></td>
 
+            <td></td>
 
+            <td></td>
 
+            <td></td>
 
+            <td></td>
 
+        </tr>
 
+        <tr>
 
+            <td>第六节</td>
 
+            <td></td>
 
+            <td></td>
 
+            <td></td>
 
+            <td></td>
 
+            <td></td>
 
+        </tr>
 
+    </table>
 
+</body>
 
+</html>

BIN
day2/img01.gif
View File


+ 5 - 0
day2/index.css
View File 

@@ -0,0 +1,5 @@
 
+div {
 
+    width: 200px;
 
+    height: 200px;
 
+    background: #ff0;
 
+}