初始化

.gitignore

@@ -0,0 +1 @@
+/.idea

Html_Web.iml

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<module type="WEB_MODULE" version="4">
+  <component name="NewModuleRootManager" inherit-compiler-output="true">
+    <exclude-output />
+    <content url="file://$MODULE_DIR$" />
+    <orderEntry type="sourceFolder" forTests="false" />
+  </component>
+</module>

css/css_float.css

@@ -0,0 +1,56 @@
+*{
+    padding:0px;
+    margin:0px;
+}
+#div_one{
+    width: 100px;
+    height: 100px;
+    background-color: brown;
+    position: relative;
+    left: 40px;
+    z-index: 3;
+}
+#div_two{
+    width: 100px;
+    height: 100px;
+    background-color: blue;
+    position: absolute;
+    top: 90px;
+    left: 20px;
+    z-index: 1;
+}
+#div_two p{
+    color: chartreuse;
+}
+#div_three{
+    width: 100px;
+    height: 100px;
+    background-color: aqua;
+    position: fixed;
+    top: 50%;
+    left: 20px;
+}
+#div_fd{
+    width: 100px;
+    height: 120px;
+    background-color: coral;
+    float: left;
+    top: 300px;
+}
+#div_sd{
+    width: 100px;
+    height:140px;
+    background-color: aquamarine;
+    float: left;
+
+}
+#div_td{
+    width: 100px;
+    height: 100px;
+    background-color: darkslateblue;
+    float: left;
+
+}
+br{
+    clear: both;
+}

css/css_hello.css

@@ -0,0 +1,27 @@
+h3{
+    color: chartreuse;
+}
+#div_id{
+    color: dodgerblue;
+}
+#div_id h5{
+    color: deepskyblue;
+}
+#div_id p span {
+    color: aqua;
+}
+#div_id p {
+    color: deeppink;
+}
+table,tr,th,td{
+    border: 1px solid blue;
+    text-align: center;
+}
+table{
+
+    border-collapse: collapse;
+}
+a{
+    outline-style: dashed;
+    outline-color: brown; 
+}

css/css_img.css

@@ -0,0 +1,24 @@
+
+.image{
+    border: 1px solid black;
+    width: auto;
+    height:auto;
+    text-align: center;
+    float: left;
+    margin: 10px;
+}
+#content{
+    margin: 5px auto;
+    width: 50%;
+    height: auto;
+}
+img{
+    margin: 4px;
+}
+.text{
+    margin-bottom: 4px;
+
+}
+a{
+    target: "_blank";
+}

css/css_index_demo.css

@@ -0,0 +1,31 @@
+body{
+    margin: 0px;
+}
+ #container{
+    width: 100%;
+    height: 950px;
+    background-color: darkgray;
+}
+ #heading{
+    width: 100%;
+    height:10%;
+    background-color: aqua;
+}
+ #content_menu{
+    width: 30%;
+    height:80%;
+    background-color: aquamarine;
+    float: left;
+}
+ #content_body{
+    width: 70%;
+    height: 80%;
+    background-color: blueviolet;
+    float: left;
+}
+ #footing{
+    width:100%;
+    height:10%;
+    background-color: black;
+    clear: both;
+}

css/css_navigation.css

@@ -0,0 +1,25 @@
+ul {
+    margin: 0px;
+    padding: 0px;
+    list-style-type: none;
+    background-color: aquamarine;
+    width: 250px;
+    text-align: center;
+}
+
+a {
+    width: 50px;
+    background-color: aquamarine;
+    text-decoration: none;
+    text-align: center;
+}
+
+a:active, a:hover {
+    background-color: dodgerblue;
+}
+
+li {
+    display: inline;
+    padding-left: 3px;
+    padding-right: 3px;
+}

css/css_pic_wall.css

@@ -0,0 +1,13 @@
+.container {
+    column-width: 250px;
+    -webkit-column-width: 250px;
+    column-gap: 8px;
+    -webkit-column-gap: 8px;
+}
+.container div{
+    width: 250px;
+    margin: 5px 0;
+}
+.container img{
+    width:100%;
+}

css/css_transform.css

@@ -0,0 +1,43 @@
+div {
+    width: 100px;
+    height: 100px;
+    background-color: dodgerblue;
+    text-align: center;
+}
+
+#div_1 {
+    /*transform: translate(200px, 100px); !*safari chrome*!*/
+    /*-webkit-transform: translate(200px, 100px); !*safari chrome*!*/
+    /*-ms-transform: translate(200px, 100px); !*IE*!*/
+    /*-o-transform: translate(200px, 100px); !*opera*!*/
+    /*-moz-transform: translate(200px, 100px); !*Firefox*!*/
+    /*transform: scale(2,1);*/
+    transform: skew(20deg, 30deg);
+}
+
+#div_2 {
+    margin-top: 100px;
+    transform: rotate(180deg);
+}
+
+#div_3 {
+    width: 100px;
+    height: 100px;
+    background-color: antiquewhite;
+    transition: width 2s, height 3s, transform 3s;
+    transition-delay: 2s;
+}
+
+div:hover {
+    width: 300px;
+    height: 300px;
+    transform: rotate(260deg);
+}
+#div_4{
+    width: 100px;
+    height: 100px;
+    background-color: blueviolet;
+    position: relative;
+    animation: anim 5s;
+
+}

css/css_web_storage.css

@@ -0,0 +1,2 @@
+#msg{
+}

html/frame_demo.html

@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Title</title>
+</head>
+<body>
+<a href="http://www.qq.com" target="_parent"> qq首页</a>
+<iframe src="hello_html.html" frameborder="0" width="400px" height="400px"></iframe>
+</body>
+</html>