注意点:
类与id的区别:
实际开发的情况
字体大小
<style>
p {
font-size: 30px;
}
style>
字体粗细
<style>
div {
/* 加粗 */
font-weight: 700;
}
h1 {
/* 不加粗 */
font-weight: 400;
}
style>
字体样式
<style>
div {
/* 倾斜 */
font-style: italic;
}
em {
/* 正常的, 不倾斜 */
font-style: normal;
}
style>
常见字体系列
字体系列
<style>
div {
/* 如果用户电脑没有安装微软雅黑, 就按黑体显示文字 */
/* 如果电脑没有安装黑体, 就按任意一种非衬线字体系列显示 */
font-family: 微软雅黑, 黑体, sans-serif;
}
style>
字体属性连写
<style>
p {
/* font: italic 700 66px 宋体;*/
font: 100px 微软雅黑;
}
style>
文本缩进
<style>
p {
/* 默认字号: 16px ; 32 */
/* em: 一个字的大小 */
text-indent: 2em;
font-size: 40px;
}
style>
文本水平对齐
属性值 | 效果 |
---|---|
left | 左对齐 |
center | 居中对齐 |
right | 右对齐 |
<style>
h1 {
text-align: center;
}
body {
text-align: right;
}
style>
文本修饰
属性值 | 效果 |
---|---|
underline | 下划线(常用) |
line-through | 删除线(不常用) |
overline | 上划线(几乎不用) |
none | 无装饰线(常用) |
<style>
div {
text-decoration: underline;
}
p {
text-decoration: line-through;
}
h2 {
text-decoration: overline;
}
a {
text-decoration: none;
}
style>
<style>
p {
/* line-height: 50px; */
/* 自己字号的1.5倍 */
/* line-height: 1.5; */
/* 66px 宋体 倾斜 加粗 行高是2倍 */
font: italic 700 66px/2 宋体;
}
style>
<style>
div {
width: 552px;
height: 400px;
background-color: pink;
/* background-color: green; */
text-align: center;
/* 文字是单行的 */
/* 垂直居中技巧: 设置行高属性值 = 自身高度属性值 */
line-height: 400px;
font-size: 61px;
}
style>
关键词
rgb表示法
rgba表示法
十六进制表达式
<style>
div {
width: 300px;
height: 300px;
background-color: pink;
margin: 0 auto;
}
style>
后代选择器:空格
<style>
/* 找到div的儿子p设置文字颜色是红色 */
/* 父选择器 后代选择器 {} */
div p {
color: red;
}
style>
子代选择器:>
<style>
/* 只想选中儿子a */
/* div的儿子a文字颜色是红色 */
div>a {
color: red;
}
style>
并集选择器:,
<style>
/* p div span h1 文字颜色是红色 */
/* 选择器1, 选择器2 {} */
p,
div,
span,
h1 {
color: red;
}
style>
结果:找到选择器1和选择器2选中的标签,设置样式
注意点:
并集选择器中的每组选择器之间通过,分隔
并集选择器中的每组选择器可以是基础选择器或者复合选择器
并集选择器中的每组选择器通常一行写一个,提高代码的可读性
交集选择器:紧挨着
<style>
/*必须是p标签,而且添加了box类 */
p.box {
color: red;
}
/* .box是类选择器 */
style>
hover伪类选择器
<style>
/* 悬停的时候文字颜色是红色 */
a:hover {
color: red;
background-color: green;
}
style>
记忆 | 示例 | 效果 |
---|---|---|
标签名 | div | < div>< /div> |
类选择器 | .red | < div class=“red”>< /div> |
id选择器 | #one | < div id=“one”>< /div> |
交集选择器 | p.red#one | < p class=“red” id =“one”>< /p> |
子代选择器 | ui>li | < ul>< li>< /li>< /ul> |
内部文本 | ul>li(li的文本内容) | < ul>< li>li的文本内容< /li>< /ul> |
创建多个 | ul>li*3 | < ul>< li>< li>< li>< /li>< /li>< /li>< /ul> |
<style>
div {
width: 400px;
height: 400px;
/* background-color: pink; */
/* background-color: #ccc; */
/* 红绿蓝三原色, a是透明度0-1 */
background-color: rgba(0, 0, 0, .5);
}
style>
注意点:
背景颜色默认值是透明: rgba(0,0,0,0). transparent
背景颜色不会影响盒子大小,并且还能看清盒子的大小和位置,一般在布局中会习惯先给盒子设置背景颜色
<style>
div {
width: 400px;
height: 400px;
background-color: pink;
background-image: url(./images/1.jpg);
}
style>
注意点:
(拓展) img标签和背景图片的区别
取值 | 效果 |
---|---|
repeat | 水平和垂直方向都平铺(默认) |
no-repeat | 不平铺 |
repeat-x | 沿着水平方向(x轴)平铺 |
repeat-y | 沿着垂直方向(y轴)平铺 |
<style>
div {
width: 400px;
height: 400px;
background-color: pink;
background-image: url(./images/1.jpg);
/* background-repeat: repeat; */
/* 不平铺: 图片只显示一个 */
/* background-repeat: no-repeat; */
/* background-repeat: repeat-x; */
/* background-repeat: repeat-y; */
}
style>
属性名:background-position(bgp)
属性值:background-position:水平方向位置 垂直方向位置;
<style>
div {
width: 400px;
height: 400px;
background-color: pink;
background-image: url(./images/1.jpg);
background-repeat: no-repeat;
/* background-position: right 0; */
/* background-position: center center; */
/* background-position: 50px 100px; */
background-position: -50px -100px;
/* 正数: 向右向下移动; 负数:向左向上移动 */
/* 注意: 背景色和背景图只显示在盒子里面 */
}
style>
<style>
div {
width: 400px;
height: 400px;
/* 不分先后顺序 背景色 背景图 背景图平铺 背景图位置 */
/* background: pink url(./images/1.jpg) no-repeat center bottom; */
/* 背景图位置如果是英文单词可以颠倒顺序 */
background: pink url(./images/1.jpg) no-repeat bottom center ;
/* 测试背景图位置如果是数值 不要颠倒顺序 */
/* 水平50px, 垂直100px */
/* background: pink url(./images/1.jpg) no-repeat 50px 100px; */
background: pink url(./images/1.jpg) no-repeat 100px 50px;
}
style>
显示特点:
代表标签:div、p、 h系列、ul、 li、dl、dt、dd、form、header、nav、footer…
代码:
<style>
/* 块: 独占一行; 宽度默认是父级100%; 添加宽度都生效 */
div {
width: 300px;
height: 300px;
background-color: pink;
/* 行内块 */
/* display: inline-block; */
/* 行内 */
/* display: inline; */
}
style>
显示特点:
代表标签: a、span、b、u、i、 s、strong、ins、em、del…
代码:
<style>
/* 行内: 不换行; 设置宽高不生效; 尺寸和内容的大小相同 */
span {
width: 300px;
height: 300px;
background-color: pink;
/* 行内块 */
/* display: inline-block; */
/* 块 */
/* display: block; */
}
style>
显示特点:
一行可以显示多个
可以设置宽高
代表标签:
代码:
<style>
/* 行内块: 一行显示多个; 加宽高生效 */
img {
width: 100px;
height: 100px;
}
style>
属性 | 效果 | 使用频率 |
---|---|---|
display:block | 转换成块级元素 | 较多 |
display:inline-block | 转换成行内块元素 | 较多 |
display:inline | 转换成行内元素 | 较少 |
拓展:HTML嵌套规范注意点
块级元素一般作为大容器,可以嵌套:文本、块级元素、行内元素、行内块元素等等…但是:p标签中不要嵌套div、p、h等块级元素
a标签内部可以嵌套任意元素,但是:a标签不能嵌套a标签
扩展:居中方法总结:
<style>
/* 控制文字的属性都能继承; 不是控制文字的都不能继承 */
div {
color: red;
font-size: 30px;
height: 300px;
}
style>
拓展:继承的应用
拓展:继承失效的特殊情况
<style>
div {
color: red;
color: green;
}
/*颜色显示为绿色*/
.box {
font-size: 30px;
}
style>
优先级介绍
<style>
#box {
color: orange;
}
.box {
color: blue;
}
div {
color: green !important;
}
body {
color: red;
}
/* !important不要给继承的添加, 自己有样式无法继承父级样式 */
style>
权重叠加计算
权重叠加计算
查错流程
<style>
div {
width: 200px;
height: 200px;
background-color: pink;
}
style>
边框–单个属性
作用 | 属性名 | 属性值 |
---|---|---|
边框粗细 | border-width | 数字+px |
边框样式 | border-style | 实线solid、虚线dashed、点线dotted |
边框颜色 | border-color | 颜色取值 |
边框–连写形式
属性名:border
属性值:单个取值的连写,取值之间以空格隔开。如border:10px solid red;
快捷键:bd+tab
边框–单方向设置
<style>
div {
width: 200px;
height: 200px;
background-color: pink;
border-left: 5px dotted #000;
border-right: 5px dotted #000;
border-top: 1px solid red;
border-bottom: 1px solid red;
}
style>
内边距–取值
取值 | 示例 | 含义 |
---|---|---|
一个值 | padding:10px; | 上下左右10px |
两个值 | padding:10px 20px; | 上下10px,左右20px |
三个值 | padding:10px 20px 30px; | 上10px,左右20px,下30px |
四个值 | padding:10px 20px 30px 40px; | 上10px,右20px,下30px,左40px |
内边距–单方向设置
<style>
div {
width: 300px;
height: 300px;
background-color: pink;
padding-left: 10px;
padding-bottom: 50px;
}
style>
盒子实际大小计算公式
需求:盒子尺寸300*300,背景粉色,边框10px实线黑色,上下左右20px的内边距,如何完成?
注意点:①设置width和height是内容的宽高!②设置border会撑大盒子③设置padding会撑大盒子
盒子实际大小终极计算公式:
代码:
<style>
div {
/* 撑大盒子的都有哪些? border + padding */
/* width: 300px;
height: 300px; */
width: 240px;
height: 240px;
background-color: pink;
border: 10px solid #000;
padding: 20px;
}
style>
扩展:不会撑大盒子的特殊情况(块级元素)
CSS3盒模型(自动内减)
需求:盒子尺寸300*300,背景粉色,边框10px实线黑色,上下左右20px的内边距,如何完成?
给盒子设置border或padding时,盒子会被撑大,如果不想盒子被撑大?
解决方法①∶手动内减
解决方法②︰自动内减
代码:
<style>
div {
width: 100px;
height: 100px;
background-color: pink;
border: 10px solid #000;
padding: 20px;
/* 內减模式 */
/* 变成CSS3的盒子模型, 好处: 加了border和padding不需要手动减法 */
box-sizing: border-box;
}
style>
外边距-取值
作用:设置边框以外,盒子与盒子之间的距离
属性名:margin
常见取值:
取值 | 示例 | 含义 |
---|---|---|
一个值 | margin:10px; | 上下左右10px |
两个值 | margin:10px 20px; | 上下10px,左右20px |
三个值 | margin:10px 20px 30px; | 上10px,左右20px,下30px |
四个值 | margin:10px 20px 30px 40px; | 上10px,右20px,下30px,左40px |
外边距–单方向设置
场景:只给盒子的某个方向单独设置内边距
属性名:margin - 方位名词
属性值:数字+px
代码:
<style>
div {
width: 100px;
height: 100px;
background-color: pink;
margin: 50px;
margin-left: 100px;
}
style>
清除默认内外边距
场景:浏览器会默认给部分标签设置默认的margin和padding,但一般在项目开始前需要先清除这些标签默认的margin和padding,后续自己设置
解决方法:
<style>
* {
margin: 0;
padding: 0;
}
style>
版型居中
<style>
div {
width: 1000px;
height: 300px;
background-color: pink;
margin: 0 auto;
}
style>
外边距正常情况
外边距折叠现象一①合并现象
<style>
div {
width: 100px;
height: 100px;
background-color: pink;
}
.one {
/* margin-bottom: 50px; */
margin-bottom: 60px;
}
.two {
margin-top: 50px;
}
style>
外边距折叠现象一②塌陷现象
场景:互相嵌套的块级元素,子元素的margin-top会作用在父元素上
结果:导致父元素—起往下移动
解决方法:
代码:
<style>
.father {
width: 300px;
height: 300px;
background-color: pink;
/* padding-top: 50px; */
/* 如果设计稿没有border, 不能使用这个解决办法 */
/* border: 1px solid #000; */
/* overflow: hidden; */
}
.son {
width: 100px;
height: 100px;
background-color: skyblue;
margin-top: 50px;
display: inline-block;
}
style>
行内元素的margin和padding无效情况
场景:给行内元素设置margin和padding时
结果:
代码:
<style>
span {
/* margin: 100px; */
/* padding: 100px; */
line-height: 100px;
}
style>
作用与优势:
选择器:
选择器 | 说明 |
---|---|
E:first-child{} | 匹配父元素中第一个子元素,并且是E元素 |
E:last-child{} | 匹配父元素中最后一个子元素,并且是E元素 |
E:nth-child(n){} | 匹配父元素中第n个子元素,并且是E元素 |
E:nth-last-child(n){} | 匹配父元素中倒数第n个子元素,并且是E元素 |
<style>
/* 选中第一个 */
/* li:first-child {
background-color: green;
} */
/* 最后一个 */
/* li:last-child {
background-color: green;
} */
/* 任意一个 */
/* li:nth-child(5) {
background-color: green;
} */
/* 倒数第xx个 */
li:nth-last-child(1) {
background-color: blue;
}
style>
功能 | 公式 |
---|---|
偶数 | 2n、even |
奇数 | 2n+1、2n-1、odd |
找到前5个 | -n+5 |
找到第5个往后 | n+5 |
<style>
/* ** 偶数 */
/* li:nth-child(2n) { */
/* *** 奇数 */
/* li:nth-child(2n+1) { */
/* 找到前3个 */
/* li:nth-child(-n+3) { */
/* *** 4的倍数 */
li:nth-child(4n) {
background-color: green;
}
style>
扩展:nth-of-type结构伪类子元素
选择器 | 说明 |
---|---|
E:nth-of-type(n){} | 只在父元素的同类型(E)子元素范围内,匹配第n个 |
区别
代码:
<style>
/* 找到第一个li 里面的 第三个a 设置文字颜色是红色 */
li:first-child a:nth-child(3) {
color: red;
}
style>
<style>
.father {
width: 300px;
height: 300px;
background-color: pink;
}
.father::before {
/* 内容 */
/* content属性必须添加, 否则伪元素不生效 */
content: '老鼠';
color: green;
background-color: blue;
}
.father::after {
content: '大米';
}
style>
属性名 | 效果 |
---|---|
left | 左浮动 |
right | 右浮动 |
<style>
div {
width: 100px;
height: 100px;
}
.one {
background-color: pink;
float: left;
}
.two {
background-color: skyblue;
/* flr */
float: right;
/* float: left; */
}
style>
含义:清除浮动带来的影响
原因:
目的:
清除浮动的方法一- -直接设置父元素高度
清除浮动的方法二- -额外标签法
操作:
在父元素内容的最后添加一个块级元素
给添加的块级元素设置clear:both特点:
代码:
<style>
.clearfix {
/* 清除左右两侧浮动的影响 */
clear: both;
}
style>
清除浮动的方法三- -单伪元素清除法
操作:用伪元素替代了额外标签
清除浮动的方法四- -双伪元素清除法
清除浮动的方法五- -给父元素设置overflow:hidden
<style>
.top {
margin: 0 auto;
width: 1000px;
height: 600px;
background-color: pink;
overflow: hidden;
}
style>
扩展:BFC的介绍
块格式化上下文(Block Formatting Context) : BFC
创建BFC方法:
BFC盒子常见特点:
定位:
场景:
定位的使用步骤:
设置定位方式:
定位方式 | 属性值 |
---|---|
静态定位 | static |
相对定位 | relative |
绝对定位 | absolute |
固定定位 | fixed |
方向 | 属性名 | 属性值 | 含义 |
---|---|---|---|
水平 | left | 数字+px | 距离左边的距离 |
水平 | right | 数字+px | 距离右边的距离 |
垂直 | top | 数字+px | 距离上边的距离 |
垂直 | bottom | 数字+px | 距离下边的距离 |
<style>
/* css书写: 1. 定位 / 浮动 / display ; 2. 盒子模型; 3. 文字属性 */
.box {
/* 静态定位, 默认值, 标准流 */
position: static;
}
style>
<style>
/* 如果left和right都有, 以left为准; top和bottom都有以top 为准 */
.box {
position: relative;
right: 200px;
bottom: 400px;
left: 100px;
top: 200px;
}
style>
<style>
.box {
position: absolute;
/* left: 50px; */
left: 0;
top: 0;
}
style>
<style>
.father {
position: relative;
}
.son {
position: absolute;
/* left: 20px;
top: 30px; */
right: 20px;
bottom: 50px;
}
style>
<style>
.box {
position: fixed;
left: 0;
top: 0;
}
style>
特点:
需要配合方位属性实现移动
相对于浏览器可视区域进行移动
在页面中不占位置→已经脱标
应用场景:让盒子固定在屏幕中的某个位置
不同布局方式元素的层级关系:标准流<浮动<定位
不同定位之间的层级关系:
场景:改变定位元素的层级
属性名:z-index
属性值:数字
代码:
<style>
div {
width: 200px;
height: 200px;
}
.one {
position: absolute;
left: 20px;
top: 50px;
z-index: 1;
background-color: pink;
}
.two {
position: absolute;
left: 50px;
top: 100px;
background-color: skyblue;
}
/*
默认情况下, 定位的盒子 后来者居上 ,
z-index:整数; 取值越大, 显示顺序越靠上, z-index的默认值是0
注意: z-index必须配合定位才生效
*/
style>
垂直对齐方式
属性值 | 效果 |
---|---|
baseline | 默认,基线对齐 |
top | 顶部对齐 |
middle | 中部对齐 |
bottom | 底部对齐 |
项目中垂直居中可以解决的问题
<style>
/* 浏览器遇到行内和行内块标签当做文字处理, 默认文字是按基线对象 */
input {
height: 50px;
box-sizing: border-box;
vertical-align: middle;
}
style>
<style>
img {
vertical-align: middle;
}
style>
<style>
.father {
width: 400px;
height: 400px;
background-color: pink;
}
input {
/* vertical-align: middle; */
vertical-align: top;
}
style>
<style>
.father {
width: 400px;
background-color: pink;
}
img {
/* 浏览器把行内和行内块标签当做文字处理,默认基线对齐 */
/* vertical-align: middle; */
display: block;
}
style>
<style>
.father {
width: 600px;
height: 600px;
background-color: pink;
line-height: 600px;
text-align: center;
}
img {
vertical-align: middle;
}
style>
属性值 | 效果 |
---|---|
default | 默认值、通常是箭头 |
pointer | 小手效果,提示用户可以点击 |
text | 工子型,提示用户可以选择文字 |
move | 十字光标,提示用户可以移动 |
<style>
div {
/* 手型 */
/* cursor: pointer; */
/* 工字型, 表示可以复制 */
/* cursor: text; */
/* 十字型, 表示可以移动 */
cursor: move;
}
style>
场景:让盒子四个角变得圆润,增加页面细节,提升用户体验
属性名: border-radius
常见取值:数字+px、百分比
原理:
赋值规则:从左上角开始赋值,然后顺时针赋值,没有赋值的看对角!
代码:
<style>
.box {
margin: 50px auto;
width: 200px;
height: 200px;
background-color: pink;
/* 一个值: 表示4个角是相同的 */
border-radius: 10px;
/* 4值: 左上 右上 右下 左下 -- 从左上顺时针转一圈 */
/* border-radius: 10px 20px 40px 80px; */
/* border-radius: 10px 40px 80px; */
/* border-radius: 10px 80px; */
}
style>
边框圆角的常见应用
画一个正圆:
盒子必须是正方形
设置边框圆角为盒子宽高的一半→border-radius:50%
胶囊按钮:
代码:
<style>
/* 第一个盒子样式 */
.one {
width: 200px;
height: 200px;
background-color: pink;
/* border-radius: 100px; */
/* 50% : 取盒子尺寸的一半 */
border-radius: 50%;
}
/* 第二个盒子样式 */
/* 胶囊状: 长方形, border-radius取值是高度的一半 */
.two {
width: 400px;
height: 200px;
background-color: skyblue;
border-radius: 100px;
}
style>
属性值 | 效果 |
---|---|
visible | 默认值,溢出部分可见 |
hidden | 溢出部分隐藏 |
scroll | 无论是否溢出,都显示滚动条 |
auto | 根据是否溢出,自动显示或隐藏滚动条 |
<style>
.box {
width: 300px;
height: 300px;
background-color: pink;
/* 溢出隐藏 */
overflow: hidden;
/* 滚动: 无论内容是否超出都显示滚动条的位置 */
/* overflow: scroll; */
/* auto: 根据内容是否超出, 判断是否显示滚动条 */
/* overflow: auto; */
}
style>
visibility: hidden
display: none
扩展:元素整体透明度
扩展:边框合并
扩展:用CSS画三角形技巧
<style>
div {
/* width: 100px;
height: 100px; */
width: 0;
height: 0;
/* background-color: pink; */
/* transparent: 透明 */
border-top: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid transparent;
border-left: 10px solid orange;
}
style>
选择器语法 | 功能 |
---|---|
a:link{ } | 选中a链接未访问过的状态 |
a:visited { } | 选中a链接访问之后的状态 |
a:hover{ } | 选中鼠标悬停的状态 |
a:active{ } | 选中鼠标按下的状态 |
选择器 | 功能 |
---|---|
E[attr] | 选择具有attr属性的E元素 |
E[attr = “val”] | 选择具有attr属性并且属性值等于val的E元素 |
<style>
/* text:背景色是粉色; password背景色是skyblue */
input[type='text'] {
background-color: pink;
}
input[type="password"] {
background-color: skyblue;
}
style>
场景:项目中将多张小图片,合并成一张大图片,这张大图片称之为精灵图
优点:减少服务器发送次数,减轻服务器的压力,提高页面加载速度
例如:需要在网页中展示8张小图片
步骤:
<style>
span {
display: inline-block;
width: 18px;
height: 24px;
background-color: pink;
background-image: url(./images/taobao.png);
/* 背景图位置属性: 改变背景图的位置 */
/* 水平方向位置 垂直方向的位置 */
/* 想要向左侧移动图片, 位置取负数; */
background-position: -3px 0;
}
style>
作用:设置背景图片的大小
语法: background-size: 宽度 高度
取值:
取值 | 场景 |
---|---|
数字+px | 简单方便,常用 |
百分比 | 相当于当前盒子自身的宽高百分比 |
contain | 包含,将背景图片等比例缩放,直到不会超出盒子的最大 |
cover | 覆盖,将背景图片等比例缩放,直到刚好填满整个盒子没有空白 |
扩展:background连写
background: color image repeat position/size
注意点:background-size和background连写同时设置时,需要注意覆盖问题
解决:
参数 | |
---|---|
h-shadow | 必须,水平偏移量,允许负值 |
v-shadow | 必须,垂直偏移量,允许负值 |
blur | 可选,模糊度 |
color | 可选,阴影颜色 |
参数 | |
---|---|
h-shadow | 必须,水平偏移量,允许负值 |
v-shadow | 必须,垂直偏移量,允许负值 |
blur | 可选,模糊度 |
spread | 可选,阴影扩大 |
color | 可选,阴影颜色 |
inset | 可选,将阴影改为内部阴影 |
<style>
.box {
width: 200px;
height: 200px;
background-color: pink;
box-shadow: 5px 10px 20px 10px green inset;
/* 注意: 外阴影, 不能添加outset, 添加了会导致属性报错 */
/* box-shadow: 5px 10px 20px 10px green outset; */
}
style>
参数 | 取值 |
---|---|
过渡的属性 | all:所有能过渡的属性都过渡;具体属性名width:只有width有过渡 |
过渡的时长 | 数字+s(秒) |
<style>
/* 过渡配合hover使用, 谁变化谁加过渡属性 */
.box {
width: 200px;
height: 200px;
background-color: pink;
/* 宽度200, 悬停的时候宽度600, 花费1秒钟 */
/* transition: width 1s, background-color 2s; */
/* 如果变化的属性多, 直接写all,表示所有 */
transition: all 1s;
}
.box:hover {
width: 600px;
background-color: red;
}
style>
过渡需要∶默认状态和hover状态样式不同,才能有过渡效果
transition属性给需要过渡的元素本身加
transition属性设置在不同状态中,效果不同的
给默认状态设置,鼠标移入移出都有过渡效果
给hover状态设置,鼠标移入有过渡效果,移出没有过渡效果
网页:相当于是每页纸
网站:相当于一本书籍
在互联网中,网站类似于是一本书,网页就是这本书的每一页
网页:**网站中的每一“页”。**例如:淘宝的主页、淘宝的登录页、淘宝的商品页等。
网站:**提供特定服务的一组网页集合。**例如:百度、淘宝、京东等;
DOCTYPE文档说明
网页语言
字符编码
< meta charset=“UTF-8”>标识网页使用的字符编码
作用:保存和打开的字符编码需要统一设置,否则可能会出现乱码
常见字符编码︰
注意点:开发中统一使用UTF-8字符编码即可
代码:
DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
head>
SEO ( Search Engine Optimization):搜索引擎优化
作用:让网站在搜索引擎上的排名靠前
提升SEO的常见方法:
SEO三大标签
代码:
<head>
<meta name="description" content="京东JD.COM-专业的综合网上购物商城,为您提供正品低价的购物选择、优质便捷的服务体验。商品来自全球数十万品牌商家,囊括家电、手机、电脑、服装、居家、母婴、美妆、个护、食品、生鲜等丰富品类,满足各种购物需求。">
<meta name="keywords" content="网上购物,网上商城,家电,手机,电脑,服装,居家,母婴,美妆,个护,食品,生鲜,京东">
<title>京东(JD.COM)-正品低价、品质保障、配送及时、轻松购物title>
head>
<head>
<link rel="shortcut icon" href="ico图标路径" type="image/x-icon">
head>
<style>
.container {
width:1240px;
margin:0 auto;
}
style>
扩展:CSS书写顺序
顺序 | 类别 | 属性 |
---|---|---|
1 | 布局属性 | display、position、float、clear、visibility、overflow |
2 | 盒子模型+背景 | width、height、margin、padding、border、background |
3 | 文本内容属性 | color、font、text-decoration、text-align、line-height |
4 | 点缀属性 | cursor、border-radius、text-shadow、box-shadow |
新建项目文件夹demo-pc-client,在VScode中打开
复制favicon.ico到demo-pc-client目录
复制images和uploads目录到demo-pc-client目录中
新建index.html在根目录
新建css文件夹保存网站的样式,并新建以下CSS文件:
base.css:基础公共样式
common.css:该网站中多个网页相同模块的重复样式,如:头部、底部
index.css:首页样式
MDN Web Docs(旧称Mozilla Developer Network、Mozilla Developer Center,简称MDN)是一个汇集众多Mozilla基金会产品和网络技术开发文档的免费网站。
https://developer.mozilla.org/zh-CN/