千锋教育-加百利：https://space.bilibili.com/31452330?spm_id_from=333.788.b_765f7570696e666f.2
cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ2NTIyMzY2,size_16,color_FFFFFF,t_70)

快捷键

ul列表li标签：ul>li*11 按下tab

ul列表li标签div：ul>li*11>div *4

ps切图

Alt+鼠标滚轮→放大缩小

ctrl+alt+shift+s→保存图片（选择）

23、元素的浮动布局（上）

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style type="text/css">/*-------------文字环绕效果----------------------*/.green{width: 100px;height: 100px;background: green;float: left;        /*左浮动*/}.red{width: 200px;height: 200px;background: red;}/*-------------横向排版布局-----------------------*/.a{width: 20%;background: green;}.b{width:60%;background: red;}.c{width: 20%;background: blue;}.a,.b,.c{float:left;height: 100px;}</style>
</head>
<body><p>文字环绕效果</p><div class="green"></div><div class="red">跳出井底的青蛙跳出井底的青蛙跳出井底的青蛙跳出井底的青蛙跳出井底的青           蛙跳出 井底的青蛙跳出井底的青蛙跳出井底的青蛙跳出井底的青蛙跳出井底         的青蛙跳出井底的青蛙</div><p>横向排版布局</p><div class="a"></div><div class="b"></div><div class="c"></div></body>
</html>

总结：一、实现文字环绕效果，需要两个div，小的div用浮动二、横向排版布局,均用浮动将其对齐，相同的属性（重复的代码）放到一个样式中写

24、元素的浮动布局（中）

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>.a{width: 20%;background: green;}.b{width:60%;background: red;}.c{width: 20%;background: blue;}.a,.b,.c{float:left;height: 200px;}.hh{height: 360px;background: black;}.outor{height: 200px;}</style>
</head><body>
<div class="outor"><!--给浮动元素套上一层父元素，父元素不做浮动，解决了浮动元素覆盖其他元素的问题--><div class="a"></div><div class="b"></div><div class="c"></div>
</div><div class="hh"></div>
</body>
</html>

总结：一、为解决浮动元素覆盖其他元素的问题：我们给浮动元素在外面套上一层父元素二、浮动元素无法将父元素撑开，故需要给父元素设置高度

overflow : auto; //父元素自动调整大小覆盖子元素

clear: left / right / both //清除浮动

25、元素的浮动（下）

浮动元素在排列时，只参考前一个元素

右浮动的顺序问题

左浮动顺序排列：123

右浮动顺序排列：321

浮动元素的重叠问题

1、浮动元素不会覆盖文字内容

2、浮动元素不会覆盖图片内容

（因为图片本身也属于文本，可以将图片看作是一个特殊的文字）

3、浮动元素不会覆盖表单元素

（输入框，单选框，复选框，按钮，下拉选择框等）

26、为什么需要盒模型(上)

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style type="text/css">*{margin: 0px;}#box{width: 750px;/*每个div大小实际为250，三个250为750*/overflow: auto;/*自动设置父元素的高度*/margin: auto;/*自动设置父元素的左右边距，使得子元素居中*/}.item{width: 210px;height: 136px;float: left;margin: 20px;}</style>
</head>
<body>
<div id="box"><div class="item" style="background: url(img/青蛙.jpg)"></div><div class="item" style="background: url(img/青蛙.jpg)"></div><div class="item" style="background: url(img/青蛙.jpg)"></div>
</div>
</body>
</html>

总结：一、盒子模型可以设置边距margin，使各个图片之间有空隙二、overflow: auto;/*自动设置父元素的高度*/三、margin: auto;/*自动设置父元素的左右边距，使得子元素居中*/

margin-top:10px;

margin-right:20px;

margin-bottom:20px;

margin-left:30px;

27、为什么需要盒模型(下)

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style type="text/css">*{margin: 0px;}#box{width: 870px;/*每个div的大小都增加了，故父元素也应手动改变其大小*/overflow: auto;/*自动设置父元素的高度*/margin: auto;/*自动设置父元素的左右边距，使得子元素居中*/}.item{/*此时就不要给盒子模型手动设置大小了，由图片自动将其撑开*/float: left;margin: 20px;border: black solid 5px;padding: 20px;/*为了让图片与边框有一定的距离，我们可以给盒子模型增加一个内边距padding*/}.item img{width: 210px;height: 136px;}</style>
</head>
<body>
<div id="box"><div class="item" style=")"><img src="img/青蛙.jpg"><br>青蛙一号</div><div class="item"><img src="img/青蛙.jpg"><br>青蛙二号</div><div class="item"><img src="img/青蛙.jpg"><br>青蛙三号</div>
</div>
</body>
</html>

盒子模型

28、布局练习

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style type="text/css">*{margin: 0;padding: 0;}#header{width: 100%;height: 50px;background: red;}#header .head{width: 1000px;height:50px;background: darkgray;margin: auto;}#banner{width: 100%;height: 500px;background: #7373e0;}#catagory{width: 1000px;height: 200px;margin: auto;background: deeppink;}#catagory .item{width: 150px;height: 150px;padding-bottom: 25px;padding-top: 25px;padding-left: 10px;padding-right: 10px;border-right:1px dashed black ;float: left;}#catagory .item-first{padding-left: 0px;}#catagory .item-last{padding-right: 0px;border: 0px;}#case{height: 500px;width: 100%;background: #d6d3d3;}#case .p1{font-size: 30px;}#case .wrapper{width: 1000px;height:300px ;margin: auto;background: #7373e0;}#case .wrapper .wrapper-item{width: 200px;height:300px;background: green;float: left;}#case .wrapper .zhong{margin-left: 50px;margin-right: 50px;}#case .p2{width: 1000px;margin-right: auto;margin-left: auto;margin-top: 15px;height: 40px;font-size: 30px;line-height: 40px;text-align: center;color: dimgray;}</style>
</head>
<body>
<div id="header"><div class="head"></div>
</div>
<div id="banner"></div>
<div id="catagory"><div class=" item item-first"></div><div class="item"></div><div class="item"></div><div class="item"></div><div class="item"></div><div class="item item-last"></div>
</div>
<div id="case"><p class="p1">Case</p><div class="wrapper"><div class="wrapper-item"></div><div class="wrapper-item zhong"></div><div class="wrapper-item"></div></div><p class="p2">查看更多+</p>
</div>
</body>
</html>

29、css属性简写

background

background-color: dimgray;      /*背景色*/
background-image: url("#");     /*背景图片*/
background-repeat: no-repeat;   /*重复平铺*/三个属性合并为一个属性
background: dimgray  url("#") no-repeat;

border

border-width: 1px;/*边框宽度*/
border-style: solid;/*边框样式*/
border-color: red;/*边框颜色*/
属性合并
border: 1px solid red;/*宽度 样式 颜色*/
注：此处只有颜色可以省略

font

font-style: italic;/*斜体*/
font-weight: bold;/*加粗*/
font-family: Arial,sans-serif;/*字体种类*/
font-size: 20px;/*字体大小*/
line-height: 35px;/*行高*/
属性合并
font: italic bold 20px/35px Arial,sans-serif,"微软雅黑";/*字体：斜体字  加粗  字号大小/行高 默认字体，备用字体，备用字体*/
注：省略一些属性是可以的但一定要注意顺序问题

margin/padding

margin-top: 30px;margin-right: 30px;margin-bottom: 30px;margin-left: 30px;margin: 10px 15px 10px 15px;/*上 右 下 左*/margin:10px 15px 15px;/*上 左右 下*/margin: 10px 15px;/*上下 左右*/margin: 10px;/*上下左右*/

color

color: red;
color:rgb(184,134,89);
color: #B88780;

30、元素的不同类型

三大类型

块元素：可以的设置宽高大小，默认宽度为100%，并且独占一行（p）（ul li）（h1~h6）（div）（form）（table）

内联（行内）元素：无法设置宽高，元素大小随内容变化，所有元素默认排在一行（i）（b）（span）（a）

内联块元素：既能设置宽高大小，又能排在一行显示（img）（input）

dispay：block：表示块元素

inline:表示内联(行内)元素

inline-block:表示内联块元素

总结：1、当行内元素无法居中显示的时候我们可以将其强行转换为其他元素，使用display属性。2、块元素居中使用margin；文本居中使用text—align：center；

31、元素的定位（上）

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style type="text/css">*{margin: 0;padding: 0;}.box{width: 1200px;height: 500px;background: dimgray;/*此处可以放置背景图片*/position:relative;/*相对位置*/margin: 10px auto;}.p1{/*主要负责把p1这个盒子定位好*/left: 124px;top: 124px;position: absolute;/*绝对位置*/}.p1 .point{background: red;height: 20px;width: 20px;float: left;/*为了与文字在同一行排列*/}.p1 .info{color: red;font-size: 20px;float: left;/*为了与文字在同一行排列*/line-height: 20px;margin: 0px 2px;}</style>
</head>
<body>
<div class="box"><div class="p1"><div class="point"></div><div class="info">美西</div></div>
</div>
</body>
</html>

总结：1、将背景图片设为相对位置，以背景图片作为参考系将点的盒子设为绝对位置2、对点的盒子设定位置3、将点与文字设为同一行使用float属性，同时为了让文字与点位置排列整齐，使用行高height-line属性

32、元素的定位（下）

固定定位：position: fixed;

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style type="text/css">body{height: 2500px;padding: 0;margin: 0;}#div1{width: 100%;height: 110px;background: dimgray;position: fixed;/*固定定位*/left: 0;top: 0;}</style>
</head>
<body>
<div id="div1">顶部信息栏
</div>
<div><img src="img/青蛙.jpg" alt="青蛙">
</div>
</body>
</html>

补充：当内层盒模型设置了绝对定位，它将寻找外层设置过定位(position:relative/absolute/fixed;)的盒模型为参考系，如果由内到外始终找不到定位的盒模型，将以浏览器为参考系

33、鼠标划入效果

:hover{}

//鼠标划入方块时的效果<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style type="text/css">.test{width: 100px;height: 100px;background: red;}.test:hover{background: green;}</style>
</head>
<body>
<div class="test"></div>
</body>
</html>

鼠标滑过超链接时的效果

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style type="text/css">.info{color: #12124f;text-decoration: none;  /*去掉下划线*/}.info:hover{color: #cb0f50;text-decoration: underline;/*鼠标划入时，添加下划线*/}</style>
</head>
<body>
<a href="#" class="info">百度</a>
</body>
</html>

34、精灵图效果

点到哪个div哪个div显示图片，其余均以蓝色背景显示

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style type="text/css">/*1、去掉li标签的原点2、让所有的li标签都横向排列3、设置盒子模型大小，颜色4、设置鼠标划入时效果*/*{margin: 0;padding: 0;}ul{list-style: none;/*将列表前的符号去掉*/}ul li{float: left;/*让所有的li标签*都横向排列*/margin-right: 10px;/*让每一部分之间都有一定的间距*/}ul li div{width: 100px;height: 100px;background: cadetblue;}ul li.a1:hover div{background: url("img/7_03.png") 0px 0;}ul li.a2:hover div{background: url("img/7_03.png")-100px 0;}ul li.a3:hover div{background: url("img/7_03.png")-200px 0;}ul li.a4:hover div{background: url("img/7_03.png")0 -100px;}ul li.a5:hover div{background: url("img/7_03.png")-100px -100px;}ul li.a6:hover div{background: url("img/7_03.png")-200px -100px;}ul li.a7:hover div{background: url("img/7_03.png")0 -200px;}ul li.a8:hover div{background: url("img/7_03.png")-100px -200px;}ul li.a9:hover div{background: url("img/7_03.png")-100px -200px;}</style>
</head>
<body>
<ul><li class="a1">001<div></div></li><li class="a2">002<div></div></li><li class="a3">003<div></div></li><li class="a4">004<div></div></li><li class="a5">005<div></div></li><li class="a6">006<div></div></li><li class="a7">007<div></div></li><li class="a8">008<div></div></li><li class="a9">009<div></div></li>
</ul>
</body>
</html>

35、语义化标签

语义化标签

<header>...</header><!--头部-->
<footer>...</footer><!--尾部-->
<nav>...</nav><!--导航-->
<artical>...</artical><!--文章（通常指数据内容）-->
<aside>...</aside><!--侧边栏-->
<main>...</main><!--网页主体-->
<section>...</section><!--区块，片段类似于div容器-->

使用示例

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style type="text/css">*{margin: 0;padding: 0;}header,footer{height: 50px;background-color: #44546A;text-align: center;color: white;line-height: 50px;}main{overflow: auto;}nav,section,aside{float: left;}main>nav{width: 25%;}main>section{width: 50%;padding: 0 10px;box-sizing:border-box;}main>aside{width: 25%;}p{height: 30px;background-color: #8497B0;text-align: center;margin: 10px 0;color: white;}</style>
</head>
<body><header>Header</header><main><nav>Nav<p>LINK</p><p>LINK</p><p>LINK</p><p>LINK</p><p>LINK</p><p>LINK</p><p>LINK</p><p>LINK</p></nav><!--导航栏--><section><!--区块，片段类似于div容器--><article>Artical<p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p></article><article>Artical<p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p></article></section><aside><!--侧边栏-->Aside<p></p><p></p><p></p><p></p><p></p><p></p><p></p><p></p></aside></main><footer>Footer</footer>
</body>
</html>

36、智能表单

<input type="email" name="" id="" value="nihao"> <!--邮箱输入框12378934@qq.com-->
<input type="url" name="" id="" value="nihao">    <!--http输入框http://xxxxx-->
<input type="number" name="" id="" value="nihao">  <!--数字输入框 29-->

新增知识点：
<input type="text" placeholder="请输入姓名"><!--placeholder：提示语-->
<input type="text"maxlength="10"><!--maxlength：最大输入位数--> <textarea name="diancan"cols="30" rows="10"placeholder="想吃点啥就点啥吧"></textarea><!--textarea:多行输入框-->多选框随意改变大小：resize：both（默认）/none/vertical/horizontal随意调整大小/不可调整大小/仅垂直可调整/仅水平可调整
鼠标滑入按钮是的效果cursor:auto（默认）/crosshair/pointer/move根据浏览器决定/十字线/一只小手/十字箭头
outline:#f40 solid 10px
outline-offset:-27px

示例

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style type="text/css">*{padding: 0;margin: 0;}form{width: 350px;background-color: #9cbc2b;margin: 20px auto;padding: 0 15px;color: #364411;border-radius: 5px;}.step{font-size: 14px;font-weight: bold;margin: 10px 0;}.form-line{border-radius: 5px;border-color: #f0f5df;border-width: 2px;border-style: solid;padding: 3px;margin: 3px 0;background-color: #cede95;font-size: 12px;padding-left: 10px;}.form-line span{display:inline-block;/* display：span标签是行内标签，不能改变大小宽高，因此将其改为行内块元素*/width: 110px;}.form-line input{background: white;border: none;height: 20px;border-radius: 3px;width: 180px;outline: none;/*当选中这个输入框时会出现光环，此属性将其去掉*/}.form-line input[type=radio]{/*在这里多加了一个[type=radio]筛选条件，使得其只作用于单选框*/width: 25px;height: 12px;}.form-line textarea{width: 180px;height: 70px;vertical-align: top;border: none;border-radius: 3px;resize: none;/*resize将多行文本框的大小固定住，这样就不能随便改变大小了*/outline: none;/*outline当选中这个输入框时会出现光环，此属性将其去掉*/}input.submit-but{border: none;background-color: #374313;color: white;display: block;width: 100px;padding: 5px 0;border-radius: 20px;margin: 10px auto;cursor: pointer;/* cursor当鼠标滑倒按钮上时，鼠标样式变成小手状*/}</style>
</head>
<body><form action=""><section  ><p class="step">第一步，详细信息</p><p class="form-line"><span>姓名</span><input type="text"placeholder="请输入姓名"></p><p class="form-line"><span>电话</span><input type="number"placeholder="1398884444"></p><p class="form-line"><span>Facebook主页</span><input type="url"></p></section><section><p  class="step">第二步，收货地址</p><p class="form-line"><span>详细地址</span><textarea placeholder="想吃啥点啥"></textarea></p><p class="form-line"><span>邮编</span><input type="number"></p></section><section><p class="step">第二步，银行卡信息</p><p class="form-line"><span>银行卡类型</span><input type="radio"name="card">借记卡<input type="radio"name="card">信用卡<input type="radio"name="card">VISA卡</p><p class="form-line"><span>卡号</span><input type="number"></p><p class="form-line"><span>密码</span><input type="password"></p><p class="form-line last-fl"><span>持卡人</span><input type="text"></p></section><input type="submit" value="提交" class="submit-but"></form>
</body>
</html>

37、outline效果

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>.box{width: 50px;height: 50px;margin: 50px;border: 1px solid black;border-radius: 25px;outline: 10px solid black;outline-offset: -35px;/*表示outline的偏移量*/}</style>
</head>
<body>
<div class="box"></div>
</body>
</html>

39、overflow内容溢出

overflow：auto；当内容溢出时出现滚动条

overflow:hidden;当内容溢出时，溢出部分就被隐藏了，但不会出现滚动条，只能看见当前显示的部分

也可以单独设置横向竖向：overflow-x:hidden; overflow-y:auto;

总结：overflow：visible（默认）/hidden/auto溢出部分可见/溢出部分隐藏/适当加入滚动条overflow-x：visible（默认）/hidden/auto溢出部分可见/溢出部分隐藏/适当加入滚动条overflow-y：visible（默认）/hidden/auto溢出部分可见/溢出部分隐藏/适当加入滚动条

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>section{width: 800px;margin: 100px auto;}section article{float: left;width: 200px;height: 300px;overflow: hidden;border-radius: 4px;}#text-a{background-color: #373334;color: white;}#text-b{background-color: #c8D7D2;}#text-c{background-color: #F3F2F0;}#text-d{background-color: #D74339;}h1{margin: 10px 10px 5px 50px;}p{margin: 12px 50px;}section:hover article{width: 50px;}section article:hover{width: 650px;overflow: auto;}</style>
</head>
<body>
<section><article id="text-a"><h1>金刚经</h1><p>《金刚般若波罗蜜经》来自印度的初期大乘佛教。因其包含根本般若的重要思想，在般若系大乘经中可视为一个略本；本经说“无相”而不说“空”，保持了原始般若的古风。本经六种译本中，通常流通的是鸠摩罗什的初译。如印顺法师所说，此后的五译是同一唯识系的诵本，比如菩提流支、达摩笈多等，都是依无著、世亲的释本译出；只有罗什所译为中观家（般若系）的诵本。又如吕澂说，罗什传龙树的般若学，所以能“心知其意”；到玄奘新译般若经，《金刚经》其实已“面目全非”了。</p></article><article id="text-b"><h1>金刚经</h1><p>《金刚般若波罗蜜经》来自印度的初期大乘佛教。因其包含根本般若的重要思想，在般若系大乘经中可视为一个略本；本经说“无相”而不说“空”，保持了原始般若的古风。本经六种译本中，通常流通的是鸠摩罗什的初译。如印顺法师所说，此后的五译是同一唯识系的诵本，比如菩提流支、达摩笈多等，都是依无著、世亲的释本译出；只有罗什所译为中观家（般若系）的诵本。又如吕澂说，罗什传龙树的般若学，所以能“心知其意”；到玄奘新译般若经，《金刚经》其实已“面目全非”了。</p></article><article id="text-c"><h1>金刚经</h1><p>《金刚般若波罗蜜经》来自印度的初期大乘佛教。因其包含根本般若的重要思想，在般若系大乘经中可视为一个略本；本经说“无相”而不说“空”，保持了原始般若的古风。本经六种译本中，通常流通的是鸠摩罗什的初译。如印顺法师所说，此后的五译是同一唯识系的诵本，比如菩提流支、达摩笈多等，都是依无著、世亲的释本译出；只有罗什所译为中观家（般若系）的诵本。又如吕澂说，罗什传龙树的般若学，所以能“心知其意”；到玄奘新译般若经，《金刚经》其实已“面目全非”了。</p></article><article id="text-d"><h1>金刚经</h1><p>《金刚般若波罗蜜经》来自印度的初期大乘佛教。因其包含根本般若的重要思想，在般若系大乘经中可视为一个略本；本经说“无相”而不说“空”，保持了原始般若的古风。本经六种译本中，通常流通的是鸠摩罗什的初译。如印顺法师所说，此后的五译是同一唯识系的诵本，比如菩提流支、达摩笈多等，都是依无著、世亲的释本译出；只有罗什所译为中观家（般若系）的诵本。又如吕澂说，罗什传龙树的般若学，所以能“心知其意”；到玄奘新译般若经，《金刚经》其实已“面目全非”了。</p></article>
</section>
</body>
</html>

40、同类兄弟选择器nth-of-type（1）a{……}

nth-of-type（1）a{……}

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>ul li a{background-image: url("img/7_03.png");background-repeat: no-repeat;<!--使图片不平铺-->padding-right: 20px;background-position-x:right;<!--使图片靠右-->}ul li:nth-of-type(1) a{background-position-y:2px;}ul li:nth-of-type(2) a{background-position-y:-47px;}ul li:nth-of-type(3) a{background-position-y:-72px;}ul li:nth-of-type(4) a{background-position-y:-122px;}ul li:nth-of-type(5) a{background-position-y:-145px;}ul li:nth-of-type(6) a{background-position-y:-191px;}ul li:nth-of-type(7) a{background-position-y:-241px;}ul li:nth-of-type(8) a{background-position-y:-269px;}ul li:nth-of-type(9) a{background-position-y:-296px;}</style>
</head>
<body>
<ul><li><a href="#.docx">word文档</a></li><li><a href="#.pptx">PowerPoint文档</a></li><li><a href="#.xlsx">Excel文档</a></li><li><a href="#.pdf">PDF文档</a></li><li><a href="#.html">HTML网页</a></li><li><a href="#.swf">FLash文件</a></li><li><a href="#.zip">ZIP压缩文件</a></li><li><a href="#.mp3">MP3音乐文件</a></li><li><a href="#.exe">EXE执行程序</a></li><li><a href="#.txt">TXT文本文档</a></li>
</ul>
</body>
</html>

优化：更换选择器

li a[href$='.pptx']{background-position-y:-47px;
}

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>ul li a{background-image: url("img/7_03.png");background-repeat: no-repeat;padding-right: 20px;background-position-x:right;}ul li a[href="#.docx"]{background-position-y:2px;}ul li a[href="#.pptx"]{background-position-y:-47px;}ul li a[href="#.xlsx"]{background-position-y:-72px;}ul li a[href="#.pdf"]{background-position-y:-122px;}ul li a[href="#.html"]{background-position-y:-145px;}ul li a[href="#.swf"]{background-position-y:-191px;}ul li a[href="#.zip"]{background-position-y:-241px;}ul li a[href="#.mp3"]{background-position-y:-269px;}ul li a[href="#.exe"]{background-position-y:-300px;}ul li a[href="#.txt"]{background-position-y:-321px;}</style>
</head>
<body>
<ul><li><a href="#.docx">word文档</a></li><li><a href="#.pptx">PowerPoint文档</a></li><li><a href="#.xlsx">Excel文档</a></li><li><a href="#.pdf">PDF文档</a></li><li><a href="#.html">HTML网页</a></li><li><a href="#.swf">FLash文件</a></li><li><a href="#.zip">ZIP压缩文件</a></li><li><a href="#.mp3">MP3音乐文件</a></li><li><a href="#.exe">EXE执行程序</a></li><li><a href="#.txt">TXT文本文档</a></li>
</ul>
</body>
</html>

41、BFC规则

如何触发一个元素的BFC规则？

float:left/right;
position:absolute/fixed;
display:inline-block/table-cell等；
overflow：auto/hidden等；

42、电影imdb排行榜

p:nth-of-type(3)<--类型选择器-->
p:nth-child(3)<--子元素选择器-->

新增知识：vertical-align: center;/*图片纵向居中*/ul li:nth-of-type(even)/*偶数行选择器*/ul li:first-child{/*ul的第一个孩子元素*/

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style type="text/css">*{margin: 0;padding: 0;border: none;list-style: none;}img{height: 80px;vertical-align: middle;/*vertical-align:图片位置*/}ul{width: 600px;margin: 50px auto;border-radius: 4px;overflow: hidden;}ul li{height: 90px;line-height: 90px;}ul li:first-child{/*ul的第一个孩子元素*/height: 40px;background: #22a4ff;line-height: 40px;font-weight: bold;}ul li:nth-of-type(even){/*偶数行 even代表偶数*/background: #eeeeee;}ul li div{float: left;text-align:center ;}ul li div:nth-child(1){/*nth-child孩子元素选择器*/width: 120px;}ul li div:nth-child(2){/*nth-child孩子元素选择器*/width: 250px;}ul li div:nth-child(3){/*nth-child孩子元素选择器*/width: 100px;}ul li div:nth-child(4){/*nth-child孩子元素选择器*/width: 130px;}ul li span{display: inline-block;width: 18px;height: 18px;background: url("imgs/star.png");/*加入评分小星星*/background-position-y:-175px ;}</style>
</head>
<body><div><ul class="container"><li><div>IMDB</div><div>IMDB电影排行</div><div>评分</div><div>年份</div></li><li><div><img src="img/青蛙.jpg"></div><div>NO.1《肖申克的救赎》</div><div><span>9.2</span></div><div>1994</div></li><li><div><img src="img/青蛙.jpg"></div><div>NO.2《肖申克的救赎》</div><div><span>9.2</span></div><div>1994</div></li><li><div><img src="img/青蛙.jpg"></div><div>NO.3《肖申克的救赎》</div><div><span>9.2</span></div><div>1994</div></li><li><div><img src="img/青蛙.jpg"></div><div>NO.4《肖申克的救赎》</div><div><span>9.2</span></div><div>1994</div></li><li><div><img src="img/青蛙.jpg"></div><div>NO.5《肖申克的救赎》</div><div><span>9.2</span></div><div>1994</div></li><li><div><img src="img/青蛙.jpg"></div><div>NO.6《肖申克的救赎》</div><div><span>9.2</span></div><div>1994</div></li><li><div><img src="img/青蛙.jpg"></div><div>NO.7《肖申克的救赎》</div><div><span>9.2</span></div><div>1994</div></li><li><div><img src="img/青蛙.jpg"></div><div>NO.8《肖申克的救赎》</div><div><span>9.2</span></div><div>1994</div></li><li><div><img src="img/青蛙.jpg"></div><div>NO.9《肖申克的救赎》</div><div><span>9.2</span></div><div>1994</div></li><li><div><img src="img/青蛙.jpg"></div><div>NO.10《肖申克的救赎》</div><div><span>9.2</span></div><div>1994</div></li></ul>
</div>
</body>
</html>

43、开关按钮

新增知识：
1、appearence：表示外观webkit：是谷歌浏览器的内核名称
2、-webkit-appearance: none;/*去掉复选框样式*/3、伪类元素选择器：<style>input[type='checkbox']::after{content: "";}</style>4、背景颜色线性渐变：backgroud:linear-gradient(to bottom,#d3d3d3,#9e9e9e); //背景：线性渐变（向下（to top/to left/to right），开始的颜色，结束的颜色）
5、阴影：box-shadow：0px 2px 5px 1px black inset;（left值 top值 模糊值 扩大值 影子颜色 阴影方向（内/外））
例：box-shadow: 0 0 5px 0 black;//模糊box-shadow:5px 5px 0 0 black;//位移box-shadow:0 0 0 5px black;//扩大box-shadow:2px 2px 5px 0 black;//位移+模糊box-shadow:0 0 5px 0 black inset;//阴影向内+模糊

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Nj2RmM3B-1596685757204)(D:\web\web加百利\img\13.png)]

44、过渡效果

transion:width 1s ease-in 2s;//要过渡的属性 过渡时间 过渡方式 延迟时间
过渡方式：先慢后快在慢ease线性：linear慢速开始：ease-in慢速结束：ease-out慢速开始慢速结束：ease-in-out伪类选择器：它只能选择所有被勾选的了checkboxinput[type='checkbox']:checked{……}

/青蛙.jpg">

NO.9《肖申克的救赎》

9.2

1994

NO.10《肖申克的救赎》

9.2

1994

```

43、开关按钮

新增知识：
1、appearence：表示外观webkit：是谷歌浏览器的内核名称
2、-webkit-appearance: none;/*去掉复选框样式*/3、伪类元素选择器：<style>input[type='checkbox']::after{content: "";}</style>4、背景颜色线性渐变：backgroud:linear-gradient(to bottom,#d3d3d3,#9e9e9e); //背景：线性渐变（向下（to top/to left/to right），开始的颜色，结束的颜色）
5、阴影：box-shadow：0px 2px 5px 1px black inset;（left值 top值 模糊值 扩大值 影子颜色 阴影方向（内/外））
例：box-shadow: 0 0 5px 0 black;//模糊box-shadow:5px 5px 0 0 black;//位移box-shadow:0 0 0 5px black;//扩大box-shadow:2px 2px 5px 0 black;//位移+模糊box-shadow:0 0 5px 0 black inset;//阴影向内+模糊

44、过渡效果transion

transion:width 1s ease-in 2s;//要过渡的属性 过渡时间 过渡方式 延迟时间
过渡方式：先慢后快在慢ease线性：linear慢速开始：ease-in慢速结束：ease-out慢速开始慢速结束：ease-in-out伪类选择器：它只能选择所有被勾选的了checkboxinput[type='checkbox']:checked{……}

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>开关</title><style type="text/css">*{padding: 0;margin: 0;}input[type='checkbox']:checked{/*选中时复选框背景色变色*/background: #6FB500;}input[type='checkbox']{-webkit-appearance: none;/*去掉复选框样式*/margin: 50px;border: 10px solid #c1c1c1;border-radius: 50px;width: 150px;height: 70px;background: #888;position: relative;box-shadow:0 0 5px 0 black inset;/*阴影向内+模糊*/transition: 0.6s;}input[type='checkbox']::after{content: "";display: block;width: 60px;height: 60px;position: absolute;left: -5px;top: -5px;border-radius: 30px;backgroud:linear-gradient(to bottom,#d3d3d3,#9e9e9e);box-shadow: 0px 2px 2px 0px #eee inset ,2px 1px 2px 0px #333;transition: 0.6s;}input[type='checkbox']:checked::after{left: 95px;}</style></head>
<body>
<input type="checkbox">
</body>
</html>

45、字体图标

网址：https://www.icofont.cn/

一、步骤说明

第一步：打开网址
第二步：加入购物车
第三步：下载代码
第四步：解压
第五步：将下载的代码全部引入到项目中，并放在同一个文件夹下

第六步：根据说明文档引入js，css

<link rel="stylesheet" href="font/iconfont.css">
<script src="font/iconfont.js"></script>

第七步：加入通用 CSS 代码（引入一次就行）

<style>
.icon {width: 1em;height: 1em;vertical-align: -0.15em;fill: currentColor;overflow: hidden;
}
</style>

第八步：在官网上添加到购物车完成后,购物车徽章数字应该显示1了,点击右上角的购物车图标,选择 添加至项目 ,选择我们刚刚创建的项目,确定;

自动跳转到对应的项目里了
第七步：选择Font class（可看到那个图标对应的类名），
到了最后一步了,如何在项目中使用字体图标呢,其实很简单,创建一个i标签或者span标签,添加两个类名,一个固定的是iconfont,另一个是你想要的那个图标对应的类名:

2、完整代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><link rel="stylesheet" href="font/iconfont.css"><script src="font/iconfont.js"></script><style type="text/css">.icon {width: 1em;height: 1em;vertical-align: -0.15em;fill: currentColor;overflow: hidden;}</style>
</head>
<body>
<div><i class="iconfont icon-icon-test1"></i>
</div></body>
</html>

46、 transform的位移效果

li:nth-child(2){transform:translate(40px);
}

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>*{margin: 0;padding: 0;}.box{float: left;position: relative;width: 300px;height: 300px;margin: 100px 200px;overflow: hidden;}.box>img{width: 300px;height: 300px;}.box>*{transition: 1s;position: absolute;left: 0px;top: 0px;}/*设置标题的位置*/.box h2{color: red;}.box p{color: red;}.box p:nth-of-type(1){transform: translateY(140px)translateX(-150px);}.box p:nth-of-type(2){transform: translateY(180px)translateX(-110px);transition: 1s 0.1s;}.box p:nth-of-type(3){transform: translateY(220px)translateX(-100px);transition: 1s 0.2s;}.box:hover p:nth-of-type(1){transform: translateY(140px)translateX(10px);}.box:hover p:nth-of-type(2){transform: translateY(180px)translateX(10px);}.box:hover p:nth-of-type(3){transform: translateY(220px)translateX(10px);}</style>
</head>
<body>
<div class="box"><img src="img/青蛙.jpg"><h2>小青蛙</h2><p class="p1">Birthday:1989.12.13</p><p class="p2">Height:180cm</p><p class="p3">Weight:56kg</p>
</div>
</body>
</html>

47、transform的缩放和旋转

transform : scale(1.5); //放大为1.5倍

transform : scale(0.6); //缩小为0.6倍

无论是位移还是缩放，元素在变形的时候原点始终，都在元素的中心位置

transform-origin:50% 50%;
//origin表示起点/原点它后面跟着的两个值是百分比大小

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>*{margin: 0;padding: 0;}.box{float: left;position: relative;width: 300px;height: 300px;margin: 100px 200px;overflow: hidden;}.box>img{width: 300px;height: 300px;}.box>*{transition: 1s;position: absolute;left: 0px;top: 0px;}/*设置标题的位置*/.box h2{color: red;}.box p{color: red;}.box p:nth-of-type(1){transform: translateY(140px)translateX(-150px);}.box p:nth-of-type(2){transform: translateY(180px)translateX(-110px);transition: 1s 0.1s;}.box p:nth-of-type(3){transform: translateY(220px)translateX(-100px);transition: 1s 0.2s;}.box:hover p:nth-of-type(1){transform: translateY(140px)translateX(10px);}.box:hover p:nth-of-type(2){transform: translateY(180px)translateX(10px);}.box:hover p:nth-of-type(3){transform: translateY(220px)translateX(10px);}/************************缩放&旋转****************************/.box:hover img{transform: scale(1.3) rotateZ(30deg);}/**********************************************************/</style>
</head>
<body>
<div class="box"><img src="img/青蛙.jpg"><h2>小青蛙</h2><p class="p1">Birthday:1989.12.13</p><p class="p2">Height:180cm</p><p class="p3">Weight:56kg</p>
</div>
</body>
</html>
</body>
</html>

transform:rotateX/rotateY/rotateZ；
//rotate表示旋转

transform:rotateX(30deg);
//deg是degree的简写（30deg）表示要沿着x轴方向的顺时针旋转30度

transform:rotateY(30deg);

transform:rotateZ(30deg);

48、透视与3D

transform:perspective(1000px) rotateX(45deg);
//perspective(1000px)表示观察距离  此属性必须写到最前面

49、一个完整的3D立方体

千锋教育-加百利 web相关推荐

千锋教育Web前端——PC端企业类型整页制作
千锋教育Web前端--PC端企业类型整页制作文章目录千锋教育Web前端--PC端企业类型整页制作一.PC端的布局二.源码 1.CSS源码 2.HTML源码三.运行结果一.PC端的布局通栏 ...
HTML5从入门到精通（千锋教育）免费电子版+PDF下载
本书是HTML5初学者极好的入门教材之一,内容通俗易懂.由浅入深.循序渐进.本书内容覆盖全面.讲解详细,其中包括标签语义化.标签使用规范.选择器类型.盒模型.标签分类.样式重置.CSS优化.Photo ...
千锋教育python2104期总结day2
千锋教育python2104期总结day2 第一次总结: 基础语法和变量目录更改基础设置, 写出第一句代码基础语法输入和输出函数变量正文 1. 更改基础设置,写出第一句代码 1)设置pyc ...
千锋教育python2104期总结day14
千锋教育python2104期总结第十三次总结: 常用系统模块和文件操作目录 time模块 datetime模块 hashlib模块文件操作读写操作数据存储操作作业正文 1.time模块 ...
千锋教育python2104期总结day5
千锋教育python2104期总结第四次总结: 循环练习和语法目录 1.复习 2.认识列表 3.添加元素 4.第一周作业(零基础) 5.周末作业-循环练习题正文 1. 复习 for循环 for ...
千锋教育python2104期总结day15
千锋教育python2104期总结第十四次总结: json和异常目录文件操作补充 json数据异常模块作业正文 1.文件操作补充打开不存在的文件 """ 如 ...
千锋教育python2104期总结day11
千锋教育python2104期总结第十次总结: 函数基础目录定义函数调用函数函数的参数函数的返回值作业正文 1.定义函数认识函数 1)什么是函数:函数就是实现某一特定功能的代码的封装 ...
千锋教育python2104期总结day20
千锋教育python2104期总结第十九次总结: 自动化办公2 目录 excel文件的读操作 excel文件的写操作 csv文件操作 pdf文件操作添加水印创建水印文件正文 1.excel文件 ...
千锋教育python2104期总结day13
千锋教育python2104期总结第十二次总结:迭代器生成器和模块目录迭代器生成器模块包的使用正文 1.迭代器什么是迭代器(iter) 迭代器是容器型数据类型,可以同时保存多个数据:可 ...

千锋教育-加百利 web

快捷键

ps切图

23、元素的浮动布局（上）

24、元素的浮动布局（中）

25、元素的浮动（下）

26、为什么需要盒模型(上)

27、为什么需要盒模型(下)

28、布局练习

29、css属性简写

30、元素的不同类型

31、元素的定位（上）

32、元素的定位（下）

33、鼠标划入效果

34、精灵图效果

35、语义化标签

36、智能表单

37、outline效果

39、overflow内容溢出

40、同类兄弟选择器nth-of-type（1）a{……}

41、BFC规则

42、电影imdb排行榜

43、开关按钮

44、过渡效果

43、开关按钮

44、过渡效果transion

45、字体图标

一、步骤说明

2、完整代码

46、 transform的位移效果

47、transform的缩放和旋转

48、透视与3D

49、一个完整的3D立方体

千锋教育-加百利 web相关推荐

最新文章

热门文章