一、文本属性整理

  1. <style>
  2. h2 {
  3. /* 文字对齐属性 text-align */
  4. /* center:居中,left,right:居左居右,justify:文字拉伸铺满一行 */
  5. text-align: center;
  6. /* 文字大小写属性 text-transform: uppercase:大写,lowercase:小写,capitalize:首字母大写 */
  7. text-transform: capitalize;
  8. font-size: 60px;
  9. /* 文字厚度 font-weight */
  10. font-weight: 400;
  11. /* 文字的行高 line-height */
  12. line-height: 100px;
  13. /* 透明度 */
  14. opacity: 0.5;
  15. }
  16. </style>
  17.  
  18. <h2>Test title</h2>
  19. <!-- 验证文本其他tag属性 em:斜体, u: 下划线, strong:加粗强调,s:删除 -->
  20. <p><s>删除</s> <u>下划线</u> <strong>强调</strong></p>
  21. <p><em>字体倾斜</p>
  22. <!-- hr表示下划线 -->
  23. <hr>

二、颜色属性总结

  1. <style>
  2. /* 使用单词表示颜色 */
  3. .word-color {
  4. color: red;
  5. }
  6.  
  7. /* 使用hex16进制表示颜色 */
  8. .hex-color {
  9. color: #FFFFFF;
  10. }
  11.  
  12. /* 使用rgb表示颜色 */
  13. .rgb-color {
  14. color: rgb(0,0,0);
  15. }
  16.  
  17. /* 使用rgba表示颜色+透明度 */
  18. .rgba-background-color {
  19. background-color: rgb(255,0,0,0.5)
  20. }
  21.  
  22. /* 渐变色 linear-gradient,颜色数量自定义 */
  23. .yellow-white-blue {
  24. background: linear-gradient(30deg, yellow, rgb(255,255,255), #0000ff);
  25. }
  26.  
  27. /* 重复渐变 repeating-linear-gradient*/
  28. .repeat-color{
  29. border-radius: 20px;
  30. width: 70%;
  31. height: 400px;
  32. margin: 50 auto;
  33. background: repeating-linear-gradient(
  34. 90deg,
  35. yellow 0px,
  36. blue 40px,
  37. green 40px,
  38. red 80px
  39. );
  40. }
  41.  
  42. div {
  43. width: 200px;
  44. height: 200px;
  45. }
  46.  
  47. </style>
  48.  
  49. <div class="rgba-background-color">
  50. <p class="rgb-color">颜色测试</p>
  51. </div>
  52. <div class="yellow-white-blue"></div>
  53. <div class="repeat-color"></div>

三、Applied visual design(应用视觉设计)的更多相关文章

  1. Only2 Labs — A Visual Design Studio

    Only2 Labs - A Visual Design Studio 设计合作 对您目前的设计很不满意?或是急缺一个设计供应商?您的团队最近做的项目需要指导?Only2都很乐意为您解困惑. 或者,你 ...

  2. Xamarin+Prism开发详解三:Visual studio 2017 RC初体验

    Visual studio 2017 RC出来一段时间了,最近有时间就想安装试试,随带分享一下安装使用体验. 1,卸载visual studio 2015 虽然可以同时安装visual studio ...

  3. 在【Xamarin+Prism开发详解三:Visual studio 2017 RC初体验】中分享了Visual studio 2017RC的大致情况,同时也发现大家对新的Visual Studio很是感兴趣。于是发时间深入研究了一下Visual Studio 2017RC 是不是和微软Connect()://2016上说得一样神。

    总共列出了12点,耐心点慢慢看! 1,添加了不少[代码样式]的设置项目. 通过合理的设置每个人都能写出优美的代码,而且团队项目也可以达到统一代码风格. this首选项:可以设置[字段,属性,方法,事件 ...

  4. 进度更新---Responsive Web Design Certification (300 hours)

    进度更新---Responsive Web Design Certification (300 hours) 已经完成: basic html and html5 basic css applied ...

  5. FCC---Create a Gradual CSS Linear Gradient

    Applied Visual Design: Create a Gradual CSS Linear Gradient background: linear-gradient(gradient_dir ...

  6. 转:15 Best Responsive Web Design Testing Tools

    Responsive Web Design is regarded as being the approach which suggests that web design and developme ...

  7. Design Pattern in Simple Examples

    Instead of defining what is design pattern lets define what we mean by design and what we mean by pa ...

  8. Visual detection of structural changes in time-varying graphs using persistent homology

    PKU blog about this paper Basic knowledge:  1. what is time-varying graphs? time-varying graph VS st ...

  9. 深入研究Visual studio 2017 RC新特性

    在[Xamarin+Prism开发详解三:Visual studio 2017 RC初体验]中分享了Visual studio 2017RC的大致情况,同时也发现大家对新的Visual Studio很 ...

  10. Visual Studio Code预览版Ver 0.3.0试用体验

    当你开始阅读这篇文章时,请先不要把Visual Studio Code和.net.Windows联想到一起,因为VS Code是一个跨平台,支持30多种语言的开箱代码编辑器.不管你是.Net.Java ...

随机推荐

  1. Finance财务软件(支持多账套专题)

    在2.0.0.7版本中新增了账套管理的UI控制 在2.0.0.5版本中支持多账套 客户端登录的时候可以选择登录账套 在服务端Finance.exe进程所在目录新增进程FinanceConsole.ex ...

  2. IPC,进程间通信

    信号机制 也叫软中断,软件层次上对中断的模拟 kill -9 加进程号可以终止进程 linux下执行kill -l可以看到 这里面居然没有32 33 直接从31到34 所以一共是62个信号 1) SI ...

  3. RNN,LSTM,BERT

    目录 RNN LSTM 计算公式 参数量计算 self-attention bert 论文 源码 问题 问题:bert中进行ner为什么没有使用crf:使用DL进行序列标注问题的时候CRF是必备嘛(t ...

  4. Day 11 11.2 文件操作

    文件操作 引言 到目前为止,我们做的一切操作,都是在内存里进行的,这样会有什么问题吗?如果一旦断电或发生意外关机了,那么你辛勤的工作成果将瞬间消失.是不是感觉事还挺大的呢?现在你是否感觉你的编程技巧还 ...

  5. tomcat 1 - Servlet 容器

    Socket socket = new Socket ( "yahoo.com", 80); OutputStream os = socket.getOutputStream(); ...

  6. 树莓派4B安装Gogs

    https://www.labno3.com/2021/01/28/how-to-install-gogs-on-the-raspberry-pi/ https://gogs.io/docs/inst ...

  7. go读取excel的内容

    import "github.com/360EntSecGroup-Skylar/excelize" func SimulationDataHandler(){ f, err := ...

  8. React如何修改props && 子组件调用父组件方法

    /** * 子组件如何更改父组件的state呢? * 父组件传递下来的props不满足要求,往往需要修改 * * * Author: shujun * Date: 2020-10-25 */ impo ...

  9. cookie和session、token的区别

    原作者:施杨(施杨's Think out)出处:http://shiyangxt.cnblogs.com ************** 本文版权归原作者和博客园共有,欢迎转载,转载请保留该申明 ** ...

  10. 【2020NOI.AC省选模拟#8】C. 海盗

    题目链接 原题解: 可以发现,在给定的规则下,若前$i$个人参与分配,则每个人得到的金币个数是固定的. 假设在前$i-1$个海盗参与分配时,某个海盗能得到$x$个金币,则第$i$个海盗需要给他$x+1 ...