目录
一.CSS基础
1.继承
子元素会继承父元素的某些css属性
通常，跟文字内容相关的属性都能被继承
2.层叠
声明冲突：同一个样式，多次应用到同一个元素
层叠:解决声明冲突的过程（浏览器解决)
1.比较重要性
重要性从高到低：
作者样式表：开发者书写的样式
①作者样式表中的！important样式
②作者样式表中的普通样式
③浏览器的默认样式
2.比较特殊性
总体规则：选择器选择的范围越窄，越特殊
具体规则：通过选择器，计算出一个四位数（XXXX）(逢256进1)
①千位：如果是内联样式，记为1，否则为0
②百位：将选择器中所有ID选择器的数量
③十位：等于选择器中所有类选择器、属性选择器、伪类选择器的数量
④个位：等于选择器中所有元素选择器、伪元素选择器的数量
3.比较源次序 代码书写靠后的胜出
应用
1.重置样式表 书写一些作者样式，覆盖浏览器的默认样式
常见的重置样式表：normalize.css、reset.css、meyer.css
2.爱恨法则：源次序
3.属性值的计算过程
一个元素一个元素依次渲染， 顺序按照页面文档的树形目录结构进行
渲染每个元素的前提条件：该元素的所有css属性必须有值
一个元素，从所有属性都没有值，到所有的属性都有值，这个过程叫做属性计算过程
过程
1. 确定声明值:参考样式表中没有冲突的声明，作为css的属性值
2. 层叠冲突:对样式表有冲突的声明使用层叠规则，确定css属性值
3. 使用继承：对仍然没有值的属性，若可以继承，则继承父元素的值
4. 使用默认值：对仍然没有值的属性，使用默认值
特殊的两个css取值：
*强制继承父元素：inherit*
*设置为默认值：initial
二.盒子模型
1.盒模型
box：盒子，每个元素在页面中都会生成一个矩形区域（盒子）
盒子类型：
-
行盒，display等于inline的元素
-
块盒，display等于block的元素
行盒在页面中不换行，块盒独占一行
display默认值为inline
浏览器默认样式表设置的块盒：容器元素、h1~h6、p
常见的行盒：span、a、img、video、audio
盒子的组成部分
-
内容 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"><</div>
<div class="right">></div>
<div class="modal">
<div class="title">
<h2>发现岛屿的更多故事</h2>
</div>
<div class="dots">
<ul >
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
</div>
</body>
</html>.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;
}
6万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
