内容 content width、height，设置盒子内容的宽高内容部分通常叫做整个盒子的内容盒（content-box）
填充（内边距） padding 盒子边框到盒子内容的距离 padding-left、padding-top、padding-right、padding-bottom padding：简写属性 padding：四个值（上右下左）两个值（上下左右）一个值（四边）填充区+内容区=填充盒 padding-box
边框 border

边框=边框样式+边框宽度+边框颜色（三个都是速写属性）同样适用padding的简写属性

边框样式：border-style

边框颜色：boredr-color

边框宽度：border-width

border：宽度样式颜色

边框+填充区+内容区=边框盒 border-box
外边距 margin

边框到其他盒子的距离

margin-top、margin-left、margin-right、margi

2.盒模型的应用

改变宽高范围

默认情况下，width和height设置的是内容盒宽高

页面重构师：将psd文件（设计稿）制作为静态页面

衡量设计稿尺寸的时候，往往使用的是边框盒，但设置width和height，则设置的是内容盒

1.精确计算

2.CSS3：box-sizing

改变背景覆盖范围

默认情况下，背景覆盖边框盒

可以通过background-clip进行修改

溢出处理

overflow，控制内容（visible可见 hidden隐藏 scroll生成滚动条，可单独控制横向和纵向 auto自动）

断词规则

word-break，会影响文字在什么位置被截断

normal：普通。CJK字符（文字位置截断），非CJK 字符（单词位置截断）

break-all：截断所有。所有文字都在文字处截断

Keep-all：保持所有。所有文字都在单词之间截断

空白处理(只能控制单行文本)

white-space：nowrap

overflow:hidden

text-overflow:ellipsis

3.行盒的盒模型

常见的行盒：包含具体内容的元素

span、strong、em、i、img、video、audio

显著特点

1.盒子沿着内容延伸

2.行盒不能设置宽高

调整行盒的宽高，应该使用字体大小、行高、字体类型，间接调整。

3.内边距（填充区）

水平方向有效，垂直方向仅会影响背景，不会实际占据空间

4.边框

水平方向有效，垂直方向仅会影响背景，不会实际占据空间

5.外边距

水平方向有效，垂直方向仅会影响背景，不会实际占据空间

行块盒

display：inline-block的盒子

1.不独占一行

2.盒模型中所有尺寸都有效

空白折叠

空白折叠，发生在行盒内部（行块盒）或行盒（行块盒）之间

可替换元素和非可替换元素

大部分元素，页面上显示的结果，取决于元素内容，称为非可替换元素

少部分元素，页面上显示的结果，取决于元素属性，称为可替换元素

可替换元素：img、video、audio

绝大部分可替换元素均为行盒

可替换元素类似于行块盒，盒模型中所有尺寸都有效

三.选择器

选择器：从HTML页面中找出特定的某类元素

1.常用选择器

①.元素选择器

基本语法格式：标签名{ 属性1：属性值1；属性2：属性值2；}

②.ID选择器

基本语法格式：#id名{ 属性1：属性值1；属性2：属性值2；}

较灵活的选择器

③.类选择器

基本语法格式：.类名{ 属性1：属性值1；属性2：属性值2；}

最灵活的选择器，DIY程度高

②和③的区别：ID选择器不能多个元素为同一个ID值，而类元素可以

2.其他选择器

①.通配符选择器

基本语法格式：*{ 属性1：属性值1；属性2：属性值2；}

虽然不常用，但是是否可以用通配符选择器写一些比较通用属性的重置样式表，因其选择范围大，如果之后设置不同样式，也能将其覆盖。（我乱说的）

②.属性选择器

基本语法格式：[标签名称] { 属性1：属性值1；属性2：属性值2；}

③.并集选择器

基本语法格式：标签名称1,标签名称2 { 属性1：属性值1；属性2：属性值2；}

同时取多个选择器，取其的并集，设置相同的属性

④.后代选择器

基本语法格式：标签名称1 标签名称2{ 属性1：属性值1；属性2：属性值2；}

可以结合ID选择器和类选择器，但要保证后面的标签是前面的后代标签，可以大于两个

精准确定所要修饰的元素

⑤.子代选择器

基本语法格式：标签名称1>标签名称2{ 属性1：属性值1；属性2：属性值2；}

可以结合ID选择器和类选择器

④和⑤的区别：后代选择器后一个标签可以指代子代元素、子代的子代元素…而子代选择器只能指代子代元素

⑥.兄弟选择器

基本语法格式：标签名称1+标签名称2 { 属性1：属性值1；属性2：属性值2；}

需要满足的条件：拥有同一个父元素，且位置相邻

+：应用标签1的样式到标签2上

~：应用标签1的样式到标签2后面的所有元素上

⑦.伪选择器

伪类选择器：

:hover	定义标记在鼠标悬停(划过)时的样式	所有显示标记
:link	定义标记在超链接状态下的样式	a标签
:focus	定义标记在获取焦点时的样式	a标签(IE浏览器不支持)
:visited	定义标记被访问过后的样式	a标签
:active	定义标记在选定时刻下的样式	a标签

伪对象选择器：

:first-letter	定义文本的第一个字符样式
:first-line	定义文本的首行样式
:before	定义对象之前内容的样式
:after	定义对象之后内容的样式

四.本周学习内容

五.实践内容

1.常规流实践


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="as" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/常规流练习.css">
</head>
<body>
    <article class="container">
        <header>
            <h1>2022春所选课程简介</h1>
            <div class="oringinal-link">
                <a href="https://www.w3school.com.cn/html/html_basic.asp">链接</a>
            </div>
        </header>
        <section>
            <h2>课程1:离散数学</h2>
            <p>任课教师：关伟洲</p>
            <p>离散数学（Discrete mathematics）是研究离散量的结构及其相互关系的数学学科，是现代数学的一个重要分支。离散的含义是指不同的连接在一起的元素，主要是研究基于离散量的结构和相互，其对象一般是有限个或可数个元素。</p>
        </section>
        <section>
            <h2>课程2：数字电路与数字逻辑</h2>
            <p>任课教师：孙俊喜</p>
            <p>用数字信号完成对数字量进行算术运算和逻辑运算的电路称为数字电路，或数字系统。由于它具有逻辑运算和逻辑处理功能，所以又称数字逻辑电路。现代的数字电路由半导体工艺制成的若干数字集成器件构造而成。逻辑门是数字逻辑电路的基本单元。</p>
        </section>
        <section>
            <h2>课程3：算法与程序设计实践</h2>
            <p>任课教师：罗娜</p>
            <p>程序设计是给出解决特定问题程序的过程，是软件构造活动中的重要组成部分。程序设计往往以某种程序设计语言为工具，给出这种语言下的程序。</p>
        </section>
        <section>
            <h2>课程4：高等数学</h2>
            <p>任课教师：张明</p>
            <p>高等数学是由微积分学，较深入的代数学、几何学以及它们之间的交叉内容所形成的一门基础学科。主要内容包括：数列、极限、微积分、空间解析几何与线性代数、级数、常微分方程。工科、理科、财经类研究生考试的基础科目。</p>
        </section>
        <section>
            <h2>课程5：面向对象程序设计</h2>
            <p>任课教师：韩毅</p>
            <p>面向对象程序设计(Object Oriented Programming)作为一种新方法，其本质是以建立模型体现出来的抽象思维过程和面向对象的方法。模型是用来反映现实世界中事物特征的。任何一个模型都不可能反映客观事物的一切具体特征，只能对事物特征和变化规律的一种抽象，且在它所涉及的范围内更普遍、更集中、更深刻地描述客体的特征。通过建立模型而达到的抽象是人们对客体认识的深化。</p>
        </section>
        <section>
            <h2>课程6：网页设计与开发</h2>
            <p>任课教师：姜华</p>
            <p>网页设计（web design，又称为Web UI design，WUI design，WUI），是根据企业希望向浏览者传递的信息（包括产品、服务、理念、文化），进行网站功能策划，然后进行的页面设计美化工作。作为企业对外宣传物料的其中一种，精美的网页设计，对于提升企业的互联网品牌形象至关重要。</p>
        </section>
    </article>
</body>
</html>


body{
    background:#4d4a40;
    padding: 20px 0;
    line-height: 2;
    min-width: 1000px;
}
.container{
    background: #fff;
    width:90%;
    margin:0 auto;
    padding: 30px 0;
}
.container header{
    background: #267890;
    color:#fff;
    text-align: center;
    border: 5px #14414e;
    margin: 0 -34px;
}
.container header h1{
    font-size: 42px;
    font-weight: bold;
}
.container header .original-link{
    color:#dbdbdb;
    margin-bottom: 26px;
}
.container header .original-link a{
    text-decoration: underline;
}
.container header .original-link :hover{
     color: #fff;
}
.container section{
    width: 90%;
    margin: 0 auto;
}
.container section p{
    margin: 1em 0;
}
.container section h2{
    font-size: 32px;
    font-weight: bold;
    border-top: 1px dotted;
    border-bottom: 1px dashed;
}


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.浮动实践


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="as" content="width=device-width, initial-scale=1.0">
    <title>我喜欢的动漫</title>
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/浮动练习.css">
</head>
<body>
    <div class="main">
        <nav class="nav">
            <a href="" class="select">全部</a>
            <a href="">已看完</a>
            <a href="">想看但没看</a>
        </nav>
        <div class="container">
            <div class="choose-area">
                <div class="choose-item clearfix">
                    <div class="left">时间</div>
                    <div class="right">
                        <ul class="clearfix">
                            <li class="select"><a href="">2022</a></li>
                            <li><a href="">2021</a></li>
                            <li><a href="">2020</a></li>
                            <li><a href="">2019</a></li>
                            <li><a href="">2018</a></li>
                            <li><a href="">2017</a></li>
                            <li><a href="">2016</a></li>
                            <li><a href="">2015</a></li>
                            <li><a href="">2014</a></li>
                            <li><a href="">2013</a></li>
                            <li><a href="">2012</a></li>
                            <li><a href="">其他</a></li>
                        </ul>
                    </div>
                </div>
                <div class="choose-item clearfix">
                    <div class="left">类型</div>
                    <div class="right">
                        <ul class="clearfix">
                            <li><a href="">冒险</a></li>
                            <li><a href="">恋爱</a></li>
                            <li><a href="">校园</a></li>
                            <li><a href="">奇幻</a></li>
                            <li><a href="">热血</a></li>
                            <li><a href="">国风</a></li>
                            <li><a href="">历史</a></li>
                            <li><a href="">战争</a></li>
                            <li><a href="">其他</a></li>
                        </ul>
                    </div>
                </div>
                <div class="choose-item clearfix no-line">
                    <div class="left">地区</div>
                    <div class="right">
                        <ul class="clearfix">
                            <li><a href="">国漫</a></li>
                            <li><a href="">日漫</a></li>
                            <li><a href="">其他</a></li>
                        </ul>
                    </div>
                </div>
            </div> 
            <div class="movies clearfix">
                <div class="movie-item">
                    <div class="poster">
                    <a href="">
                        <img src="https://tse1-mm.cn.bing.net/th/id/R-C.07b710be9bbe1ea60db25b25880fa60b?rik=OcDOfzi4r0n%2f0Q&riu=http%3a%2f%2fimage4.dushemovie.com%2fother%2f20200827%2f1138%2f5f472aa4179ee.jpg&ehk=1WaWigXsq8fT0%2bFAhN4k%2bafgJOzstgCAM%2flgOIzFd0U%3d&risl=&pid=ImgRaw&r=0" alt="雾山五行">
                    </a>
                    </div>
                <div class="name">
                    <a href="">
                        雾山五行
                    </a>
                </div>
                <div class="score">
                    10.0
                </div>
                </div>
                <div class="movie-item">
                <div class="poster">
                    <a href="">
                        <img src="https://www.bnacg.com/uploads/1909/1-1Z91Q55401V4.jpg" alt="灵笼">
                    </a>
                </div>
                <div class="name">
                    <a href="">
                        灵笼
                    </a>
                </div>
                <div class="score">
                    10.0
                </div>
                </div>
                <div class="movie-item">
                <div class="poster">
                    <a href="">
                        <img src="https://tse1-mm.cn.bing.net/th/id/R-C.f317bb1dd14348bc486ab46543882fdc?rik=ghsQXf%2fcFeeSIw&riu=http%3a%2f%2fwww.mms591.com%2fwww.mms591.com-photo%2f20201114%2f1-201114222506_480x800.jpg&ehk=bVkVsnoTD7aFsvW1YXFX2xq4wj1MFU0l3Q0GCcdAjek%3d&risl=&pid=ImgRaw&r=0" alt="租借女友">
                    </a>
                </div>
                <div class="name">
                    <a href="">
                        租借女友
                    </a>
                </div>
                <div class="score">
                    10.0
                </div>
                </div>
                <div class="movie-item">
                <div class="poster">
                    <a href="">
                        <img src="https://tse1-mm.cn.bing.net/th/id/OIP-C.o3CWrkKjuEvZSzZsy9kwKQHaKf?w=199&h=281&c=7&r=0&o=5&dpr=1.75&pid=1.7" alt="鬼灭之刃">
                    </a>
                </div>
                <div class="name">
                    <a href="">
                        鬼灭之刃
                    </a>
                </div>
                <div class="score">
                    10.0
                </div>
                </div>
                <div class="movie-item">
                <div class="poster">
                    <a href="">
                        <img src="https://tse1-mm.cn.bing.net/th/id/OIP-C.QPve7U88AWjV98ogr2g0HAHaKe?w=199&h=281&c=7&r=0&o=5&dpr=1.75&pid=1.7" alt="大理寺日志">
                </div>
                <div class="name">
                    <a href="">
                        大理寺日志
                    </a>
                </div>
                <div class="score">
                    10.0
                </div>
                </div>
                <div class="movie-item">
                <div class="poster">
                    <a href="">
                        <img src="data:image/jpeg;base64,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" alt="干物妹小埋">
                    </a>
                </div>
                <div class="name">
                    <a href="">
                        干物妹小埋
                    </a>
                </div>
                <div class="score">
                    10.0
                </div>
                </div>
                <div class="movie-item">
                <div class="poster">
                    <a href="">
                        <img src="https://tse1-mm.cn.bing.net/th/id/R-C.2f1536d12e24c791a5785092edd4e4be?rik=wzE9BvNWHLHnLA&riu=http%3a%2f%2fwtkoss.weituk.com%2fwp-content%2fuploads%2f2020%2f05%2f005Iu2BQly1gect90n5jvj30yi22ote3.jpg&ehk=G%2ftxA%2fpCQFLwl4bmb5Th3JzJ9L5tk8CVKfkvec8q524%3d&risl=&pid=ImgRaw&r=0" alt="瑞克和莫蒂">
                    </a>
                </div>
                <div class="name">
                    <a href="">
                        瑞克和莫蒂
                    </a>
                </div>
                <div class="score">
                    10.0
                </div>
                </div>
                <div class="movie-item">
                <div class="poster">
                    <a href="">
                        <img src="https://pic2.zhimg.com/v2-0d7b1e2aa3e4b315637072402a81de79_r.jpg" alt="辉夜大小姐想让我告白？~天才们的恋爱头脑战~">
                    </a>
                </div>
                <div class="name">
                    <a href="">
                        辉夜大小姐想让我告白？~天才们的恋爱头脑战~
                    </a>
                </div>
                <div class="score">
                    10.0
                </div>
                </div>
                <div class="movie-item">
                    <div class="poster">
                        <a href="">
                            <img src="https://tse1-mm.cn.bing.net/th/id/R-C.c72477f3725623fee44f41fc5bae65d4?rik=ZUlYs1uDNnLtrw&riu=http%3a%2f%2fpuui.qpic.cn%2fvcover_vt_pic%2f0%2fwk85h1a859a83501522243719%2f0&ehk=kjRsBiwroP05mjHiz75OshKxORA5dy8ZVSg%2bYn5Svqc%3d&risl=&pid=ImgRaw&r=0" alt="非人哉">
                        </a>
                    </div>
                    <div class="name">
                        <a href="">
                            非人哉
                        </a>
                    </div>
                    <div class="score">
                        10.0
                    </div>
                </div>
                <div class="movie-item">
                    <div class="poster">
                        <a href="">
                            <img src="https://tse3-mm.cn.bing.net/th/id/OIP-C.b6FPpcpzOUNlPE0cmoDGawAAAA?pid=ImgDet&rs=1" alt="元龙">
                        </a>
                    </div>
                    <div class="name">
                        <a href="">
                            元龙
                        </a>
                    </div>
                    <div class="score">
                        10.0
                    </div>
                </div>
                <div class="movie-item">
                    <div class="poster">
                        <a href="">
                            <img src="https://tse3-mm.cn.bing.net/th/id/OIP-C.N-1BHmKxQ2yW7Gu1y86bfwHaJ4?w=199&h=265&c=7&r=0&o=5&dpr=1.75&pid=1.7" alt="伍六七">
                        </a>
                    </div>
                    <div class="name">
                        <a href="">
                            伍六七
                        </a>
                    </div>
                    <div class="score">
                        10.0
                    </div>
                </div>
                <div class="movie-item">
                    <div class="poster">
                        <a href="">
                            <img src="https://pic2.zhimg.com/v2-9096415662d88882065794b540ebfdd9_r.jpg" alt="镇魂街">
                        </a>
                    </div>
                    <div class="name">
                        <a href="">
                            镇魂街
                        </a>
                    </div>
                    <div class="score">
                        10.0
                    </div>
                </div>
        <div class="pager">
            <a href="" class="select">1</a>
            <a href="">2</a>
            <a href="">下一页</a>
        </div>
    </div>
    
</body>
</html>


body{
    color: #333;
}
.clearfix::after{
    content:"";
    display:block;
    clear: both;
}
.main{
    line-height: 1.5;
}
.main .nav{
    height: 60px;
    background: #47464a;
    color:#999;
    text-align: center;
    line-height: 60px;
}
.main .nav a{
    margin: 0 38px;
}
.main .nav a:hover{
    color:#fff
}
.main .nav a.select{
    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.select{
    background: #ef4238;
    color: #fff;
    border-radius: 15px;
}
.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 2px;
    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.5;
}
.pager{
    margin: 2em 0;
    text-align: center;
}
.pager a{
    border: 1px solid #d8d8d8;
    padding: 5px 10px;
    margin: 0 3px;
}
.pager a:hover{
    border-color: #ef4238;
}
.pager a.select{
    background: #ef4238;
    color: #fff;
    border: none;
}

3.定位实践1——二级菜单


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="as" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/二级菜单.css">
</head>
<body>
    <header class="header">
        <ul class="topnav clearfix">
            <li><a href="">我的图片</a></li>
            <li><a href="">我的音乐</a></li>
            <li><a href="">我的动漫</a></li>
            <li>
                <a href="">我的游戏</a>
                <div class="submenu">
                    <ul>
                        <li>死亡细胞</li>
                        <li>双人成行</li>
                        <li>饥荒</li>
                        <li>格斗哈拉</li>
                        <li>碧蓝航线</li>
                        <li>精灵与萤火意志</li>
                        <li>精灵与黑暗森林</li>
                        <li>喵斯快跑</li>
                        <li>元气骑士</li>
                        <li>女巫来了</li>
                    </ul>
                </div>
            </li>
            <li><a href="">我的记录</a></li>
            <li><a href="">登录</a></li>
        </ul>
    </header>
    <div style="background: lightblue;">
 
    </div>
</body>
</html>


.clearfix::after{
    content:"";
    display:block;
    clear: both;
}
.header{
    background: #e3e4e5;
    color:#999;
    height: 40px;
    line-height: 40px;
    position: fixed;
    width: 100%;
    left: 0;
    top: 0;
}
.header .topnav>li{
    float:left ;
    margin: 0 20px;
    width :150px;
    text-align: center;
    height: 40px;
    box-sizing: border-box;
    position: relative;
}
.header .topnav>li:hover{
    border: 2px solid #ccc;
    border-bottom:none ;
    line-height: 36px;
    background: #fff;
}
.header .topnav>li .submenu{
    text-align: left;
    line-height: 1.5;
    width: 300px;
    display:none;
    border: 2px solid #ccc ;
    box-sizing: border-box;
    position: absolute;
    right:-2px ;
    background: #fff;
}
.header .topnav>li:hover .submenu{
    display: block;
    padding: 10px;
}
.header .topnav>li:hover::after{
    content: "";
    position: absolute;
    width: 100%;
    height: 5px;
    background: #fff;
    bottom: 0;
    left: 0;
}

4.定位实践2——弹出层


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="as" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/弹出层.css">
</head>
<body>
    <div class="main"> 
        <img src="弹出层.png" alt="">
    </div>
    <div class="modal">
        <div class="container">
            <form class="form" action="https://ac.nowcoder.com/acm/contest/23106#description"></form>
                账号：<input type="text" name="账号"/><br />
                密码：<input type="text" name="密码"/><br />
                <input type="submit" value="登录"/>
                <input type="reset" value="重置"/>
            </form>
            <div class="close">
                X
            </div>
        </div>
    </div>
</body>
</html>


.main img{
    width: 100%;
}
.modal{
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background: rgba(0, 0, 0,0.5);
}
.modal .container{
    width: 404px;
    height: 512px;
    background: #fff;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    box-sizing: border-box;
    padding: 1em;
    border-radius: 6px; 
}
.modal .container .close{
    width: 30px;
    height: 30px;
    background: red;
    border-radius: 50%;
    color: #fff;
    text-align: center;
    line-height: 30px;
    position: absolute;
    top: -15px;
    right: -15px;
    border:2px solid #fff;
    cursor: pointer;
}

5.定位实践3——轮播图


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="as" content="width=device-width, initial-scale=1.0">
    <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="轮播图.png" alt=""></a>
            <a href=""><img src="" alt=""></a>
            <a href=""><img src="" alt=""></a>
        </div>
        <div class="left">&lt;</div>
        <div class="right">&gt;</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>


.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;
    top: 0;
    bottom: 0;
    margin: auto;
    font-size: 3em;
    text-align: center;
    font-family: Arial;
    color: #fff;
    border-radius: 50%;
    line-height: 50px;
    cursor: pointer;
}
.banner .left:hover,
.banner .right:hover{
    background: #fff;
    color: #f40;
}
.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;
    color: #fff;
    line-height: 40px;
    padding: 0 20px;
    box-sizing: border-box;
}
.banner .modal .title{
    float: left;
    font-weight: bold;
}
.banner .modal .dots{
    float: right;
}
.banner .modal .dots li{
    width: 6px;
    height: 6px;
    background: #ccc;
    display: inline-block;
    margin: 0 2px ;
    border-radius: 50%;
    cursor: pointer;
}
.banner .modal .dots li:hover{
    background: #369;
}

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/代码探险家/article/detail/753519