（一）响应式web设计。。。freecodecamp笔记
HTML基础
HTML 的全称是 HyperText Markup Language（超文本标记语言），它是一种用来描述网页结构的标记语言。
h1用作主标题，h2用作副标题，还有h3、h4、h5、h6元素分别用作不同级别的标题。用p元素代表段落。注释的开始标记是<!--，结束标记是-->。<img src="图片地址" alt="替代文本">。如果图片是纯装饰性的，用一个空的alt是最佳实践。网页建跳转
<a href="地址">显示文字</a>内部跳转<a href="#节点id">Contacts</a>直接填#创建固定链接无序列表
ul、有序列表ol输入框<input type="text">。为输入框添加占位符文本placeholder=""。form表单<form action="提交地址"></form>。设置必填项required。单选按钮type="radio"同一组name相同，复选框type="checkbox"同一组name相同，添加默认选中checked。input最佳实践是在
label元素上设置for属性，让其值与单选按钮的id属性值相等，这样就在label元素和它的子元素单选按钮之间创建了一种链接关系。声明HTML文档类型
<!DOCTYPE html>对应的就是 HTML5。
<!DOCTYPE html>
<html>
<head></head>
<body></body>
</html>
CSS基础
CSS 的全称是 Cascading Style Sheet（层叠样式表），它主要用来控制网页的样式。
- 内联样式
style=""。head中添加样式<style><s/tyle> - 元素选择器（直接使用元素名称），class选择器（.class）,id选择器（#id），属性选择器（[type=‘radio’]）
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">引入外部字体- 长度px 固定长度像素，em相对于元素字体的font-size值，rem相对于根元素的font-size
- 优先级：元素直接设置大于继承样式，ID选择器大于class选择器，内联样式高于ID选择器 内联样式》ID选择器》class选择器》继承父级样式
- #000000十六进制编码，#F00缩写十六进制编码，rgb(255, 255, 255) RGB 值
- 你创建的变量，不但可以在你声明变量的元素里面使用，同时也可以在该元素的子元素里面使用。这种效应称为cascading（层叠）。因为层叠的效果，CSS 变量通常会定义在:root元素里。
:root {
--penguin-skin: gray;
--penguin-belly: pink;
--penguin-beak: orange;
}
body {
background: var(--penguin-belly, #c6faf1);
//var中第二个元素意为当第一个元素没有找到时生效
}
基本样式简介
| 属性 | 意义 |
|---|---|
| color:red | 颜色 |
| font-size:30px | 字体大小 |
| font-family: Helvetica,sans-serif; | 设置字体，可以设置多个逗号分隔第一个不能用用第二个 |
| width:500px | 宽度 |
| border-color，border-width,border-style | 边框颜色，边框粗细，边框样式solid（实线）dotted（点线）dashed（虚线）double（双线） |
| border-radius:10px | 设置圆角，，50%圆形图片 |
| background-color: green; | 添加背景颜色 |
| padding，margin，border | 内边距、外边距、边框 |
| color: red !important; | 确保元素一定为红色，最高优先级 |
| @media (max-width: 350px) | 媒体查询设置样式，宽度小于350px时。 |
应用视觉设计
视觉设计在 Web 开发中是一个非常广泛的话题。它结合了排版、色彩理论、图形、动画和页面布局等。在 Web 开发中，HTML 为页面的内容提供结构和语义，CSS 控制页面的布局和外观。
| 属性 | 意义 |
|---|---|
| text-align | 控制文本的对齐方式，justify两端对其，center居中，left左对齐，right右对齐 |
| width | 设置元素宽度 |
| height | 设置元素的高度 |
| <strong> | 文本加粗 |
| <u> | 下划线 |
| <em> | 强调文本 |
| <s> | 删除线 |
| <hr> | 创建水平线 |
| background-color: rgba(45, 45, 45, 0.1) | r：红色 g：绿色 b：蓝色 a：透明度 |
| box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23); | 元素添加阴影，（阴影的水平偏移量 阴影的垂直偏移量 模糊距离(可选) 阴影尺寸(可选) 颜色）。左边放了两个就是添加了两层阴影 |
| opacity | 设置元素的透明度 |
| text-transform | 使文本大写显示 |
| font-weight | 设置字体粗细 |
| line-height | 行距 |
| :hover | 伪类选择器定义它的悬停状态样式 |
| position: relative; | 不会改变该元素在普通流布局所占的位置，也不会对其它元素的位置产生影响。 相对于原来文档流中的位置变换 |
| position: absolute; | 会将元素从当前的文档流里面移除，元素的定位参照于最近的已定位祖先元素（一般可以为父元素添加position: relative）。如果父元素没有添加定位规则，浏览器会继续寻找直到默认的 body 标签。 |
| position:fixed; | 相对于浏览器窗口，不会随着其他元素滑动改变位置 |
| float:left; | 浮动元素不在文档流中，它向左或向右浮动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。通常需要用width属性来指定浮动元素占据的水平空间。 |
| z-index:2; | 使用该属性指定元素堆叠次序，取值为整数，数值大的元素优先于数值小的元素显示。 |
| margin:auto; | 设置元素居中显示。 |
| background-color:hsl(0, 100%, 50%) | HSL 色彩空间模型，（色相，饱和度，亮度）色相是色彩的基本属性，取值为色环里面颜色对应的从0-360度的角度值。饱和度是指色彩的纯度，也就是颜色里白色或者黑色的占比，越高色彩越纯，低则逐渐变灰。亮度决定颜色的明暗程度，100%是白色0%是黑色。 |
| background: linear-gradient(90deg, red, yellow, rgb(204, 204, 255)); | 线性渐变，90edg垂直渐变，从red->yellow->rgb(204, 204, 255),颜色数量可以是任意个 |
| repeating-linear-gradient | 创建条纹元素，demo见freecodecamp |
| background:url(https://i.imgur.com/MJAkxbh.png); | 背景使用图片 |
| transform:scale(2); | 将元素变为原来的2倍 |
| transform: skewX(24deg); | 沿X轴旋转24度 |
| transform: skewX(24deg); | 沿Y轴选装24度 |
改变按钮的悬停状态
button:hover {
animation-name: background-color; //名称
animation-duration: 500ms; //变换时间
animation-fill-mode: forwards; //保持变化后状态
}
@keyframes background-color {
100% {
background-color: #4791d0;
}
}
应用无障碍
- img标签的alt属性：帮助用户在图片加载失败或者不可见的情况下理解图片内容，也有助于搜索引擎理解图片内容。图片仅仅是为了美化界面时应该留空。
（一）响应式web设计。。。freecodecamp笔记的更多相关文章
- 响应式web设计读书笔记
1.媒体查询可以在链接link标签和具体的CSS中使用: 2.通过<link>标签的 media 属性为样式表指定设备类型和其他条件 中间用and和()来分隔,如下 <link r ...
- 《响应式Web设计实践》学习笔记
原书: 响应式Web设计实践 目录: 第2章 流动布局 1. 布局选项 2. 字体大小 3. 网格布局 4. 混合固定宽度和流动宽度 第3章 媒介查询 1. 视口 2. 媒介查询结构 3. 内嵌样式与 ...
- 响应式WEB设计的9项基本原则
响 应式Web设计对于解决多类型屏幕问题来说是个不错方案,但从印刷的角度来看,其却存在着很多的困难.没有固定的页面尺寸.没有毫米或英寸,没有任何物理 限制,让人感到无从下手.随着建立网站可用的各种小工 ...
- 最佳的 14 个免费的响应式 Web 设计测试工具
一旦你决定要搭建一个网站就应该已经制定了设计标准.你认为下一步该做什么呢?测试!我使用“测试”这个词来检测你网站对不同屏幕和浏览器尺寸的响应情况.测试在响应式网页设计的过程中是很重要的一步.如果你明白 ...
- <HTML5和CSS3响应式WEB设计指南>译者序
"不是我不明白,这世界变化快."崔健的这首歌使用在互联网领域最合适不过.只短短数年的功夫,互联网的浪潮还没过去,移动互联网的时代已经来临.人们已经习惯将越来越多的时间花在各种移动设 ...
- 如何通过CSS3 实现响应式Web设计
如何通过CSS3 实现响应式Web设计: 分为三个步骤:(1)允许网页宽度自动调整.首先在页面头部中,我们需要加入这样一行:<meta name="viewport" con ...
- [转]响应式WEB设计学习(1)—判断屏幕尺寸及百分比的使用
原文地址:http://www.jb51.net/web/70360.html 现在移动设备越来越普及,用户使用智能手机.pad上网页越来越普遍.但是传统的fix型的页面在移动终端上无法很好的显示.因 ...
- css014 响应式web设计
css014 响应式web设计 一. 响应式web设计基础知识 1.rwd的三大理念:a.用于布局的弹性网络, b.用于图片和视频的弹性媒体,c.为不同屏幕宽度创建的不同样式的css媒体查询. ...
- CSS3-基于浮动的布局，响应式WEB设计，定位网页上的元素，设计打印页面的css技术
基于浮动的布局: 1.除非图片设置了宽度,否则始终应该要对浮动的图片设置一个宽度,这样可以让浏览器给其他内容腾出环绕的空间 2.当侧边栏的高度与主内容区的高度不一致的时候,可以用个margin进行调整 ...
- 推荐35个新鲜出炉的响应式 Web 设计实例
响应式设计的准则在于根据用户使用的屏幕的分辨率来改变网站的的布局.因此,视频或图像的大小和文本的数量,可以被视为是一个明显的变化.让你即使从智能手机浏览一个网站的时候能轻松地看到网站上的重要内容.今天 ...
随机推荐
- SLAM的数学基础（1）：什么是方差，有什么意义？
小红班上有两组同学的数学考试分数为: 第一组:小红:100分,小明:60分,小宇:20分 第二组:小蓝:70分,小华:60分,小杰:50分 那么很容易算出,第一组的平均分是60分,第二组的平均分也是6 ...
- element ui table表头动态筛选条件
本文主要实现:根据el-table表格数据自动生成表头筛选条件的方法,可根据表格数据动态调整. el-table表格的表头增加筛选功能,大家平时都是怎么实现的呢?先看看官方文档的例子: 1 <t ...
- 关于Vmware-Tools的安装问题：Please re-run this program as the super user. Execution aborted.
点击VM-Install VMware Tools在桌面上出现一张光盘包含3个文件,分别为manifest.txt:Vmware-tools-版本号.rpm和Vmware-tools-版本号.tar. ...
- [考试总结]noip模拟11
菜 这次考试又是骗了一堆分数... 然而其实一个正解都没写... \(T1\) 的方法说实话确实不是很正统.... 然而却 \(A\) 了... 在打完 \(T1\) 后拍了老长时间... 然后就耽搁 ...
- 第十九篇 -- QTableWidget的使用
QTableWidget的一些常用方法 下面两个类可以根据自己的情况自定义. 单元格类型的类: class CellType(Enum): ctKey = 1000 ctPath = 1001 ctI ...
- salesforce Integration 概览(一) 杂篇
本篇参考:https://resources.docs.salesforce.com/sfdc/pdf/integration_patterns_and_practices.pdf 我们在做sales ...
- HTML5(五)——Canvas API
什么是 Canvas API? Canvas API(画布)提供了一个通过 javascript 和 html 的 canvas 元素来在网页上实时绘制图形的方式.可用于动画.游戏.图标.图片编辑等多 ...
- php 几个算法
/** * 返回当前运行文件名 * @acces private * @return string */ private function run_filename() { $tmparr = exp ...
- JS替换字符
var msg='A|B|C|D|E|F|G'; 方式1: var newMsg=msg.replace("|",""); 方式2: ps:适用特殊字符 var ...
- C++ 多态 案例（//多态案例----制作饮品 //描述：煮水 冲泡 倒入杯中 加入辅料）
1 //多态案例----制作饮品 2 //描述:煮水 冲泡 倒入杯中 加入辅料 3 4 #include <iostream> 5 #include <string> 6 us ...