hhHTML5，CSS3，学习笔记
html笔记
1.html的基本格式
<!--文档声明，声明当前网页的版本-->
<!DOCTYPE html>
<!--html的根标签,网页中的所有内容都要写在这里面-->
<html>
<!--网页的头部，不会再网页中出现，帮助浏览器或搜索引擎解析网页-->
<head>
<!--meat标签，用来设置网页的元数据，这里用来设置网页的字符集，避免乱码问题-->
<meta charset="utf-8">
<!--title里的内容显示在浏览器的标题栏上，搜索引擎会根据title中的内容来判断网页的主要内容-->
<title>网页的标题</title>
</head>
<!--表示网页的主体，网页中的所有的可见内容都应该写在body里-->
<body>
<h1>第一个网页</h1>
<h2>马保国</h2>
<h3>松果糖豆闪电鞭</h3>
</body>
</html>
2.标签
常用的标签，例如：
<meta name="keywords" content="马保国,混元形意太极门掌门人,武德">
<!-- keywords表示网站关键字。多个关键字之间使用英文 "," 隔开 -->
<meta name="description" content="这个网站针不戳">
<!-- description用于指定网站的描述 -->
<hgroup>
<h1> 马保国大战英国大力士 </h1>
<h2> 折手指头 </h2>
</hgroup>
<!-- hgroup标签用来为标题分组，可以把一组相关的标题同是放到hgroup里 -->
<p>在p标签中的内容表示一个段落</p>
<br>表示换行
语义化标签
<p>
住在山里<em>针不戳</em>
</p>
<!--
em标签用于语气的加重
在页面中不会独占一行的元素叫做行内元素
-->
<p>
住在山里<strong>针不戳</strong>
</p>
<!-- strong表示强调主要的内容 -->
<blockquote>
你找周树人，关我鲁迅什么事呢？
</blockquote>
<!-- blockquote表示长引用 -->
<header></header>
<!-- header表示网页的头部 -->
<main></main>
<!-- main表示网页的主体
一个网页只有一个main
-->
<footer></footer>
<!-- footer表示网页的底部 -->
<nav></nav>
<!-- nav表示网页中的导航 -->
<aside></aside>
<!-- aside表示和主体相关的其他内容(侧边栏) -->
<article></article>
<!-- 表示一个独立的文章 -->
<section></section>
<!-- 表示一个独立的区块，上面的标签不能使用时用section>
块元素&行内元素
1.块元素：对网页进行布局。
2.行内元素：行内元素主要用来包裹元素。
一般情况会在块元素中放行内元素。而不会在行内元素中放块元素。
<div>
</div>
<!-- div没有语义,就用来表示一个区块，目前来讲div还是主要的布局元素。-->
<span>
</span>
<!-- 没有语义，是行内元素，一般用于网页中选择文字 -->
3.列表
html中的列表一共有三种
1.有序列表
有序列表，使用ul标签来创建无序列表
使用li标签表示列表项
<ol>
<li>结构</li>
<li>表现</li>
<li>行为</li>
</ol>
2.无序列表
有序列表，使用ul标签来创建无序列表
使用li标签表示列表项
<ul>
<li>结构</li>
<li>表现</li>
<li>行为</li>
</ul>
3.定义列表
使用dl标签来创建定义列表
使用dt来定义内容
使用dd来对内容进行解释说明
<dl>
<dt>结构</dt>
<dd>结构表示网页的结构，结构用来规定网页哪里是标题，哪里是段落。</dd>
</dl>
4.超链接
超链接可以从一个页面跳转到其他页面。
超链接也是一个行内元素。
在中可以嵌套任何元素，除了它自身。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>超链接</title>
</head>
<body>
<a href="https://www.bilibili.com">进入新世界</a>
<br>
<a href="https://www.bilibili.com/video/BV14t411J7bR?from=search&seid=11879629248292825137">马老师松果糖豆闪电鞭在线教学</a>
</body>
</html>
1.相对路径
当需要跳转到一个服务器（项目）内部页面时，一般都会使用相对路径
相对路径都睡使用 . 或 … 开头 ，./，…/可以不写，如果不写，就默认为./。
./ 表示当前文件所在的目录。
…/ 表示当前文件所在目录的上级。
2.超链接的其他用法
打开新的标签
target属性，用来指定链接打开的位置，是可选值。
_self 默认值，在当前页面中打开链接。不写默认为self。
_blank 在一个新的页面中打开超链接。
<a href="https://www.bilbil.com"target="_self">超链接</a>
<!--与不写无区别-->
<a href="https://www.bilbil.com"target="_blank">超链接</a>
1.回到顶部
直接把href的属性值设置为“#”
<a href="#">超链接返回顶部</a>
2.到网页的任意位置
给a标签加特殊的标记（id属性)
每一个标签都可以添加id属性，同一个页面中不能出现相同的id属性。
<a href="#abc">点击这里</a>
<a id="abc"href="#">到这个超链接的位置位置</a>
<a href="#def"></a>
<p id="def">
到这个段落的位置
</p>
5.图片标签
用于网页中引入一个外部图片。使用img标签，
src 属性指定的是外部图片的路径。（路径规则和超链接是一样的）
alt是对图片的描述
widht 图片的宽度
hight 图片的高度
如果只修改一个 ，图片会等比例缩小或放大
<img widht="200"src="002.png" alt="anmi大师的画">
6.内联框架
在一个页面内引用另一个页面
src里是要引用的链接
frameborder=“0”，表示内联框架的边框，0无，1有
<iframe src="hptts://bilibili.com"width="800"hight="600" frameborder="0"></iframe>
7.音视频播放
音视频引入时默认为不可操作
1.加上“controls”，用户可控制播放。、
2.autoplay控制在打开页面时是否自动播放。(一般浏览器不会自动播放)
3.loop控制是否循环播放。
audio标签用来在页面中引入外部音频文件。
<audio src=" " controls></audio>
<audio src=" " controls autoplay></audio> <!-- 可控，自动播放-->
video标签
<video controls>
<source scr="">
</video>
css笔记
1.css语法
1.内部表样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!--
内部样式表
所有将样式编写到head中的style标签里，通过css选择器来选中元素并将其改为各种样式，可以同时设置多个标签的样式，
并且修改时只要修改一次就能全部应用
-->
<style>
p{
color: aqua;
font-size: 50px;
}
</style>
</head>
<body>
<p>aquaSUKI</p>
</body>
</html>
2.外部表样式
可以将css编写到一个外部的css文件，然后通过link标签来引入外部的css文件。
只要想使用这种样式都可以引入，使样式可以在不同页面之间反复使用。
<link real="stylesheet" href="./style.css">
<!-- ./style.css 为外部css样式表的链接。-->
p{
color: aqua;
font-size: 50px;
}
3.css选择器
css的注释格式
p为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>
</head>
<body>
<style>
/* css的注释格式
p为css选择器
通过选择器可以选定指定元素
通过声明块来指定元素的样式，声明块由一个一个 的声明组成
一个样式名对应一个值，名和值之间用冒号连接。
*/
p{
color: aqua;
font-size: 40px;
}
</style>
<p>针不戳</p>
</body>
</html>
2.选择器
1.常用选择器
元素选择器
id选择器
class选择器
通配选择器
<!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>
/*
将所有的段落设置为红色
元素选择器
作用，根据标签名选中指定元素
语法，标签名（）
例子： p{}，h1{},div{}
*/
p{
color: aqua;
}
/*
id选择器
根据元素的id选择元素
语法；#id属性值{}
例子； #box{}，#red{}
不能重复！！！！
*/
#red{
color: red;
}
/*
将两行改变样式
类选择器
作用，根据class属性值选中一组元素，
语法， .class属性值
class可以重复！！！！
*/
.blue{
color: blue;
}
/*
通配选择器
作用：选中页面中的所有元素
语法 *
例如
*{
color: red;
}
*/
</style>
</head>
<body>
<h1>针不戳</h1>
<p id="red">住在山里针不戳</p>
<p>住在山里针不戳</p>
<p class="blue">住在山里针不戳</p>
<p class="blue">住在山里针不戳</p>
</body>
</html>
2.复合选择器
1.交集选择器：
注意：交集选择器中如果有元素选择器，必须以元素选择器开头
<!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> /* 将class为aqua的div字体大小设置为40px ,颜色改为aqua*/ /* 交集选择器 作用，选中复合多个条件的元素 语法：选择器1选择器2选择器3{} */ div.aqua{ color: aqua; font-size: 40px; } </style> </head> <body> <div class="aqua"> 我是div </div> <p class="aqua">我是p</p> </body> </html>
2.选择器分组：（并集选择器）
选择器1，选择器2{ }
<style> h1,span{ ........ } </style>
3.关系选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>关系选择器</title>
<style>
/*
子元素选择器
作用，选择指定父元素的指定子元素
语法：父元素>子元素
后代选择器
作用：选中指定元素内的所有后代元素
语法：祖先 后代
div span{
color aqua；
}
选择下一个兄弟 兄的元素：拥有相同父元素的元素是兄弟元素
语法：前一个+后一个
*/
/* 将p中的span元素改为aqua色 */
p>span{
color: aqua;
}
</style>
</head>
<body>
<!--
div中的p和span为兄弟元素
-->
<div>
<p>
<span>
我是p元素中的span
</span>
</p>
<span>我是div中的span</span>
</div>
<span>我是div外的span</span>
</body>
</html>
4.元素选择器
<!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>
/*
属性选择器
选中含有指定属性的元素
[属性名]
选中含有指定属性和属性值的元素
[属性名=属性值]
*/
p[title]{
color: aqua;
}
p[title=efg]{
color: brown;
}
</style>
</head>
<body>
<p title="abc">轻音少女</p>
<p title>京阿尼</p>
<p title="efg">mio</p>
<p>yui</p>
</body>
</html>
效果图：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ZSTc6Rao-1606631470500)(C:\Users\19167\Desktop\098.png)]
5.伪类选择器
伪类：不存在的类，特殊的类。
伪类用来描述一个元素的特殊状态
比如：第一个子元素，被点击的元素，鼠标移入的元素。
伪类一般情况下都是：开头。
1.根据所有排序：
<style>
ul>li:first-child {
color: aqua;
}/* 第一个子元素 */
ul>li:last-child{
color: aqua;
} /*最后一个子元素 */
ul>li:nth-child(x){
color: aqua;
}/* 第x个子元素，当x为n时，表示全部子元素，2n（even）选中偶数位的元素，2n+1（odd）奇数，*/
</style>
2.同类型元素中排序
只找相同类型
<style>
ul>li:first-of-type{
color: aqua;
}
ul>li:last-of-type{
color: aqua;
}
ul>li:nth-of-type(){
color: aqua;
}
</style>
3.否定伪类
：not（）
将符合条件的元素从选择器中剔除。
<style>
ul>li:not(3){
color: aqua;
} /* 只有第三个元素不变为aqua色 */
</style>
4.超链接的伪类
<style>
/*
1.没访问过的链接(a:link)
2.访问过的链接 (a:visited)
3.鼠标移入 （a:hover)
4.鼠标点击 （a:active)
*/
a:link{
color: aqua;
}
a:visited{
color: aquamarine;
}
a:hover{
color: rgb(6, 104, 11);
font-size: 40px;
}
a:active{
color: crimson;
}
</style>
5.伪元素选择器
伪元素，表示页面中一些特殊并不真实存在的元素。
<style>
/*
伪元素用 :: 开头。
*/
p::first-letter{
font-size: 50px;
}/* 将p中第一个元素变大 */
p::first-line{
background-color: cyan;
}/* 第一行 */
p::selection{
color: darkmagenta;
}
/* 改变选中元素的样式 */
</style>
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-cflo5xNz-1606631470504)(C:\Users\19167\Desktop\QQ截图20201116202747.png)]
6.选择器的权重
内联样式>id选择器>类和伪类选择器>元素选择器>通配选择器>继承的样式
通配选择器优先级为零，继承的样式没有优先级
3.继承
1.样式的继承
我们为一个元素设置样式，样式也会应用到他的后代元素上。
发生在祖先和后代中
继承的设计是为了方便我们的开发，利用继承将一些通用样式统一设置到共同的祖先元素上，这样只需设置一次，即可让所有元素都是该样式。
4.em与rem。
1.em
em是相对于元素的字体大小来计算的。
1em = 1font - size；
em会根据字体的大小而改变。
2.rem
相对于根元素（html）的字体大小来计算。
5.RGB值
在css中，直接使用颜色名非常不方便
RGB值通过三种颜色的不同浓度来调色
每一种颜色的范围在0~255之间。
<style>
.box1{
width: 100px;
height: 100px;
background-color: rgb(150, 200, 100);
}
</style>
rgba最后一个值为透明度
1表示完全不透明
0表示完全透明
.5表示半透明
<style>
.box1{
width: 100px;
height: 100px;
background-color: rgba(150, 200, 100,0);
}
</style>
3，css中的layout
1.文档流
网页是一层落着一层，用户看到的是最顶层。
这些层中最底下的一层叫做文档。
我们所创建的元素都是默认在文档流里
元素主要有两个状态。
1.在文档中：
特点：
1.块元素：
1.块元素在网页中独占一行。
2.默认宽度是父元素的全部。默认高度为是被子元素撑开。
2.行内元素：
1.不会独占一行，自左向右水平排列。如果一行之中不能容纳下搜有元素，则会换行。
2.行内元素的默认宽度和高度都会被内容分开。
2.脱离文档：
2.盒模型（box model）
css将页面中的所有元素都设置为矩形的盒子。
将元素设置为矩形的盒子后，对页面的布局就变成将不同大小的盒子摆放到页面的指定位置。
每一个盒子都有以下几个部分：
1：内容区
2：边框
3：内边距
4：外边距
1.盒子模型-边框
<style>
/*
内容区，元素中的所有子元素和文本内容都在内容区中排列。
内容区的大小由width和height决定。
*/
.box1{
width: 100px;
height: 100px;
background-color: aqua;
/*
边框，边框属于盒子边缘，边框里边属于盒子内部，除了边界就是盒子外部
边框设置至少要设置三处。
边框的宽度 border-widht
边框的颜色 border-color
边框的样式 border-style
boreder-width可以指定边框四个方向的宽度
boreder-width：10px 20px 30px 40px；
分别为：上，右，下，左。
boreder-color可以用来指定四个边框的颜色
规则和boreder-width是一样的。
border-style 指定边框的样式。
*/
border-width: 10px;
border-style: solid;
border-color:orange;
border-radius: 10px;
}
</style>
简写
<style>
.abc{
background-color: aqua;
width: 100px;
height: 100px;
border: solid 10px orange;
}
</style>
2.盒子模型-内边距
<style>
.abc{
background-color: aqua;
width: 100px;
height: 100px;
border: solid 10px orange;
/*
内容区和边框之间的距离叫做内边距。
一共有四个方向的内边距。
padding-top
padding-right
padding-bottom
padding-left
内边距的设置会影响到盒子的大小。
背景颜色会延伸到内边距上。
盒子的可见框的大小是由内容区，内边距和边框共同决定的。
在计算盒子大小时，需要将这三个区域一起计算。
*/
padding-top: 50px;
padding-bottom: 50px;
padding-right: 50px;
padding-left: 50px;
}
.bcd{
width: 100%;
height: 100%;
background-color: papayawhip;
}
</style>
3.盒子模型-外边距
外边距不会影响盒子可见矿的大小。
但是会影响盒子的位置。
一共有四个方向的外边距。
<style>
.box1{
width: 100px;
height: 100px;
background-color: aqua;
border: solid 10px orange; /*
margin-top
margin-right
margin-bottom
margin-left
元素在页面中按照自左向右排列。
所以，默认情况下，如果设置的是左或上外边距，元素将会移动。
如果设置下或右外边距，会移动其他元素。
margin也可以是负值
如果是负值，则会向相反的方向走。
*/
margin-top: 100px;
margin-left: 100px;
}
</style>
4.盒子模型-水平方向的布局
元素水平方向的布局，
元素在父元素中水平方向的位置右由以下几个属性共同决定。
margin-left
border-left
padding-left
width
padding-right
border-right
margin-right
一个元素在其父元素中，他的水平布局必须要满足
5.盒子的大小
默认情况下，盒子的可见框的大小由盒子的内容区，内边距和边框共同决定。
<!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>
.box1{
width: 100px;
height: 100px;
background-color: aqua;
padding: 10px;
border: 10px red solid;
/* 用来设置盒子尺寸的计算方式 */
box-sizing: content-box;
/* content-box 默认值，宽度和高度用来设置内容区的大小 */
box-sizing: border-box;
/* border-box 宽度的高度用来设置整个盒子可见框的大小 */
}
</style>
</head>
<body>
<div class="box1"></div>
</body>
</html>
4.浏览器的默认样式
在默认情况下
浏览器会为一些元素设置默认样式
默认样式会影响浏览器的页面布局。
通常情况下在写网页时要去除网页的默认样式
重置样式表
专门对浏览器的样式进行重置
reset.css 直接去除浏览器的默认样式
normalize.css 对默认样式进行统一
例如：
<link rel="stylesheet" href="./reset.css">
5.布局练习
1.京东图片列表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>图片列表</title>
<link rel="stylesheet" href="./reset.css">
<style>
body{
background-color: rgb(210, 214, 214);
}
/* 设置外部ul的样式 */
.img-list{
/* 设置ul的宽度 */
width: 190px;
/* 设置ul的高度 */
height: 470px;
/* 裁剪溢出的内容 */
overflow: hidden;
/* 使ul居中 */
margin: 50px auto;
background-color: rgb(247, 245, 243);
}
/* 设置li的位置 */
.img-list li{
margin-bottom: 9px;
}
/* 设置图片的大小 */
.img-list img{
width: 100%;
}
</style>
</head>
<body>
<ul class="img-list">
<li>
<a href="">
<img src="./1.png" alt="">
</a>
</li>
<li>
<a href="">
<img src="./2.png" alt="">
</a>
</li>
<li>
<a href="">
<img src="./3.png" alt="">
</a>
</li>
</ul>
</body>
</html>
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xIAW19TP-1606631470507)(C:\Users\19167\Desktop\QQ截图20201122190511.png)]
2.京东左侧导航栏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=il, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./reset.css">
<style>
body{
background-color: rgb(210, 214, 214);
}
.left-nav{
width: 190px;
height: 300px;
background-color: rgb(248, 247, 247);
padding-top: 15px;
padding-bottom: 15px;
margin-top: 150px;
margin-left: 100px;
}
.left-nav div:hover{
background-color: rgb(235, 235, 235);
}
.left-nav div:hover{color: rgb(245, 187, 187);}
.left-nav span:hover{color: rgb(245, 187, 187);}
.left-nav div{
height: 28px;
padding-left: 15px;
}
</style>
</head>
<body>
<nav class="left-nav">
<a href="https://jiadian.jd.com/">
<div>家用电器</div>
</a>
<div>
<a href="https://shouji.jd.com/">
<span>手机</span>
</a>
<span>/</span>
<a href="https://wt.jd.com/">
<span>营运商</span>
</a>
<span>/</span>
<a href="https://shuma.jd.com/">
<span>数码</span>
</a>
</div>
<div>
<a href="https://diannao.jd.com/">
<span>电脑</span>
</a>
<span>/</span>
<a href="https://bg.jd.com/">
<span>办公</span>
</a>
</div>
<div>
<a href="https://channel.jd.com/home.html">
<span>家居</span>
</a>
<span>/</span>
<a href="https://channel.jd.com/furniture">
<span>家具</span>
</a>
</div>
</nav>
</body>
</html>
![QQ截图20201123144509](C:\Users\19167\Desktop\布局练习\QQ截图20201123144509.pn
6.浮动
浮动可以使一个元素向他的父元素的左侧或右侧移动
使用 float 属性来设置元素的浮动
none 元素不浮动
left 元素向左移动
right 。。。。。
注意，元素设置浮动以后，水平布局的等式就不必成立
1.浮动的特点
1，浮动元素会脱离文档流，不在占用文档流中的位置
2.浮动元素向左或向右移动时，不会超过它前面的浮动元素
浮动的主要作用，让页面中的元素可以水平方向的布局
浮动元素不会盖住文字，文字可以自动环绕在其周围。
元素设置浮动，从文档流脱离后，元素的一些特点也会发生变化
2.脱离文档流特点：
1.不在独占一行
2.宽度和高度都被内容撑开
3，行内元素设置浮动后，会变为块元素，可设置宽
3高度塌陷和BFC
在浮动布局中，父元素的高度默认是被子元素撑开。
当子元素浮动后，其会完全脱离文档流，资源苏会从文档流中脱离。
将无法撑起父元素，导致父元素高度丢失。
BFC是一个css钟的一个隐含属性，可以为一个元素开启BFC
开启BFC后该元素会变为一个独立的布局区域。
元素开启BFC的特点：
1：开启bfc元素，不会被浮动元素所覆盖。
2：子元素和父元素的外边距不会重叠。
3：开启bfc的元素可以包含浮动元素。
开启bfc：
1：设置元素的浮动
2：将元素设置为行内块元素
3.将元素设置之为overflow设置为一个visible值 （副作用小）
4.clear
1.clear可以清楚浮动元素对当前元素产生的影响。
可选值：
left：清楚左侧㐑元素的当前元素的影响
right： 右侧。
原理：设置清楚浮动以后，浏览器会自动为元素添加一个上外边距。
以使其位置不收其他元素影响。
使用after
7.定位
定位是一种更加高级的布局手段
通过定位，可以把元素摆放到页面的任意位置
使用position标签来设置定位
可选值：
static默认值。元素是静止的，没有开启定位。
relative 开启元素的相对定位
absolute：开启元素的绝对定位
fixed：开启元素的固定定位
sticky：开启元素的粘滞定位
1.相对定位
当元素的position属性值设置为relative时则开启乐元素的相对定位。
1.相对定位的特点：
1.元素开启相对定位以后如果不设值任何的偏移量，元素不会发生任何变化
2.相对定位是参照与元素在文档流中的位置来进行定位的。
3.想的定位会提高元素的层级。
4.相对定位不会使元素脱离文档流。
2.偏移量（ofsite）
当元素开启了定位以后，可以通过偏移量来设置元素的位置。
1、top
top是定位元素和定位位置上边的距离
2、bottom
bottom是定位元素和定位位置下边的距离
3、letf
eft是定位元素和定位位置右边的距离
4、right
right是定位元素和定位位置左边的距离
<!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>
body{
font-size: 30px;
}
.box1{
width: 100px;
height: 100px;
background-color: aqua;
}
.box2{
width: 100px;
height: 100px;
background-color :brown;
position: relative;
left: 100px;
bottom: 100px;
}
.box3{
width: 100px;
height: 100px;
background-color: rgb(0, 255, 13);
}
</style>
</head>
<body>
<div class="box1">1</div>
<div class="box2">2</div>
<div class="box3">3</div>
</body>
</html>
2.绝对定位
当元素的position属性值设置为absolete，则开启了元素的绝对定位
1绝对定位的特点：
1.开启绝对定位后，若不设置偏移量，元素的位置不会发生改变。
2.开启绝对定位后元素会从文档流中脱离。
3.绝对定位会改变元素的性质。（行内变为块，宽度被内容撑开）
4，会给元素会提升元素的层级。
5.绝对元素的定位是相对于其包含块进行定位的。
包含块：
正常情况下：
包含块是离当前元素最近的祖先块元素
开启绝对定位的包含块：
离他最近的开启了绝对定位的祖先元素
如果所有的祖先元素都没有开启绝对定位，根元素就是他的包含块。（出事包含块).
仿百度（初代）。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>你不会百度吗？</title>
<link rel="stylesheet" href="./reset.css">
<style>
body{
background-color: rgb(245, 245, 245);
}
.head-list a:hover{color: rgb(42, 8, 236);}
.zhong-list a:hover{
background-color: rgb(223, 222, 222);
}
.head-list-right a:hover{
color: rgb(42, 8, 236);
}
.head-list-right {
float: right;
margin: 20px;
}
.head-list-right a{
font-size: 13px;
}
.head-landing div{
font-size: 14px;
color: rgb(255, 255, 255);
margin: 5px ;
padding-left: 5px;
}
.head-landing{
margin: 16px;
float: right;
height: 25px;
width: 46px;
background-color: rgb(90, 90, 250);
border-radius: 5px;
}
.box3 a:hover{
color: rgb(42, 8, 236);
}
.head-list a{
float: left;
padding: 20px 20px;
font-size: 13px;
color: black;
}
.zhong{
padding: 50px 610px;
}
.sousuo{
height: 150px;
background-color: rgb(245, 245, 245);
}
*{
box-sizing: border-box;
}
input,button
{
border: none;
}
div.search{
padding: 10px 0px;
}
form{
width: 700px;
margin: 0 auto;
}
.search-bar input{
width: 83%;
height: 48px;
padding-left: 13px;
border: 2px solid rgb(90, 90, 250);
border-radius: 10px 0 0 10px;
}
.search-bar button{
height: 48px;
width: 95px;
cursor: pointer;
position: absolute;
border:rgb(90,90,250) 2px solid;
border-radius:0px 10px 10px 0;
background-color: rgb(90, 90, 250)
}
button:before{
content: "百度一下";
font-size: 15px;
color: rgb(255, 255, 255);
}
.xijie{
padding: 0px 314px;
font-size: 10px;
color: rgb(138, 138, 138);
}
.zhong-list{
background-color: rgb(255, 255, 255);
margin: 0px auto;
height: 50px;
width: 900px;
box-shadow:1px 2px rgb(90, 90, 250);
}
.zhong-list a{
color: black;
float: left;
padding: 17px 66px;
}
.box3{
margin: 250px;
}
.box3 span{
padding-right: 30px;
}
</style>
</head>
<body>
<nav class="head-list">
<a href="https://news.163.com/">
<div>新闻</div>
</a>
<a href="https://www.baidu.com/">
<div>baidu</div>
</a>
<a href="https://map.baidu.com/">
<div>地图</div>
</a>
<a href="http://video.baidu.com/">
<div>视频</div>
</a>
<a href="https://tieba.baidu.com/">
<div>贴吧</div>
</a>
<a href="https://www.bilibili.com/">
<div>哔哩哔哩</div>
</a>
</nav>
<div class="head-landing">
<a href="">
<div>登录</div>
</a>
</div>
<div class="head-list-right">
<a href="">
<div>设置</div>
</a>
</div>
</div>
<div class="box2">
<ul class="zhong">
<li>
<a href="https://www.baidu.com/">
<img width=299 src="./PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" alt="">
</a>
</li>
</ul>
<div class="sousuo">
<div class="search-bar">
<form>
<input placeholder="请开始你的表演" name="cname" type="text">
<button type="submit"></button>
</form>
</div>
</div>
<div class="xijie">为您推荐</div>
<div class="zhong-list">
<ul>
<a href="https://www.bilibili.com/">
<li>
哔哩哔哩
</li>
</a>
<a href="https://music.163.com/">
<li>
网易云
</li>
</a>
<a href="https://www.iqiyi.com/">
<li>
爱奇艺
</li>
</a>
<a href="https://www.taobao.com/">
<li>
淘宝网
</li>
</a>
<a href="https://www.jd.com/?cu=true&utm_source=haosou-search&utm_medium=cpc&utm_campaign=t_262767352_haosousearch&utm_term=5512151796_0_a9b66c46e625470ea88632ed87f296fe">
<li>
京东
</li>
</a>
</ul>
</div>
</div>
<div class="box3">
<a href="https://blog.csdn.net/qq_52507290/article/details/109966947
">
<span>联系小青龙sama</span>
</a>
<a href="https://blog.csdn.net/qq_52507290/article/details/109966947
">
<span>qq联系小青龙sama</span>
</a>
<a href="https://blog.csdn.net/qq_52507290/article/details/109966947
">
<span>微信联系小青龙sama</span>
</a>
</div>
</body>
</html>
扫一扫
860
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
