三、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 ...
随机推荐
- hover状态下改变图片颜色的方式 悬停图片切换;css变量;悬停svg图片改变颜色;VUE
由外部json文件,按照配置方式引入图片路径时,需要一些值得注意的语法来动态引入和改变图片 1.图片路径设置 ,按照img标签动态引入图片 <img src=''/> 路径不引入变量,此时 ...
- 10 个常用的 JS 工具库,80% 的项目都在用!
Day.js 一个极简的处理时间和日期的 JavaScript 库,和 Moment.js 的 API 设计保持一样, 但体积仅有2KB. npm install dayjs 基本用法 import ...
- 关闭 Microsoft Compatibility Telemetry
Microsoft Compatibility Telemetry可能会导致操作系统(Win10)启动后一直读盘,打开任务管理器可能会看到 Microsoft Compatibility Teleme ...
- darkriscv笔记
1 按照默认设置,前4K空间为ROM,后4K空间是RAM.为什么RAM需要初值,初值从哪儿来? 2 指令分类 LUI: AUTPC: JAL: JALR: BCC : BEQ/BGE /BGEU/BL ...
- Background Suppression Network for Weakly-supervised Temporal Action Localization概述
0. 前言 相关资料: arxiv github 论文解读1,论文解读2 论文基本信息: 领域:弱监督时序行为定位 发表时间:AAAI 2020(2019.11.22) 1.针对的问题 弱监督视频动作 ...
- visual studio 2015 IOS开发连接mac时提示错误couldn't connect to xxxx, please try again的一个方法
本人使用虚拟机MAC.原本使用虚拟机中的VS2015连接正常没有问题. 但是当把MAC的虚拟机文件COPY到另一个机器上,提示"couldn't connect to xxxx, plea ...
- Java流程控制之while循环详解
while循环 while循环 do...while循环 for循环 在Java5中引入了一种主要用于数组的增强型for循环 while循环 while循环是最基本的循环,它的结构为 while(布尔 ...
- 打开网页自动下载APP
整体主要使用script控制,目前Android通过,iOS未测试. a标签源码部分 <a id="Download"href="javascript:;" ...
- 循环4-for循环
一.语法 for循环和while类似,常用于执行有限次数的循环,有两种语法结构, 1.变量列表循环 语法: for 变量名 in 变量取值列表 do 指令...... done 变量取值列表中的值,要 ...
- python基于百度unit实现语音识别与语音交互
一.百度Unit新建机器人 网址:https://ai.baidu.com/tech/speech/asr: 1.新建机器人并添加预置技能步骤 (1).新建机器人(添加预置技能),并填写机器人具体信息 ...