diff --git a/Others/CSS_day01/css/style.css b/Others/CSS_day01/css/style.css new file mode 100644 index 0000000..27c8359 --- /dev/null +++ b/Others/CSS_day01/css/style.css @@ -0,0 +1,9 @@ +h2{ + color:blueviolet +} +p{ + color: red; + background-color: pink; + font-size: 15px; + text-align: center; +} diff --git a/Others/CSS_day01/css2.html b/Others/CSS_day01/css2.html new file mode 100644 index 0000000..9a463a8 --- /dev/null +++ b/Others/CSS_day01/css2.html @@ -0,0 +1,60 @@ + + + + + + + + +
熊大
+
熊二
+

小强

+

光头强

+

+

演示p

+ 演示span +

+ + + + + + diff --git a/Others/CSS_day01/index.html b/Others/CSS_day01/index.html new file mode 100644 index 0000000..eac36fc --- /dev/null +++ b/Others/CSS_day01/index.html @@ -0,0 +1,43 @@ + + + + + + + + + +
+

段落1

+
+
+

段落2

+
+
+

段落3

+
+
+

段落4

+
+
+

段落5

+
+ + diff --git a/Others/CSS_day02/index.html b/Others/CSS_day02/index.html new file mode 100644 index 0000000..91b0dc0 --- /dev/null +++ b/Others/CSS_day02/index.html @@ -0,0 +1,35 @@ + + + + + + + + + 文本 +
+ 用户名: + + diff --git a/Others/CSS_day02/index2.html b/Others/CSS_day02/index2.html new file mode 100644 index 0000000..fa6cba8 --- /dev/null +++ b/Others/CSS_day02/index2.html @@ -0,0 +1,26 @@ + + + + + + + + +
+

文本

+
+ + diff --git a/Others/CSS_day02/index3.html b/Others/CSS_day02/index3.html new file mode 100644 index 0000000..6600801 --- /dev/null +++ b/Others/CSS_day02/index3.html @@ -0,0 +1,38 @@ + + + + + + + + +
+
+
+ + diff --git a/Others/CSS_day02/index4.html b/Others/CSS_day02/index4.html new file mode 100644 index 0000000..5b02fa3 --- /dev/null +++ b/Others/CSS_day02/index4.html @@ -0,0 +1,20 @@ + + + + + + + + + 用户名: + + diff --git a/Others/CSS_day02/index5.html b/Others/CSS_day02/index5.html new file mode 100644 index 0000000..6fb4102 --- /dev/null +++ b/Others/CSS_day02/index5.html @@ -0,0 +1,89 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
用户名: 4-20位字符，支持汉字，字母和数字组合
请设置密码: 6-20位字符，支持汉字，字母和数字组合
请确认密码: 请再次输入密码
验证手机: 完成验证后，可以使用收集找回密码
短信验证码: + 请输入短信验证码
+ 《京东用户注册协议》 +
+ +
+ + diff --git "a/Others/CSS_day02/\347\233\222\345\255\220\346\250\241\345\236\213.html" "b/Others/CSS_day02/\347\233\222\345\255\220\346\250\241\345\236\213.html" new file mode 100644 index 0000000..950082e --- /dev/null +++ "b/Others/CSS_day02/\347\233\222\345\255\220\346\250\241\345\236\213.html" @@ -0,0 +1,51 @@ + + + + + + + + +
+ +
+
+

+ +

+
    +
  1. 列表1
    2. +
  2. 列表2
    3. +
  3. 列表3
    4. +
+ + + diff --git "a/Others/CSS_day03/display\345\261\236\346\200\247.html" "b/Others/CSS_day03/display\345\261\236\346\200\247.html" new file mode 100644 index 0000000..9e8505c --- /dev/null +++ "b/Others/CSS_day03/display\345\261\236\346\200\247.html" @@ -0,0 +1,54 @@ + + + + + + + + + 我是一个超链接 +
+
+
+ + diff --git a/Others/CSS_day03/img/SCAR-L.jpg b/Others/CSS_day03/img/SCAR-L.jpg new file mode 100644 index 0000000..c01d4a4 Binary files /dev/null and b/Others/CSS_day03/img/SCAR-L.jpg differ diff --git a/Others/CSS_day03/img/pc_kv2.jpg b/Others/CSS_day03/img/pc_kv2.jpg new file mode 100644 index 0000000..29ec0ef Binary files /dev/null and b/Others/CSS_day03/img/pc_kv2.jpg differ diff --git a/Others/CSS_day03/index.html b/Others/CSS_day03/index.html new file mode 100644 index 0000000..7057c61 --- /dev/null +++ b/Others/CSS_day03/index.html @@ -0,0 +1,32 @@ + + + + + + + + +
+
+
+ + diff --git a/Others/CSS_day03/index2.html b/Others/CSS_day03/index2.html new file mode 100644 index 0000000..604e255 --- /dev/null +++ b/Others/CSS_day03/index2.html @@ -0,0 +1,43 @@ + + + + + + + + +
+ +
+ + diff --git "a/Others/CSS_day03/\346\226\207\346\234\254\346\240\274\345\274\217\345\214\226.html" "b/Others/CSS_day03/\346\226\207\346\234\254\346\240\274\345\274\217\345\214\226.html" new file mode 100644 index 0000000..ffacc23 --- /dev/null +++ "b/Others/CSS_day03/\346\226\207\346\234\254\346\240\274\345\274\217\345\214\226.html" @@ -0,0 +1,20 @@ + + + + + + + + +

这是一个段落,AAAAAA

+ 这是一个段落,AAAAAA + + diff --git "a/Others/CSS_day03/\350\241\214\345\206\205\345\205\203\347\264\240\347\233\222\346\250\241\345\236\213.html" "b/Others/CSS_day03/\350\241\214\345\206\205\345\205\203\347\264\240\347\233\222\346\250\241\345\236\213.html" new file mode 100644 index 0000000..a7feee6 --- /dev/null +++ "b/Others/CSS_day03/\350\241\214\345\206\205\345\205\203\347\264\240\347\233\222\346\250\241\345\236\213.html" @@ -0,0 +1,30 @@ + + + + + + + + + 我是一个span + 我是一个span + 我是一个span + 我是一个span +
+ + diff --git a/Others/CSS_day04/index.html b/Others/CSS_day04/index.html new file mode 100644 index 0000000..0756530 --- /dev/null +++ b/Others/CSS_day04/index.html @@ -0,0 +1,49 @@ + + + + + + + + + +
+ 我是一个超链接 +
+

+ qqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqq + qqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqq + qqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqq + qqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqq + qqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqq +

+

+ qqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqq + qqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqq + qqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqq + qqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqq + qqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqq +

+ + diff --git a/Others/CSS_day04/table.html b/Others/CSS_day04/table.html new file mode 100644 index 0000000..7af1fd9 --- /dev/null +++ b/Others/CSS_day04/table.html @@ -0,0 +1,79 @@ + + + + + + + + + + + + + + +
202020202020202020202020202020202020202020202020202040404040404040404040404040404040404040404040404040404040404440404040404040
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
员工信息表
empnoenamejobmgrhiredatesalcommdeptno
100Jacksalesman1012000-5-305000100010
101Marymanager1052000-5-296000150020
+ + diff --git "a/Others/CSS_day04/\346\226\207\346\234\254\345\261\236\346\200\247.html" "b/Others/CSS_day04/\346\226\207\346\234\254\345\261\236\346\200\247.html" new file mode 100644 index 0000000..2b32228 --- /dev/null +++ "b/Others/CSS_day04/\346\226\207\346\234\254\345\261\236\346\200\247.html" @@ -0,0 +1,54 @@ + + + + + + + + +
+ 哈哈哈哈哈哈哈哈哈哈哈哈 +
+ 我是一个超链接 +

+ qqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqq + qqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqq + qqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqq + qqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqq + qqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqq +

+

+ qqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqq + QQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQ + QQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQQ + qqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqq +

+ + diff --git "a/Others/CSS_day04/\346\265\256\345\212\250.html" "b/Others/CSS_day04/\346\265\256\345\212\250.html" new file mode 100644 index 0000000..5b8a0b1 --- /dev/null +++ "b/Others/CSS_day04/\346\265\256\345\212\250.html" @@ -0,0 +1,56 @@ + + + + + + + + + +
+
+ +
+ 浮动引发的特殊效果!浮动引发的特殊效果!浮动引发的特殊效果!浮动引发的特殊效果!浮动引发的特殊效果!浮动引发的特殊效果!浮动引发的特殊效果!浮动引发的特殊效果!浮动引发的特殊效果! +
+
+
+ span标签 + span标签 + span标签 + + diff --git "a/Others/CSS_day04/\346\270\205\351\231\244\346\265\256\345\212\250.html" "b/Others/CSS_day04/\346\270\205\351\231\244\346\265\256\345\212\250.html" new file mode 100644 index 0000000..671bee8 --- /dev/null +++ "b/Others/CSS_day04/\346\270\205\351\231\244\346\265\256\345\212\250.html" @@ -0,0 +1,46 @@ + + + + + + + + +
+
+
+ +
+
+
+ + diff --git "a/Others/CSS_day04/\347\233\270\345\257\271\345\256\232\344\275\215.html" "b/Others/CSS_day04/\347\233\270\345\257\271\345\256\232\344\275\215.html" new file mode 100644 index 0000000..b646b44 --- /dev/null +++ "b/Others/CSS_day04/\347\233\270\345\257\271\345\256\232\344\275\215.html" @@ -0,0 +1,54 @@ + + + + + + + + + span标签 +
+
+
+ + diff --git "a/Others/CSS_day04/\347\256\200\345\215\225\345\270\203\345\261\200.html" "b/Others/CSS_day04/\347\256\200\345\215\225\345\270\203\345\261\200.html" new file mode 100644 index 0000000..a2b595b --- /dev/null +++ "b/Others/CSS_day04/\347\256\200\345\215\225\345\270\203\345\261\200.html" @@ -0,0 +1,61 @@ + + + + + + + + +
+
+
+
+
+
+
+ + diff --git "a/Others/CSS_day04/\347\273\235\345\257\271\345\256\232\344\275\215.html" "b/Others/CSS_day04/\347\273\235\345\257\271\345\256\232\344\275\215.html" new file mode 100644 index 0000000..18b1ef4 --- /dev/null +++ "b/Others/CSS_day04/\347\273\235\345\257\271\345\256\232\344\275\215.html" @@ -0,0 +1,55 @@ + + + + + + + + + span标签 +
+
+
+
+
+ + diff --git a/index.txt b/index.txt deleted file mode 100644 index ed18a4a..0000000 --- a/index.txt +++ /dev/null @@ -1,107 +0,0 @@ -JavaSE： ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- -JavaSE：https://github.com/ZichengQu/Java/tree/JavaSE -JavaSe.docx: https://github.com/ZichengQu/Java/blob/JavaSE/JavaSE/src/note/JavaSe.docx -JavaSe总结: https://github.com/ZichengQu/Java/blob/JavaSE/JavaSE/src/note/JavaSe%E6%80%BB%E7%BB%93 -JavaSe习题：https://github.com/ZichengQu/Java/blob/JavaSE/JavaSE/src/note/Java%E5%9F%BA%E7%A1%80~Java%E9%AB%98%E7%BA%A7%E6%A3%80%E6%B5%8B%E9%A2%98.docm -JavaSe汽车租赁：https://github.com/ZichengQu/Java/blob/JavaSE/JavaSE/src/note/JAVA%E5%9F%BA%E7%A1%80%E5%AE%9E%E8%AE%AD%E7%BB%83%E4%B9%A0.docx -范例：https://github.com/ZichengQu/Java/tree/JavaSE/JavaSE/src/liucong ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- -1.平闰年: https://github.com/ZichengQu/Java/blob/JavaSE/JavaSE/src/mine/one/pingrunnian/PingRunNian.java -2.计算器: https://github.com/ZichengQu/Java/blob/JavaSE/JavaSE/src/mine/two/calculator/JiSuanQi.java -3.水仙花数: https://github.com/ZichengQu/Java/blob/JavaSE/JavaSE/src/mine/three/shuixianhuashu/ShuiXianHuaShu.java -4.猴子吃桃(for循环): https://github.com/ZichengQu/Java/blob/JavaSE/JavaSE/src/mine/four/houchitao/HouZiChiTao.java -5.shopping(\t的使用): https://github.com/ZichengQu/Java/blob/JavaSE/JavaSE/src/mine/five/shopping/Shopping.java -7.login: https://github.com/ZichengQu/Java/blob/JavaSE/JavaSE/src/mine/seven/login/Login.java -8.Math.random: https://github.com/ZichengQu/Java/blob/JavaSE/JavaSE/src/mine/eight/random/Random.java -9.一年中的第几天: https://github.com/ZichengQu/Java/blob/JavaSE/JavaSE/src/mine/nine/tianshu/TianShu.java -10.二分和冒泡: https://github.com/ZichengQu/Java/blob/JavaSE/JavaSE/src/mine/ten/fengzhuang/FengZhuang.java -11.静态变量: https://github.com/ZichengQu/Java/blob/JavaSE/JavaSE/src/mine/eleven/staticdemo/StaticDemo.java -12.hero(面向对象，简单): https://github.com/ZichengQu/Java/tree/JavaSE/JavaSE/src/mine/twelve/hero -14.toCharArray(): https://github.com/ZichengQu/Java/blob/JavaSE/JavaSE/src/mine/fourteen/zimu/ZiMu.java -15.数字前后置换: https://github.com/ZichengQu/Java/blob/JavaSE/JavaSE/src/mine/fifteen/zhihuan/ZhiHuan.java -16.科学显示(StringBuffer): https://github.com/ZichengQu/Java/blob/JavaSE/JavaSE/src/mine/sixteen/kexuexianshi/KeXueXianShi.java -21.map: https://github.com/ZichengQu/Java/blob/JavaSE/JavaSE/src/mine/twentyOne/map/mapDemo.java -22.冒泡排序: https://github.com/ZichengQu/Java/blob/JavaSE/JavaSE/src/mine/twentyTwoAndThree/bubbleSort/Question22.java -24.九九乘法表(递归): https://github.com/ZichengQu/Java/blob/JavaSE/JavaSE/src/mine/twentyFour/recursion/jiujiu/JiuJiu.java -25.rabbit(递归): https://github.com/ZichengQu/Java/blob/JavaSE/JavaSE/src/mine/twentyFive/recursion/rabbit/Rabbit.java -26.IO: https://github.com/ZichengQu/Java/blob/JavaSE/JavaSE/src/mine/twentySix/IO/Menu.java -27.a.toArray(b): https://github.com/ZichengQu/Java/blob/JavaSE/JavaSE/src/mine/twentySeven/caipiao/CaiPiao.java -28.手选机选中奖: https://github.com/ZichengQu/Java/tree/JavaSE/JavaSE/src/mine/twentyEight/caipiao2 -29.breakWhileA: https://github.com/ZichengQu/Java/blob/JavaSE/JavaSE/src/mine/twentyNine/breakWhileA/Demo.java -30.CollectionAndMap: https://github.com/ZichengQu/Java/tree/JavaSE/JavaSE/src/mine/thirty/CollectionAndMap -31.ExceptionDemo: https://github.com/ZichengQu/Java/tree/JavaSE/JavaSE/src/mine/thirtyOne/ExceptionDemo/project -32.汽车租赁系统(看刘聪的): https://github.com/ZichengQu/Java/tree/JavaSE/JavaSE/src/mine/thirtyTwo/carRentSystem -33.正则: https://github.com/ZichengQu/Java/tree/JavaSE/JavaSE/src/mine/thirtyThree/RegularExpression -34.(1)StringBuffer的insert，(2)Collection的sort，(3)HashSet的size，(5)Map，(6)Arrays的asList，(8)手选机选中奖: https://github.com/ZichengQu/Java/tree/JavaSE/JavaSE/src/mine/thirtyFour/StringBufferCollection -35.split和Integer(-128~127): https://github.com/ZichengQu/Java/tree/JavaSE/JavaSE/src/mine/thirtyFive/StringInteger -36.UDPandTCP: https://github.com/ZichengQu/Java/tree/JavaSE/JavaSE/src/mine/thirtySix/UDPandTCP -37.airplane游戏: https://github.com/ZichengQu/Java/tree/JavaSE/JavaSE/src/mine/thirtySeven/airplane - ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- -*************************************************************************************************************************************************************************************** ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- - -SQL%%JDBC ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- -note/sql: -SQLNote.sql：https://github.com/ZichengQu/Java/blob/SQL%26%26JDBC/JDBC/src/note/sql/SQLNote.sql -SQL.sql：https://github.com/ZichengQu/Java/blob/SQL%26%26JDBC/JDBC/src/note/sql/SQL.sql -SQLPractice.sql：https://github.com/ZichengQu/Java/blob/SQL%26%26JDBC/JDBC/src/note/sql/SQLPractice.sql -Oracle原始笔记.txt：https://github.com/ZichengQu/Java/blob/SQL%26%26JDBC/JDBC/src/note/sql/Oracle%E5%8E%9F%E5%A7%8B%E7%AC%94%E8%AE%B0.txt -多表查询练习（自己）.sql：https://github.com/ZichengQu/Java/blob/SQL%26%26JDBC/JDBC/src/note/sql/%E5%A4%9A%E8%A1%A8%E6%9F%A5%E8%AF%A2%E7%BB%83%E4%B9%A0%EF%BC%88%E8%87%AA%E5%B7%B1%EF%BC%89.sql -多表查询练习（答案）.txt：https://github.com/ZichengQu/Java/blob/SQL%26%26JDBC/JDBC/src/note/sql/%E5%A4%9A%E8%A1%A8%E6%9F%A5%E8%AF%A2%E7%BB%83%E4%B9%A0%EF%BC%88%E7%AD%94%E6%A1%88%EF%BC%89.txt -note/JDBC_day01&&02: -JDBC_day01_summary.txt: https://github.com/ZichengQu/Java/blob/SQL%26%26JDBC/JDBC/src/note/JDBC_day01/JDBC_day01_summary.txt -JDBC原理.jpg: https://github.com/ZichengQu/Java/blob/SQL%26%26JDBC/JDBC/src/note/JDBC_day01/JDBC%E5%8E%9F%E7%90%86.jpg -JDBC_day02_summary.txt:https://github.com/ZichengQu/Java/blob/SQL%26%26JDBC/JDBC/src/note/JDBC_day02/JDBC_day02_summary.txt -note/project: -project_EmpManage_summary: https://github.com/ZichengQu/Java/blob/SQL%26%26JDBC/JDBC/src/note/project/one/project_EmpManage_summary -carRent_JDBC: https://github.com/ZichengQu/Java/tree/SQL%26%26JDBC/JDBC/src/note/project/two ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- -JDBC_day01: https://github.com/ZichengQu/Java/tree/SQL%26%26JDBC/JDBC/src/JDBC_day01 -JDBC_day02: https://github.com/ZichengQu/Java/tree/SQL%26%26JDBC/JDBC/src/JDBC_day02 ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- -project: -EmpManage_JDBC: https://github.com/ZichengQu/Java/tree/SQL%26%26JDBC/JDBC/src/project/EmpManage_JDBC -EmpManage_JDBC_Demo: https://github.com/ZichengQu/Java/tree/SQL%26%26JDBC/JDBC/src/Demo -carRent_JDBC: https://github.com/ZichengQu/Java/tree/SQL%26%26JDBC/JDBC/src/project/carRent_JDBC - ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- -*************************************************************************************************************************************************************************************** ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- - -HTML ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- -HTMLNote.html: https://github.com/ZichengQu/Java/blob/HTML/HTML/note/HTMLNote.html -1.gun,锚点，链接: https://github.com/ZichengQu/Java/tree/HTML/HTML/1.Demo -2.两个表格，一个简易网页: https://github.com/ZichengQu/Java/tree/HTML/HTML/2.Demo -3.form的用法，简易登陆界面: https://github.com/ZichengQu/Java/tree/HTML/HTML/3.Demo -4.随堂笔记代码: https://github.com/ZichengQu/Java/tree/HTML/HTML/Others - ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- -*************************************************************************************************************************************************************************************** ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- - -CSS ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- - - - - - - - - - - - - - - - - - - - - diff --git a/note/CSS.js b/note/CSS.js new file mode 100644 index 0000000..36a6c89 --- /dev/null +++ b/note/CSS.js @@ -0,0 +1,1087 @@ +CSS: + 定义:层叠样式表，又叫级联样式表，简称样式表;用于HTML文档中元素的样式定义。 + 特点:1.实现将内容与表现相分离。2.提高代码的可重用性和可维护性。 +一、HTML与CSS的关系： + HTML用于构建网页的结构;CSS负责构建HTML页面元素的样式;HTML是页面的内容组成，CSS是页面的表现。 +二、CSS样式表： + 1.内联方式:将样式定义在单个的HTML元素中; + color:red; background-color:green; font-size:24px; 文本颜色的样式属性，背景颜色的样式属性，文本大小的样式属性。 +
标题1
+ 2.内部样式表:将样式定义在HTML页的头元素中; + 特点: + 1.应用范围为整个页面而不是某一个别元素,能够提升可重用性和可维护性，同时体现内容与表现相分离; + 2.在style元素中添加样式规则,可以定义多个样式规则,每个样式规则有两个部分：选择器和样式声明 + + + + + + +

标题1

+
div1
/*内联方式*/ +

段落2

+ + 3.外部样式表:将样式定义在一个外部CSS文件中(.css文件)，由HTML页面引用样式表文件。 + (1)创建单独的样式表文件(*.css),在该文件中可以编写若干样式规则 + (2)在需要使用该样式表文件的页面上，引入样式表文件，在页面的head元素中添加一下代码: + +三、CSS语法 + 1.CSS语法规范： + 内联规则:由样式声明组成. + 样式表(内部样式表或者外部样式表):由多个样式表规则组成，每个样式规则由两个小部分组成:选择器和声明. + 2.CSS样式表特征: + (1)继承性:所谓继承性是指书写CSS样式表时，子标签会继承父标签的某些样式，如文本颜色和字号，想要设置一个可继承的属性，只需要将它应用于父元素即可。子元素可以继承父元素的样式(text-,font-,line-开头&&color的属性) +
+

段落

+
+ (2)层叠性:CSS处理冲突的能力(样式冲突，遵循就近原则). + 注意:层叠性只有在多个选择器选中"同一个标签"，然后又设置了"相同的属性"，才会发生层叠性。 + (3)优先级:样式定义冲入(重复)时，会按照不同样式的优先级来应用样式。 + 低:浏览器缺省设置 + 中:外部样式表或内部样式表(就近原则) + 高:内联样式 + !important:调整显示样式属性(不是选择器)的优先级，只要都以!important为主 + 注意:继承的样式和自定义样式冲突时，永远都是以类选择器优先。 + (4)例子：https://github.com/ZichengQu/Java/blob/CSS/Others/CSS_day01/index.html + + + + + + + + + +
+

段落1

+
+
+

段落2

+
+
+

段落3

+
+
+

段落4

+
+
+

段落5

+
+ + +四、CSS基础选择器 + 1.选择器的作用:规范了页面中哪些元素能够使用定义好的样式，同时也帮助我们去匹配页面上的元素 + 2.选择器 + (1)通用选择器(了解) + 1)作用:匹配页面上所有的元素 + 2)语法:*{样式声明;} + + 3)注意:效率低，尽可能通过继承性去代替通用选择器的效果，它常用来设置一些默认样式。 + (2)元素选择器(标签选择器，标记选择器)(重点) + 1)作用:匹配页面上某一指定元素 + 2)语法:元素{} + div{color:pink;} + p{font-size:20px;} + (3)类选择器(重点) + 1)作用:允许元素使用附带的class属性值，对选择器进行引用 + 2)语法:以.作为开始，类名以"字母，数字，_"组成,不能以数字开始， .类名{样式声明;} + 3)多类选择器: + 作用:可以让一个元素同时引用多个类选择器，中间用空格分开即可 + (4)结合元素选择器 + 语法:元素选择器.类选择器{样式声明;} + (5)id选择器(重点) + 作用:只匹配指定id值的元素 + 语法:#id{样式声明;} + 例子： + #xr{ + background-color: pink; + } + (6)群组选择器 + 作用:选择器声明以逗号隔开的选择器列表，其目的是为了声明一组选择器中的公共样式。 + 语法:选择器1，选择器2，选择器3...{样式声明;} + (7)后代选择器 + 作用:又称为包含选择器，用于选择作为某元素后代的元素(可选儿子，孙子，重孙子) + 注意:选择器一端包含两个或多个用空格分隔的选择器 + 语法: + 选择器1 选择器2{样式声明;} + (8)子代选择器 + 作用:选择某个元素的子元素(只选亲儿子) + 语法:选择器1>选择器2(样式声明;) + (9)例子:https://github.com/ZichengQu/Java/blob/CSS/Others/CSS_day01/css2.html + + + + + + + + +
熊大
+
熊二
+

小强

+

光头强

+

+

演示p

+ 演示span +

+ + + + + + + (10)伪类选择器: + 作用:用于向某种选择器添加特殊的效果; + 语法: 选择器:伪类选择器{样式声明;} + 分类: + 1.链接伪类: + link 匹配超链接未被访问时的状态。 + visited 匹配超链接被访问过的状态(只能定义字体颜色)。 + 2.动态伪类: + hover 匹配鼠标悬停在html元素时的状态。 + active 匹配html元素未激活时的状态(点击即被激活)。 + focus 匹配html元素获取焦点时的状态(文本框与密码框)。 + 3.书写顺序:link>visited>hover>active + 4.例子:https://github.com/ZichengQu/Java/blob/CSS/Others/CSS_day02/index.html + + + + + + + 文本 +
+ 用户名: + + (11)选择器优先级顺序: + 选择器类型 权值(不进位，只在本位一直相加) + 元素选择器: 0,0,0,1 + 类选择器: 0,0,1,0 + 伪类选择器: 0,0,1,0 + ID选择器: 0,1,0,0 + 内联样式: 1,0,0,0 + 例子:https://github.com/ZichengQu/Java/blob/CSS/Others/CSS_day02/index2.html + + + + + + +
+

文本

+
+ +五、尺寸与边框 + 1.尺寸属性: + (1)作用:尺寸属性一般用于设置元素的宽度和高度，单位一般为像素和百分比。 + (2)宽度属性:width,min-width,max-width + (3)高度属性:height,min-height,max-height + (4)注意: + 1)不是所有的元素都支持修改尺寸; + 2)支持修改尺寸属性的如下:块级元素;非块级元素中存在width,height属性的html元素(table,img,input). + 例子: + + 2.溢出:使用尺寸控制元素大小时，如果内容所需的控件大小大于元素本身的空间，会导致内容溢出。 + 处理溢出的属性: + overflow:当内容溢出元素时如何处理 + overfolw-x:横向溢出处理 + overflow-y:纵向溢出处理 + 取值: + visible:默认值，溢出可见。 + hidden:溢出隐藏。 + scroll:溢出滚动,会为父元素添加滚动条，通过拖动滚动条来查看完整内容，该属性不论内容是否溢出，都会添加水平和垂直双方向的滚动条。 + auto:当溢出的时候，才会出现滚动框，否则不出现。 + 3.边框 + (1)简写方式: + border: width style color + width:边框粗细，以px为单位 + style:solid(实线),dotted(点虚线),dashed(虚线),double(双实线) + color:边框颜色 + 作用:控制元素的上下左右四个部分的粗细，样式和颜色。 + (2)单边定义: + border-top/bottom/left/right:width style color + (3)单属性定义: + border-width/style/color:值 + 作用:控制4条边的对应属性。 + (4)单方向单属性定义: + border-top/bottom/left/right-width/style/color:值 + (5)例子:https://github.com/ZichengQu/Java/blob/CSS/Others/CSS_day02/index3.html + + + + + + +
+
+
+ + (6)注意: + 1)边框颜色可取值为transparent + 2)取消边框显示 + border:0/none; border-top/bottom/left/right:0/none; + 4.轮廓 + (1)轮廓定义:绘制于元素边框周围的一条线，位于边框边缘的外围，可起到突出元素的作用。 + (2)属性: + outline:width style color; + outline-width:宽度 + outline-style:样式 + outline-color:颜色 + 常用:outline:0/none; + (3)例子:https://github.com/ZichengQu/Java/blob/CSS/Others/CSS_day02/index4.html + + + + + + + 用户名: + + 5.京东登陆框demo:https://github.com/ZichengQu/Java/blob/CSS/Others/CSS_day02/index5.html + +六、盒子模型: + 1.框模型: + 框:盒子(box),页面元素皆为框。 + 框模型:(box-model)定义了元素处理内容，内边距，外边距，边框的一种方式。 + 框模型的宽度、高度和面积: + 元素的width和height属性指定了内容区域的宽度和高度; + 增加内边距、边框和外边框不会影响内容区域的大小，但会增加元素框的总尺寸; + 元素的实际宽度=左右外边距+左右边框+左右内边距+width(元素的宽度); + 元素的实际高度=上下外边距+上下边框+上下内边距+height(元素的宽度); + 2.外边距: + (1)外边距定义:围绕在元素边框周围的空白区域(当前盒子与其它盒子之间的距离)称为外边距; + (2)作用:控制元素与元素之间的距离;移动元素位置; + (3)属性: + margin:四个方向的外边距 + margin-top/bottom/left/right:(上/下/左/右)外边距 + 取值:px(像素),%(百分比),auto(自动),负值 + (4)取值-auto + 左右方向设置为auto时，允许元素在其父元素中水平居中对齐，前提必须设置该元素的宽度。 + (5)取值-负值 + 移动元素，向着反方向移动; margin-left:-10; 向左移动10px + (6)外边距的简洁写法: + margin:value;四个方向外边距 + margin:value1 value2; 上下、左右 + margin:value2 value2 value3; 上、左右、下 + margin:value1 value2 value3 value4; 上右下左 + margin:0 auto;水平居中 + (7)页面中具备默认外边距的元素:h#,p,ol,ul,div. + 清楚默认外边距:声明margin属性可以覆盖默认样式。 *{margin=0;} + (8)外边距合并:当两个相邻的垂直外边距相遇时，它们将形成"一个"外边距，合并后的外边距的高度是两个外边距中较大者。 + (9)外边距溢出:在某种特殊场合下，给子元素设置外边距时，效果却作用在父元素的外边距上。 + 特殊场合:父元素不设置边框时，为父元素中的第一个子元素设置上外边距时;或为最后一个子元素设置下外边距时. + 解决方案:为父元素添加边框(父元素高度会发生改变);为父元素添加内边距来取代子元素外边距(影响元素的尺寸). + 例子: + + + + + + +
+
+
+ + 3.内边距 + (1)定义:内容区域与边框之间的空间，会扩大元素边框所占用的区域 + (2)属性: + 1)padding-top/bottom/left/right:px/%; + 2)内边距的简洁写法: + padding:value; 四个方向外边距 + padding:value1 value2; 上下、左右 + padding:value2 value2 value3; 上、左右、下 + padding:value1 value2 value3 value4; 上右下左 + 4.行内元素盒模型: + 行内元素无法设置高、宽、垂直外边距、垂直内边距和上下两侧的边框，可以设置水平内外边距和左右两侧的边框。 + 例子:https://github.com/ZichengQu/Java/blob/CSS/Others/CSS_day03/%E8%A1%8C%E5%86%85%E5%85%83%E7%B4%A0%E7%9B%92%E6%A8%A1%E5%9E%8B.html + + + + + + + 我是一个span + 我是一个span + 我是一个span + 我是一个span +
+ + 5.diaplay和visibility: + 例子:https://github.com/ZichengQu/Java/blob/CSS/Others/CSS_day03/display%E5%B1%9E%E6%80%A7.html + + + + + + + 我是一个超链接 +
+
+
+ +七、背景属性:https://github.com/ZichengQu/Java/blob/CSS/Others/CSS_day03/index2.html + 1.背景颜色 + 属性:background-color + 取值:任意合法的颜色值可取值transparent + 注意:背景颜色会填充到元素的内容区域，内边距区域以及边框区域 + 2.背景图像 + 属性:background-image + 取值:url(图像的url) background-image: url(img/SCAR-L.jpg); + 3.背景平铺 + 属性:background-repeat + 取值:no-repeat,repeat-x,repeat-y,默认值是repeat + 4.背景图片尺寸 + 属性:background-size + 取值:px,%,cover(),contain() ps:对于px和%，尽量只改一个值，防止缩放失真。 + value1px value2px 具体数值px，value1表示背景图像的宽度，value2表示背景图像的高度; + value1% value2% 以元素尺寸的占比决定背景图的尺寸; + cover:把背景图扩展至足够大(等比缩放)，直到背景图像完全覆盖住元素区域的位置(图像可能显示不完整)。 + contain:包含，将背景图像等比缩放，直到右边或下边碰到元素边缘为止。 + 例子: + .box1{ + width: 500px; + height: 500px; + display: inline-block; + background-color: yellow; + background-image: url(img/SCAR-L.jpg);/*背景图像*/ + background-repeat: no-repeat;/*背景平铺,no-repeat,repeat-x,repeat-y,默认值是repeat*/ + /*背景图片设置大小background-size*/ + /*background-size: 500px;/*尽量只改一个值，防止缩放失真*/ + /*background-size: 50%;*/ + /*background-size: cover;*/ + background-size: contain; + } + 5.背景图片固定 + 属性:background-attachment + 取值:scroll 滚动，默认值 fixed 固定，将背景图片保持在可视化区域内，不随着滚动条而发生改变。 + 例子： + body{ + background-color: black; + background-image: url(img/pc_kv2.jpg); + background-repeat: no-repeat; + background-size: 100%; + color: white; + font-size: 20px; + background-attachment: fixed; + } + 6.背景图片位置: + 属性:background-position:方位名词 + 取值:left bottom(方位名词没有顺序，谁在前都可以),left(如果方位名词只写一个，另一个默认为center),左中右，上中下 + x y + % % + 例子: + background-position: center;/*方位名词没有顺序，谁在前都可以*/ + background-position: left;/*如果方位名词只写一个，另一个默认为center*/ + background-position: 10px 30px;/*精确单位，第一个值是X坐标，第二个值一定是Y坐标，取值可为负*/ + background-position: 10px center;/*水平移10px，垂直居中*/ + 7.简写属性: + background:color url() repeat attachment position; + background:yellow url(img/SCAR-L.jpg) fixed center; + 注意:属性可以省略，省略的话将采用默认值。 +八、文本格式化:https://github.com/ZichengQu/Java/blob/CSS/Others/CSS_day03/%E6%96%87%E6%9C%AC%E6%A0%BC%E5%BC%8F%E5%8C%96.html + 1.字体属性 + (1)指定字体:font-family:value1,value2,... + 可以同时指定多个value，中间以逗号隔开，表示如果浏览器不支持第一个字体，则尝试下一个，直到找到合适的字体 + 注意:中文字体需要加英文状态下的双引号 + 例子:font-family: arial,"黑体"; + (2)字体大小:font-size:value; 设置的并不是文字本身的大小,在页面中，每个文字都是处在一个看不见的框中，我们设置的font-size实际上是设置的格的大小，并不是字体的大小。 + (3)字体加粗:,,font-weight:normal/bold/100~900(100的整数倍，400等价于normal，700等价于bold) + (4)字体样式:font-style:normal/italic(斜体) + (5)综合设置字体样式:font:style weight size family; + font: italic 100 20px "黑体"; + 使用font属性时，必须按上面语法格式中的混徐书写，不能更换顺序，各个属性以空格隔开。 + 其中不需要设置的属性可以忽略(取默认值)，但必须保留size和family属性，否则font属性将不起作用。 + 2.文本属性: https://github.com/ZichengQu/Java/blob/CSS/Others/CSS_day04/%E6%96%87%E6%9C%AC%E5%B1%9E%E6%80%A7.html + (1)文本颜色属性:color; color: red; + (2)文本排列 + 作用:规定元素中文本的水平对齐方式 + 属性:text-align + 取值:left/center/right + 例子:text-align: center; + (3)文字修饰 + 属性:text-decoration + 取值:none/underline/overline(上划线)/line-through(删除线) + 例子: + a{ + text-decoration: none; + /* + * 超链接会默认添加下划线，也就是说超链接的text-decoration属性默认值是underline; + * 如果需要去除超链接的下划线，需要将该样式设置为none; + */ + } + (4)行高 + 作用:指定一行文本的高度，如果行高高于文字本身大小，那么文本将在指定的行高范围内垂直居中显示。行间距=行高-字体大小。 + 属性:line-height + 取值:数值(px/%/一个具体的数) + 例子: + .p1{ + font-size: 20px;/*此时行高为30*/ + line-height:1; + /* + * line-height可以接收的值: + * 1.直接接收一个大小px; + * 2.可以指定一个百分比,会相对于字体设置百分比，100%无间距，200%有1倍的间距; + * 3.可以直接传一个数值(无px)，1相当于100%，2相当于200%; + */ + } + (5)首行文本缩进 + 属性:text-indent + 取值:px/?em + 例子: + .p1{ + text-indent: 2em;/*1em是一个汉字字符的大小(跟随text-size)*/ + /*text-indent: 16px;*//*一个汉字字符的默认大小是16px*/ + } + (6)文本阴影 + 属性:text-shadow + 取值:h-shadow(必须，水平阴影的位置) v-shadow(必须，垂直阴影的位置) blur(模糊的距离) color + 例子: + .box{ + color: blue; + font-size: 50px; + width: 50%; + height: 200px; + background-color: lightpink; + text-shadow: 10px 10px 10px red;/*取值*/ + } + (7)字间距 + 属性:letter-spacing + 取值:px + 例子:letter-spacing: 20px; + (8)文本大小写(只适用于英文) + 属性:text-transform + 取值:none(默认值),capitalize(每个单词首字母大写),uppercase(大写),lowercase(小写); + 例子: + .p2{ + font-size: 20px; + text-transform: capitalize; + } + 3.表格 + (1)表格常用样式属性: + 1)边距属性:padding + 2)尺寸属性:width,height + 3)文本、字体属性: + 4)背景属性:background... + 5)边框属性:border + 6)垂直方向对齐:vertical-align; 取值:top/middle(默认)/bottom + (2)表格特有的样式属性: + 1)边框合并: 属性:border-collapse 取值:separate(默认，分离边框模式)/collapse(合并) + 2)边框边距: + 属性:border-spacing + 作用:设置相邻单元格的边框的距离(仅用于"边框分离模式") + 取值:value 水平和垂直间距相同 + value1 value2 第一个值表示水平间距，第二个值表示垂直间距，两个值之间用空格隔开 + 3)标题: + 标题位置:默认表格上方水平居中 + 属性:caption-side 取值:top(默认值),bottom(标题位于表格之下) + 4)显示规则 + 作用:如何去布局一个表格，指定了表格显示单元格，行的算法规则，又称为表格的布局。 + 属性:table-layout + 取值: + auto(默认值，自动布局表格数据):列的宽度是根据内容决定的。 + fixed(固定表格布局):列宽度由表格以及单元格所设定好的数据为主。 + auto和fixed的区别: + 自动布局auto:单元格的大小会适应内容; + 当表格复杂时，加载速度慢(缺点); + 自动布局会比较灵活(优点); + 适用于表格不太复杂并且不确定每一列大小时使用。 + 固定布局fixed:单元格的尺寸取决于设定的值; + 任何情况下都会加速显示表格(优点); + 固定布局不够灵活(缺点); + 适用于确定每列大小时使用; + 例子: + table.one{ + table-layout: fixed;/*显示规则,固定表格布局*/ + } + 5)例子:CSS表格:https://github.com/ZichengQu/Java/blob/CSS/Others/CSS_day04/table.html + + + + + + + + + + + + +
202020202020202020202020202020202020202020202020202040404040404040404040404040404040404040404040404040404040404440404040404040
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
员工信息表
empnoenamejobmgrhiredatesalcommdeptno
100Jacksalesman1012000-5-305000100010
101Marymanager1052000-5-296000150020
+ + 4.浮动 + (1)定位:定义元素框相对于其正常位置应该出现的位置;或者相对于父元素，另一个元素甚至浏览器窗口本身的位置; + (2)普通流定位(文档流定位):浏览器默认的定位方式称为普通流定位; + (3)浮动定位: + 1)特征: + 脱离文档流，不占据页面空间，后续元素上前补位; + 会停靠在父元素的左侧或右侧，或者停靠在其它平级已浮动元素边缘上; + 依然包含在父元素内(比如body元素); + 让多个块级元素在一行内显示; + 2)语法: + 属性及取值:float:none/left/right + 3)浮动引发的特殊效果: + 父元素宽度不足以包含所有的已浮动子元素时，最后一个将换行; + 元素浮动起来后，宽度将变成自适应(未设置宽度时，内容决定宽度)(在文档流定位中，不设置宽度，则宽度为父元素宽度); + 行内元素，行内块元素，一旦浮动起来后将变成块级元素; + 文本，行内元素，行内块元素采用环绕的方式进行排列，会巧妙的避开浮动元素而不会被压住; + 4)例子: + .box2{ + background-color: yellow; + /*width: 200px;*//*未设置宽度时，内容决定宽度*/ + height: 200px; + float: left;/*浮动定位*/ + } + 5)例子: + 浮动:https://github.com/ZichengQu/Java/blob/CSS/Others/CSS_day04/%E6%B5%AE%E5%8A%A8.html + + + + + + + +
+
+ +
+ 浮动引发的特殊效果!浮动引发的特殊效果!浮动引发的特殊效果!浮动引发的特殊效果!浮动引发的特殊效果!浮动引发的特殊效果!浮动引发的特殊效果!浮动引发的特殊效果!浮动引发的特殊效果! +
+
+
+ span标签 + span标签 + span标签 + + 简单布局:https://github.com/ZichengQu/Java/blob/CSS/Others/CSS_day04/%E7%AE%80%E5%8D%95%E5%B8%83%E5%B1%80.html + + + + + + +
+
+
+
+
+
+
+ + (4)清除浮动: + 属性:clear + 取值:none/left/right/both + (5)浮动元素对父元素带来的影响(对父元素高度带来影响) + 1)设置父元素的高度(弊端:必须知道父元素的高度) + 2)设置父元素也浮动(弊端:必须后续元素有影响) + 3)为父元素设置overflow，取值为hidden或auto(弊端:如果有内容要溢出，显示也会被一同隐藏) + 4)在父元素中追加空子级块元素，并设置其clear属性为both/left/right;
+ 5)清除浮动的例子:https://github.com/ZichengQu/Java/blob/CSS/Others/CSS_day04/%E6%B8%85%E9%99%A4%E6%B5%AE%E5%8A%A8.html + + + + + + +
+
+
+ +
+
+
+ + (4)相对定位:https://github.com/ZichengQu/Java/blob/CSS/Others/CSS_day04/%E7%9B%B8%E5%AF%B9%E5%AE%9A%E4%BD%8D.html + 例子: + + + + + + + span标签 +
+
+
+ + (5)绝对定位: https://github.com/ZichengQu/Java/blob/CSS/Others/CSS_day04/%E7%BB%9D%E5%AF%B9%E5%AE%9A%E4%BD%8D.html + + + + + + + span标签 +
+
+
+
+
+ + +Demo: +京东登录页:https://github.com/ZichengQu/Java/tree/CSS/%E4%BA%AC%E4%B8%9C%E7%99%BB%E5%BD%95%E9%A1%B5 \ No newline at end of file diff --git a/qbLogin/css/style.css b/qbLogin/css/style.css new file mode 100644 index 0000000..c41aab0 --- /dev/null +++ b/qbLogin/css/style.css @@ -0,0 +1,253 @@ + *{ + padding: 0; + margin: 0; + } + .header{ + background-color: #2e2e2e; + width: 100%; + height: 36px; + position: relative; + } + .header .left{ + background-image: url(../img/top_a.png); + width: 369.45px; + height: 26px; + background-repeat: no-repeat; + position: absolute; + left: 170px; + margin-top: 10px; + display: inline-block; + padding-left: 30px; + color: white; + vertical-align: top; + } + .header .right{ + position: absolute; + right: 150px; + background-color: #2e2e2e; + width: 280px; + height: 36px; + } + .quickReg, .promptyLogin, .choujiang{ + display: inline-block; + width: 72px; + height: 26px; + vertical-align: middle; + text-decoration: none; + text-align: center; + padding-top: 10px; + } + .quickReg{ + background-color:#b52e2e; + color:#fff; + vertical-align: middle; + } + .promptyLogin{ + background: #0984b1; + color:#fff; + } + .choujiang{ + width: 90px; + background-color: #d48a04; + color:#fff; + background-image: url(../img/choujiang.png); + background-repeat: no-repeat; + background-position: left center; + padding-left: 10px; + } + .nav2{ + width: 100%; + height: 70px; + background-color: white; + padding: 14px 0px; + border-bottom: 2px solid lightgrey; + position: relative; + } + .nav2 .logo{ + width: 210px; + height: 70px; + background-image: url(../img/logo.png); + background-repeat: no-repeat; + position: absolute; + left: 170px; + } + .nav2 .pic{ + width: 190px; + height: 70px; + background-image: url(../img/publicize.gif); + position: absolute; + left: 390px; + } + .nav2 .navbar{ + margin-top: 15px; + position: absolute; + right: 0px; + width: 756px; + height: 56px; + } + .navbar li{ + display: inline-block; + margin-right: 40px; + text-align:center; + } + .navbar li a{ + text-decoration: none; + color: #555; + font-size: 20px; + font-weight: 500; + font-family: "微软雅黑"; + } + .navbar li a:hover{ + text-decoration: none; + color: #00a4e1; + font-size: 20px; + font-weight: 500; + font-family: "微软雅黑"; + } + .bg{ + background-color: lightblue; + width:100%; + height: 750px; + background-image: url(../img/5302e977b0c99501269638c0ec08317.jpg); + background-position: -200px 0px; + background-repeat: no-repeat; + } + .main_login{ + width: 320px; + height: 300px; + padding: 34px 40px; + background: #fff; + position: relative; + margin-top: 163px; + margin-right: 42px; + float: right; + right: 152px; + border-radius: 4px; + border: 0.5px solid #D5D5D5; + } + .loginTitle{ + font-family: "微软雅黑"; + width: 320px; + height: 30px; + line-height: 30px; + margin-bottom: 38px; + } + .loginTitle p{ + font-size: 28px; + color: #333; + float: left; + vertical-align: middle; + } + .loginTitle .r_title{ + float: right; + margin-right: 7px; + padding-top: 8px; + vertical-align: bottom; + } + .loginTitle .q_identity { + font-size: 16px; + color: #333; + } + .r_title .b_sign { + font-size: 16px; + color: #00a4e1; + text-decoration: none; + } + .main_login .loginIpt { + width: 320px; + height: 44px; + border: 1px solid #d5d5d5; + color: #4c4c4c; + line-height: 42px; + font: 14px "微软雅黑"; + padding-left: 10px; + box-sizing: border-box; + } + .main_login .inputBox { + margin-bottom: 20px; + } + .r_pwd{ + margin-top: 20px; + text-align: right; + margin-bottom: 30px; + } + .r_pwd a{ + text-decoration: none; + color: #4c4c4c; + font-size: 14px; + font-family: "微软雅黑"; + } + .main_login .b_button { + width: 320px; + height: 42px; + background: #00a4e1; + margin: 0 auto; + line-height: 40px; + border-radius: 4px; + color: #fff; + text-align: center; + font: 18px "微软雅黑"; + border-style: none; + cursor: pointer; + } + + .nav2 .navbar{ + margin-top: 15px; + position: absolute; + right: 0px; + width: 756px; + height: 56px; + } + .navbar li{ + display: inline-block; + margin-right: 40px; + text-align:center; + } + .navbar li a{ + text-decoration: none; + color: #555; + font-size: 20px; + font-weight: 500; + font-family: "微软雅黑"; + } + .navbar li a:hover{ + text-decoration: none; + color: #00a4e1; + font-size: 20px; + font-weight: 500; + font-family: "微软雅黑"; + } + + .foot{ + background-color: #363636; + width: 100%; + height: 81.4px; + } + .foot1{ + height: 100%; + width: 78.98%; + margin: 0 auto; + } + .foot1 ul,li{ + display: inline-block; + } + #footbar1{ + float: left; + padding-top: 30px; + } + #footbar1 li,#footbar2 li{ + margin-right: 60px; + } + #footbar1 li a{ + text-decoration: none; + color: #716d6d; + } + #footbar1 li a:hover{ + text-decoration: none; + color: #716d6d; + } + #footbar2{ + float: right; + padding-top: 30px; + } + diff --git a/qbLogin/img/5302e977b0c99501269638c0ec08317.jpg b/qbLogin/img/5302e977b0c99501269638c0ec08317.jpg new file mode 100644 index 0000000..2047d73 Binary files /dev/null and b/qbLogin/img/5302e977b0c99501269638c0ec08317.jpg differ diff --git a/qbLogin/img/choujiang.png b/qbLogin/img/choujiang.png new file mode 100644 index 0000000..e5673de Binary files /dev/null and b/qbLogin/img/choujiang.png differ diff --git a/qbLogin/img/logo.png b/qbLogin/img/logo.png new file mode 100644 index 0000000..f79f2f6 Binary files /dev/null and b/qbLogin/img/logo.png differ diff --git a/qbLogin/img/nqq_01.png b/qbLogin/img/nqq_01.png new file mode 100644 index 0000000..7233693 Binary files /dev/null and b/qbLogin/img/nqq_01.png differ diff --git a/qbLogin/img/nwb_01.png b/qbLogin/img/nwb_01.png new file mode 100644 index 0000000..3d3a8a6 Binary files /dev/null and b/qbLogin/img/nwb_01.png differ diff --git a/qbLogin/img/nwx.png b/qbLogin/img/nwx.png new file mode 100644 index 0000000..4e4aded Binary files /dev/null and b/qbLogin/img/nwx.png differ diff --git a/qbLogin/img/publicize.gif b/qbLogin/img/publicize.gif new file mode 100644 index 0000000..ccfa109 Binary files /dev/null and b/qbLogin/img/publicize.gif differ diff --git a/qbLogin/img/top_a.png b/qbLogin/img/top_a.png new file mode 100644 index 0000000..98ffc33 Binary files /dev/null and b/qbLogin/img/top_a.png differ diff --git a/qbLogin/index.html b/qbLogin/index.html new file mode 100644 index 0000000..6ca4c36 --- /dev/null +++ b/qbLogin/index.html @@ -0,0 +1,66 @@ + + + + + qb + + + +
+
+ 用户服务热线 User service hotline: 400-1170-178 +
+
+ 快速注册 + 立即登录 + 每日抽奖 +
+
+
+ +
+
+ +
+
+
+
+
+

登陆

+
+ 还没账号？ + 马上注册 +
+
+ + +
+ 忘记密码 +
+ +
+
+
+
+ + +
+ +
+ + diff --git "a/\344\272\254\344\270\234\347\231\273\345\275\225\351\241\265/css/jd-style.css" "b/\344\272\254\344\270\234\347\231\273\345\275\225\351\241\265/css/jd-style.css" new file mode 100644 index 0000000..58b6dd3 --- /dev/null +++ "b/\344\272\254\344\270\234\347\231\273\345\275\225\351\241\265/css/jd-style.css" @@ -0,0 +1,303 @@ +*{ + margin: 0; + padding: 0; +} + +a { + text-decoration: none; + font-size: 12px; + color: #999; + font-family: Arial,Verdana,"\5b8b\4f53"; +} + +img { + vertical-align: middle; +} + +/*头部*/ +.w { + width: 990px; + margin: 0 auto; + overflow: hidden; +} + +#logo { + position: relative; + width: 300px; + margin: 10px 0; + height: 60px; + float: left; +} + +.q-link { + position: relative; + float: right; + top: 52px; +} + +#logo b { + display: block; + width: 110px; + height: 40px; + position: absolute; + right: 0; + bottom: 0; + background-image: url(../img/l-icon.png); +} + +.q-link b { + display: inline-block; + width: 18px; + height: 14px; + margin: 0 5px; + background: url(../img/q-icon.png) no-repeat; + overflow: hidden; + vertical-align: middle; +} + +.tips-wrapper { + background: #fff8f0; + width: 100%; + padding-top: 10px; + padding-bottom: 10px; + text-align: center; + color: #999; + font-size: 12px; +} + +.tips-wrapper p { + vertical-align: middle; + color: #999; + font-size: 12px; + display: inline; +} + +.icon-tips { + background: url(../img/icon-tips.png); + width: 16px; + height: 16px; + display: inline-block; + vertical-align: middle; +} + +.main{ + width: 100%; + height: 475px; + background:#e93854; +} + +.main-wrap{ + width: 990px; + height: 475px; + margin: 0 auto; + background: url(../img/bg.png) no-repeat; +} + +.login-form{ + width: 346px; + background:#fff; + float: right; + margin-top: 10px; + position: relative; + overflow: visible; +} + +.login-tab { + height: 54px; + font-size: 18px; + font-family: "microsoft yahei"; + text-align: center; + border-bottom: 1px solid #f4f4f4; + position: absolute; +} + +.login-form .login-tab { + width: 173px; + height: 54px; + font-family: "microsoft yahei"; + text-align: center; + border-bottom: 1px solid #f4f4f4; + position: absolute; + background: #fff; +} +.login-form .login-tab-r { + right: 0; +} +.login-tab a { + width: 99%; + height: 18px; + color: #666; + font-size: 18px; + position: absolute; + left: 0; + top: 18px; + border-right: 1px solid #f4f4f4; + text-decoration: none; +} +a:hover { + color: #E4393C; + text-decoration: underline; + cursor: pointer; +} +.login-tab a:hover { + font-weight: 700; + color: #e4393c; + text-decoration:none; +} +.login-form .login-box { + width: 306px; + padding: 20px; +} +.login-form .form { + overflow: visible; + margin-top: 55px; + padding-top: 28; + height: 200px; +} +.form .item { + position: relative; + margin-bottom: 20px; + border: 1px solid #bdbdbd; + height: 38px; + width: 304px; + +} +.login-label { + position: absolute; + top: 0; + left: 0; + width: 38px; + height: 38px; + border-right: 1px solid #bdbdbd; +} +.name-label{ + background: url(../img/name.png) no-repeat center; +} +.pwd-label{ + background: url(../img/pwd.png) no-repeat center; +} + +.text{ + line-height: 18px; + height: 18px; + border: 0; + padding: 10px 0 10px 50px; + width: 254px; + float: none; + overflow: hidden; + font-size: 14px; +} +.forget-pw { + text-align: right; +} +.login-form .login-box .login-btn { + /*border: 1px solid #cb2a2d;*/ + margin-top: 20px; + margin-bottom: 20px; + height: 32px; + +} +.input-submit{ + width: 100%; + height: 32px; + background: #e4393c; + border: 1px solid #e4393c; + color: #fff; + font-size: 20px; + text-align: center; +} +.bottom{ + padding-left: 20px; + padding-right: 20px; + line-height: 50px; + border-top: 1px solid #f4f4f4; + height: auto; + background-color: #fcfcfc; +} +.bottom li{ + float: left; +} +.bottom li a.pd{ + display: inline-block; + position: relative; + padding-left: 24px; +} +ol, ul { + list-style: none; +} +.QQ-icon{ + width: 19px; + height: 18px; + display: block; + background: url(../img/QQ.png) no-repeat; + position: absolute; + float: left; + left: 0; + top: 16px; +} +.w-icon{ + width: 19px; + height: 18px; + display: block; + background: url(../img/weixin.png) no-repeat; + position: absolute; + float: left; + left: 0; + top: 16px; +} +li .line { + color: #ccc; + padding: 0 10px; +} +.bottom li.extra-r { + float: right; +} +.reg-link .reg{ + color: #b61d1d; + font-size: 14px; +} +.reg b{ + display: inline-block; + width: 16px; + height: 16px; + overflow: hidden; + background: url(../img/r.png) no-repeat; + vertical-align: middle; + margin-right: 5px; +} +/*尾部样式*/ +.footer{ + width: 100%; + margin: 30px auto; + font-size: 12px; + color: #666; + text-align: center; +} +.links a{ + margin: 0 10px; + color: #666; +} +.footer p{ + text-align: center; + margin-top: 10px; +} + + + + + + + + + + + + + + + + + + +} + diff --git "a/\344\272\254\344\270\234\347\231\273\345\275\225\351\241\265/img/QQ.png" "b/\344\272\254\344\270\234\347\231\273\345\275\225\351\241\265/img/QQ.png" new file mode 100644 index 0000000..6e3596f Binary files /dev/null and "b/\344\272\254\344\270\234\347\231\273\345\275\225\351\241\265/img/QQ.png" differ diff --git "a/\344\272\254\344\270\234\347\231\273\345\275\225\351\241\265/img/bg.png" "b/\344\272\254\344\270\234\347\231\273\345\275\225\351\241\265/img/bg.png" new file mode 100644 index 0000000..edab8ab Binary files /dev/null and "b/\344\272\254\344\270\234\347\231\273\345\275\225\351\241\265/img/bg.png" differ diff --git "a/\344\272\254\344\270\234\347\231\273\345\275\225\351\241\265/img/icon-tips.png" "b/\344\272\254\344\270\234\347\231\273\345\275\225\351\241\265/img/icon-tips.png" new file mode 100644 index 0000000..d02052d Binary files /dev/null and "b/\344\272\254\344\270\234\347\231\273\345\275\225\351\241\265/img/icon-tips.png" differ diff --git "a/\344\272\254\344\270\234\347\231\273\345\275\225\351\241\265/img/l-icon.png" "b/\344\272\254\344\270\234\347\231\273\345\275\225\351\241\265/img/l-icon.png" new file mode 100644 index 0000000..fbb1837 Binary files /dev/null and "b/\344\272\254\344\270\234\347\231\273\345\275\225\351\241\265/img/l-icon.png" differ diff --git "a/\344\272\254\344\270\234\347\231\273\345\275\225\351\241\265/img/logo-b.png" "b/\344\272\254\344\270\234\347\231\273\345\275\225\351\241\265/img/logo-b.png" new file mode 100644 index 0000000..9a3237b Binary files /dev/null and "b/\344\272\254\344\270\234\347\231\273\345\275\225\351\241\265/img/logo-b.png" differ diff --git "a/\344\272\254\344\270\234\347\231\273\345\275\225\351\241\265/img/name.png" "b/\344\272\254\344\270\234\347\231\273\345\275\225\351\241\265/img/name.png" new file mode 100644 index 0000000..0450e25 Binary files /dev/null and "b/\344\272\254\344\270\234\347\231\273\345\275\225\351\241\265/img/name.png" differ diff --git "a/\344\272\254\344\270\234\347\231\273\345\275\225\351\241\265/img/pwd.png" "b/\344\272\254\344\270\234\347\231\273\345\275\225\351\241\265/img/pwd.png" new file mode 100644 index 0000000..b64602e Binary files /dev/null and "b/\344\272\254\344\270\234\347\231\273\345\275\225\351\241\265/img/pwd.png" differ diff --git "a/\344\272\254\344\270\234\347\231\273\345\275\225\351\241\265/img/q-icon.png" "b/\344\272\254\344\270\234\347\231\273\345\275\225\351\241\265/img/q-icon.png" new file mode 100644 index 0000000..59a1b8a Binary files /dev/null and "b/\344\272\254\344\270\234\347\231\273\345\275\225\351\241\265/img/q-icon.png" differ diff --git "a/\344\272\254\344\270\234\347\231\273\345\275\225\351\241\265/img/r.png" "b/\344\272\254\344\270\234\347\231\273\345\275\225\351\241\265/img/r.png" new file mode 100644 index 0000000..2d3e4b2 Binary files /dev/null and "b/\344\272\254\344\270\234\347\231\273\345\275\225\351\241\265/img/r.png" differ diff --git "a/\344\272\254\344\270\234\347\231\273\345\275\225\351\241\265/img/weixin.png" "b/\344\272\254\344\270\234\347\231\273\345\275\225\351\241\265/img/weixin.png" new file mode 100644 index 0000000..1b26f6f Binary files /dev/null and "b/\344\272\254\344\270\234\347\231\273\345\275\225\351\241\265/img/weixin.png" differ diff --git "a/\344\272\254\344\270\234\347\231\273\345\275\225\351\241\265/login.html" "b/\344\272\254\344\270\234\347\231\273\345\275\225\351\241\265/login.html" new file mode 100644 index 0000000..ce4b170 --- /dev/null +++ "b/\344\272\254\344\270\234\347\231\273\345\275\225\351\241\265/login.html" @@ -0,0 +1,111 @@ + + + + + + + + + +
+ + + + 登录页面，调查问卷 + +
+
+
+ + +

依据《网络安全法》，为保障您的账户安全和正常使用，请尽快完成手机号验证！ 新版 + 《京东隐私政策》已上线，将更有利于保护您的个人隐私。

+ +
+
+
+
+ +
+
+ +
+
+ 关于我们 | + 联系我们 | + 人才招聘 | + 商家入驻 | + 广告服务 | + 手机京东 | + 友情链接 | + 销售联盟 | + 京东社区 | + 京东公益 | + English Site +
+

+ Copyright © 2004-2018 京东JD.com 版权所有 +

+
+ +