三、Applied visual design(应用视觉设计)
一、文本属性整理
- <style>
- h2 {
- /* 文字对齐属性 text-align */
- /* center:居中,left,right:居左居右,justify:文字拉伸铺满一行 */
- text-align: center;
- /* 文字大小写属性 text-transform: uppercase:大写,lowercase:小写,capitalize:首字母大写 */
- text-transform: capitalize;
- font-size: 60px;
- /* 文字厚度 font-weight */
- font-weight: 400;
- /* 文字的行高 line-height */
- line-height: 100px;
- /* 透明度 */
- opacity: 0.5;
- }
- </style>
- <h2>Test title</h2>
- <!-- 验证文本其他tag属性 em:斜体, u: 下划线, strong:加粗强调,s:删除 -->
- <p><s>删除</s> <u>下划线</u> <strong>强调</strong></p>
- <p><em>字体倾斜</p>
- <!-- hr表示下划线 -->
- <hr>
二、颜色属性总结
- <style>
- /* 使用单词表示颜色 */
- .word-color {
- color: red;
- }
- /* 使用hex16进制表示颜色 */
- .hex-color {
- color: #FFFFFF;
- }
- /* 使用rgb表示颜色 */
- .rgb-color {
- color: rgb(0,0,0);
- }
- /* 使用rgba表示颜色+透明度 */
- .rgba-background-color {
- background-color: rgb(255,0,0,0.5)
- }
- /* 渐变色 linear-gradient,颜色数量自定义 */
- .yellow-white-blue {
- background: linear-gradient(30deg, yellow, rgb(255,255,255), #0000ff);
- }
- /* 重复渐变 repeating-linear-gradient*/
- .repeat-color{
- border-radius: 20px;
- width: 70%;
- height: 400px;
- margin: 50 auto;
- background: repeating-linear-gradient(
- 90deg,
- yellow 0px,
- blue 40px,
- green 40px,
- red 80px
- );
- }
- div {
- width: 200px;
- height: 200px;
- }
- </style>
- <div class="rgba-background-color">
- <p class="rgb-color">颜色测试</p>
- </div>
- <div class="yellow-white-blue"></div>
- <div class="repeat-color"></div>
三、Applied visual design(应用视觉设计)的更多相关文章
- Only2 Labs — A Visual Design Studio
Only2 Labs - A Visual Design Studio 设计合作 对您目前的设计很不满意?或是急缺一个设计供应商?您的团队最近做的项目需要指导?Only2都很乐意为您解困惑. 或者,你 ...
- Xamarin+Prism开发详解三:Visual studio 2017 RC初体验
Visual studio 2017 RC出来一段时间了,最近有时间就想安装试试,随带分享一下安装使用体验. 1,卸载visual studio 2015 虽然可以同时安装visual studio ...
- 在【Xamarin+Prism开发详解三:Visual studio 2017 RC初体验】中分享了Visual studio 2017RC的大致情况,同时也发现大家对新的Visual Studio很是感兴趣。于是发时间深入研究了一下Visual Studio 2017RC 是不是和微软Connect()://2016上说得一样神。
总共列出了12点,耐心点慢慢看! 1,添加了不少[代码样式]的设置项目. 通过合理的设置每个人都能写出优美的代码,而且团队项目也可以达到统一代码风格. this首选项:可以设置[字段,属性,方法,事件 ...
- 进度更新---Responsive Web Design Certification (300 hours)
进度更新---Responsive Web Design Certification (300 hours) 已经完成: basic html and html5 basic css applied ...
- FCC---Create a Gradual CSS Linear Gradient
Applied Visual Design: Create a Gradual CSS Linear Gradient background: linear-gradient(gradient_dir ...
- 转:15 Best Responsive Web Design Testing Tools
Responsive Web Design is regarded as being the approach which suggests that web design and developme ...
- 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 ...
- 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 ...
- 深入研究Visual studio 2017 RC新特性
在[Xamarin+Prism开发详解三:Visual studio 2017 RC初体验]中分享了Visual studio 2017RC的大致情况,同时也发现大家对新的Visual Studio很 ...
- Visual Studio Code预览版Ver 0.3.0试用体验
当你开始阅读这篇文章时,请先不要把Visual Studio Code和.net.Windows联想到一起,因为VS Code是一个跨平台,支持30多种语言的开箱代码编辑器.不管你是.Net.Java ...
随机推荐
- Finance财务软件(支持多账套专题)
在2.0.0.7版本中新增了账套管理的UI控制 在2.0.0.5版本中支持多账套 客户端登录的时候可以选择登录账套 在服务端Finance.exe进程所在目录新增进程FinanceConsole.ex ...
- IPC,进程间通信
信号机制 也叫软中断,软件层次上对中断的模拟 kill -9 加进程号可以终止进程 linux下执行kill -l可以看到 这里面居然没有32 33 直接从31到34 所以一共是62个信号 1) SI ...
- RNN,LSTM,BERT
目录 RNN LSTM 计算公式 参数量计算 self-attention bert 论文 源码 问题 问题:bert中进行ner为什么没有使用crf:使用DL进行序列标注问题的时候CRF是必备嘛(t ...
- Day 11 11.2 文件操作
文件操作 引言 到目前为止,我们做的一切操作,都是在内存里进行的,这样会有什么问题吗?如果一旦断电或发生意外关机了,那么你辛勤的工作成果将瞬间消失.是不是感觉事还挺大的呢?现在你是否感觉你的编程技巧还 ...
- tomcat 1 - Servlet 容器
Socket socket = new Socket ( "yahoo.com", 80); OutputStream os = socket.getOutputStream(); ...
- 树莓派4B安装Gogs
https://www.labno3.com/2021/01/28/how-to-install-gogs-on-the-raspberry-pi/ https://gogs.io/docs/inst ...
- go读取excel的内容
import "github.com/360EntSecGroup-Skylar/excelize" func SimulationDataHandler(){ f, err := ...
- React如何修改props && 子组件调用父组件方法
/** * 子组件如何更改父组件的state呢? * 父组件传递下来的props不满足要求,往往需要修改 * * * Author: shujun * Date: 2020-10-25 */ impo ...
- cookie和session、token的区别
原作者:施杨(施杨's Think out)出处:http://shiyangxt.cnblogs.com ************** 本文版权归原作者和博客园共有,欢迎转载,转载请保留该申明 ** ...
- 【2020NOI.AC省选模拟#8】C. 海盗
题目链接 原题解: 可以发现,在给定的规则下,若前$i$个人参与分配,则每个人得到的金币个数是固定的. 假设在前$i-1$个海盗参与分配时,某个海盗能得到$x$个金币,则第$i$个海盗需要给他$x+1 ...