第一章-HTML5概述

1什么是HTML5

2快速入门

第二章-CSS3

常用颜色网址http://rainyin.com/307.html

配色网：https://flatuicolors.com/

色彩心理：https://www.jianshu.com/p/5df2cbf5b174

1选择器

菜鸟教程选择器：https://www.runoob.com/cssref/css-selectors.html

基本选择器： .class、#id、element、* 并且选择器：div,p 选中所有div和p 后代选择器：div p 选中div下的所有p,包含孙子 子代选择器：div>p 选中div下的所有子代p 跟屁虫选择器：div+p 选中div标签后的第一个p

属性选择器：[target] 选择带有target属性的元素,a[target]带有属性的a标签 长子选择器：p:first-of-type 选择属于其父类的第一个p元素。 幼子选择器：p:last-of-type 选择每个p元素是其父级的最后一个p元素 唯一儿子选择器：p:only-of-type 选择每个p元素是其父级的唯一p元素

指定儿子选择器： p:nth-child(2) 选择每个p元素是其父级的第二个子元素,可加n

2重要属性

-1 Position(定位)

菜鸟教程：https://www.runoob.com/css/css-positioning.html

position 属性的五个值：

static (默认)没有定位，遵循正常的文档流对象。 relative 移动相对定位元素(相对原本位置)，但它原本所占的空间不会改变。。 fixed 相对于浏览器窗口是固定位置,即使窗口是滚动的它也不会移动 absolute 绝对定位的元素的位置相对于最近的已定位父元素,(若无父,则为html) sticky 基于用户的滚动位置来定位,(类似于顶部导航栏效果)

z-index 元素可拥有负的 z-index 属性值 Z-index 仅能在定位元素上奏效（例如 position:absolute;） 拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。谁大谁显示

-2 float浮动

float属性指定一个盒子（元素）是否应该浮动。

注意： 绝对定位的元素忽略float属性！ position :absolute

-3 padding内填充

padding:2cm 4cm 3cm 4cm;内边距上、右、下、左 padding-bottom /ˈbɑːtəm/底部；末端；臀部；尽头

-4 target-iframe

target属性，框架https://blog.csdn.net/BOKEhhh/article/details/89043764

target属性的“_blank”、“_self”、“_parent”、“_top”

设置target属性值为“_blank”，可以在一个新的窗口中打开链接。 设置target属性值为“_self”，会在相同的框架或者窗口中打开链接。 设置target属性值为“_parent”，会在父窗口或者包含来超链接引用的框架的框架集中打开链接。 设置target属性值为“_top”，会清除所有被包含的框架，并打开链接。

3常用样式

1bootstrap表格

为表格有class=table-hover的子类tbody的子类tr 实现放到tr上改变颜色，

1
2
3
4

.table-hover > tbody > tr:hover {
background-color: #f5f5f5;		
cursor:pointer;
}

tr变成小手形状。

2去除所有间隔

css消除所有间隙：在css文件第一行定义全局样式，可以消除html标签默认间隙*{margin:0;padding:0;}

第三章-插件

1日期插件

My97DatePicker（WdatePicker）

官网：http://www.my97.net/ 使用网址：https://blog.csdn.net/qq_35514348/article/details/80648789

使用方法,（HTML5标签的input类型，datetime浏览器兼容性差。） 没有datetime类型。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

<script type="text/javascript" 
src="${pageContext.request.contextPath}/view/My97DatePicker/WdatePicker.js"></script>

<input class="form-control" 
       type="text"  
       onclick="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm'})" 
       readonly="readonly" 
       required="required"
       name="contactDate" 
       id="contactDate" 
       placeholder="请输入联系时间" />

最基本用法readonly="readonly" ,onclick="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm:ss'})",带参数是为了进行限定。

2LOGO生成

Logo1：http://www.uugai.com/ （一般般） Logo2:https://www.canva.cn/templates/ Logo3:https://www.logomaker.com.cn/design