目录
01-浮动
<!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>
.box {
width: 150px;
height: 150px;
border: 1px solid red;
/* display: inline-block; */
font-size: 40px;
text-align: center;
line-height: 150px;
color: aqua;
float: right;
/* none 没有 */
/* left 左浮动 左对齐 */
/* right */
}
</style>
</head>
<body>
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
</body>
</html>02-浮动案例
<!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>
* {
padding: 0;
margin: 0;
}
.nav {
width: 100%;
height: 101px;
background-color: #0000007d;
}
.type_page {
width: 1200px;
height: 101px;
margin: 0 auto;
}
.nav_float {
float: left;
}
.nav_logo {
margin-top: 20px;
}
.nav_content {
width: 600px;
height: 101px;
}
.nav_content>div {
width: 120px;
height: 101px;
float: left;
text-align: center;
line-height: 101px;
color: aliceblue;
}
.nav_dl_float {
float: left;
/* line-height: 101px; */
margin-top: 30px;
}
</style>
</head>
<body>
<div class="nav">
<div class="type_page">
<img src="./images/logo.webp" alt="" class="nav_float nav_logo">
<div class="nav_float nav_content">
<div>游戏资料</div>
<div>内容中心</div>
<div>赛事中心</div>
<div>百态王者</div>
<div>社区互动</div>
</div>
<div class="nav_float">
<img src="./images/下载.png" alt="" class="nav_dl_float">
<div class="nav_dl_float">
<div>欢迎登录</div>
<div>登录后查看游戏战绩</div>
</div>
</div>
</div>
</div>
</body>
</html>03-浮动灵活应用
<!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,
.box2 {
width: 150px;
height: 150px;
border: 1px solid black;
text-align: center;
line-height: 150px;
font-size: 50px;
color: red;
}
.box1 {
float: left;
}
.box2 {
float: right;
}
</style>
</head>
<body>
<div class="box">
<div class="box1">1-1</div>
<div class="box1">1-2</div>
<div class="box1">1-3</div>
<div class="box1">1-4</div>
<div class="box1">1-5</div>
<div class="box1">1-6</div>
<div class="box1">1-7</div>
<div class="box1">1-8</div>
<div class="box1">1-1</div>
<div class="box1">1-2</div>
<div class="box1">1-3</div>
<div class="box1">1-4</div>
<div class="box2">2-1</div>
<div class="box2">2-2</div>
<div class="box2">2-3</div>
<div class="box2">2-4</div>
<div class="box2">2-5</div>
<div class="box2">2-6</div>
<div class="box2">2-7</div>
<div class="box2">2-8</div>
<div class="box2">2-1</div>
<div class="box2">2-2</div>
<div class="box2">2-3</div>
<div class="box2">2-4</div>
<div class="box2">2-5</div>
<div class="box2">2-6</div>
<div class="box2">2-7</div>
<div class="box2">2-8</div>
</div>
</body>
</html>04-浮动带来的影响
<!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>
/* .bigbox {
width: 100px;
height: 100px;
background-color: #ff0c0c;
float: left;
}
.bigbox2 {
width: 100px;
height: 100px;
background-color: #a8ff07;
font-size: 100px;
}
.bigbox3 {
width: 100px;
height: 100px;
background-color: #07ff55;
} */
.box {
background-color: #81ff0a;
/* height: 100px; */
/* overflow: hidden; */
}
.box:after {
content: '1111';
display: block;
height: 0;
clear: both;
/* 清楚浮动带来的影响 */
/* both 左右两个方向的影响 */
visibility: hidden;
}
.box1 {
width: 100px;
height: 100px;
background-color: #08e6ff;
float: left;
}
.box2 {
width: 100px;
height: 100px;
background-color: #f200ff;
float: right;
}
/* .box3 {
width: 100%;
height: 100px;
background-color: #ff0000;
} */
</style>
</head>
<body>
<!-- <div class="bigbox">123</div>
<div class="bigbox2">456</div>
<div class="bigbox3">789</div> -->
<div class="box">
<div class="box1"></div>
<div class="box2"></div>
</div>
<!-- 当子元素全部浮动之后 父元素 会出现高度为0的情况 -->
<!-- 1.给父元素设置一个高度 -->
<!-- 2.设置溢出隐藏 -->
<!-- 3.添加一个额外的盒子 -->
<!-- 4.通过伪类选择器清除浮动 -->
<!-- <div class="box3"></div> -->
</body>
</html>05-列表的应用
<!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>
* {
/* padding: 0; */
/* margin: 0; */
}
.oUl {
/* list-style-type: none; */
list-style: cjk-ideographic;
/* none 去除小黑点样式 */
/* 设置列表样式 */
/* list-style-image: url(./images/下载.png); */
/* list-style-position: outside; */
}
li {
/* float: left; */
}
</style>
</head>
<body>
<ul class="oUl">
<li>123</li>
<li>123</li>
<li>123</li>
<li>123</li>
<li>123</li>
</ul>
</body>
</html>06-定位
<!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>
.box {
width: 59px;
height: 47px;
background-color: #ff0000;
/* margin: 0 auto; */
/* position: static; */
/* static 静态定位 定位的默认值 */
position: relative;
/*relative 相对定位 top bottom left right*/
top: 100px;
left: 100px;
/* 根据盒子的左上角来进行的定位 根据自身原本的位置进行移动*/
/* 依然会保留原本的位置 不会脱离标准流 */
}
.box1 {
width: 100px;
height: 100px;
background-color: rgb(72, 255, 0);
position: absolute;
/* 绝对定位 拼爹 根据 已有定位 的 父元素来进行定位 */
/* 如果直接父元素没有定位 那么会继续向上查找父元素 直到找到有定位的父元素 */
/* 子绝父相 当某个元素需要使用绝对定位的时候 我们可以给父元素设置相对定位*/
/* top: 100px; */
/* left: 100px; */
}
.smbox {
width: 50px;
height: 50px;
background-color: pink;
position: absolute;
top: 25px;
left: 25px;
}
.smbox1 {
width: 50px;
height: 50px;
background-color: rgb(157, 122, 245);
}
</style>
</head>
<body>
<div class="box">
</div>
<div class="box1">
<div class="smbox"></div>
<div class="smbox1"></div>
</div>
</body>
</html>07-固定定位
<!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>
.box {
width: 150px;
height: 250px;
background-color: #fe1010;
position: fixed;
/* 固定定位 x left right y top bottom*/
/* 是根据页面可视区来定位的 距离哪个边近就写哪个边*/
bottom: 200px;
right: 200px;
}
.nav {
width: 100%;
height: 60px;
background-color: #00000062;
position: sticky;
/* 粘性定位 在没有达到预定位置之前是相对定位 达到之后是固定定位 */
top: 0px;
}
</style>
</head>
<body>
<div class="box"></div>
<p>456456</p>
<p>456456</p>
<p>456456</p>
<p>456456</p>
<p>456456</p>
<p>456456</p>
<p>456456</p>
<p>456456</p>
<p>456456</p>
<p>456456</p>
<p>456456</p>
<p>456456</p>
<div class="nav"></div>
<p>456456</p>
<p>456456</p>
<p>456456</p>
<p>456456</p>
<p>456456</p>
<p>456456</p>
<!-- <pre>
预先格式化文本
你的泪水在眼里徘徊
我的心里xxxxxxxxxx
xxxdxsxxxxx
123123123
123123123
123123123
123123123
123123123
23123123
123123123
123123123
123123123
123123123
123123 123
123123123
123123123
123123123vvvvv
</pre> -->
</body>
</html>08-盒子居中
<!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>
.box {
width: 600px;
height: 600px;
background-color: #a4ff80;
position: relative;
}
.smbox {
width: 150px;
height: 150px;
background-color: #fff478;
/* margin: 0 auto; */
position: absolute;
top: 50%;
left: 50%;
margin-top: -75px;
margin-left: -75px;
/* 盒子居中 首先用定位 定位到50% 在用外边距向回拽盒子的一半 */
}
</style>
</head>
<body>
<div class="box">
<div class="smbox"></div>
</div>
</body>
</html>09-定位的层级
<!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,
.box2,
.box3 {
width: 200px;
height: 200px;
position: absolute;
}
.box1 {
background-color: #ff0c0c;
top: 150px;
left: 150px;
z-index: 99;
/* 层级 只针对定位的层级 所有定位元素的默认值都是0*/
}
.box2 {
background-color: #fff70c;
top: 180px;
left: 180px;
}
.box3 {
background-color: #0cffc2;
top: 220px;
left: 220px;
z-index: 1000;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</body>
</html>10-伪类选择器小进阶
<!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>
.box {
width: 150px;
height: 150px;
background-color: #00ff22;
position: relative;
/* position: absolute;
top: 100px;
left: 100px; */
}
/* .box:hover {
background-color: #12b4ff;
top: 105px;
} */
.box:hover .smbox {
display: block;
}
.smbox {
width: 150px;
height: 450px;
background-color: #8421d5;
position: absolute;
top: 150px;
display: none;
}
</style>
</head>
<body>
<div class="box">
<!-- <div> -->
<div class="smbox"></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>
* {
padding: 0;
margin: 0;
list-style: none;
}
.box {
width: 800px;
height: 600px;
background-color: #373737;
}
.nav {
height: 600px;
width: 270px;
background-color: #f01616;
float: left;
}
.nav_content {
height: 600px;
width: 530px;
background-color: #00ff26;
float: left;
}
.nav>ul>li {
width: 270px;
height: 80px;
text-align: center;
line-height: 80px;
}
.nav>ul {
position: relative;
}
.nav>ul>li:hover {
background-color: #ff2684;
color: aliceblue;
}
.erji {
height: 600px;
width: 530px;
text-align: center;
line-height: 600px;
background-color: #000;
position: absolute;
left: 270px;
top: 0;
color: #fff;
display: none;
}
.nav>ul>li:hover .erji {
display: block;
}
</style>
</head>
<body>
<div class="box">
<div class="nav">
<ul>
<li>冰淇淋
<div class="erji">冰淇淋</div>
</li>
<li>奶油
<div class="erji">奶油</div>
</li>
<li>巧克力
<div class="erji">巧克力</div>
</li>
<li>慕斯
<div class="erji">慕斯</div>
</li>
<li>拿破仑
<div class="erji">拿破仑</div>
</li>
</ul>
</div>
<div class="nav_content"></div>
</div>
</body>
</html>
1566
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
