wuheng 2 vuotta sitten
vanhempi
commit
2c995d779d
3 muutettua tiedostoa jossa 142 lisäystä ja 0 poistoa
  1. 58 0
      day06/web/css01.html
  2. 56 0
      day06/web/form.html
  3. 28 0
      day06/web/style.html

+ 58 - 0
day06/web/css01.html

@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Title</title>
+
+    <style>
+        table{
+            width: 800px;
+        }
+
+    </style>
+
+</head>
+<body>
+
+
+<!--
+元素 : 指的就是页面里的标签
+样式(样式表) : css 代码
+属性: 指的就是元素 本身能指定修改的值
+      一个元素有很多属性
+-->
+<!--
+    元素的属性和样式 有和区别
+    元素属性 是没有单位的, 渲染速度快
+    样式 是必须给定单位的, 样式初始化比较慢
+-->
+
+<!--<table border="1" cellspacing="0" width="800"  align="center">-->
+<table border="1" cellspacing="0"  align="center">
+    <tr align="center">
+        <td><b>序号</b></td>
+        <td><b>LOGO</b></td>
+        <td><b>商品</b></td>
+        <td><b>企业</b></td>
+    </tr>
+    <tr align="center">
+        <td>1</td>
+        <td><img src="https://p0.itc.cn/images01/20210304/095a3fabfc7e48fdbcdb16e5df45d3fe.jpeg" width="30"></td>
+        <td colspan="2">三只松鼠</td>
+    </tr>
+    <tr align="center">
+        <td>2</td>
+        <td rowspan="2"><img src="https://p0.itc.cn/images01/20210304/095a3fabfc7e48fdbcdb16e5df45d3fe.jpeg" width="30"></td>
+        <td>U衣裤</td>
+        <td>优衣库</td>
+    </tr>
+    <tr align="center">
+        <td>3</td>
+        <td>小米</td>
+        <td>小米科技有限公司</td>
+    </tr>
+</table>
+
+
+</body>
+</html>

+ 56 - 0
day06/web/form.html

@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Title</title>
+    <style>
+        span{
+            font-size: 8px;
+        }
+    </style>
+</head>
+<body>
+
+<h1></h1>
+
+<!--  form 表单主要用来收集用户录入的信息  -->
+<div style="width: 220px; margin: 0 auto; border: 1px #EEE solid; padding: 10px">
+    <p><img src="https://passport.baidu.com/passApi/img/newloginlogo.png" width="60" /> </p>
+    <form action="#" method="post">
+        <p><input value="张三" name="username" placeholder="请输入文本" type="text" /></p>
+        <p><input name="pwd" autocomplete="true" type="password" /></p>
+        <p><input type="date" /></p>
+        <p><input type="color" /></p>
+        <p>
+            黑大 <input name="黑大" value="黑大" type="checkbox" />
+            哈工程 <input name="哈工程" value="哈工程" type="checkbox" />
+            哈学院 <input name="哈学院" value="哈学院" type="checkbox" /> </p>
+        <p>
+            黑大<input name="school" value="黑大" type="radio">
+            哈工程<input name="school"  value="哈工程"  type="radio">
+            哈学院<input name="school" value="哈学院"  type="radio">
+        </p>
+        <select name="school">
+            <option value="黑大">黑大</option>
+            <option value="哈工程">哈工程</option>
+            <option value="哈学院">哈学院</option>
+            <option value="哈尔滨师范大学">师大</option>
+        </select>
+
+        <textarea name="留言板" cols="28" rows="4" >
+            留言板留言板留言板留言板留言板留言板留言板留言板留言板留言板
+        </textarea>
+
+        <p> <input type="file" name="file" /> </p>
+
+        <p><button>注册</button></p>
+        <p><a href="#" ><span>忘记密码</span></a></p>
+        <div>
+            <span>扫码登陆</span>  <span>立即注册</span>
+        </div>
+    </form>
+</div>
+
+
+</body>
+</html>

+ 28 - 0
day06/web/style.html

@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Title</title>
+    <style>
+        div{
+            width: 200px; height: 100px;
+            background-color: aqua;
+        }
+        .demo1 {
+            background-color: red;
+        }
+        #demo2 {
+            background-color: black;
+        }
+    </style>
+</head>
+<body>
+
+<div class="demo1" style="background-color: green">1</div>
+<hr />
+<div class="demo1">2</div>
+<hr />
+<div id="demo2">3</div>
+
+</body>
+</html>