(一)响应式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属性:帮助用户在图片加载失败或者不可见的情况下理解图片内容,也有助于搜索引擎理解图片内容。图片仅仅是为了美化界面时应该留空。