0.CSS基础
CSS简介
css就是用来美化,布局页面的
html局限:
html只关注语义,显示内容就行
他想要改样式非常麻烦，只能一个个改
CSS
CSS:层叠样式表
css用来美化html,布局页面
css最大价值:让结构(html)和样式(CSS)分离
CSS规范
css是写在head标签里的
css采用采用键值对方式,最后要写;
语法: 选择器{样式;}
给谁改{改成什么;}
<head>
<style>
p {
color: red;
font-size: 12px;
}
</style>
</head>
CSS代码风格
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-rGkY2ixM-1673095571256)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221120095635635.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2wg5RJk5-1673095571257)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221120095703778.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-FSpy7lak-1673095571257)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221120095837681.png)]
CSS基础选择器
选择器作用:选择标签
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Kcq474e6-1673095571257)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221120100219238.png)]
选择器分类
标签选择器
语法:
标签名{
属性1： 属性值1;
属性2: 属性值2;
…
}
<style>
p {
color:green;
}
div {
color: pink;
}
</style>
优点：快速,大批量
缺点:一种标签都只能一种样式
类选择器
类选择器:样式点定义,结构类(class)调用,一个或多个,开发最常用
语法:
.类名{
属性:属性值;
}
<style>
.red{
color: red;
}
</style>
</head>
<body>
<ul>
<li class="red">可莉</li>
<li class="red">安博</li>
<li>甘雨</li>
<li>刻晴</li>
</ul>
</body>
类选择器实例
<style>
.redbox {
background-color:red;
width: 50px;
height: 50px;
}
.greenbox {
background-color:green;
width: 50px;
height: 50px;
}
</style>
</head>
<body>
<div class="redbox">红色</div>
<div class="greenbox">绿色</div>
<div class="redbox">红色</div>
</body>
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-XZzhdglV-1673095571257)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221120104836071.png)]
类选择器-多类名
就是一个标签对应多个类选择器
多个类中间用空格隔开,下面代码 亚瑟调用red类和font20类
<div class="red font20">亚瑟</div>
多类名方便修改代码
id选择器
口诀:#定义 结构id调用
id选择器只能调用给一个对象
语法:
#id名{
属性名1:属性值1;
}
#re{
color:red;
}
<div id="re">只有我能调用捏</div>
<div id="re">不能再被调用了捏</div>
类选择器和id选择器区别
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-LyCL0xw2-1673095571258)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221120110534576.png)]
通配符选择器
通配符选择器选取所有标签
语法:
*{
属性:属性值;
}
所有标签改为红色
<style>
*{
color:red;
}
</style>
选择器总结
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-w6wJUQWP-1673095571258)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221120110958273.png)]
CSS字体属性
设置字体类型
使用font-family设置字体
<style>
p {
font-family:"微软雅黑";
}
字体大小
使用font-size设置文字大小(px)
p{
font-size:20px;
}
可以给body全局指定大小(标题除外)
<style>
body{
font-size:16px;
}
<--!标题要单独设置-->
h2{
font-size:20px;
}
字体粗细
使用font-weight:bold粗体
或者用数字加粗，变细
<style>
.bold{
font-weight:bold;
font-weight:700;(normal:400)
}
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NbkhUnN1-1673095571258)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221120113842437.png)]
文字样式
font-style改变斜体/正常
p{
/* 便斜体 */
font-style:italic;
/* 斜体变正常 */
font-style:normal;
}
字体复合属性
注意:连写不能换位置,不能缺少字体和字号
格式:
div{
font:font-style font-weight font-size/line-weight font-family;
font:normal 700 16px 'Microsoft yahei';
}
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-mDljdUmk-1673095571259)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221120114742595.png)]
字体属性总结
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0lqGEYYU-1673095571259)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221120114943071.png)]
CSS文本属性
文本颜色
语法:color
将div设置为颜色(三种方式)
div{
color:red; //预定义
color: #cc00f; //十六进制
color:rgb(255,0,0); //rgb代码
}
对齐文本
text-align属性水平对齐
h1{
<i--让h1文字在盒子水平居中对齐-->
text-align:center;
}
center:居中对齐
left/right：左/右对齐
装饰文本
text-decoration属性添加文本上/下/删除线
重点记住:
添加下划线(underline)
取消下划线(none)
div{
color:pink;
/* 下划线 */
text-decoration:underline;
/* 删除线 */
text-decoration: line-through;
/* 上划线 */
text-align: overline;
/* 取消超链接的下划线 */
a {
text-decoration: none;
}
}
文本缩进
text-indent属性指定文本缩进
p {
/* 文本第一行缩进多少px */
text-indent:20px;
/* 2em即缩进2个当前文字距离 */
text-indent:2em;
}
行间距
line-height属性改变行间距(行高)
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-uawEUqki-1673095571259)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221120143042386.png)]
文本属性总结
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9LVDcrGM-1673095571259)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221120143712921.png)]
CSS引入方式
内部样式表
就是将css代码方式全抽取放到style标签
<style>
div{
......
}
</style>
这种引入方式一般放在标签中
但还是放在html文件中,没有完全分离,因此称为内部嵌入
行内样式表
就是在标签内直接放入style属性,适合于简单修饰
直接把段落改成粉红色
<p style="color:pink font-size:12px">我是粉色的捏</p>
外部样式表
写完CSS文件记得保存！！！！！！
写完CSS文件记得保存！！！！！！
核心:单独写到css文件,再导入html文件
外部样式表步骤:
1.新建一个.css文件,里面只编写css样式,没有标签
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BstC4KBp-1673095571259)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221120150042526.png)]
2.在html文件中使用标签引入这个css文件
<link rel="stylesheet" href="css路径名">
CSS引入方式总结
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-nC1WA9Nw-1673095571260)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221124074121135.png)]
新闻案例综合
chrome调试工具
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-OBEglU7v-1673095571260)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221120160107957.png)]
chrome只能调试,修改需要到源代码
1.Emmt语法
emmt语法就是缩写,提高编写速度
快速生成html
生成标签按tab
上下级用> 兄弟级用+
.demo #two 直接生成类名
加上$是自增
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-EeH9lXXh-1673095571260)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221120161233273.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2SPGElyu-1673095571260)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221120161419626.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-i7HL5ZM1-1673095571261)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221120161505230.png)]
写好后一定要光标位于最后再按tab
快速生成css样式
tac:text-align center
其他同理都是首字母+tab
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-QXNBKLVk-1673095571261)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221120161814667.png)]
一键格式化(对齐)代码
一键格式化代码:shift+alt+f
设置里自动格式化代码
新版vs设置里搜 Format On Save，勾选在保持时格式化文件。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-rAp6qu5W-1673095571261)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221120162424128.png)]
2.复合选择器
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-XEMyvtbm-1673095571261)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221120162644516.png)]
后代选择器(重要)
又称为包含选择器,后代全选出来
语法:
元素1 元素2{样式声明}
ol li{
color:pink;
}
↑选择ol包含的li标签(后代)内容改为pink颜色
!注意:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-zFABsKhc-1673095571261)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221120163641556.png)]
子选择器(重要)
子选择器只选择最近一级的子元素,就是选中亲儿子一个
语法:
元素1>元素2{样式声明}
div>p{样式声明} /*选择div里面最近一级p标签元素*/
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-bnoUFV9t-1673095571262)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221120165141196.png)]
并集选择器
并集选择器用来选择多组标签,用逗号
语法:
元素1,元素2{样式声明}
div,
p,
.pig li{
color: red;
}
<i--一般竖着写并集选择器-->
<i--别忘记逗号隔开元素-->
↑选择div和p标签和pig类里的li标签
伪类选择器
用冒号:
链接伪类选择器
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-VKIIfkd7-1673095571262)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221120170911773.png)]
/* 1.选中未访问的链接 */
a:link{
color: #333;
text-decoration: none; /*清除超链接下划线*/
}
/* 2.选择点击过(访问过)的链接 */
a:visited{
color: orange;
}
/* 3.选择鼠标经过的链接 */
a:hover{
color: green;
}
/* 4.选择按下还没弹起鼠标的链接 */
a:active{
color:skyblue;
}
/* 链接平时状态 */
a {
color: #333;
text-decoration: none;
}
/* 经过时变颜色 */
a:hover {
color: skyblue;
text-decoration: underline;
}
↑开发时常用链接伪选择器
：focus伪类选择器
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-204kYdTx-1673095571262)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221120172403423.png)]
↑效果图
/*把获得光标的input表单选取出*/
input:focus {
background-color: skyblue; //光标选中的框改为蓝色
}
复合选择器总结
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-K2yTMvTB-1673095571262)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221120172908236.png)]
后代可以选择多个,子代只能选1个(亲儿子)
3.css元素显示模式
什么是元素显示模式
就是元素(标签)以什么方式显示
就是给html元素分类
html元素一般分为块元素(占一行)和行内元素(占行内一部分)
块元素
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hGNdGbqd-1673095571262)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221122080324449.png)]
<div>元素是最经典的块元素(男人元素特点)
块元素特点:
1.独占一行
2.宽和高独立设置
3.默认是容器的100%
4.是一个容器盒子,里面可以放行内和块级元素(大盒子里可放小盒子)
<div>爷爷我独占一行</div>
div{
width: 200px;
height: 100px;
}
注意:文字类的元素内不能放块元素,如
,
等等
行内元素
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-03jFxy7W-1673095571263)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221122080107761.png)]
<span>标签是最经典行内元素,也称为内联元素(女人特点元素)
行内元素特点:
1.一行可放多个行内元素
2.宽和高设置无效
3.只有内容默认宽度
4.不能放块元素(小盒子里不能放大盒子)
注意:链接里面不能放链接
链接里可以放块元素,但是要转换
行内块元素
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-b0mKNUOk-1673095571263)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221122080640181.png)]
行内块元素就是人妖,既有男人特点也有女人特点
元素显示模式总结
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-dcLRpYC3-1673095571263)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221122081019711.png)]
元素显示模式转换
就是一个模式需要另一个模式的特性,比如标签需要一个块元素的大小触发范围
(使用最多,需要长和宽)转换为块元素: display:block
转换为行内元素:display:inline
转换为行内块元素:display:inline-block
a{
/* 超链接转换为块元素 */
display:block;
/* 块元素可以设置长宽 */
width:150px;
height: 50px;
background-color: pink;
}
div{
/* 转换为行内元素 */
display: inline;
}
span{
/* 转换为行内块元素 */
display: inline-block;
}
小米侧边栏实例
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1bhn2Daq-1673095571263)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221122084703638.png)]
<!-- a改编为盒子,并且设置属性-->
<style>
/* 移动到连接上,改变背景颜色 */
a:hover{
background-color: #FF6F00;
}
a{
font-size:15px;
line-height: 20px;
text-decoration: none;
display:block;
width: 218px;
height: 47px;
background-color: gray;
color:white;
text-indent:2em;
}
</style>
文字垂直居中代码
行高=盒子高度即可
a{
line-height:20px;
height:20px;
}
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-OREOajXg-1673095571263)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221122085521886.png)]
4.css的背景
背景属性有:背景颜色,图片,平铺,图片位置,图像固定等
背景颜色
background-color属性定义元素的背景元素
默认是transparent(透明)
background-color:颜色值;
背景图片
background-image属性定义背景图像
div{
width: 300px;
height: 300px;
background-image: url(../baidu.jpg);
}
背景平铺
对背景图片进行平铺,back-ground-repeat
既可以有背景图片,也可以有背景颜色,但是图片会压住背景颜色
div{
width: 300px;
height: 300px;
background-image: url(../baidu.jpg);
/* 背景图片不平铺 */
background-repeat: no-repeat;
/* 默认情况是平铺的 */
background-repeat: repeat;
/* 横向平铺 */
background-repeat: repeat-x;
/* 纵向平铺 */
background-repeat: repeat-y;
}
背景图片位置
1.方位位置参数
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-v3LZjBVz-1673095571264)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221122091259043.png)]
div{
background-image: url("../baidu.jpg");
/* 位置设置为方位名词 */
background-position: center top;
background-position: right center;
/* 可以省略一个参数 */
/* 省略默认为居中 */
background-position: top;
}
2.精确单位参数
第一个一定是x轴,第二个一定是y轴
如果只指定一个参数,那第二个y轴一定是居中(center)
div{
background-position:50px 20px;
}
3.混合单位参数
第一个一定是x轴,第二个一定是y轴
如果只指定一个参数,那第二个y轴一定是居中(center)
background-postion:20px center;
背景图像固定(背景附着)
/* 背景图像固定*/
background-attachment:fixed;
背景复合写法
没有特定的书写顺序,一般顺序为:
background:背景颜色 地址 平铺 滚动 位置;
backgoround: transparent url() repeat-y fiexd top;
背景色半透明
最后一个是alpha,不透明度的意思,取值0-1
语法:background:rgba(0,0,0,0.3);
div{
width:300px;
height: 300px;
background: rgba(0,0,0,0.3);
}
注意:只是让背景色半透明,盒子内容无影响
背景总结
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-uyggniyb-1673095571264)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221122100611958.png)]
五彩导航实例
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-HBoKxhb8-1673095571264)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221122110225405.png)]
5.CSS三大特性
三个特性:层叠性,继承性,优先级
层叠性
就是覆盖原则
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-blkMa1q3-1673095571264)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221122110652893.png)]
继承性
只有某些属性(文字,行高)才会继承
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-rJKhBR2l-1673095571264)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221122111121641.png)]
行高的继承
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-LNkFUnBI-1673095571265)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221122113318447.png)]
<style>
body{
color:pink;
font: 12px/1.5 'Microsoft YaHei';
}
div{
/* div继承了body的行高即1.5倍行高 */
font-size: 14px;
}
/* li没有指定,则会继承body文字大小即12px */
</style>
<body>
<div>
我继承了body的行高和文字
</div>
<ul>
<li>我继承了body的行高和文字</li>
</ul>
</body>
优先级
选择器相同,按照层叠性执行
选择器不同,按照选择器权重执行
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-G9ixA9LX-1673095571265)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221122114143383.png)]
作用范围越大,权重越低,作用范围越小,权重越高(!important除外)
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-q0d7bdee-1673095571265)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221122114801324.png)]
优先级叠加
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-MXSWBaNK-1673095571265)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221122115253665.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-tWbloJTZ-1673095571266)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221122115334174.png)]
6.盒子模型
看透网页布局本质
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Q0QJF7yX-1673095571266)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221122141050226.png)]
盒子模型的组成
CSS盒子模型本质就是一个盒子,封装html元素
盒子包括:边框,外边距,内边距和盒子里内容
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Wrt1Y553-1673095571266)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221122141451802.png)]
边框(border)
边框组成:边框宽度(粗细) 边框款式 边框颜色
border-width 设置边框宽度
border-style 设置边框款式
border-color 设置边框颜色
div{
border-width: 5px;
/* 实线,虚线,点线 */
border-style:solid;
border-style: dashed;
border-style: dotted;
border-color: pink;
}
边框复合写法
div{
/* 没有顺序 */
border:5px solid pink;
}
边框分开写法:
<i--设置上边框和下边框,左右边框同理-->
border-top:5px solid pink;
border-bottom:10px dashed gray;
表格的边框粗细
/* 常用设置表格的边框 */
table,
th,
td{
border:1px solid pink;
/* 合并相邻的边框 */
border-collapse: collapse;
font-size: 14px;
text-align: center;
}
边框会影响盒子大小
边框是盒子外增加的大小,测量时候要注意
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1H0kx3Nd-1673095571266)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221122144245735.png)]
内边距
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-seBSqvuB-1673095571266)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221122145557038.png)]
div{
padding-left: 20px;
padding-top: 20px;
}
内边距复写
复写遵循顺时针原理
注意:复合缩写中间是空格隔开,而不是逗号!!!
3个值，从上到下
4个值，顺时针
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2cqd0R6X-1673095571267)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221122150326199.png)]
内边距导致盒子大小问题
内边距会撑大盒子
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-GwnRI24h-1673095571267)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221122150744102.png)]
padding不撑开盒子情况
就是没设置盒子的width/height属性
外边距(margin)
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-we6LHqaf-1673095571267)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221122155848718.png)]
div{
width:200px;
height: 200px;
background-color:pink;
}
.box1{
margin-bottom: 50px;
}
.box2{
margin-top:100px;
}
margin复合缩写方式和padding一致
外边距应用:块级盒子水平居中对齐
//外边距上下0 左右auto(居中)
margin:0 auto;
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-aAIYFomb-1673095571267)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221122160837864.png)]
行内元素和行内块元素居中对齐
给其父元素添加 text-align:center即可
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-jCaQPdXC-1673095571267)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221122161152846.png)]
嵌套块元素塌陷
就是儿子元素把父亲拉下来了,成因:css的叠加性
注意:浮动盒子不会有塌陷问题
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-OioEZAAH-1673095571267)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221122161809764.png)]
清除内外边距
网页元素很多都自带内外边距,因此很多时候要清除它
/*清除网页内所有的内外边距*/
<style>
*{
padding:0;
margin:0;
}
</style>
行内元素尽量不要设置上下外边距,只设置左右外边距,要设置转换为块元素即可**
7.PS基本操作
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-HMjoRbdT-1673095571268)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221122163552622.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-tDNcN3aO-1673095571268)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221122163602233.png)]
8.综合案例
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-blcCJ1Kw-1673095571268)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221122173711783.png)]
写完css文件一定要保存,
保存完一定要导入到html文件!!!
无序列表取消小圆点
ul li{
list-style:none;
}
9.圆角边框
border-radius属性设置圆角
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hPFKFFxy-1673095571268)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221123083426957.png)]
.yuanxing{
width: 200px;
height: 200px;
background-color: pink;
/* 让一个正方形盒子变圆形 */
/* 设置为高度一半 */
border-radius: 50%;
}
.juxing{
width: 300px;
height: 100px;
background-color: pink;
/* 圆角矩形设置为高度一半 */
border-radius: 50px;
}
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-tDYrVXZG-1673095571268)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221123084430159.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-SvRYDsvJ-1673095571269)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221123084340191.png)]
10.盒子阴影
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-FmadpaY7-1673095571269)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221123085308249.png)]
文字阴影(了解)
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-H7uDpm0z-1673095571269)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221123085724278.png)]
11.浮动
传统布局三种方法
网页布局第一原则:
多个块级元素:纵向排列找标准流,横向排列找浮动
↑说人话就是:纵向布局用标准流,横向布局用浮动
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-qx81IX65-1673095571269)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221123090036264.png)]
标准流就是按照默认好方式排列
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ISFcDgfL-1673095571269)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221123090346561.png)]
标准流只能处理一部分网页布局
为什么需要浮动
因为用标准流要实现对齐,盒子间位置控制很难
浮动可以改变标签默认排列方式
比如让多个div排列在一行
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-JKBGCyL4-1673095571270)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221123090640576.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-SSe4PxgP-1673095571270)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221123090712780.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-jisSeQPe-1673095571270)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221123091004788.png)]
什么是浮动
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-FbhQdIqH-1673095571270)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221123091516435.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-HED5W3cY-1673095571270)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221123091534160.png)]
浮动特性(重点)
1.就是说加了浮动的盒子原地起飞
飞到了大气层,下面的(地面上)盒子就把前面飞走的盒子位子占了
浮动的盒子在大气层,标准流盒子在地面
浮动盒子只影响后面标准流,不影响前面标准流(排队)
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-MqwYNAs5-1673095571271)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221123093411130.png)]
2.浮动都是在一行显示,并且在上面对齐
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-FsP2vF1Z-1673095571271)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221123093831160.png)]
3.任何元素都可以浮动,浮动元素都具有行内块相似特性
复习:行内块元素宽度默认是内容宽度
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-4Ws4mq8Z-1673095571271)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221123094415778.png)]
浮动元素经常和标准流父级搭配使用
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-L03i96gc-1673095571271)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221123095010069.png)]
12.常见网页布局
常见网页布局
通栏(和浏览器一样宽)盒子只需要设置高就行,不用设置宽
.top{
height:50px;
background-color:gray;
}
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8sxQEvu7-1673095571271)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221123105920742.png)]
top,footer,banner用标准流
中间列表用浮动
浮动布局注意点
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-jZhQngR3-1673095571272)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221123110753073.png)]
13.清除浮动
为什么要清除浮动
因为很多时候父盒子不方方便给高度,
但是子盒子全浮动,又不占用位置,
会导致父盒子高度为0,影响下面标准流盒子
又称为空巢老人效应
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-jTbkWiZP-1673095571272)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221123113344471.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-caWikvtW-1673095571272)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221123113259740.png)]
清除浮动本质
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-UwJ9Lf8R-1673095571272)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221123113448612.png)]
语法:
选择器{clear:属性值;}
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-OpjZBPR8-1673095571272)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221123113525233.png)]
清除浮动方法
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xpzxe8VR-1673095571273)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221123113813734.png)]
额外标签法
也成为隔墙法
就是加上一个clear:both的div标签
这个标签一定是块级元素
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-C86AG9bb-1673095571273)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221123114056929.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-W5tzCp4U-1673095571273)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221123114332932.png)]
清除浮动-父级添加overflow
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-oMvEmvAg-1673095571273)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221123140758836.png)]
.box{
overflow:hidden;
}
清除浮动- :after伪元素法
伪元素一定要有content属性!!!
伪元素一定要有content属性!!!
伪元素一定要有content属性!!!
简称复制黏贴法
伪元素/双伪元素是给父元素添加清除浮动类
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-OwHS6gDz-1673095571273)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221123141824956.png)]
清除浮动-双伪元素清除浮动
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-eDUrmDKb-1673095571274)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221123142127079.png)]
清除浮动总结
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-jLGH6ds8-1673095571274)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221123142434042.png)]
14.PS切图
常见图片格式
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-WxDFYxjv-1673095571274)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221123142603823.png)]
PS切图
切图方式:图层切图,切片切图,ps插件切图等
图层切图
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-YlaZGQbw-1673095571274)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221123143906678.png)]
切片切图
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Xa9l8ozf-1673095571275)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221123144605367.png)]
cutterman插件切图
选择图层,窗口,扩展,一键导出即可
15.学成在线案例
一个浮动,全要浮动,盒子也要浮动
网页布局第一原则:一行里只有一个元素用标准流
一行里有多个元素用浮动
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Q87cewNb-1673095571275)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221123150659331.png)]
准备素材和工具
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-bRvGMc4P-1673095571275)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221123150749322.png)]
案例准备工作
要采取结构和样式相分离
1.创建study文件夹(存放内容)
2.用vscode打开
3.study目录内新建images文件,存放图片
4.新建首页index.html(以后统一首页为index.html)
5.新建style.css,采用外链样式表
6.html文件引入css
7.清除内外边距,测试是否引入成功
css属性书写顺序(重点)
由大到小,由整体到局部
布局 盒子 文字 其他
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xrkODMr3-1673095571275)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221123151557578.png)]
页面整体布局思路
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-zbB6PZws-1673095571275)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221123152305307.png)]
确定版心
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-47qyIFz7-1673095571276)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221123152800279.png)]
头部制作
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-d6Lc4MFn-1673095571276)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221123153217216.png)]
导航栏统一格式
ul>li>a
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8Gv41dQ2-1673095571276)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221123163109781.png)]
注意:是盒子要加浮动而不是元素
li是块级元素独占一行,a是行内元素,
不仅要给
-
加浮动,还要给
- 里的
- 加浮动
搜索栏
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Y16dW1Hy-1673095571276)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221123185309744.png)]
头像垂直居中
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-YRyoVJVm-1673095571276)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221123195021692.png)]
解决方法
img图片加入vertical-align：middle,使它垂直居中
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vfDd436z-1673095571277)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221123195055315.png)]
banner制作
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-876Ilc7D-1673095571277)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221123195321058.png)]
放入背景图片时候要设置height!!!
course模块制作
文字水平居中 text-align:center
垂直居中 lineheight=盒子height
定义样式时候一定要精确到最后一级标签
定义样式时候一定要精确到最后一级标签
*定义样式时候一定要精确到最后一级别标签
精品推荐模块
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-SmNcNYw3-1673095571277)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221124090718690.png)]
盒子阴影
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-sWofs70T-1673095571277)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221124090948056.png)]
精品推荐大模块
强制缩放图片大小
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-f1Flm9Fl-1673095571277)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221124103359372.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-J60srQn7-1673095571278)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221124103934872.png)]
footer制作
16.CSS定位
为什么需要定位
标准和浮动无法实现:
1.盒子的随意移动,并且压住其他盒子
2.盒子在网页滚动固定显示
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5ekPwYiZ-1673095571278)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221124142448273.png)]
定位组成
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-CK6xCEfd-1673095571278)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221124142707177.png)]
定位模式
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hBIPRFsL-1673095571278)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221124142732144.png)]
边偏移
偏移就是距离xx多少px
比如top:10px 就是距离上边框10px
left:10px 就是距离左边框10px
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-EcJx0Dry-1673095571278)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221124142849437.png)]
静态定位(了解)
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-AEMJ7wKY-1673095571279)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221124143055473.png)]
相对定位relative(重要)
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-h8wgpDjI-1673095571279)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221124143721894.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-sEmu0TkS-1673095571279)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221124143712915.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-b6Aaig3g-1673095571279)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221124143954836.png)]
语法:
选择器{
positon:relative;
top:100px;
left:100px;
}
是灵魂出窍,下面盒子不顶位置
绝对定位absolute(重要)
拼爹型
会飘起来(脱离标准流),位置会被占
当没爹或爹没定位就以浏览器为基准（没有父元素就以浏览器(文档)为基准）
以最近一级有定位祖先元素作为参考点
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Pno6Y2yr-1673095571279)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221124150750547.png)]
子绝父相
就是说父级元素位置不能被顶掉,所以要用相对定位
子级元素不能占空间,要用绝对定位
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-x1tLUxZK-1673095571280)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221124151441633.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-AUtoByLk-1673095571280)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221124151656806.png)]
注意:不要加到兄弟级元素上,一定要加到子的上一级父级元素上
固定定位fixed(重要)
以可视窗口为参照点,不占用原先位置
语法:
选择器{position:fixed;}
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5RJDOy8f-1673095571280)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221124155427146.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-EvZC6a1D-1673095571280)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221124155933819.png)]
固定在版心右侧位置小技巧:
这个margin-left是参考positon定位完的盒子为参考点
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-KZynQzlZ-1673095571280)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221124160732349.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-RoZN25PV-1673095571281)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221124160843239.png)]
粘性定位sticky(了解)
就是fixed的元素到某一个位置被黏住到固定位置(类似固定)
是相对定位和固定定位的混合
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9MJYeell-1673095571281)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221124161406991.png)]
定位总结
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-mmtnWkXC-1673095571281)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221124161702550.png)]
定位的叠放顺序(z-index)
盒子重叠时候，设置z-index属性控制前后(z轴)
类似于广告全家桶
数值越大,盒子越上，千万不能加单位
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-TJtWgx3a-1673095571281)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221124162411256.png)]
定位的扩展
绝对定位的盒子居中
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-GGzc8uTE-1673095571282)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221124163411133.png)]
定位的特殊性
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-DJ7uHbMf-1673095571284)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221124164406074.png)]
脱标盒子不会触发外边距塌陷
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-kc3UviLn-1673095571284)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221124164437678.png)]
绝对定位(固定定位)会完全压住盒子
浮动本来设计是为了环绕文字效果,因此不会压住标准流文字、
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7mfdVSvf-1673095571284)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221124164958686.png)]
定位综合案例
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-bM8BWQ59-1673095571285)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221124165215432.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-izOathPT-1673095571285)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221124165344898.png)]
1.注意类名拼写错误
2.一定要先把盒子放到对的位置,再改变yang’shi
17.网页布局总结
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-bT4YUQv8-1673095571285)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221124172610014.png)]
18元素的显示和隐藏
比如关闭一个广告窗口,就需要用到元素的隐藏和显示
display 隐藏属性(重要)
本质:让一个元素在页面隐藏或显示
display属性设置元素如何显示
display:none; 隐藏元素
display:block; 显示元素,属性为块级
注意:display:none;位置不保留,会被后面元素顶掉
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-to5QC35p-1673095571285)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221126075207263.png)]
visibility 可见性
和display不一样 display不保留位置 而visibility保留位置
visibility:visible; 元素可视
visibility:hidden; 元素隐藏
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-N06JAzsa-1673095571285)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221126075528335.png)]
overflow 溢出
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-HHgVEwHS-1673095571286)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221126075845839.png)]
超出边框的部分就是溢出
overflow属性控制溢出部分是否显示
有定位的盒子,慎用overflow:hidden 会隐藏掉盒子内容
overflow:hidden; 溢出部分隐藏
overflow:visible;
overflow:scroll; 加入一个滚动条
overflow:auto; 有溢出才有滚动条
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-MgpFK1oN-1673095571286)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221126080250576.png)]
土豆网案例
图片和盒子宽高保持100%就行,就可以完全覆盖盒子了
绝对定位过的元素是飘起来的,不占位置
注意：写法
mask 卸载hover后面
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-DkGBNPAl-1673095571286)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221126084308797.png)]
css高级
19.精灵图
为什么要精灵图
因为浏览器需要一张图片就要发一个请求
因此一张张请求,服务器压力很大
那我把所有图片整合成一张大的
就可以有效减少请求次数,提高加载速度
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-T6zsD4Q5-1673095571286)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221126084739503.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xZqrwSet-1673095571286)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221126084940239.png)]
精灵图使用
只适用于小的背景图
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-TnfYybDN-1673095571287)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221126085519349.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9IyXs7y0-1673095571287)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221126085749273.png)]
就是拿大框去卡小框位置
位置一般都是负值(左和下)
默认大框贴着小框左上角
显示精灵图里的盔甲背景
.box1{
width: 60px;
height: 60px;
margin: 100px auto;
background: url(images/sprites.png);
background-position: -182px 0;
}
显示背景图里的日程表
.box2{
width: 27px;
height: 25px;
margin: 200px;
//复合写法
background: url(images/sprites.png) -155px -106px;
}
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-lE4tIN23-1673095571287)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221126090304243.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-sg2ZPcMj-1673095571287)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221126090412054.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ekBVYWgC-1673095571287)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221126090647944.png)]
20.字体图标
字体图标产生
精灵图要想更换十分麻烦
精灵图缩放会有失真
要找美工把精灵图一整个替换
所以有字体图标,展示是图标,本质是文字
可以随意变换颜色,大小
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-oHW7PKbK-1673095571287)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221126091609518.png)]
字体图标优点
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-19b0AfGm-1673095571288)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221126091717637.png)]
字体图标使用
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-jIuWi4aG-1673095571288)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221126092439851.png)]
字体图标下载
1.icomoon字库http://icomoon.io
2.icofont字库 http://www.iconfont.cn/
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-jqtC76tP-1673095571288)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221126092546789.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ZnIdUrVV-1673095571288)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221126092915771.png)]
下载.zip文件压缩包
字体图标引入
必须放同一文件夹下
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-U5F9LYw6-1673095571288)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221126093123406.png)]
在style.css文件里复制引入代码
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hemRZCV4-1673095571289)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221126093428781.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1LtS4KNQ-1673095571289)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221126093443684.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-MUvuTxeO-1673095571289)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221126094854198.png)]
把小框框复制
也可以使用反斜杠+代号;
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-G3DYoK2l-1673095571289)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221126170004923.png)]
字体图标追加
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-YqMScKyb-1673095571289)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221126093947733.png)]
字体图标加载原理
类似于精灵图
一次请求,把所有字体图标一起发送完
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3n9BjiUI-1673095571290)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221126094058648.png)]
21CSS三角
本质还是个正方形,把其他三角形隐藏了
内容的宽和高为0时候,有个默认的内边距把盒子撑起来
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-tLyKuNCs-1673095571290)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221126114331167.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-RUxEcGVe-1673095571290)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221126095259844.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-P9Nz0FEO-1673095571290)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221126095649268.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-VxWbm9Db-1673095571290)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221126095715663.png)]
这玩意死记代码就行
朝哪边就改border-left/right/bottom/top-color就行
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-YjbR0ef0-1673095571291)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221126095746165.png)]
京东三角案例
子绝父相,子元素一定要放到父元素里
.saoyisao{
width: 123px;
height: 182px;
position: relative;
top:100px;
left: 500px;
background-color: pink;
}
.sanjiao{
position: absolute;
top: 3px;
left: 123px;
width: 0px;
height: 0px;
border: 10px solid transparent;
border-left-color: green;
}
<div class="saoyisao">
<div class="sanjiao"></div>
</div>
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-q91BRe7f-1673095571291)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221126101335880.png)]
22.用户界面样式
鼠标样式 cursor
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Qu3aQi0N-1673095571291)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221126102659032.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-JaMKkbGi-1673095571291)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221126102920659.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6igrNzeT-1673095571291)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221126102937478.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-uEXK8mOT-1673095571292)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221126102946386.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-kZSTiCTp-1673095571292)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221126103208991.png)]
取消表单轮廓 outline
用处:去掉表单选中默认蓝色边框
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-lnDm1uUM-1673095571292)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221126103334422.png)]
文本框防拖拽 resize
textarea{
reszie:none;
}
防止文本框拖拽
23.vertical-align属性
图片 表单和文字对齐
用于设置图片或者表单(行内块元素)和文字垂直对齐
只针对行内元素和行内块有效
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9DSFjaeh-1673095571292)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221126104205084.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-jYe6Rip4-1673095571292)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221126104220614.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Jg3r0lRW-1673095571293)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221126104412174.png)]
文本框与旁边垂直对齐
textarea{
vertical-align:center;
}
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-y1DV2zxK-1673095571293)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221126104521646.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-h5UCNG9D-1673095571293)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221126104548384.png)]
图片底部默认空白缝隙解决
成因:图片默认和文字基线对齐
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-C4nX1dQ4-1673095571293)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221126105008638.png)]
解决方案
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-aKOVbOdB-1673095571293)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221126104949381.png)]
24.溢出文字省略号显示
单行文本溢出省略号
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-RlqOFK3m-1673095571294)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221126105526186.png)]
多行文本溢出显示省略号
有兼容性问题,代码直接复制就行
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vbaCCHE5-1673095571294)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221126110116541.png)]
25.常见布局技巧
margin负值运用
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5b8nlRVA-1673095571294)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221126110753569.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-AIb8G2PO-1673095571294)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221126110709529.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-z8O7c0zJ-1673095571294)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221126110827984.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-b8ZZPVlk-1673095571295)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221126112049029.png)]
注意:只有定位了才能用z-index
文字围绕浮动元素技巧
因为浮动元素不会压住文字
所以一个盒子内,左边图片浮动,右边标准流就可以
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Stb9ei0h-1673095571295)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221126112544110.png)]
.pic{
.....
float:left;
}
<div>
<div class="pic">
<img src="" alt="">
</div>
<p>集锦,热身赛.........</p>
</div>
行内块技巧
只要给父亲添加text-align:center；
那么这个父盒子里所有行内元素,行内块元素都会水平居中
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ts4Za2rx-1673095571295)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221126113755075.png)]
CSS三角强化
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-GI6hJaRV-1673095571295)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221126140909611.png)]
26.CSS初始化
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-kjhJgZn3-1673095571295)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221126142903684.png)]
/* 清除内外边距 */
* {
margin: 0;
padding: 0
}
/* em和i斜体文字不倾斜 */
em,
i {
font-style: normal
}
/* 去掉li小圆点 */
li {
list-style: none
}
img {
/* 照顾低版本浏览器 */
border: 0;
/* 取消图片爹测有空白缝隙 */
vertical-align: middle
}
button {
/* 当经过button时候,鼠标变小手 */
cursor: pointer
}
a {
color: #666;
text-decoration: none
}
a:hover {
color: #c81623
}
button,
input {
font-family: Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif
}
body {
/* c3新属性抗锯齿 */
-webkit-font-smoothing: antialiased;
background-color: #fff;
font: 12px/1.5 Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif;
color: #666
}
.hide,
.none {
display: none
}
/*清除浮动 */
.clearfix:after {
visibility: hidden;
clear: both;
display: block;
content: ".";
height: 0
}
.clearfix {
*zoom: 1
}
H5和CSS3提高
27.H5新特性
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-qkqmZmGC-1673095571296)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221126143305042.png)]
H5新增语义化标签
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-VMqWND9H-1673095571296)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221126144009037.png)]
<style>
/* <!-- 是标签 不用加. --> */
header, nav{
height: 120px;
background-color: pink;
border-radius: 60px;
}
section{
width: 500px;
height: 500px;
background-color: skyblue;
}
</style>
H5新增多媒体标签
1.视频 video
视频属性也是个盒子
视频支持格式不一致
<video controls loop>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
您的浏览器不支持 video 标签。
</video>
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-X1hUIvvQ-1673095571296)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221126144233317.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-WwRR4k9A-1673095571297)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221126145558949.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2Fnx0BZq-1673095571297)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221126145621987.png)]
controls显示暂停,音乐大小，全屏等控件
loop设置洗脑循环
muted设置静音播放
<video src="......mp4" autoplay="autoplay" muted="muted" controls="controls"></video>
2.音频audio
处理兼容性问题
<audio controls loop>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
您的浏览器不支持 audio 元素。
</audio>
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-lsKpaWZQ-1673095571297)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221126150405866.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vSicIMQE-1673095571297)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221126150441051.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-nQ3jXkKu-1673095571297)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221126150543921.png)]
H5新增input表单
都有自动检测的提示和限制
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-kEgqrJQA-1673095571298)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221126151314497.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-cknD19Pa-1673095571298)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221126151056075.png)]
H5新增表单属性
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-bBfBmhey-1673095571298)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221126152223611.png)]
/* 伪类选择器可以更改提示颜色 */
input::placeholder{
color:pink;
}
<form action="">
<!-- placeholder提示搜索内容-->
<input type="search" name="" id="" required="required" placeholder="我是提示内容">
<!-- 提交多个文件 -->
<input type="submit" multiple="multiple" value="提交" >
</form>
28.CSS3新特性
CSS3新增选择器
属性选择器
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9ETzTevq-1673095571298)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221126153055949.png)]
/* 1.必须是input标签,但是有value这个属性,用的是中括号 */
input[value]{
color:pink;
}
/* 2.选择不同属性的(重点) */
/* 选择处type是password的输入标签 */
input[type="password"]{
color: pink;
}
/*3.选择出div标签下 类是开头是icon的标签*/
div[class^=icon]{
color: red;
}
/*4.选择出section标签下 类是结尾是datd的标签 */
section[class$=data]{
color:blue
}
/* 5.选择出类名有data的标签 */
section[class*=data]{
color:skyblue;
}
/* 类选择器 伪类选择器 属性选择器 权重都是10 */
结构伪类新增选择器
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-dGdgbnzE-1673095571298)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221126160337219.png)]
/* 1.选择ul下li第一个孩子 */
ul li:first-child{
background-color: pink;
}
/* 2.选择ul下li最后一个孩子 */
ul li:last-child{
background-color: pink;
}
/* 3.选择ul下li第n个孩子 */
ul li:nth-child(n){}
/* 例如选择第二个孩子 */
ul li:nth-child(2){
background-color: blue;
}
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-X7iLMgq2-1673095571299)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221126161548291.png)]
/* 1.把所有偶数孩子选出来 */
ul li:nth-child(even){}
/* 2..把所有奇数孩子选出来 */
ul li:nth-child(odd){}
/* 3.n从0开始 每次加一 字母必须是n,遍历所有*/
/* 选择出所有孩子 */
ol li:nth-child(n){}
/* 2n选择出偶数,2n+1选择出奇数 */
ol li:nth-child(2n+1){}
ol li:nth-child(2n){}
/* 其他和公式以此类推 */
n从零开始计算
nth-child先看孩子(所有类型)
nth-of-type先看类型(一个类型)
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-uCTP7cgS-1673095571299)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221126162332558.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5rK6xWYr-1673095571299)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221126162237399.png)]
小结:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-qJnIv4wO-1673095571299)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221126162526086.png)]
伪元素选择器(重点)
使用场景:
以前都是通过盒子+盒子方式实现三角,遮罩层
现在用伪元素选择器可以简化结构
因为在检查文档树看不见这个元素标签,所以叫伪元素
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-R292HdER-1673095571299)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221126162957850.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-eBAIewkV-1673095571300)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221126163041212.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-yxIs4zjc-1673095571300)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221126165135053.png)]
伪元素使用
before和after一定要有content!!!
伪元素也是一个盒子
一个伪元素就是放到这个元素里面的最前面/后面
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-P6oVjwM7-1673095571300)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221126163404430.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-CsbNO2Db-1673095571300)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221126165034063.png)]
伪元素使用场景
1.伪元素字体图标
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xVLRf7RP-1673095571300)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221126170125995.png)]
2.仿土豆效果
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5RmYkLAF-1673095571301)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221126170721275.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-mggP0Of4-1673095571301)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221126170534062.png)]
//有个更简单的就是把::before里面的全部粘贴到:hover::before里面，然后是block就行
3.伪元素清除浮动
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-30bOGbPE-1673095571301)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221126170803594.png)]
复习:
也成为强行撑开法
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BaN1RpUa-1673095571301)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221126170915857.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-AcKyJC2U-1673095571301)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221126171223401.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3gPAEGxM-1673095571302)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221126171423554.png)]
双伪元素清除浮动,就是在盒子里放进两个伪元素盒子
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-VTJIQeH1-1673095571302)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221126171358898.png)]
CSS3盒子模型
以前盒子加入padding属性会撑大盒子,要手动减小盒子宽度
现在通过box-sizing:border-box;设置就不会撑大盒子
p{
.....
box-sizing:border-box;
}
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-4qjJ3wO3-1673095571302)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221126171907235.png)]
CSS3其他特性(了解)
css3滤镜filter
filter属性可以让图片变模糊
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2vxvA67n-1673095571302)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221126172349927.png)]
css3 calc 函数
注意前后各有一个空格
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-mWwwwSiw-1673095571302)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221126172656600.png)]
2D转换 transform
CSS3 过渡(重点)
过渡可以不使用js下实现动画
过渡加在本体上,谁做动画给谁加
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-GJYibbZz-1673095571303)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221126172841516.png)]
.guodu1{
width: 300px;
height: 300px;
background-color: pink;
/* 过渡加在本体上 */
transition: width 1s;
//要写多个过渡时候不要分开写,利用逗号分隔
transition: width 1s,height 1s;
}
.guodu1:hover{
width: 900px;
height: 900px;
}
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-gqzqAJnA-1673095571303)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221126173517708.png)]
转换 transform
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-j6FSQX7u-1673095571303)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221129092718773.png)]
移动 translate
traslate也是灵魂出窍,不脱标,占用原来位置
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-OhwdbLXi-1673095571303)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221129093611137.png)]
盒子居中新技巧
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Pb7gyqoc-1673095571303)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221129094509794.png)]
旋转 rotate
transform:rotate(度数)
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-QXh2dhkj-1673095571304)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221129094811626.png)]
顺时针旋转45°
transform:rotate(45deg);
旋转360°
transform:rotate(360deg);
transition: all 1s;
转换中心点 transfrom-origin
transform-origin:x y
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-iJMOMR0m-1673095571304)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221129095848477.png)]
将旋转点设置为左下角
transform-origin:left bottom;
默认是50% 50%
也可以是px像素
transform-origin:50px 50px;
旋转实例
.div1{
/* 溢出隐藏 */
overflow: hidden;
width: 200px;
height: 200px;
border: 1px solid pink;
margin: auto;
}
.div1::before{
/* 伪元素一定要有content */
content: "黑马";
text-align: center;
line-height: 100%;
display: block;
width: 100%;
height: 100%;
background-color: greenyellow;
transition: all 1s;
/* 默认在下面隐藏 */
transform: rotate(90deg);
transform-origin: left bottom;
}
.div1:hover::before{
/* 鼠标移动放到上面时候开始旋转,显示 */
transform: rotate(0);
}
缩放 scale
缩放scale对比直接修改宽高优势:
不会影响其他盒子,而且可以设置缩放中心点
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-UrGW2JWi-1673095571304)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221129104231364.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-GHlUbbhr-1673095571304)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221129104913964.png)]
2D转换综合写法
中间用空格隔开，顺序会影响转换效果,位移写到最前面！！！
格式 transform:traslate() rotate() scale() …等等
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-EQZyxyGS-1673095571304)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221129110637817.png)]
位移属性写在最前面
transform:translate(15px,50px) rotate(180deg) scale(1.1);
2D转换总结
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-G3fLp13D-1673095571305)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221129111020761.png)]
CSS3 动画
什么是动画
动画和过渡区别是,动画打开页面就自动连续播放,而过渡是要有条件触发
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-L5C47jCC-1673095571305)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221129111217818.png)]
动画基本使用
先定义,再调用
0%开始,100%结束（关键帧动画）
一步动画:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6J08DWDh-1673095571305)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221129112442703.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-4ofduHnA-1673095571305)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221129112453290.png)]
动画序列:
坐标不是绝对位置,是相对于初始位置
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-aThxfLos-1673095571305)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221129112821509.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-CCwlvF4I-1673095571305)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221129113354087.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-P7M8m9TU-1673095571306)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221129113410079.png)]
常用属性
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-LorX3uSm-1673095571306)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221129113751061.png)]
CSS3动画简写
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-klHLwGn6-1673095571306)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221129114019897.png)]
大数据热点案例(跳过了)
速度曲线细节
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xq9NQm1M-1673095571306)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221129115300373.png)]
3D转换
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-brjpPGs8-1673095571306)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221129115717893.png)]
三维坐标系
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-gPyadgaL-1673095571307)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221129140907210.png)]
z轴外正内负,和z-index一样,数值越大越上面
3D移动 translate3d
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-jcsGfu5J-1673095571307)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221129141602572.png)]
transfrom: translateX(100px) translateY(100px) translateZ(100px);
1.translateZ:沿着z轴移动
2.translateZ:后面的单位一般是px
3.translateZ:向外(向脸)移动100px
3d移动简写
transform:translate3d(x,y,z);
transform:translate3d(100px,100px,100px);
xyz不能省略,没有就写0
transform:translate3d(0,0,100px);
透视 perspective
perspective就是类似视距,近大远小
类似于手电筒照物体，距离离物体越近在墙上面的成的像就越大，反之越小
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-lVlXohaS-1673095571307)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221129142432338.png)]
透视卸载父盒子上上面
数值越小,眼睛距离屏幕越近，物体越大
perspective:200px;
perspective:500px;
3d旋转 rotate3d
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Yp8mgRCT-1673095571307)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221129144037803.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-pTde9T76-1673095571307)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221129143638880.png)]
沿x y z轴旋转180°(顺时针)(左手定则)
transform: rotateX(180deg);
transform: rotateY(180deg);
transform: rotateZ(180deg);
3d呈现 transform-style
因为默认子元素不开启3d环境
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-MJPbN6ok-1673095571308)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221129150007753.png)]
3d案例(跳)
浏览器私有前缀
这个是为了兼容老版本浏览器
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-qB1cbhVv-1673095571308)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221129155850213.png)]
css3总结
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1cbHiTI6-1673095571308)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221129160735344.png)]
29.广义的html5(了解)
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-YYWeD8Jt-1673095571308)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221126174411657.png)]
30.品优购项目
品优购项目规划
网页制作流程
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-nWDhaw6n-1673095571308)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221127075304636.png)]
整体项目介绍
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7ys8paR2-1673095571309)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221127075406626.png)]
品优购学习目的
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-GmbNpdSu-1673095571309)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221127075456417.png)]
开发工具
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wGehDfRP-1673095571309)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221127075847156.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-FiaQ79Ib-1673095571309)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221127075857419.png)]
项目搭建工作
创建文件夹
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-kgyp71Eu-1673095571309)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221127080152588.png)]
引入初始化css
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-bhP31DZ0-1673095571310)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221127080428245.png)]
引入之前jd写好的css初始化文件,并且加入css3盒子模型box-sizing:border-box;
模块化开发
模块化开发就是把一个项目拆成多个可拼接的模块(零件)
模块之间相互独立不影响,方便替换,重复使用
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wWgZLrxx-1673095571310)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221127081339053.png)]
favicon图标
就是网站标题图标
favicon使用步骤:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vj7sHojL-1673095571310)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221127082338842.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Fsv1Wd5X-1673095571310)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221127082406435.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-B3VYreN4-1673095571310)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221127082424383.png)]
<link rel="shortcut icon" href="favicon.ico">
TDK三大标签SEO搜索优化
SEO(Search Engine Optimization)搜索引擎优化,用来提高网站搜索排名
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-bpI4VA6G-1673095571311)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221127083753724.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-WxHZu0ld-1673095571311)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221127083815373.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-YWassgAa-1673095571311)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221127083902058.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-pvkym9S1-1673095571311)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221127084054467.png)]
<title>品优购-综合....................
</title>
<meta name="description" content="京东jd.com。。。。。。。"/>
<meta name="keywords" content="网上购物,......"/>
品优购首页制作
常用模块类名命名
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vhRoR7Tv-1673095571312)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221127084347502.png)]
快捷导航shortcut制作
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0jrUE1b3-1673095571312)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221127084721601.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-aFf8etxA-1673095571312)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221127094457195.png)]
如果引入字体的css和fonts不在一个目录下,记得改路径
header制作
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-APOAtD86-1673095571312)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221127095338262.png)]
四个盒子全用定位做
logo seo优化
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5P7vSPdQ-1673095571312)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221127095540359.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-oMuUykQF-1673095571313)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221127102947632.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-tdaWtNjL-1673095571313)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221127103108883.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Fi3Sh7Bi-1673095571313)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221127110637878.png)]
nav导航制作
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-usl9r1Go-1673095571313)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221127115425216.png)]
dt dd这里面不是列表,只是个类名字
区域大盒子不能用绝对定位,因为绝对定位不占位置,会飘的
footer底部制作
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-s5zB6PdX-1673095571313)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221127150940919.png)]
main主体制作
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-sDgJ3yN7-1673095571314)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221128140931919.png)]
这里的每个列表的宽度不好直接给数值
可以用百分比替代即width:25%
焦点图不能直接插入
要用ul>li>img
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-qjSSyplo-1673095571314)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221127165044097.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-lDY7zDD8-1673095571314)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221127162359930.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-nvZTnnpB-1673095571314)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221127165416842.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-KSGy3uBW-1673095571314)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221127170051748.png)]
边框多余的部分可以用overflow:hidden清除
复习:单行文字溢出显示省略号
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-dVFc9KHO-1673095571315)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221127170503944.png)]
overflow: hidden; 超出部分省略
text-overflow:ellipsis; 显示省略号
white-space: nowrap; 不允许换行
推荐模块
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-rkfRS05O-1673095571315)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221127170727292.png)]
楼层区floor制作
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-GiWAxPwM-1673095571315)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221128151449610.png)]
tab栏选项卡原理
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-moHoeaja-1673095571315)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221128152440406.png)]
点击tab_list中的选项1,显示tab_content里的内容1,其余隐藏
点击选项2,3类推
一般情况下,a如果包含有宽度的盒子,a需要转换为块元素,display:block
品优购列表页制作
列表页准备工作
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-cuScNGUt-1673095571315)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221128155942822.png)]
header和nav修改
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-UOqbtndS-1673095571316)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221128163143498.png)]
列表页主体 sk_container
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8w3X8GdB-1673095571316)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221128164013265.png)]
123会跑到右侧是因为上面文字撑开到了下面
把nav盒子设置溢出隐藏即可 overflow:hidden;
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-OT3PAtq4-1673095571316)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221128164337823.png)]
li本身就有一个边框,因此需要隐藏掉本身的边框
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-MgxygwXm-1673095571316)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221128164433926.png)]
品优购注册页制作
注册页布局
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-aQ8IFjk2-1673095571316)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221128165126188.png)]
registerara 布局
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0Y8kXsaG-1673095571317)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221128170330516.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-pcKFVqHk-1673095571317)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221128170746295.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-FDicliug-1673095571317)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221128171946795.png)]
复选框:
<input type="checkbox" checked="checked">
页面跳转
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2g0faJo1-1673095571317)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221128172301717.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ruwsOCST-1673095571317)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221128172354926.png)]
web服务器
有了服务器,大家一起欣赏
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-XUILLCcB-1673095571318)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221128172459423.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-4DHv4vIq-1673095571318)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221128172556727.png)]
本地服务器局域网内可以用
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-rdZvP1Qs-1673095571318)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221128172627929.png)]
远程服务器
服务器就是一台电脑
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-CO6VfJzw-1673095571318)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221128172734726.png)]
将自己网站上传到服务器
不要用教学的网站,会收集个人信息
可以用gitee www.gitee.com/
31.课程总结
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-r2irp1ES-1673095571318)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221128173421471.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-j26peYiU-1673095571319)(C:\Users\xxxu\AppData\Roaming\Typora\typora-user-images\image-20221128173517487.png)]
中…(img-YWassgAa-1673095571311)]
[外链图片转存中…(img-pvkym9S1-1673095571311)]
<title>品优购-综合....................
</title>
<meta name="description" content="京东jd.com。。。。。。。"/>
<meta name="keywords" content="网上购物,......"/>
品优购首页制作
常用模块类名命名
[外链图片转存中…(img-vhRoR7Tv-1673095571312)]
快捷导航shortcut制作
[外链图片转存中…(img-0jrUE1b3-1673095571312)]
[外链图片转存中…(img-aFf8etxA-1673095571312)]
如果引入字体的css和fonts不在一个目录下,记得改路径
header制作
[外链图片转存中…(img-APOAtD86-1673095571312)]
四个盒子全用定位做
logo seo优化
[外链图片转存中…(img-5P7vSPdQ-1673095571312)]
[外链图片转存中…(img-oMuUykQF-1673095571313)]
[外链图片转存中…(img-tdaWtNjL-1673095571313)]
[外链图片转存中…(img-Fi3Sh7Bi-1673095571313)]
nav导航制作
[外链图片转存中…(img-usl9r1Go-1673095571313)]
dt dd这里面不是列表,只是个类名字
区域大盒子不能用绝对定位,因为绝对定位不占位置,会飘的
footer底部制作
[外链图片转存中…(img-s5zB6PdX-1673095571313)]
main主体制作
[外链图片转存中…(img-sDgJ3yN7-1673095571314)]
这里的每个列表的宽度不好直接给数值
可以用百分比替代即width:25%
焦点图不能直接插入
要用ul>li>img
[外链图片转存中…(img-qjSSyplo-1673095571314)]
[外链图片转存中…(img-lDY7zDD8-1673095571314)]
[外链图片转存中…(img-nvZTnnpB-1673095571314)]
[外链图片转存中…(img-KSGy3uBW-1673095571314)]
边框多余的部分可以用overflow:hidden清除
复习:单行文字溢出显示省略号
[外链图片转存中…(img-dVFc9KHO-1673095571315)]
overflow: hidden; 超出部分省略
text-overflow:ellipsis; 显示省略号
white-space: nowrap; 不允许换行
推荐模块
[外链图片转存中…(img-rkfRS05O-1673095571315)]
楼层区floor制作
[外链图片转存中…(img-GiWAxPwM-1673095571315)]
tab栏选项卡原理
[外链图片转存中…(img-moHoeaja-1673095571315)]
点击tab_list中的选项1,显示tab_content里的内容1,其余隐藏
点击选项2,3类推
一般情况下,a如果包含有宽度的盒子,a需要转换为块元素,display:block
品优购列表页制作
列表页准备工作
[外链图片转存中…(img-cuScNGUt-1673095571315)]
header和nav修改
[外链图片转存中…(img-UOqbtndS-1673095571316)]
列表页主体 sk_container
[外链图片转存中…(img-8w3X8GdB-1673095571316)]
123会跑到右侧是因为上面文字撑开到了下面
把nav盒子设置溢出隐藏即可 overflow:hidden;
[外链图片转存中…(img-OT3PAtq4-1673095571316)]
li本身就有一个边框,因此需要隐藏掉本身的边框
[外链图片转存中…(img-MgxygwXm-1673095571316)]
品优购注册页制作
注册页布局
[外链图片转存中…(img-aQ8IFjk2-1673095571316)]
registerara 布局
[外链图片转存中…(img-0Y8kXsaG-1673095571317)]
[外链图片转存中…(img-pcKFVqHk-1673095571317)]
[外链图片转存中…(img-FDicliug-1673095571317)]
复选框:
<input type="checkbox" checked="checked">
页面跳转
[外链图片转存中…(img-2g0faJo1-1673095571317)]
[外链图片转存中…(img-ruwsOCST-1673095571317)]
web服务器
有了服务器,大家一起欣赏
[外链图片转存中…(img-XUILLCcB-1673095571318)]
[外链图片转存中…(img-4DHv4vIq-1673095571318)]
本地服务器局域网内可以用
[外链图片转存中…(img-rdZvP1Qs-1673095571318)]
远程服务器
服务器就是一台电脑
[外链图片转存中…(img-CO6VfJzw-1673095571318)]
将自己网站上传到服务器
不要用教学的网站,会收集个人信息
可以用gitee www.gitee.com/
31.课程总结
[外链图片转存中…(img-r2irp1ES-1673095571318)]
[外链图片转存中…(img-j26peYiU-1673095571319)]
200
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
