UI设计

当我们已经了解了html,javaScript,jQuery的基本操作流程后。

这时我们将要做一个很重要的环节，就是页面美化，也就是UI设计。

简单来说就是在我们经常用的一些样式属性加上一些其他的属性来进行美化，达到UI设计这样高大上的目的。

现在我们来学一些简单的样式，我们经常接触到的

1、background

background-color ,bakground-image这两种最常见，分别是设置背景颜色，和设置背景图片的意思,

除此之外还有其他

background-color:#999;//颜色表示 下面会有详细解答

background-image: url(1.jpg);//url后面是图片地址

background-repeat:no-repeat;//默认设置图片为背景颜色是平铺的，图片数量是重复的，no-repeat是不重复

background-size :cover;//设置图片覆盖面积为全覆盖

background-position: center top;//设置图片位置左右居中，贴着顶部

overflow-x:hidden;//修剪使超出画面部分，隐藏

以上可以简化为：	
background: rgba(0, 0, 0, 0) url("login_bg.jpg") no-repeat fixed  center / cover ;

---

html中颜色表示有三种：

1、最常用的是6位16进制的代码表示法。如bgcolor=#ff0000;其中#只是表示使用6位16进制的颜色代码声明颜色。代码的头两位即ff表示三原色中的红色，范围当然是16进制的00-ff，中间两位即00表示绿色，最后两位即00表示蓝色，00表示没有颜色，ff表示颜色最强。 
  所以000000表示黑色，ffffff表示白色，同样ff0000表示纯红色，00ff00表示纯绿色，0000ff表示纯蓝色。 
2、颜色还可以用rgb(r,g,b)表示，括号中的r,g,b分别用0-255的十进制数或百分比表示红绿蓝，例如rgb(255,0,0)以及rgb(100%,0%,0%)都表示红色。

 3、RGBA 是代表Red（红色） Green（绿色） Blue（蓝色）和 Alpha（不透明度）三个单词的缩写。RGBA 颜色值是 RGB 颜色值的扩展，带有一个 alpha 通道 - 它规定了对象的不透明度。

基本语法:

　　R：红色值。正整数 （0~255）

　　G：绿色值。正整数 （0~255）

　　B：蓝色值。正整数（0~255）

　　A：透明度。取值0~1之间

 

---

 

backgroundAttachment 属性设置背景图像是否固定或者随着页面的其余部分滚动。

语法：

Object.style.backgroundAttachment=scroll|fixed

scroll图片滚动
fixed图片不随 页面滚动

2.透明度  定位

opacity:0.9;//不透明级别0.0完全不透明  取值范围0-1

filter:alpha(opacity=90);//同样是设置不透明级别  取值范围0-100

position:relative;      //相对定位

position:absolution;    //绝对定位

absolute : 　将对象从文档流中拖出，使用left，right，top，bottom等属性进行绝对定位。
而其层叠通过z-index属性定义。此时对象不具有边距，但仍有补白和边框 
relative : 　对象不可层叠，但将依据left，right，top，bottom等属性在正常文档流中偏移位置

 

 

3、input   text-intent:2em; 首行缩进两个字节

 

4、当想改变input边框颜色时候，首先获得焦点（焦点在点击的时候获得）具体代码

.input_self:focus{//当获取焦点
        outline：none；//去掉边框颜色
	box-shadow:0px 0px 6px #438eb9;//设置边框阴影 0px 0px为向左右上下阴影偏移量，6px阴影像素大小  #438eb9阴影颜色
}

.finish_btn:hover{//当鼠标停留在上面
    cursor:pointer；//鼠标变成小手
	box-shadow:0px 0px 3px #000;
}

 

 

5、设置min-height 。当进行流布局时候。height设置成百分比。当页面宽度发生变化，height也会发生变化。但是不能小于mini-height的值

 

大小适合

6、当我们相对div在页面显示居中时，

左右居中可以用 margin：0 auto;样式进行约束

上下约束时，

$(function(){//等页面加载完  在执行 相当于$(document).ready(function(){})

		    $(window).on('resize load',function(){//用on来监听窗口事件

			var win_height = $(window).height();//获取页面高度

			var whole_height = $(".whole").height();//获取class为whole的div的高度

			$(".whole").css('top',win_height/2 - whole_height/2 - 40 + 'px')
			//计算使div在页面上下居中

		})

	})