H5笔记
实现特效
图片轮播
鼠标滑过效果
滚动窗口
/* 设置导航 */
nav{
height:37px;
/* background-color: yellowgreen; */
/* 下边框 */
border-bottom:1px ;
/* 溢出隐藏 */
overflow: auto;
background-color: black;
}
/* li横向显示====父元素变成弹性和 */
nav>ul{
display: flex;
}
/* 调整li的挤压效果：不让li被挤压了 */
nav>ul>li{
/* 解决的是是否让li被挤压取值为1的时候为默认值是挤压效果；取值为0的时候为不挤压效果 */
flex-shrink: 0;
/* 调整间距 */
margin:0px 10px;
line-height: 37px;
color: white;
font-size: larger;
}
/* 隐藏掉滚动条 */
::-webkit-scrollbar{
display: none;
}
nav>ul>li:hover{
background-image: url(img/xh.png);
background-repeat: no-repeat;
color:gold;
background-position: center 30px;
background-size: 30px 6px;
}
经验总结
-
为了提高开发速度，可以用快捷键自动补全代码：标签+tab/enter
前段的本质是套盒子
开发步骤：基于css -
先用div框出来对应的功能区（可以设置div的背景颜色来观察具体的框的大小和位置），使用width和height调div大小，margin调div组件之间的布局。
-
也可以使用弹性div或者float设置左右或者上下布局 修改子元素的排列方向
display:flex
flex-direction:row(横向)/column(纵向) -
div默认是纵向布局。
-
若div未设置width和height则auto根据div中控件进行测量（默认w为100%），背景色不计入测量（若不设置w和H则背景色不显示）
在对应的div中调对应的组件布局
- 让单行文本垂直居中（二维）：line-height:div高度属性值
- 盒子中间显示===实现版心居中（一维） ：margin:0 auto;
html前端总结：首先是div框出来具体布局（设置背景色），然后用margin-left/right进行组件div之间（外距）位置详细配置，对于字体再用text-aline,line-height居中等设计，还有float，弹性盒等左右布局div组件。
div套div
界面适配问题
- 首先占满全局，html,body{width:100%;height:100%}
- 配置组件width时需要按照比例%来分配，这样无论界面宽度如何变化，只会挤压原来行的组件不会折行，height也可以一样按照比例分配。
或者使用弹性盒子同样可以挤压而不折行。
附录
line-height：div的height属性值
单行文本垂直居中对齐
line-height:
.box{
width:300px;
height:100px;
background-color: red;
/* 垂直居中属性
line-height:行高，行间距；
让单行文本垂直居中的意思：取值于高度一致
*/
line-height:100px ;
}
多行文本居中需要使用
text-align:center;
/* 盒子中间显示===实现版心居中 */
margin:0 auto;
div居中分布，上下界为零，宽度自适应（居中）其他组件也可以
基本标签
基本语法：<p>文本</p>
段落标签：文章的段落
每一个段落之间有段间距，段落里面文本是有行间距
<br>=====等价===== <br>
换行标签：强制换行===段内换行
基本语法：<b>文本</b>
加粗标签
基本语法：<i>文本</i>
倾斜标签：让文本倾斜显示
基本语法：<u>文本</u>
下划线标签：给文本添加下划线效果
基本语法：<s>文本</s>
删除线：给文本添加删除线效果；从文本的中间穿过的
上角标<sup></sup>
角标标签
m2 m3
下角标 <sub></sub>
H2O CO2
div和span======其实是没有特殊的实际的意义
注意
但是在布局中经常使用
div主要是布局区块划分
span===对于独立文本的修饰
div=====区块划分元素
基本语法：<div></div>
div是区块划分，如果想要左右排列的话则需要：使用浮动属性；默认div是纵向排列的
span====主要是对独立文本进行修饰
span的排列方式；一行显示
列表标签
以同样的格式来展示数据信息的
列表分类：有序，无序，自定义
有序列表
有顺序的列表，
注意：ol里面只能放li
<ol>
<li></li>
<li></li>
<li></li>
</ol>
快速创建标签
ol>li*3=======一个ol里面，有3个li
修改列表项显示类型=====给ol添加的
type="A/a/I/i/1"
修改列表项的起始
start="数值"
无序列表
ul>li
默认项目符号：黑色实心圆点
能否修改以下列表项项目符号
修改无序列表项的项目类型
type="disc/circle/square/none"
自定义列表
一般情况下只应用于布局(图文混排/问答列表)
一般：一个dl里面建议使用一个dt和一个dd
基本语法：
<dl>
<dt>图片</dt>
<dd>文本</dd>
</dl>
<dl>
<dt>图片</dt>
<dd>文本</dd>
</dl>
<dl>
<dt>图片</dt>
<dd>文本</dd>
</dl>
<dl>
<dt>图片</dt>
<dd>文本</dd>
</dl>
文章的标题
h1-h6
双标签有开始有结束
总结特点
1、自动加粗
2、自动换行
3、h1最大，h6最小
4、就6个级别
字体标签font
对于文本进行修饰的：能修改字体，能修改大小，颜色
字体大小取值：size=“1-7”
1最小，7最大
千锋教育，和<font color="gold" face="隶书" size="100">齐鲁工业大学</font>进行校内实训
图片标签img
基本语法：
<img src="路径">
路径：就是文件存在打开的一个完整的途径
1、页面和图片是同级关系的话则可以直接把图片的名字当作路径使用
2、页面和图片所在的文件夹是同级关系的话，需要先进入到对应的文件夹里面才能找到对应的图片文件
3、当前页面所在的文件夹和图片是同级关系，引入图片的时候则需要先返回上一级：../
超链接a
<a href="路径">文本/图片</a>
a标签里面路径的作用:实现不同页面之间的跳转
如果说你跳转的页面/地址是一个外网地址的话,则需要带互联网协议(绝对路径)
http:// https://
如果是本地地址的话则需要通过关系去查找对应的路径====使用额路径都是相对路径
相对路径===通过某种文件之间的关系去查找页面/其他文件内容
绝对路径===是一个完整的地址,互联网地址或者是从某一个盘符下面开始的某一个文件
特点:超链接自带下划线效果的;默认超链接访问前,是蓝色的
超链接的另外一个作用:在本页面中的不同区域的跳转
效果:通讯录里面,小说章节的跳转
利用a标签的锚点效果====小说的制作
网站的组成部分
1.HTML的结构层========标签
结构===完毕
2.CSS的样式层=========对标签结构的修饰
样式修饰了
语法:
选择器{
样式规则
}
选择器:查找页面元素的一种方式方法
{}:规定了选择器查找到的元素(标签)实现统一的样式规定
男生{
发型:3mm;
T恤:大红色;
短裤:正绿色
}
样式规则里面放置的是属性和属性值
注意:属性和属性值需要使用:链接
每一组属性和属性值结束后需要使用分号结尾
如果你的属性和属性值是最后一组的话,则不需要使用分号;如果后面继续填写则需要使用了
3.JS的行为交互层======动态的效果的
选择器:页面元素的查找方式方式;不止一种
有哪些选择器:
标签选择器:通过标签的名字查找页面中的元素
通过标签选择器查找页面元素的时候,查找的范围太大了 且雷同率较高。
类选择器
给元素起一个类名,通过这个类名去查找页面元素
基本语法:
HTML: <div class="box1"></div>
CSS: .box1{样式规则}
注意:.不能省略
id选择器
CSS基本语法的使用
一定要配合style标签使用;并且style标签需要放在head标签里面
id选择器
给元素起一个id的名字,CSS里面通过这个id的名字查找页面的元素,实现对应的修饰
每一个id的取值不能一致;不能重复,只能出现一次(从js角度考虑)
基本语法:
HTML: <div id="bobo"></div>
css部分:
#bobo{
样式规则
}
给元素起类名/起id名字有啥命名规范没
命名的规则:
1.见名知意
2.不能以数字开头
3.不能以汉字命名
4.可以使用,字母,数字,下划线配合使用 box1 box_1
shop
shopcar
login
info
main
header
footer
section
gouwu gouwuche
/* id选择器 */
#bobo{
width:400px;
height: 400px;
background-color: green;
}
/* 类选择器 */
.box{
width:300px;
height:300px;
background-color: yellow;
}
/* 标签选择器 */
/* div{
width:200px;
height:200px;
background-color: orange;
} */
</style>
<!-- 问题:
如果我使用不同的选择器,修饰同一个元素的话,实现的效果是啥样的
不同选择器修饰元素的时候,实现的效果与代码的顺序没有关系;跟选择器的权值大小有关
类选择器权值>标签选择器的权值
id选择器权值>类选择器的权值
id选择器权值>标签选择器权值
公式:id(100)>类(10)>标签(1)>通配符选择器(0)
通配符选择器就干一件事:取消元素自带的内边距和外边距
如何取消元素自带的内边距和外边距
<style>
/* 通配符选择器 */
*{
margin:0;padding:0
}
</style>
文本P标签
<style>
p{
/* 文本加粗属性 */
font-weight:bold;
/* 实现加粗效果 */
font-style:italic;
/* 文本修饰线 */
text-decoration: overline;
text-decoration: underline line-through overline;
}
a{
text-decoration: none;
}
/* u{消去下划线
text-decoration: none;
}
s{消去删除线
text-decoration: none;
} */
</style>
尺寸width,height
<style>
/* 元素的宽度高度属性
元素的宽度
width:200px
元素的高度
height:200px
不是所有的元素都能直接设置宽度和高度的元素的类型不一样
块能直接设置宽高,但是行内就不行
能够设置宽高的元素:div,p,ul,li,ol,dl,dt,dd,h1-h6
不能设置宽度高度的元素:a,b,u,s,sup,sub,span
*/
div{width:200px;height:200px;background-color: red;}
p{width:100px;height:100px;background-color: aqua;}
b{
width: 200px;
height:200px;
background-color: yellow;
}
</style>
字体大小，颜色，font
<style>
/* 调整文字大小
font-size:
10px其实已经是极限了,考虑到眼睛舒适度
默认的浏览器中的字体大小是:16px
文本颜色
color:
1.颜色
2.颜色的取值:可以为#六位十六进制的颜色值
0-9A-F
#ee1234
3.rgb(red,green,blue)三个颜色取值，三原色
0-255
*/
.p1{
/* 设置字体大小 */
font-size:16px;
/* 文字颜色 */
color:rgb(123,34,45)
}
</style>
CSS样式规则
<!--
CSS样式规则里面的内容：
{属性:属性值;属性:属性值}
CSS对应的核心属性
1、字体大小
font-size:10px;
默认浏览器中的字体大小为16px;
2、字体加粗
font-weight:bold
3、字体倾斜
font-style:italic
4、文本的修饰线属性
text-decoration:
underline========下划线
line-through=====中划线
overline=========上划线
none=============取消文本修饰
5、文本的颜色
color:
取值：1、颜色单词
2、#六位十六进制颜色值
3、rgb(red,green,blue)
0-255
6、开头空两格（首行缩进）
text-indent:2em
7、单行文本垂直居中对其
line-height:
8、文本的水平对其方式
text-align:left/right/center/justify（两端对其）
9、间距属性
间距：距离
间距分为了两种：内边距，外边距
内边距：边框与内容之间的间距
padding
外边距：边框与边框之间的距离，组件之间的距离设置
margin
-->
px和em
<!--
px=======是一个固定单位
em=======相对单位，相对于父元素字体大小进行缩小放大对应的倍数
默认：1em=16px;
修改之后
20px=1em
40px=2em
要想实现，每次都首行缩进两个汉字；text-indent:2em
-->
p{
/* font-size:40px; /
font-size:40px;
/ 首行缩进 */
text-indent:2em
}
padding和margin（微调div之间的布局）
div{
/* 实际的内容 */
width:200px;
height:200px;
background-color: red;
border:5px solid gray;
/* 添加内边距
padding:一下就实现了四个方向
padding:复合属性
复合属性：能够把多个属性的属性值放在一起实线
*/
/* padding:50px; */
/* 如何只实现一个方向的内边距
padding-方向词:单一属性
单一属性：只能实线某一个属性的取值
*/
padding-top:50px;
padding-left:50px;
padding-right:50px;
padding-bottom: 50px;
}
</style>
外边距：边框与边框之间的距离
Margin
<style>
*{margin:0;padding:0}
.red{
/* width:200px; */
height:200px;
background-color: red;
border:10px solid gray;
/* 添加外边距
为啥直接看不到右侧50px的距离：原因是因为；右侧的留白和50px重回了
*/
/* margin:50px */
/* 能否设置一个方向的外边距
margin-方向词
*/
margin-top:50px;
margin-left:50px;
margin-right:50px;
margin-bottom: 50px;
}
.green{
width:200px;
height:200px;
background-color: green;
border:10px solid blue;
}
</style>
background
背景属性：
1、背景的颜色
background-color:
取值为：颜色单词
#六位十六进制的颜色值
rgb(red,green,blue)
rgba(red,green,blue,alpha)
alpha====透明度
取值0-1
0透明 1不透明===取值一般都保留一位小数；只对背景颜色其效果不会对文本胡总和是其他的图片起效果
2、背景的图片
background-image:url(图片的路径)
只要插入背景图片必然产生平铺，重复
只不过是根据你图片的大小显示效果不一样而已；图片要比盒子小，会显示出平铺；
图片比盒子要打，显示不出来平铺，并且还会显示不全
3、背景重复
background-repeat:
repeat=======平铺重复，默认值
no-repeat====不平铺
repeat-x=====水平平铺
repeat-Y=====垂直平铺
默认取消平铺之后，背景图片在左上角显示
能否调整一下背景图片的位置呢？
4、 背景图片的位置
background-position:x y
x========水平位置
y========垂直位置、
取值可以为关键词
x=left/right/center
y=top/bottom/center
取值为具体的数值
x=30px
5、背景的固定或者是滚动
固定或滚动==视觉差效果==滚动切换，缓慢
background-attachment:scroll(默认)/fixed
/* 默认背景图片被滚上去了
添加了背景图片的固定之后，背景图属于这个盒子，但是参照物，是相对浏览器屏幕窗口的左上角进行调整的，div存在则图片存在。
*/
background-attachment: fixed：可以通过滚动，实现视觉差效果
背景的尺寸大小
background-size:
1、百分比单位的数值
2、px为单位的数值
以上两种方式能调整背景图片尺寸大小但是容易产生图片被拉伸，变形
3、关键词
cover============覆盖，等比例放大缩小这个图片，不会变形，但是有可能出现被裁剪情况，显示不全，占满对应盒子
contain==========包含，等比例放大缩小这个图片，不会变形，但是有可能出现覆盖不全的情况，盒子会有留白，未占满对应盒子
视觉差：
<style type="text/css">
*{margin:0;padding:0}
div{
height:700px;
/* 取消平铺 */
background-repeat: no-repeat;
/* 背景图片尺寸大小 */
background-size: cover;
/* 背景的固定 */
background-attachment: fixed;
}
.bg1{
/* 插入背景图片 */
background-image: url(img/bg1.png);
}
.bg2{
/* 插入背景图片 */
background-image: url(img/bg2.png);
}
.bg3{
/* 插入背景图片 */
background-image: url(img/bg3.png);
}
</style>
定位
定位的内容：
定位：属性position
取值：好几个
1、静态定位元素的默认文档流，是如何排列就如何排列（一般不用给，默认值）
static;
2、相对定位：相对于自己的位置进行微调;不会让别的元素收到影响
relative
3、绝对定位：考察点（父子元素）
如果子元素添加绝对定位，父元素没有定位的话，则子元素的位置调整是相对于屏幕浏览器左上角进行的位置调整
如果子元素添加绝对定位，父元素有定位(相对)的话，则子元素的位置调整相对于，父元素左上角位置进行调整
absolute
4、固定定位：
fixed；主要实线的功能：固定在屏幕的某一个位置，广告，返回置顶等等
5、粘性定位：
实现滚动吸顶的效果：sticky
并且让页面中的元素进行位置调整，则需要配合偏移属性
top/right/bottom/left;
距离某一个边有多少个像素的距离
/ 盒子中间显示===实现版心居中 /
margin:0 auto;
浮动，float
浮动：漂浮的意思；让布局元素横向显示，水平排列
属性：float
取值：left左浮动,right右浮动,none不浮动（默认值）
浮动带来的影响：
1、给前面的元素浮动，他会脱离文档流，不占页面空间；后面的元素就上去补位置
2、如果给两个盒子都添加左浮动；挨着排列，水平排列，左侧开始
3、如果给两个盒子都添加右浮动，挨着排列，水平排列，右侧开始
Hover（划过效果）
公式：标签/标识:hover->变化情况
翻译：当标签/标识被hover时进行->变化情况
/* 制作滑过效果 */
.bancen>ul>li:hover{
background-color: #004B8B;
}
鼠标滑过的时候变色
/* 鼠标放在盒子上面，让图片变大 */
.red:hover>img{
transform: scale(1.5);变大的尺寸
/* 如果你把过渡属性放在初始状态里面，缓慢的开始，缓慢的结束 */
transition: all linear 2s;}
鼠标滑过后产生金色字体，椭圆背景
.navi>ul>li:hover{
background-repeat: no-repeat;
background-color: rgb(249, 249, 249);
/*特效倒角,属性值大于对应修饰的组件的一半*/
border-radius:15px;
color:gold;
}
滑过变大：如何实现：实现缓慢的变大
过渡属性：一个属性的属性值从一个状态向另一个状态缓慢的发生改变：就是过渡
transition:all linear 5s 2s
all=代表的所有参与过渡的属性
linear匀速发生改变
5s过渡使用的时间
2s==动画的延迟执行时间
弹性盒子（挤压折行->实现不同手机屏幕的适配）
能够实现不同手机屏幕的适配
主要实现了一个内容：通过弹性和改变子元素的排列方式
容器===父元素
弹性盒子的属性是对父元素修饰的
1、给父元素添加对应的弹性盒子属性
display:flex
所有的子元素都横向排列
2、修改子元素的排列方向
flex-direction:row(横向)/column(纵向)
3、调整元素的对其方式
justify-content:flex-start=======开始位置
flex-end=========结束位置
center===========中间位置
space-around=====环绕，左右都有间距，12之间的距离是1和父元素之间距离的2倍
space-between====两端对齐，开始和结尾的元素贴边显示中间距离均分
4、如果你的父元素变成弹性盒，子元素过多的话，盒子不会溢出去，也不会折行
效果叫做挤压效果；
折行属性
flex-wrap:wrap
或者overflow：auto实现滚动效果
/* 隐藏掉滚动条 */
::-webkit-scrollbar{
display: none;
}
项目===子元素
1、flex:1
/* 取消元素自带的内边距和外边距 */
*{margin:0;padding:0}
/* 父元素 */
.red{
width:500px;
height: 500px;
border:5px solid gray;
/* 中间显示 */
margin:0 auto;
margin-top:50px;
/* 父元素变成弹性和 */
display:flex;
折行属性
flex-wrap: wrap;
/* 调整对其方式 */
justify-content: space-between
}
/* 如何让3个p标签的宽度一致
给子元素添加flex:1
给两个固定的宽度，另外剩下的一个占剩余宽度的所有/占剩余高度的所有
flex:1
*/
这里的flex：a flex：b flex：c，根据a🅱️c比例来分配空白的区域
扫一扫
2380
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
