概述
CSS 基础 2
浮动： float
视觉格式化模型， 大体上将页面中盒子的排列分为三种方式：
- 常规流
- 浮动
- 定位
应用场景：
1. 文字环绕
1. 横向排列
浮动的基本特点 ： 一定是 块盒
修改 float 属性值为：
float ：left : 左浮动， 元素 先靠上 靠左
float ：right: 右浮动， 元素 靠左上 靠右
默认值 none , 就是 常规 流
1. 当一个元素浮动后， 元素必定为块盒（ 更改 display 属性为 block ）
2. 浮动元素的 包含块， 和常规流一样。 为父元素的内容盒
盒子尺寸：
- 宽度为 auto 时： 适应内容宽度
- 高度为 auto 时： 与常规流一致， 适应内容的高度
- margin 为 auto时 设置为 0
- 边框， 内边框， 百分比 设置与常规流 一样
盒子排列：
- 左浮动的 盒子 靠上靠左排列
- 右浮动的 盒子 靠上靠右排列
- 浮动盒子 和包含块中 排列时， 会避开常规流盒子
- 常规流快盒子在排列时， 无视浮动盒子
- 行盒在排列时， 会避开浮动盒子
- 外边距合并 在 合并盒子中不会发生
- 如果文字没有在 行盒中。 浏览器会自动生成一个 行盒包裹文字，该行盒 是不可见的， 匿名行盒
高度坍塌：
高度坍塌的 根源： 常规流盒子的自动高度（内容盒子 撑开父容器），在计算时， 不会考虑浮动盒子
清除浮动： 涉及 css 属性：clear
- 默认值 : none
- left : 清除左浮动， 该元素 必须出现在前面 所有左浮动盒子 的下方
- right : 清除右浮动， 该元素 必须出现在前面 所有右浮动盒子 的下方
浮动盒子的 练习： 猫眼电视首页
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>正在熱映--貓眼電影</title>
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="moviecss/movie.css">
<link rel="stylesheet" href="css/common.css">
</head>
<body>
<div class="main">
<!-- 菜單 -->
<nav class="nav">
<a class="selected" href="">正在熱映</a>
<a href="">即將上映</a>
<a href="">經典影片</a>
</nav>
<div class="container">
<div class="choose-area">
<div class="choose-item clear-fix">
<div class="left">類型：</div>
<div class="right">
<ul class="clear-fix">
<li class="selected"><a href="">Lorem.</a></li>
<li><a href="">Voluptates.</a></li>
<li><a href="">Voluptas!</a></li>
<li><a href="">Inventore!</a></li>
<li><a href="">Possimus.</a></li>
<li><a href="">Tenetur.</a></li>
<li><a href="">Autem.</a></li>
<li><a href="">Maiores!</a></li>
<li><a href="">Maiores?</a></li>
<li><a href="">Magnam.</a></li>
<li><a href="">A.</a></li>
<li><a href="">Aliquid.</a></li>
<li><a href="">Perferendis?</a></li>
<li><a href="">Quas!</a></li>
<li><a href="">Nam?</a></li>
<li><a href="">Consectetur!</a></li>
<li><a href="">Cupiditate.</a></li>
<li><a href="">Ipsa.</a></li>
<li><a href="">Non?</a></li>
<li><a href="">Natus.</a></li>
</ul>
</div>
</div>
<div class="choose-item clear-fix">
<div class="left">地區：</div>
<div class="right">
<ul>
<li><a href="">Lorem.</a></li>
<li><a href="">Voluptates.</a></li>
<li><a href="">Voluptas!</a></li>
<li><a href="">Inventore!</a></li>
<li><a href="">Possimus.</a></li>
<li><a href="">Tenetur.</a></li>
<li><a href="">Autem.</a></li>
<li><a href="">Maiores!</a></li>
<li><a href="">Maiores?</a></li>
<li><a href="">Magnam.</a></li>
<li><a href="">A.</a></li>
<li><a href="">Aliquid.</a></li>
<li><a href="">Perferendis?</a></li>
<li><a href="">Quas!</a></li>
<li><a href="">Nam?</a></li>
<li><a href="">Consectetur!</a></li>
<li><a href="">Cupiditate.</a></li>
<li><a href="">Ipsa.</a></li>
<li><a href="">Non?</a></li>
<li><a href="">Natus.</a></li>
</ul>
</div>
</div>
<div class="choose-item clear-fix no-line">
<div class="left">年代：</div>
<div class="right">
<ul>
<li><a href="">Lorem.</a></li>
<li><a href="">Voluptates.</a></li>
<li><a href="">Voluptas!</a></li>
<li><a href="">Inventore!</a></li>
<li><a href="">Possimus.</a></li>
<li><a href="">Tenetur.</a></li>
<li><a href="">Autem.</a></li>
<li><a href="">Maiores!</a></li>
<li><a href="">Maiores?</a></li>
<li><a href="">Magnam.</a></li>
<li><a href="">A.</a></li>
<li><a href="">Aliquid.</a></li>
<li><a href="">Perferendis?</a></li>
<li><a href="">Quas!</a></li>
<li><a href="">Nam?</a></li>
<li><a href="">Consectetur!</a></li>
<li><a href="">Cupiditate.</a></li>
<li><a href="">Ipsa.</a></li>
<li><a href="">Non?</a></li>
<li><a href="">Natus.</a></li>
</ul>
</div>
</div>
</div>
<div class="movies clear-fix">
<div class="movie-item">
<div class="poster">
<a href=""><img src="./img/img.jpg" alt=""></a>
</div>
<div class="name"><a href="">冰雪奇緣4</a></div>
<div class="score">9.4</div>
</div>
<div class="movie-item">
<div class="poster">
<a href=""><img src="./img/img.jpg" alt=""></a>
</div>
<div class="name"><a href="">冰雪奇緣4</a></div>
<div class="score">9.4</div>
</div>
<div class="movie-item">
<div class="poster">
<a href=""><img src="./img/img.jpg" alt=""></a>
</div>
<div class="name"><a href="">冰雪奇緣4</a></div>
<div class="score">9.4</div>
</div>
<div class="movie-item">
<div class="poster">
<a href=""><img src="./img/img.jpg" alt=""></a>
</div>
<div class="name"><a href="">冰雪奇緣4</a></div>
<div class="score">9.4</div>
</div>
<div class="movie-item">
<div class="poster">
<a href=""><img src="./img/img.jpg" alt=""></a>
</div>
<div class="name"><a href="">冰雪奇緣4</a></div>
<div class="score">9.4</div>
</div>
<div class="movie-item">
<div class="poster">
<a href=""><img src="./img/img.jpg" alt=""></a>
</div>
<div class="name"><a href="">冰雪奇緣4</a></div>
<div class="score">9.4</div>
</div>
<div class="movie-item">
<div class="poster">
<a href=""><img src="./img/img.jpg" alt=""></a>
</div>
<div class="name"><a href="">冰雪奇緣4</a></div>
<div class="score">9.4</div>
</div>
<div class="movie-item">
<div class="poster">
<a href=""><img src="./img/img.jpg" alt=""></a>
</div>
<div class="name"><a href="">冰雪奇緣4</a></div>
<div class="score">9.4</div>
</div>
<div class="movie-item">
<div class="poster">
<a href=""><img src="./img/img.jpg" alt=""></a>
</div>
<div class="name"><a href="">冰雪奇緣4</a></div>
<div class="score">9.4</div>
</div>
<div class="movie-item">
<div class="poster">
<a href=""><img src="./img/img.jpg" alt=""></a>
</div>
<div class="name"><a href="">冰雪奇緣4</a></div>
<div class="score">9.4</div>
</div>
<div class="movie-item">
<div class="poster">
<a href=""><img src="./img/img.jpg" alt=""></a>
</div>
<div class="name"><a href="">冰雪奇緣4</a></div>
<div class="score">9.4</div>
</div>
<div class="movie-item">
<div class="poster">
<a href=""><img src="./img/img.jpg" alt=""></a>
</div>
<div class="name"><a href="">冰雪奇緣4</a></div>
<div class="score">9.4</div>
</div>
<div class="movie-item">
<div class="poster">
<a href=""><img src="./img/img.jpg" alt=""></a>
</div>
<div class="name"><a href="">冰雪奇緣4</a></div>
<div class="score">9.4</div>
</div>
<div class="movie-item">
<div class="poster">
<a href=""><img src="./img/img.jpg" alt=""></a>
</div>
<div class="name"><a href="">冰雪奇緣4</a></div>
<div class="score">9.4</div>
</div>
<div class="movie-item">
<div class="poster">
<a href=""><img src="./img/img.jpg" alt=""></a>
</div>
<div class="name"><a href="">冰雪奇緣4</a></div>
<div class="score">9.4</div>
</div>
<div class="movie-item">
<div class="poster">
<a href=""><img src="./img/img.jpg" alt=""></a>
</div>
<div class="name"><a href="">冰雪奇緣4</a></div>
<div class="score">9.4</div>
</div>
<div class="movie-item">
<div class="poster">
<a href=""><img src="./img/img.jpg" alt=""></a>
</div>
<div class="name"><a href="">冰雪奇緣4</a></div>
<div class="score">9.4</div>
</div>
<div class="movie-item">
<div class="poster">
<a href=""><img src="./img/img.jpg" alt=""></a>
</div>
<div class="name"><a href="">冰雪奇緣4</a></div>
<div class="score">9.4</div>
</div>
<div class="movie-item">
<div class="poster">
<a href=""><img src="./img/img.jpg" alt=""></a>
</div>
<div class="name"><a href="">冰雪奇緣4</a></div>
<div class="score">9.4</div>
</div>
<div class="movie-item">
<div class="poster">
<a href=""><img src="./img/img.jpg" alt=""></a>
</div>
<div class="name"><a href="">冰雪奇緣4</a></div>
<div class="score">9.4</div>
</div>
<div class="movie-item">
<div class="poster">
<a href=""><img src="./img/img.jpg" alt=""></a>
</div>
<div class="name"><a href="">冰雪奇緣4</a></div>
<div class="score">9.4</div>
</div>
<div class="movie-item">
<div class="poster">
<a href=""><img src="./img/img.jpg" alt=""></a>
</div>
<div class="name"><a href="">冰雪奇緣4</a></div>
<div class="score">9.4</div>
</div>
<div class="movie-item">
<div class="poster">
<a href=""><img src="./img/img.jpg" alt=""></a>
</div>
<div class="name"><a href="">冰雪奇緣4</a></div>
<div class="score">9.4</div>
</div>
<div class="movie-item">
<div class="poster">
<a href=""><img src="./img/img.jpg" alt=""></a>
</div>
<div class="name"><a href="">冰雪奇緣4</a></div>
<div class="score">9.4</div>
</div>
<div class="movie-item">
<div class="poster">
<a href=""><img src="./img/img.jpg" alt=""></a>
</div>
<div class="name"><a href="">冰雪奇緣4</a></div>
<div class="score">9.4</div>
</div>
<div class="movie-item">
<div class="poster">
<a href=""><img src="./img/img.jpg" alt=""></a>
</div>
<div class="name"><a href="">冰雪奇緣4</a></div>
<div class="score">9.4</div>
</div>
<div class="movie-item">
<div class="poster">
<a href=""><img src="./img/img.jpg" alt=""></a>
</div>
<div class="name"><a href="">冰雪奇緣4</a></div>
<div class="score">9.4</div>
</div>
<div class="movie-item">
<div class="poster">
<a href=""><img src="./img/img.jpg" alt=""></a>
</div>
<div class="name"><a href="">冰雪奇緣4</a></div>
<div class="score">9.4</div>
</div>
<div class="movie-item">
<div class="poster">
<a href=""><img src="./img/img.jpg" alt=""></a>
</div>
<div class="name"><a href="">冰雪奇緣4</a></div>
<div class="score">9.4</div>
</div>
<div class="movie-item">
<div class="poster">
<a href=""><img src="./img/img.jpg" alt=""></a>
</div>
<div class="name"><a href="">冰雪奇緣4</a></div>
<div class="score">9.4</div>
</div>
</div>
<div class="pager">
<a href="">上一頁</a>
<a href="">1</a>
<a href="">2</a>
<a class="select" href="">3</a>
<a href="">4</a>
<a href="">5</a>
<a href="">6</a>
<a href="">7</a>
<a href="">8</a>
<a href="">9</a>
<a href="">10</a>
<a href="">下一頁</a>
</div>
</div>
</div>
</body>
</html>common.css
/* 多頁面的通用樣式 */
.pager {
margin: 2em 0;
text-align: center;
}
.pager a {
border: 1px solid #d8d8d8;
padding: 5px 10px;
margin: 0 5px;
}
.pager a:hover {
border-color: #ef4238;
}
.pager a.select {
background: #ef4238;
color: white;
border: none;
}css
.clear-fix::after {
content: "";
display: block;
clear: both;
}
.body {
color: #333333;
}
.main {
line-height: 1.5;
}
.main .nav {
height: 60px;
background: #47464a;
color: #999;
text-align: center;
line-height: 60px;
}
.main .nav a {
margin: 0 32px;
}
.main .nav a:hover {
color: white;
}
.main .nav a.selected {
color: #ef4238;
}
.main .container {
width: 1120px;
margin: 0 auto;
}
.main .container .choose-area {
border: 1px solid #e5e5e5;
margin: 40px 0;
font-size: 14px;
line-height: 30px;
padding: 0 30px;
}
.main .container .choose-area .choose-item {
margin: 1em 0;
border-bottom: 1px dotted #e5e5e5;
}
.main .container .choose-area .choose-item.no-line {
border: none;
}
.main .container .choose-area .choose-item .left {
float: left;
color: #999;
}
.main .container .choose-area .choose-item .right {
float: left;
width: 1010px;
}
.main .container .choose-area .choose-item .right li {
float: left;
margin: 0 9px;
padding: 0 6px;
}
.main .container .choose-area .choose-item .right li :hover {
color: #ef4238;
}
.main .container .choose-area .choose-item .right li.selected {
background: #ef4238;
color: white;
/* css 圓角邊框 */
border-radius: 10px;
}
.main .container .movies .movie-item {
float: left;
width: 160px;
margin: 10px 32px 10px 0;
}
.main .container .movies .movie-item:nth-child(6n) {
margin-right: 0;
}
.main .container .movies .movie-item .poster img {
width: 160px;
height: 220px;
}
.main .container .movies .movie-item .name {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
padding: 0 5px;
text-align: center;
}
.main .container .movies .movie-item .score {
color: #ffb400;
text-align: center;
line-height: 2.5;
font-style: italic;
}
.main .container .movies .movie-item .score::first-letter {
font-size: 1.5em;
}代码下载地址：
定 位：
定位指的是： 手动控制元素在包含块中的精准位置
涉及的 css 属性： position
position 属性：
默认值 ：static, 静态定位（不使用 定位）
relative ：相对定位
absolute ：绝对定位
fixed ： 固定定位
一个元素 只要 position 的 取值不是 static， 认为该元素是一个 定位元素
定位元素会脱离文档流（相对定位除外）
一个脱离了文档流的元素：
1. 文档流中的元素 摆放时， 会忽略脱离了 文档流的元素
2. 文档流中的元素计算高度时， 会忽略脱离了 文档流的元素
● 相对定位 relative
不会导致元素 脱离文档流，只是让元素在原来位置上 进行偏移。
可以通过 四个 css 属性 对元素进行偏移量
- left
- right
- top
- buttom
相对定位 盒子的偏移不会对 其他盒子 造成 任何影响
● 绝对定位 absolute
1. 宽高为 auto， 适应内容
2. 包含块变化： 依次找父元素 的 定位元素， 该元素的填充盒 为其包含块 (第一个定位元素 就是 包含块)， 如果都找不到 则它的包含块 为整网页
● 固定定位 fixed
其他情况 和 绝对定义 完全一样
包含块不同： 参考系 不一样， 固定定位 的 包含块 为 视口（浏览器的视口 可视区域）
● !定位 下的居中
某个方向的居中：
1 定宽（高）
2 将左右（上下） 距离 设置为 0
3. 将左右（上下） margin 设置为 auto
绝对定位 和 固定定位 中： margin 为 auto 时， 会自动吸收剩余空间
● 多个定位元素 重叠时
- 堆叠上下文
- 设置 z-index ; 通常 这个值越大 越靠近用户
- 只有定位 元素 设置 z-index 才有效，
- z-index 可以是 负数， 如果是负数 则遇到常规流 浮动元素 则会被其 覆盖
● 补充
- 绝对定位 固定定位 元素 一定是 块盒
- 绝对定位 固定定位 元素一定不是 浮动 会被强制改变成 none
- 没有外边距 合并的问题
定位练习1 二级菜单
index.html :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="./css/reset.css">
<link rel="stylesheet" href="./css/index.css">
</head>
<body>
<header class="header">
<ul class="topnav clearfix">
<li><a href="">Lorem.</a></li>
<li><a href="">Nam.</a></li>
<li><a href="">Laudantium?</a></li>
<li>
<a href="">客戶服務</a>
<div class=" subMenu">
<ul>
<li>Lorem.</li>
<li>Hic?</li>
<li>Mollitia.</li>
<li>Laboriosam?</li>
<li>In!</li>
<li>Quidem!</li>
<li>Pariatur?</li>
<li>Doloribus!</li>
<li>Illo.</li>
<li>Ipsa.</li>
</ul>
</div>
</li>
<li><a href="">Commodi!</a></li>
</ul>
</header>
<div style="height:3500px; background: lightblue;">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Rem reiciendis, delectus nemo eius error adipisci distinctio quod optio repellat nobis beatae numquam ipsa nisi porro incidunt, qui alias eaque, possimus ad odit? Illo quis magnam delectus
amet molestias facilis cumque? Officia natus dicta, veritatis a reprehenderit similique iure eveniet. Similique assumenda, iste atque in dolorem quisquam quo sed accusantium non aspernatur tempore ea, possimus nulla reiciendis optio dolor nesciunt
id? Sit esse temporibus voluptatibus aspernatur aperiam, est, possimus amet incidunt a optio mollitia ut repudiandae! Assumenda, sint aliquid, ea veniam aut at soluta itaque fugiat iste doloribus praesentium unde distinctio reprehenderit officia
beatae! Fugiat est repellendus praesentium doloribus laborum, officia atque consequatur tempora consequuntur nobis saepe dignissimos dicta. Cum, velit quod! Repellendus, adipisci ut, blanditiis sed velit magnam culpa deleniti facere tempora reprehenderit
numquam perferendis atque! Nobis non aliquam ducimus nihil facilis quasi! Doloremque deserunt, excepturi accusantium porro, obcaecati debitis alias maiores in quos, aperiam delectus esse officiis at inventore minus nostrum? Neque, voluptates nobis,
repellendus natus facere molestiae non et dolore porro odit voluptatem aliquid, molestias numquam officia. Facilis ea iure perspiciatis nisi, aliquam modi numquam earum, similique harum quo quidem error! Commodi corrupti rem perspiciatis hic illum
qui velit ipsa dignissimos delectus alias ut dolor modi veniam non laboriosam corporis aut quam temporibus, veritatis, dicta natus similique. Qui, debitis ipsa expedita eius accusantium quam sapiente in. Illum dignissimos dolorum temporibus ipsam
blanditiis doloremque provident, asperiores maxime corporis, quibusdam eaque eum qui. Quas nobis iusto et, omnis laboriosam, illum earum perferendis ut similique nihil eum est ipsa, eligendi dignissimos quidem odio iure laborum quo! Earum voluptatem
minima doloremque, nulla sunt perferendis sit ratione sapiente amet. Unde, hic. Molestias, animi similique. Veritatis expedita, aut doloremque eos sed culpa. Voluptatem dolorem velit necessitatibus facere nobis, harum quod dignissimos recusandae
deleniti mollitia doloribus error, cum placeat corporis vel perferendis odit debitis suscipit tempore, veritatis adipisci. Consectetur odit omnis, voluptatum ad cumque a fuga recusandae saepe dignissimos. Consectetur enim, maxime voluptatibus
temporibus vel molestias neque, modi iusto dolor quod officia incidunt ut maiores quisquam. Fugit porro consequatur facere quam tempora rem sed quaerat quo suscipit atque? Eveniet incidunt repellat dolorum cum dolor magni, cumque delectus cupiditate
vitae! Neque natus atque tempora rerum culpa sed magni. Fugit libero laboriosam cupiditate officia id optio esse quia quos laborum quod. Esse, aliquid modi possimus nam quisquam reprehenderit dolorem aspernatur illo fuga quod labore in harum vero!
Animi excepturi non esse provident repellendus aliquam possimus quis iste quisquam labore tenetur debitis fuga temporibus facere iusto, ullam a eius consequatur ad, nostrum deserunt aliquid enim nesciunt ut! Iure recusandae molestiae commodi rem
quas quod placeat et quo magnam voluptas adipisci aperiam nihil necessitatibus laudantium numquam atque itaque nemo optio omnis repellat ad officiis debitis, ex ea. Officiis harum officia error? Obcaecati odit facilis laborum illum culpa sequi
consectetur, suscipit fuga repudiandae neque doloremque nulla dicta deleniti, vel a ratione officia aut pariatur quaerat corrupti. Eos corrupti excepturi repellendus, hic, nulla accusamus accusantium quo voluptas natus saepe enim eius aperiam
laudantium dolores numquam blanditiis ullam dicta odio ex in debitis expedita ut quisquam eaque? Velit fugiat voluptatibus numquam maxime quidem cum cumque consequuntur illum dicta esse eaque, quos odio ipsam pariatur inventore accusantium modi
unde magni labore at autem. Voluptate exercitationem labore totam esse earum corrupti. Voluptatum error, laboriosam quasi voluptatem quia, sunt sit vel rem nulla rerum culpa at tempora placeat numquam nam delectus voluptates, odio similique suscipit
corrupti inventore! Obcaecati reiciendis laboriosam dolores, est nam quo dignissimos debitis optio autem excepturi possimus placeat, tempore omnis ab. Pariatur soluta iure nihil mollitia optio velit accusantium incidunt libero laborum sint dolor,
totam veritatis laudantium magni nobis eligendi quaerat consectetur provident doloribus itaque deleniti, impedit eos. Quasi nulla beatae facere officiis esse et eius exercitationem omnis excepturi tenetur sequi id dolorem distinctio odio, magnam
a natus ipsam minus. Culpa, iste? Veniam itaque quibusdam asperiores suscipit cupiditate exercitationem voluptatem architecto facilis totam saepe esse, inventore quam minima, consequatur voluptas necessitatibus fuga consequuntur qui doloremque
voluptate, distinctio sapiente accusamus eius non. Voluptates, obcaecati, pariatur a ratione iure itaque, aspernatur enim asperiores dolor sunt quod! Aliquam, earum! Quidem aliquam fuga sit, nisi maiores dolorem quaerat? Animi nesciunt officia
sit quasi dolorem cumque quia ad incidunt id voluptates voluptatem suscipit vitae ex deserunt omnis sequi sapiente, rerum repudiandae unde eaque, laborum beatae? Facere ad corporis sed repellendus unde, hic quod culpa aut, praesentium possimus,
ipsa odio suscipit in ex itaque minus mollitia iusto laborum aspernatur ab! Adipisci laboriosam quos provident quidem reiciendis! Animi quibusdam, fuga repudiandae porro dolores odio, saepe dolorem quas laboriosam eum, deserunt dolore! Doloribus,
nisi corrupti inventore sunt dolore neque harum necessitatibus magnam id laborum, accusantium sint nulla dolores officia doloremque accusamus, odio dolor culpa laboriosam ut tempore pariatur facere? Reiciendis ab iste nostrum! Veritatis dolor,
vero voluptas possimus assumenda reiciendis molestiae iste velit inventore soluta suscipit quidem, ipsa itaque saepe. Nobis, itaque sequi. Et eaque, exercitationem cupiditate distinctio laboriosam temporibus voluptas fuga soluta vel nemo excepturi
recusandae quis a atque ratione sint porro aspernatur. Odio aspernatur pariatur, dolores quidem quaerat ipsa. Sint enim facere ea voluptatem, eum corporis velit asperiores suscipit molestiae quibusdam non dicta nostrum veniam quam similique pariatur
dolores voluptates nesciunt voluptas. Dolor reprehenderit quo, debitis hic doloremque odit distinctio ipsa consequatur itaque similique autem dignissimos veniam quibusdam? Accusamus officiis et consectetur perspiciatis, qui porro ipsum fugit dignissimos
maiores corporis iure aliquam sed ullam incidunt consequuntur numquam reiciendis tempore dolorem quae odio harum fugiat saepe? Iste possimus dolore dolor itaque ipsam accusamus facilis tempora quisquam, cum sit illum, quia excepturi vel, nulla
porro minus voluptates. Incidunt doloremque sapiente temporibus, quo ipsum earum, dolores pariatur iusto repudiandae minus neque voluptates voluptatibus sit ipsa ut esse vitae nam dicta dignissimos numquam. Incidunt voluptatibus consectetur veritatis
quos rerum numquam, aliquam aspernatur, quae reprehenderit aut nisi qui unde ad. Quas incidunt, quo autem, id cum blanditiis atque expedita provident dolores beatae aliquam corrupti iure rem totam. Possimus, at ipsa. Dicta praesentium minus, saepe
sint autem excepturi unde temporibus asperiores facere cum? Quis?</div>
</body>
</html>index.css:
.clearfix::after {
content: "";
display: block;
clear: both;
}
.header {
background: #e3e4e5;
color: #999999;
height: 40px;
line-height: 40px;
position: fixed;
width: 100%;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
}
.header .topnav {
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
}
.header .topnav>li {
float: left;
margin: 0 20px;
width: 150px;
height: 40px;
text-align: center;
padding: 0 8px;
/* 邊框 不影響 盒子大小 */
box-sizing: border-box;
position: relative;
}
.header .topnav>li:hover {
background: white;
border: 2px solid #cccccc;
border-bottom: none;
line-height: 36px;
}
.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: white;
}
.header .topnav>li:hover .subMenu {
display: block;
}
.header .topnav>li:hover::after {
content: "";
position: absolute;
width: 100%;
height: 5px;
background: white;
bottom: 0;
left: 0;
}reset.css
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
a {
text-decoration: none;
color: inherit;
}定位练习2 弹出层
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/彈出層.css">
</head>
<body>
<div class="main">
<div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas cumque vero beatae obcaecati recusandae mollitia minus natus ab quos porro deserunt eaque adipisci minima nisi dignissimos necessitatibus praesentium, corrupti unde quibusdam! Aut eligendi
ullam libero! Culpa, totam? Velit ipsum deserunt sunt recusandae sed, aliquid rerum optio, nobis doloremque repudiandae sit aperiam repellat voluptas provident numquam, consectetur distinctio ea? Officia, accusantium! Beatae similique optio
excepturi, provident doloribus maxime! At optio fugiat, fuga pariatur incidunt amet expedita ea maxime et rerum magnam aliquid? Voluptas, laboriosam. Dolor labore incidunt laborum officiis eligendi sed nesciunt eos consectetur, doloremque
quisquam corporis sint amet est modi, fugit id nisi tenetur fuga iure dignissimos veritatis vero rem repellendus? Eos quisquam sunt unde asperiores dolor. Voluptate fuga officiis ipsa eaque omnis! Saepe odit possimus consequuntur aliquid recusandae,
consectetur fuga facilis iusto quidem! Est amet nostrum iste sequi cumque hic magnam id minima optio sunt fugiat obcaecati minus aperiam libero rerum nulla, earum quasi facere ullam doloremque totam maxime unde. Assumenda minus hic reiciendis,
dolorem dignissimos commodi corporis excepturi magni placeat consectetur libero iusto dolores velit voluptatem culpa doloribus, vero quod ex atque enim corrupti, incidunt maxime. Dignissimos nam quidem officia rerum dolores. Alias aliquid
sint cupiditate voluptate, vel odit debitis ex consectetur excepturi quaerat nam velit dolorum, magni blanditiis delectus quisquam beatae, in odio. Minima facilis, sequi rerum excepturi blanditiis id quam ut recusandae ex odit neque. Veniam
fugit a nisi laborum illo velit sequi. Quos laboriosam velit excepturi saepe sequi voluptatum esse, beatae quasi vitae laudantium eligendi, incidunt fugit ab expedita quo quas? Vel optio ducimus quis unde ea, quisquam atque, inventore quae
odit necessitatibus rem, esse laborum eveniet quaerat natus saepe tenetur nisi cumque. Explicabo ratione natus deserunt rerum cumque impedit id ducimus quaerat voluptate, quae ab nisi nostrum sapiente! Quo magnam reiciendis commodi aliquam?
Facere possimus ut animi accusamus aliquid libero similique expedita autem cum excepturi quam quas, totam minus soluta eligendi enim veniam ipsum aut, pariatur consequatur laborum est. Labore voluptas et odit quaerat obcaecati perferendis,
fuga eius temporibus dicta aut beatae provident iste cum qui amet repellat nostrum, praesentium voluptate modi ab. Quaerat consectetur optio, ipsam quas, eius non laborum corrupti cum molestias vel perspiciatis explicabo possimus assumenda
dolores provident, enim odit culpa? Quod vitae provident saepe fugiat culpa aut, odio repudiandae in totam, sequi enim non minus illum aliquam ducimus architecto debitis? Porro cumque eligendi non ex ea, nisi blanditiis quaerat facilis quas
placeat? Fuga esse aliquam quibusdam iusto, vel alias autem maiores, velit vitae mollitia provident. Accusamus officiis expedita, sequi eaque ea molestias velit porro molestiae odit. Beatae excepturi ducimus facere debitis, nesciunt corrupti
perspiciatis dolor natus qui veritatis, provident accusantium cumque. Optio vero, voluptatibus laudantium eum accusamus repellendus, saepe animi quos asperiores officia totam quasi vel accusantium iusto nisi at odio eaque minus laborum, praesentium
quo sint nesciunt. Earum delectus doloribus quisquam illum sint nesciunt voluptas consectetur. Libero cumque esse est at maxime! Ut sit facere at ad explicabo consequatur soluta molestiae voluptates similique. Sequi vel ratione nulla quod
dolore provident adipisci delectus vero architecto hic fugit nisi voluptatibus quasi quae iste dolor, eos atque culpa quibusdam? Illum quibusdam dolore maiores excepturi laborum, molestias, accusantium ad ut minus et delectus facere mollitia
dolores optio repudiandae quos autem eaque voluptas nemo corporis consequuntur? Ratione eaque doloribus temporibus qui expedita deserunt vitae quas iste, corrupti aperiam. Quo dolor asperiores commodi amet. Ducimus, necessitatibus dolorem
laborum quos doloribus beatae exercitationem aut ratione quam suscipit at possimus error assumenda architecto repudiandae excepturi quasi? Excepturi quaerat laborum officiis ipsum laboriosam autem inventore amet adipisci praesentium nam. Temporibus
dolorem repudiandae vero ab! Exercitationem error nostrum dicta. Recusandae eos earum vel soluta, sequi numquam cum et nostrum fugiat rem cumque commodi a est aperiam minus tempora. Distinctio alias, vel soluta ad magnam officiis fuga culpa
iste minus! Vitae repellendus asperiores earum odit praesentium voluptas tempore iusto dignissimos, sunt aperiam amet laborum tempora corporis labore obcaecati, deleniti quae perspiciatis animi excepturi eveniet. Ut dolorem similique aspernatur
esse? Nisi error laudantium eos eveniet quas. Architecto harum atque, incidunt reprehenderit praesentium tempora, cumque velit excepturi quia sunt, dolor quas vel inventore laborum veniam. Tempora eligendi qui nisi aliquam dolorem fuga dolores
dignissimos cumque officiis, asperiores a? Aspernatur quasi saepe dolorem nemo quia voluptate totam quaerat itaque illum distinctio, hic ipsum explicabo ullam rerum ab. Explicabo dicta ea dolorem saepe modi hic inventore, alias minima earum
rerum blanditiis nobis porro harum ratione nulla voluptatem libero, iste repellat. Necessitatibus sint aperiam voluptatum obcaecati aliquam nostrum laudantium! Unde eligendi nisi maxime sunt obcaecati expedita perspiciatis. Pariatur harum
quas quod rerum consequuntur eligendi, doloremque minima neque sequi, fugit cumque maxime quia necessitatibus tempora! Delectus voluptatum sed quod consectetur est enim. Temporibus odit adipisci iusto? Ullam vero deleniti laboriosam. Quae
neque, eius, nihil asperiores temporibus unde optio odit consectetur culpa aspernatur iure excepturi ducimus? Quam nobis blanditiis, sit, quaerat, delectus molestiae maiores exercitationem ducimus mollitia nihil consequatur rerum itaque minus
minima illum laborum id quisquam omnis vero vitae. Perferendis natus necessitatibus ut incidunt, error nulla enim minima ipsam, soluta earum aliquid officia nostrum consectetur magni quas, animi odit labore molestias optio veritatis esse harum!
Incidunt earum nemo autem, odit tempora nobis officia quisquam doloribus assumenda. Eveniet sint voluptatibus accusamus temporibus magni deleniti suscipit, repellendus accusantium vero nihil iste totam veniam aspernatur, praesentium ut aperiam
sed nulla vitae culpa! Tempora nobis molestias voluptates impedit deserunt delectus officiis architecto natus asperiores voluptatibus commodi facilis inventore, officia voluptas hic cum aliquam quidem pariatur veritatis! Voluptates illum,
tenetur quisquam cumque odio, perspiciatis excepturi, voluptatem voluptatum accusamus dolorem architecto. Nobis debitis ipsam excepturi nemo nihil magnam qui? Ad, iure. Totam ipsum ab quo animi asperiores ex mollitia unde, quis repudiandae
quia iusto beatae architecto blanditiis illum dicta reiciendis nulla. Cupiditate, expedita ea earum perferendis officia alias dolores labore, quos itaque repellat nulla officiis ipsam consequuntur consectetur repudiandae recusandae libero
ducimus tempore nostrum, aperiam deleniti ullam ipsa? Nesciunt voluptatem doloremque, reprehenderit illum voluptate animi explicabo, saepe cum accusamus tempora eos! Ratione necessitatibus ipsa ullam totam neque temporibus repudiandae odio
amet fuga!</div>
<div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas cumque vero beatae obcaecati recusandae mollitia minus natus ab quos porro deserunt eaque adipisci minima nisi dignissimos necessitatibus praesentium, corrupti unde quibusdam! Aut eligendi
ullam libero! Culpa, totam? Velit ipsum deserunt sunt recusandae sed, aliquid rerum optio, nobis doloremque repudiandae sit aperiam repellat voluptas provident numquam, consectetur distinctio ea? Officia, accusantium! Beatae similique optio
excepturi, provident doloribus maxime! At optio fugiat, fuga pariatur incidunt amet expedita ea maxime et rerum magnam aliquid? Voluptas, laboriosam. Dolor labore incidunt laborum officiis eligendi sed nesciunt eos consectetur, doloremque
quisquam corporis sint amet est modi, fugit id nisi tenetur fuga iure dignissimos veritatis vero rem repellendus? Eos quisquam sunt unde asperiores dolor. Voluptate fuga officiis ipsa eaque omnis! Saepe odit possimus consequuntur aliquid recusandae,
consectetur fuga facilis iusto quidem! Est amet nostrum iste sequi cumque hic magnam id minima optio sunt fugiat obcaecati minus aperiam libero rerum nulla, earum quasi facere ullam doloremque totam maxime unde. Assumenda minus hic reiciendis,
dolorem dignissimos commodi corporis excepturi magni placeat consectetur libero iusto dolores velit voluptatem culpa doloribus, vero quod ex atque enim corrupti, incidunt maxime. Dignissimos nam quidem officia rerum dolores. Alias aliquid
sint cupiditate voluptate, vel odit debitis ex consectetur excepturi quaerat nam velit dolorum, magni blanditiis delectus quisquam beatae, in odio. Minima facilis, sequi rerum excepturi blanditiis id quam ut recusandae ex odit neque. Veniam
fugit a nisi laborum illo velit sequi. Quos laboriosam velit excepturi saepe sequi voluptatum esse, beatae quasi vitae laudantium eligendi, incidunt fugit ab expedita quo quas? Vel optio ducimus quis unde ea, quisquam atque, inventore quae
odit necessitatibus rem, esse laborum eveniet quaerat natus saepe tenetur nisi cumque. Explicabo ratione natus deserunt rerum cumque impedit id ducimus quaerat voluptate, quae ab nisi nostrum sapiente! Quo magnam reiciendis commodi aliquam?
Facere possimus ut animi accusamus aliquid libero similique expedita autem cum excepturi quam quas, totam minus soluta eligendi enim veniam ipsum aut, pariatur consequatur laborum est. Labore voluptas et odit quaerat obcaecati perferendis,
fuga eius temporibus dicta aut beatae provident iste cum qui amet repellat nostrum, praesentium voluptate modi ab. Quaerat consectetur optio, ipsam quas, eius non laborum corrupti cum molestias vel perspiciatis explicabo possimus assumenda
dolores provident, enim odit culpa? Quod vitae provident saepe fugiat culpa aut, odio repudiandae in totam, sequi enim non minus illum aliquam ducimus architecto debitis? Porro cumque eligendi non ex ea, nisi blanditiis quaerat facilis quas
placeat? Fuga esse aliquam quibusdam iusto, vel alias autem maiores, velit vitae mollitia provident. Accusamus officiis expedita, sequi eaque ea molestias velit porro molestiae odit. Beatae excepturi ducimus facere debitis, nesciunt corrupti
perspiciatis dolor natus qui veritatis, provident accusantium cumque. Optio vero, voluptatibus laudantium eum accusamus repellendus, saepe animi quos asperiores officia totam quasi vel accusantium iusto nisi at odio eaque minus laborum, praesentium
quo sint nesciunt. Earum delectus doloribus quisquam illum sint nesciunt voluptas consectetur. Libero cumque esse est at maxime! Ut sit facere at ad explicabo consequatur soluta molestiae voluptates similique. Sequi vel ratione nulla quod
dolore provident adipisci delectus vero architecto hic fugit nisi voluptatibus quasi quae iste dolor, eos atque culpa quibusdam? Illum quibusdam dolore maiores excepturi laborum, molestias, accusantium ad ut minus et delectus facere mollitia
dolores optio repudiandae quos autem eaque voluptas nemo corporis consequuntur? Ratione eaque doloribus temporibus qui expedita deserunt vitae quas iste, corrupti aperiam. Quo dolor asperiores commodi amet. Ducimus, necessitatibus dolorem
laborum quos doloribus beatae exercitationem aut ratione quam suscipit at possimus error assumenda architecto repudiandae excepturi quasi? Excepturi quaerat laborum officiis ipsum laboriosam autem inventore amet adipisci praesentium nam. Temporibus
dolorem repudiandae vero ab! Exercitationem error nostrum dicta. Recusandae eos earum vel soluta, sequi numquam cum et nostrum fugiat rem cumque commodi a est aperiam minus tempora. Distinctio alias, vel soluta ad magnam officiis fuga culpa
iste minus! Vitae repellendus asperiores earum odit praesentium voluptas tempore iusto dignissimos, sunt aperiam amet laborum tempora corporis labore obcaecati, deleniti quae perspiciatis animi excepturi eveniet. Ut dolorem similique aspernatur
esse? Nisi error laudantium eos eveniet quas. Architecto harum atque, incidunt reprehenderit praesentium tempora, cumque velit excepturi quia sunt, dolor quas vel inventore laborum veniam. Tempora eligendi qui nisi aliquam dolorem fuga dolores
dignissimos cumque officiis, asperiores a? Aspernatur quasi saepe dolorem nemo quia voluptate totam quaerat itaque illum distinctio, hic ipsum explicabo ullam rerum ab. Explicabo dicta ea dolorem saepe modi hic inventore, alias minima earum
rerum blanditiis nobis porro harum ratione nulla voluptatem libero, iste repellat. Necessitatibus sint aperiam voluptatum obcaecati aliquam nostrum laudantium! Unde eligendi nisi maxime sunt obcaecati expedita perspiciatis. Pariatur harum
quas quod rerum consequuntur eligendi, doloremque minima neque sequi, fugit cumque maxime quia necessitatibus tempora! Delectus voluptatum sed quod consectetur est enim. Temporibus odit adipisci iusto? Ullam vero deleniti laboriosam. Quae
neque, eius, nihil asperiores temporibus unde optio odit consectetur culpa aspernatur iure excepturi ducimus? Quam nobis blanditiis, sit, quaerat, delectus molestiae maiores exercitationem ducimus mollitia nihil consequatur rerum itaque minus
minima illum laborum id quisquam omnis vero vitae. Perferendis natus necessitatibus ut incidunt, error nulla enim minima ipsam, soluta earum aliquid officia nostrum consectetur magni quas, animi odit labore molestias optio veritatis esse harum!
Incidunt earum nemo autem, odit tempora nobis officia quisquam doloribus assumenda. Eveniet sint voluptatibus accusamus temporibus magni deleniti suscipit, repellendus accusantium vero nihil iste totam veniam aspernatur, praesentium ut aperiam
sed nulla vitae culpa! Tempora nobis molestias voluptates impedit deserunt delectus officiis architecto natus asperiores voluptatibus commodi facilis inventore, officia voluptas hic cum aliquam quidem pariatur veritatis! Voluptates illum,
tenetur quisquam cumque odio, perspiciatis excepturi, voluptatem voluptatum accusamus dolorem architecto. Nobis debitis ipsam excepturi nemo nihil magnam qui? Ad, iure. Totam ipsum ab quo animi asperiores ex mollitia unde, quis repudiandae
quia iusto beatae architecto blanditiis illum dicta reiciendis nulla. Cupiditate, expedita ea earum perferendis officia alias dolores labore, quos itaque repellat nulla officiis ipsam consequuntur consectetur repudiandae recusandae libero
ducimus tempore nostrum, aperiam deleniti ullam ipsa? Nesciunt voluptatem doloremque, reprehenderit illum voluptate animi explicabo, saepe cum accusamus tempora eos! Ratione necessitatibus ipsa ullam totam neque temporibus repudiandae odio
amet fuga!</div>
<div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas cumque vero beatae obcaecati recusandae mollitia minus natus ab quos porro deserunt eaque adipisci minima nisi dignissimos necessitatibus praesentium, corrupti unde quibusdam! Aut eligendi
ullam libero! Culpa, totam? Velit ipsum deserunt sunt recusandae sed, aliquid rerum optio, nobis doloremque repudiandae sit aperiam repellat voluptas provident numquam, consectetur distinctio ea? Officia, accusantium! Beatae similique optio
excepturi, provident doloribus maxime! At optio fugiat, fuga pariatur incidunt amet expedita ea maxime et rerum magnam aliquid? Voluptas, laboriosam. Dolor labore incidunt laborum officiis eligendi sed nesciunt eos consectetur, doloremque
quisquam corporis sint amet est modi, fugit id nisi tenetur fuga iure dignissimos veritatis vero rem repellendus? Eos quisquam sunt unde asperiores dolor. Voluptate fuga officiis ipsa eaque omnis! Saepe odit possimus consequuntur aliquid recusandae,
consectetur fuga facilis iusto quidem! Est amet nostrum iste sequi cumque hic magnam id minima optio sunt fugiat obcaecati minus aperiam libero rerum nulla, earum quasi facere ullam doloremque totam maxime unde. Assumenda minus hic reiciendis,
dolorem dignissimos commodi corporis excepturi magni placeat consectetur libero iusto dolores velit voluptatem culpa doloribus, vero quod ex atque enim corrupti, incidunt maxime. Dignissimos nam quidem officia rerum dolores. Alias aliquid
sint cupiditate voluptate, vel odit debitis ex consectetur excepturi quaerat nam velit dolorum, magni blanditiis delectus quisquam beatae, in odio. Minima facilis, sequi rerum excepturi blanditiis id quam ut recusandae ex odit neque. Veniam
fugit a nisi laborum illo velit sequi. Quos laboriosam velit excepturi saepe sequi voluptatum esse, beatae quasi vitae laudantium eligendi, incidunt fugit ab expedita quo quas? Vel optio ducimus quis unde ea, quisquam atque, inventore quae
odit necessitatibus rem, esse laborum eveniet quaerat natus saepe tenetur nisi cumque. Explicabo ratione natus deserunt rerum cumque impedit id ducimus quaerat voluptate, quae ab nisi nostrum sapiente! Quo magnam reiciendis commodi aliquam?
Facere possimus ut animi accusamus aliquid libero similique expedita autem cum excepturi quam quas, totam minus soluta eligendi enim veniam ipsum aut, pariatur consequatur laborum est. Labore voluptas et odit quaerat obcaecati perferendis,
fuga eius temporibus dicta aut beatae provident iste cum qui amet repellat nostrum, praesentium voluptate modi ab. Quaerat consectetur optio, ipsam quas, eius non laborum corrupti cum molestias vel perspiciatis explicabo possimus assumenda
dolores provident, enim odit culpa? Quod vitae provident saepe fugiat culpa aut, odio repudiandae in totam, sequi enim non minus illum aliquam ducimus architecto debitis? Porro cumque eligendi non ex ea, nisi blanditiis quaerat facilis quas
placeat? Fuga esse aliquam quibusdam iusto, vel alias autem maiores, velit vitae mollitia provident. Accusamus officiis expedita, sequi eaque ea molestias velit porro molestiae odit. Beatae excepturi ducimus facere debitis, nesciunt corrupti
perspiciatis dolor natus qui veritatis, provident accusantium cumque. Optio vero, voluptatibus laudantium eum accusamus repellendus, saepe animi quos asperiores officia totam quasi vel accusantium iusto nisi at odio eaque minus laborum, praesentium
quo sint nesciunt. Earum delectus doloribus quisquam illum sint nesciunt voluptas consectetur. Libero cumque esse est at maxime! Ut sit facere at ad explicabo consequatur soluta molestiae voluptates similique. Sequi vel ratione nulla quod
dolore provident adipisci delectus vero architecto hic fugit nisi voluptatibus quasi quae iste dolor, eos atque culpa quibusdam? Illum quibusdam dolore maiores excepturi laborum, molestias, accusantium ad ut minus et delectus facere mollitia
dolores optio repudiandae quos autem eaque voluptas nemo corporis consequuntur? Ratione eaque doloribus temporibus qui expedita deserunt vitae quas iste, corrupti aperiam. Quo dolor asperiores commodi amet. Ducimus, necessitatibus dolorem
laborum quos doloribus beatae exercitationem aut ratione quam suscipit at possimus error assumenda architecto repudiandae excepturi quasi? Excepturi quaerat laborum officiis ipsum laboriosam autem inventore amet adipisci praesentium nam. Temporibus
dolorem repudiandae vero ab! Exercitationem error nostrum dicta. Recusandae eos earum vel soluta, sequi numquam cum et nostrum fugiat rem cumque commodi a est aperiam minus tempora. Distinctio alias, vel soluta ad magnam officiis fuga culpa
iste minus! Vitae repellendus asperiores earum odit praesentium voluptas tempore iusto dignissimos, sunt aperiam amet laborum tempora corporis labore obcaecati, deleniti quae perspiciatis animi excepturi eveniet. Ut dolorem similique aspernatur
esse? Nisi error laudantium eos eveniet quas. Architecto harum atque, incidunt reprehenderit praesentium tempora, cumque velit excepturi quia sunt, dolor quas vel inventore laborum veniam. Tempora eligendi qui nisi aliquam dolorem fuga dolores
dignissimos cumque officiis, asperiores a? Aspernatur quasi saepe dolorem nemo quia voluptate totam quaerat itaque illum distinctio, hic ipsum explicabo ullam rerum ab. Explicabo dicta ea dolorem saepe modi hic inventore, alias minima earum
rerum blanditiis nobis porro harum ratione nulla voluptatem libero, iste repellat. Necessitatibus sint aperiam voluptatum obcaecati aliquam nostrum laudantium! Unde eligendi nisi maxime sunt obcaecati expedita perspiciatis. Pariatur harum
quas quod rerum consequuntur eligendi, doloremque minima neque sequi, fugit cumque maxime quia necessitatibus tempora! Delectus voluptatum sed quod consectetur est enim. Temporibus odit adipisci iusto? Ullam vero deleniti laboriosam. Quae
neque, eius, nihil asperiores temporibus unde optio odit consectetur culpa aspernatur iure excepturi ducimus? Quam nobis blanditiis, sit, quaerat, delectus molestiae maiores exercitationem ducimus mollitia nihil consequatur rerum itaque minus
minima illum laborum id quisquam omnis vero vitae. Perferendis natus necessitatibus ut incidunt, error nulla enim minima ipsam, soluta earum aliquid officia nostrum consectetur magni quas, animi odit labore molestias optio veritatis esse harum!
Incidunt earum nemo autem, odit tempora nobis officia quisquam doloribus assumenda. Eveniet sint voluptatibus accusamus temporibus magni deleniti suscipit, repellendus accusantium vero nihil iste totam veniam aspernatur, praesentium ut aperiam
sed nulla vitae culpa! Tempora nobis molestias voluptates impedit deserunt delectus officiis architecto natus asperiores voluptatibus commodi facilis inventore, officia voluptas hic cum aliquam quidem pariatur veritatis! Voluptates illum,
tenetur quisquam cumque odio, perspiciatis excepturi, voluptatem voluptatum accusamus dolorem architecto. Nobis debitis ipsam excepturi nemo nihil magnam qui? Ad, iure. Totam ipsum ab quo animi asperiores ex mollitia unde, quis repudiandae
quia iusto beatae architecto blanditiis illum dicta reiciendis nulla. Cupiditate, expedita ea earum perferendis officia alias dolores labore, quos itaque repellat nulla officiis ipsam consequuntur consectetur repudiandae recusandae libero
ducimus tempore nostrum, aperiam deleniti ullam ipsa? Nesciunt voluptatem doloremque, reprehenderit illum voluptate animi explicabo, saepe cum accusamus tempora eos! Ratione necessitatibus ipsa ullam totam neque temporibus repudiandae odio
amet fuga!</div>
<!-- 遮罩層 -->
<div class="modal">
<div class="container">
<div class="main">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Obcaecati eius eligendi aliquid molestias soluta architecto hic reprehenderit enim recusandae, pariatur, placeat iste iusto quisquam ab ratione magni, facilis minus velit!
</div>
<div class="close">X</div>
</div>
</div>
</div>
</body>
</html>
彈出層.css
.modal {
position: fixed;
width: 100%;
height: 100%;
left: 0;
top: 0;
background: rgba(0, 0, 0, .5);
}
.modal .container {
box-sizing: border-box;
border-radius: 7px;
position: absolute;
width: 405px;
height: 512px;
background: white;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
padding: 1em;
}
.modal .container .close {
width: 30px;
height: 30px;
background: red;
position: absolute;
right: -15px;
top: -15px;
border-radius: 50%;
text-align: center;
line-height: 30px;
border: 2px solid blue;
cursor: pointer;
}
颜色透明：
每个颜色 都具有一个透明通道 0 ~ 1
- rgba( 红，绿， 蓝， alpha)
- hex: #红绿蓝 透明通道
定位练习3 轮播图：
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/輪播圖.css">
</head>
<body>
<div class="banner">
<div class="imgs">
<a href=""><img src="./img/1.jpg" alt=""></a>
<a href=""><img src="./img/2.jpg" alt=""></a>
<a href=""><img src="./img/3.jpg" alt=""></a>
</div>
<div class="left"><</div>
<div class="right"><</div>
<div class="modal">
<div class="title">
<h2>大江東區山水風景美如畫</h2>
</div>
<div class="dots">
<ui>
<li></li>
<li></li>
<li></li>
</ui>
</div>
</div>
</div>
</body>
</html>.css
.banner {
width: 520px;
height: 304px;
border: 1px solid;
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;
top: 0;
bottom: 0;
margin: auto;
font-size: 3em;
text-align: center;
line-height: 50px;
font-family: Arial, Helvetica, sans-serif;
color: white;
cursor: pointer;
}
.banner .left:hover,
.banner .right:hover {
color: red;
background: white;
border-radius: 50%;
}
.banner .left {
left: 20px;
}
.banner .right {
right: 20px;
}
.banner .modal {
width: 100%;
height: 40px;
background: rgba(0, 0, 0, 0.3);
position: absolute;
left: 0;
bottom: 0;
}
.banner .modal .title {
float: left;
color: whitesmoke;
line-height: 40px;
padding-left: 20px;
font-weight: bold;
}
.banner .modal .dots {
float: right;
color: whitesmoke;
line-height: 40px;
padding-right: 20px;
}
.banner .modal .dots li {
width: 10px;
height: 10px;
background: whitesmoke;
display: inline-block;
border-radius: 50%;
margin: 0 5px;
}
.banner .modal .dots li:hover {
background: rgb(172, 170, 170);
}
最后
以上就是斯文世界为你收集整理的HTML + CSS 宝典 第五节 CSS 基础 2-1的全部内容，希望文章能够帮你解决HTML + CSS 宝典 第五节 CSS 基础 2-1所遇到的程序开发问题。
如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。
本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。
" class="embed-responsive-item">
意思？" class="embed-responsive-item">
的意义" class="embed-responsive-item">
" class="embed-responsive-item">
发表评论 取消回复