前端学习记录(大一) - 第二周
文章目录
本周学习进度
本周我开始学习css的基础知识,以及进一步对html进行更加深入的学习。html部分主要学习了更多的元素以及他们对应的语义以及css属性。css部分主要学习了常见的css属性,知道如何给网页添加样式,还在此基础上进行了盒模型,浮动,定位等的学习,并进行了简单的练习,实现了网页中二级菜单,弹出层,轮播图等的静态效果的实现
成果展示
二级菜单
效果图
代码部分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.clearfix::after{
content: "";
display: block;
clear: both;
}
.header{
background-color: #e3e4e5;
color: #999999;
height: 40px;
line-height: 40px;
}
.header .topnav{
text-align: center;
}
a{
text-decoration: none;
color: inherit;
}
li{
list-style-type: none;
}
.header .topnav>li{
/* float: left; */
display: inline-block;
margin: 0 20px;
width: 150px;
text-align: center;
height: 40px;
box-sizing: border-box;
/* background-color: #008c8c; */
position: relative;
}
.header .topnav>li .submenu{
text-align: left;
line-height: 1.5;
width: 300px;
display: none;
border: 2px solid #cccccc;
box-sizing: border-box;
position: absolute;
right: -2px;
background-color: white;
}
.header .topnav>li:hover{
background-color: white;
border: 2px solid #cccccc;
border-bottom: none;
line-height: 36px;
}
.header .topnav>li:hover .submenu{
display: block;
}
.header .topnav>li:hover::after{
content: "";
position: absolute;
width: 100%;
height: 5px;
background-color:white;
bottom: 0mm;
left: 0;
}
</style>
</head>
<body>
<header class="header">
<ul class="topnav clearfix">
<li><a href="">Lorem.</a></li>
<li><a href="">Modi.</a></li>
<li><a href="">Ullam!</a></li>
<li>
<a href="">Aperiam.</a>
<div class="submenu">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos, rem! Veritatis quasi excepturi quidem vel fugit optio suscipit maxime dignissimos rem ullam, rerum quis natus sunt ducimus commodi quos quibusdam!
</div>
</li>
<li><a href="">Porro.</a></li>
</ul>
</header>
</body>
</html>
弹出窗口
效果图
代码部分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.main img{
width: 100%;
}
.modal{
position: fixed;
width: 100%;
height: 100%;
left: 0;
top: 0;
background-color: rgba(0,0,0,.5)
}
.modal .container{
width: 404px;
height: 512px;
background-color: white;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
}
.modal .container .close{
width: 30px;
height: 30px;
background-color: red;
border-radius: 50%;
color: white;
text-align: center;
line-height: 30px;
position: absolute;
right: -15px;
top: -15px;
border: 2px solid #ffffff;
cursor: pointer;
}
</style>
</head>
<body>
<div class="main">
<img src="./桌面.png" alt="">
</div>
<!-- 遮罩层 -->
<div class="modal">
<div class="container">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Blanditiis dolores ut, eos consequatur fuga vero explicabo dolorem illum itaque cupiditate hic officia earum quas debitis repellat voluptas expedita porro. Sit!
<div class="close">X</div>
</div>
</div>
</body>
</html>
轮播图
效果图
代码部分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
h2{
margin: 0;
}
ul{
text-decoration: none;
list-style-type: none;
margin: 0;
}
.banner{
width: 520px;
height: 304px;
margin: 1em auto;
overflow: hidden;
position: relative;
}
.banner .imgs{
width: 1560px;
height: 304px;
}
.banner .imgs img{
width: 520px;
height: 304px;
}
.banner .imgs a{
float: left;
}
.banner .left,
.banner .right{
position: absolute;
width: 50px;
height: 50px;
border-radius: 50%;
top: 0;
bottom: 0;
margin: auto;
font-size: 3em;
text-align: center;
line-height: 50px;
cursor: pointer;
}
.banner .left{
left: 20px;
}
.banner .right{
right: 20px;
}
.banner .left:hover,
.banner .right:hover{
color: red;
background-color: white;
}
.banner .modal{
width: 100%;
height: 40px;
background-color: rgba(0,0,0,.3);
position: absolute;
left: 0;
bottom: 0;
color: white;
line-height: 40px;
padding: 0 20px;
box-sizing: border-box;
}
.banner .modal .title{
float: left;
}
.banner .modal .dots{
float: right;
}
.banner .modal .dots li{
width: 10px;
height: 10px;
background-color: #ccc;
display: inline-block;
margin: 2px;
border-radius: 50%;
cursor: pointer;
}
.banner .modal .dots li:hover{
background-color: #369;
}
</style>
</head>
<body>
<div class="banner">
<div class="imgs">
<a href=""><img src="./桌面.png" alt=""></a>
<a href=""><img src="./桌面.png" alt=""></a>
<a href=""><img src="./桌面.png" alt=""></a>
</div>
<div class="left"><</div>
<div class="right">></div>
<div class="modal">
<div class="title">
<h2>这是一个标题</h2>
</div>
<div class="dots">
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
</div>
</body>
</html>
学习笔记
CSS部分
层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。
CSS 能够对网页中元素位置的排版进行像素级精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力。
css书写格式
css规则 = 选择器 + 声明块
例如:
h1{
color:red;
background-color: lightblue;
text-align: center;
}
其中,大括号外面的部分被称为选择器,大括号和大括号里面的部分被称为声明块
css中常用的样式
样式名 | 作用 |
---|---|
color | 改变元素内部的文字颜色 |
background-color | 改变元素背景颜色 |
font-size | 改变元素内部文字的尺寸大小 |
font-weight | 改变文字粗细程度,可以取预设值,可以取数字 |
font-family | 改变文字(字体)类型 |
font-style | 改变字体样式,通常用它设置斜体 |
text-decoration | 文本修饰,给文本加线 |
text-indent | 首行文本缩进 |
line-height | 改变每行文本的高度,该值越大,每行文本的距离越大 |
width | 改变宽度 |
height | 改变高度 |
letter-spacing | 改变文字间隙 |
text-align | 设置元素内部文字的水平排列方式 |
color属性的取值
- rgb表示法
rgb(0,255,0) - hex表示法
#000000(即用16进制来表示红绿蓝三色通道的取值)
文字类型的表示
- 必须用户计算机中存在的字体才会有效
- 使用多个字体,以匹配不同环境
div{
font-family:字体1,字体2,字体3,sans-serif
}
选择器
-
ID选择器
-
元素选择器
-
类选择器
-
通配符选择器
*, 选中所有元素
-
属性选择器(根据属性名和属性值选择元素)
[href="https://baidu.com/"]{
color: red;
}
<a href="https://baidu.com/">百度</a>
[class~="b"]
{
color: saddlebrown;
}
<a class="a b c d" href="https://taobao.com/">淘宝</a>
和类选择器类似
[atter^=value] 属性值以“value”开头的元素
[atter$=value] 属性值以“value”结尾的元素
[atter*=value] 属性值包含“value”的元素
-
伪类选择器
选择某些元素的某种状态
hover 鼠标悬停的状态
/* 表示选中鼠标悬停状态的a元素 */
a:hover{
color: green;
}
active 激活状态,鼠标按下状态
/* 鼠标按下时的a元素 */
a:active{
color: white;
}
link:超链接未访问时的状态
visited:超链接访问过后的状态
- 书写顺序 link visited hover active4
-
伪元素选择器
before
after
span::before{
content: "《";
color: red;
}
span::after{
content: "》";
color: red;
}
选择器的组合
- 并且(直接写到一起)
- 后代元素 —— 空格
- 子元素 —— >
- 相邻的兄弟元素(下一个) —— +
- 后边出现的所有兄弟元素 ~
选择器的并列
- 多个选择器,用逗号分隔
层叠
声明冲突:同一个样式,多次应用到同一个元素,层叠就是解决声明冲突的过程,浏览器自动处理(权重计算)
-
比较重要性
重要性从高到低:
作者样式表:开发者书写的样式
- 作者样式表中的!important样式
- 作者样式表中的普通样式
- 浏览器默认样式表中的样式
-
比较特殊性
看选择器
总体规则:选择器选择的范围越窄,越特殊
具体规则:通过选择器计算出一个四位数(xxxx)- 千位:如果是内联样式,记1,否则记0
- 百位:等于选择器中所有id选择器的数量
- 十位:等于选择器中所有类选择器、属性选择器、伪类选择器的数量
- 个位:等于选择器中所有元素选择器、伪元素选择器的数量
-
比较源次序
代码书写靠后的胜出
应用
-
重置样式表
书写一些作者样式,覆盖浏览器的默认样式
重置样式表 -> 浏览器的默认样式
常见的重置样式表:normalize.css、reset.css、myer.css
继承
子元素会继承父元素的某些CSS属性
通常,跟文字内容相关的属性都能被继承
属性值的计算过程
一个元素一个元素依次渲染,顺序按照页面文档的树形目录结构进行
渲染每个元素的前提条件,元素的所有CSS属性必须有值
一个元素,从所有的属性都没有值,到所有的属性都有值,这个计算过程,叫做属性值计算过程
-
确定声明值
参考样式表中没有冲突的声明,作为CSS属性值
-
层叠冲突:
对样式表中有冲突的声明使用层叠规则,确定CSS属性值
-
使用继承
对仍然没有值的属性,若可以继承,则继承父元素的值
-
使用默认值
对仍然没有值的属性,使用默认值
-
两个特殊的CSS取值
-
inherit(表示强制继承)
将继承的步骤提前,可以将一些不能继承的属性强制继承
-
initial
初始值,将该属性设置为默认值
-
盒模型
盒子类型
- 行盒,display属性等于inline的元素
- 块盒,display属性等于block的元素
行盒在页面中不换行,块盒独占一行
dispaly属性默认值为inline
浏览器默认样式表中的块盒:容器元素、h1~h6、p
常见的行盒:span、a、img、video、audio
盒子的组成部分
无论是行盒还是块盒,都有下面几个部分组成,从内到外分别是:
-
内容 content
width、height,设置的是盒子内容的宽高
内容部分通常叫做整个盒子的内容盒 content-box
-
填充(内边距) padding
盒子边框到盒子内容的距离
padding-left、padding-right、padding-top、padding-bottom
padding:简写属性
padding:上 右 下 左/或padding:上下 左右(上下和左右分别相同时)/或padding:上下左右(四个值都相同时)
填充区+内容区=填充盒 padding-box
-
边框 border
边框 = 边框样式 + 边框宽度 + 边框颜色
- 边框样式:border-style
- 边框宽度:border-width
- 边框颜色:border-color
边框颜色默认和字体颜色相同
边框+填充区+内容区 = 边框盒 border-box
-
外边框 margin
边框到其他盒子的距离
视觉化格式模型
视觉格式化模型,大体上将页面中盒子的排列分为三种方式:
- 常规流
- 浮动
- 定位
常规流
所有元素,默认情况下,都属于常规流布局
总体规则:块行独占一行,行盒水平依次排列
包含块(containing block):每个盒子都有它的包含块,包含快决定了盒子的排列区域
绝大部分情况下:盒子的包含块,为其父元素的内容盒
块盒
-
每个块盒的总宽度,必须刚好等于包含块的宽度
宽度的默认值是auto
margin的取值也可以是auto,默认是0
auto:将剩余空间吸收掉
width吸收能力强于margin
若宽度,边框,内边距,外边距计算后,仍然有剩余空间,该剩余空间被margin-right全部吸收
在常规流中块盒在其包含块中居中,可以定宽,然后左右margin设置为outo
写法
margin: 0 auto;
-
每个块盒垂直方向上的auto值
hight:auto,适应内容的高度
margin:表示0
-
百分比取值
padding,宽高,margin可以取值为百分比
所有百分比相对于包含块的宽度
高度的百分比:
- 包含块的高度取决于子元素的高度,设置百分比无效
- 包含块的高度不取决于子元素的高度,百分比相对与父元素高度
-
上下外边距的合并
两个常规流块盒,上下外边距相邻,会进行合并
两个外边距取最大值
浮动
-
应用场景
- 文字环绕
- 横向排列
-
浮动的基本特点
修改float属性值为:
- left:左浮动,元素靠左靠上排列
- right:右浮动,元素靠右靠上排列
默认值为none
- 当一个元素浮动后,元素必定为块盒(更改dispaly属性为block)
- 浮动元素的包含块,和常规流一样,为父元素的内容盒
-
盒子尺寸
- 宽度为auto时,适应内容宽度
- 高度为auto时,与常规流一致,适应内容的高度
- margin为auto时,为0
- 边框,内边距,百分比设置与常规流一样
-
盒子排列
- 左浮动的盒子靠上靠左排列
- 右浮动的盒子靠上靠右排列
- 浮动盒子在包含块中排列时,会避开常规流盒子
- 常规流块盒在排列时无视浮动盒子
- 行盒在排列时,会避开浮动盒子
- 外边距合并不会发生
如果文字没有在行盒中,浏览器会自动生成一个行盒包含文字,该行盒叫做匿名行盒
-
高度坍塌
高度坍塌的根源:常规流盒子的自动高度,在计算时,不会考虑浮动盒子
清除浮动,涉及css属性:clear
- 默认值:none
- left:清除左浮动,该元素必须出现在前面所有左浮动盒子的下方
- right:清除右浮动,该元素必须出现在前面所有右浮动盒子的下方
- both:清除左右浮动,该元素必须出现在前面所有浮动盒子的下方
-
处理高度坍塌的方案
.clearfix::after{
content:"";
display:block;
clear:both;
}
定位
定位:手动控制元素在包含块中的精准位置
涉及的css属性:position
- 默认值:static,静态定位(不定位)
- relative:相对定位
- absolute:绝对定位
- fixed:固定定位
一个元素,只要position的取值不是static,认为该元素是一个定位元素
定位元素会脱离文档流(相对定位除外)
一个脱离了文档流的元素:
1. 文档流中的元素摆放时,会忽略脱离了文档流的元素
2. 文档流中元素自动计算高度时,会忽略脱离了文档流的元素
-
相对定位(relative)
不会导致元素脱离文档流,只是让元素在原来位置上进行偏移
可以通过四个css属性对其位置设置
- left
- right
- top
- bottom
盒子的偏移不会对其他盒子造成任何影响
-
绝对定位(absolute)
- 宽高为auto,适应内容
- 包含块变化:找祖先元素中第一个定位元素,该元素的填充盒为其包含块,若找不到,则它的包含块为整个网页(初始化包含块)
-
固定定位(fixed)
其他情况和绝对定位完全一样
包含块不同:固定定位包含块为视口(浏览器的可视窗口)
-
定位下的居中
- 定宽(高)
- 将左右 (上下) 距离设置为0
- 将左右 (上下) margin设置为auto
绝对定位和固定定位中,margin为auto时,会自动吸收剩余空间
-
多个定位元素重叠时
堆叠上下文
设置z-index,通常情况下,该值越大,越靠近用户
只有定位元素设置z-index有效
z-index可以是负数,如果是负数,则遇到常规流元素,浮动元素,则会被其覆盖
-
补充
- 绝对定位,固定定位元素一定是块盒
- 绝对定位,固定定位元素一定不是浮动
- 没有外边距合并
HTML部分
iframe元素
通常用于在一个网页中嵌入另一个网页
iframe 是一个可替换元素,它有以下鸡哥特点
- 通常是行盒
- 通常显示的内容取决于元素的属性
- css不能完全控制其中的样式
- 具有行块盒的特点
总结(下周任务)
下周我会进行更多对所学内容的综合性练习,并且继续学习CSS和HTML