2018年1月5日总结

╰半夏微凉° 2022-06-02 06:13 333阅读 0赞

1、UI简单注意事项

![Center][]

![Center 1][]

一个实例为了实现下边的效果，需要的图层：

![Center 2][]

![Center 3][]

简单的ps操作

![Center 4][]

快捷生成多个无需列

![Center 5][]![Center 6][]![Center 7][]

图片效果的时间

![Center 8][]

将字体设计为普通结构

![Center 9][]

想做移动一个像素

![Center 10][]

竖直居中

![Center 11][]

转换为快内元素

![Center 12][]

引入css

<em> 标签告诉浏览器把其中的文本表示为强调的内容。对于所有浏览器来说，这意味着要把这段文字用斜体来显示。

<i>标签也是使用斜体字来显示文本

选择器：

\*\{  
margin: 0;  
padding: 0;  
background: pink;  
\}  
/\*所有选择器\*/

.p\{  
font-size: 20px;  
\}

/\*class类选择器\*/

.p\{  
font-size: 20px;  
\}  
/\*标签\*/

img\{  
border: 1px solid green;  
\}   
p\{  
color: pink;  
\}  
/\*id选择器\*/  
\#123\{  
background: gray;  
\}

例子

margin-bottom: 15px;设置元素的下边距

text-align: center;文本对齐方式

overflow: hidden;隐藏溢出

line-height: 25px;设置以百分比计的行高：

background-position 属性设置背景图像的起始位置。

padding-left元素的左内边距：

[Center]: /images/20220602/99852cdd83ee42f3ae296d874986156c.png
[Center 1]: /images/20220602/ee7dc056053c405da2578b796b056269.png
[Center 2]: /images/20220602/17ac7b840f4d483791f2b951399053a9.png
[Center 3]: /images/20220602/18632fd04adb4cdb8fe85a4d3b3ea821.png
[Center 4]: /images/20220602/68213ca5f12f471e88f627eb5d1bab52.png
[Center 5]: https://img-blog.csdn.net/20180105205907539?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvUHJvZ3JhbU1vbmlrYQ==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center
[Center 6]: https://img-blog.csdn.net/20180105205926698?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvUHJvZ3JhbU1vbmlrYQ==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center
[Center 7]: /images/20220602/10c0ad68f8384e9fa2b75a8f50ce34f7.png
[Center 8]: /images/20220602/302b47864433441c8394d3e7d9bfbcf7.png
[Center 9]: /images/20220602/7590fa3127744c06ac9294f8d5b7efec.png
[Center 10]: /images/20220602/cf242b0181c14e00abe4be8e3da9474a.png
[Center 11]: /images/20220602/4880bfeb2afb4c22b82a07b0e2c357c7.png
[Center 12]: /images/20220602/30c3867dfb6e4bc0887a810513a54940.png