尾部区域：
与头部大小大致一样，可以把头部的复制来用
标签背景不平铺设置：background-repeat：no-repeat
文字水平居中：text-align：center
垂直居中也是设置行高即可
内容区域：
.body{width：100%（宽度自适应跟网页大小一样）；height：1260px；}
子div居中margin ：30px（偏移30像素） auto（左右居中）
解决高度塌陷：给父div设置浮动：overflow：hidden
引用的图片过大，可以设置大小：background-size：800px 200px
设置轮播图（可以用列表标签，div标签过多难维护）：
1、设置行标签，设置箭头选项<；和>；
2、两个箭头设置定位，li1{left：0}和li2{right：0}
3、设置鼠标放在箭头上的状态li：hover{cursor：pointer（放在箭头上时鼠标变成手指状态）；font-size：60px（鼠标悬停字体变大的数值）}
4、设置圆圈内容：设置多个圆圈数的行级标签，float：left，横着排列
5、设置圆圈位置：先position：absolute（绝对定位），bottom：0（下边框为0，直接置于底部），再left：50%（百分比可以有效针对上一级进行偏移）
6、圆圈分开，margin-left：10px（行级与行级分开的时候，文字与边框不一致（主要看所有边框需不需要同样大，不一样就可以外边距变大导致都不同）的话，可以用内边距。
一致的话用外边距，因为内边距会撑开外边距）
left：50%改成left：48%或其他来让圆圈尽量居中
7、对元素进行移动：transform：translateX（-50%）把元素沿X轴左方向移动自身宽度的50%
8、边框元素设置成圆圈：首先width和height要相同像素，然后border-radius：50%，长宽都截取一半组成圆圈的半径
9、设置鼠标放在圆圈上的状态：和鼠标放在箭头上的状态一样
轮播图功能：
1、轮播图自动轮播：
2、点击箭头切换轮播图和点击圆圈切换到指定轮播图片
$(function(){当页面加载完毕之后再执行
var box = $(".left"）;
var time =1；
var timer=setInterval（function（）{（设置一个定时器和回调函数来进行轮播）可以换成setInterval（right
（当定义好的函数作为某一个函数的实际参数时，可以直接通过函数名传入，不需要带括号，如果原函数有参数的话就要带括号，并且写入形参，如fun(num)），3000）
right（）（直接调用下面的函数）
}，3000（定时器每3秒切换一次））
function right（）{
time ++
if（time>2）{(自动循环轮播的关键)
time=1；（重新赋值1就行了）
}
fun（time）；
}
$(".left1 .ul1 .li2").click(function(){（给右箭头绑定事件）
right（）(调用右切换函数)相当于点击后直接开始新一轮右切换定时事件
clearInterval（timer）点击事件启动后，就不再自动轮播，避免妨碍阅读
})
左切换就是设置一个新的time - - ，条件判断time<1则time=4的函数来凑成一个事件
(切换图片）function fun(num){
switch（匹配case的表达式进行执行）（num）{
case 1：（轮播第一张图片）
box.css（对于css函数改变第一张图片的链接来达到自动轮换效果）（”background-image“，”url（http：//····················）“）
break；（跳出）
case 2：（轮播第二张图片）
box.css（”background-image“，”url（http：//···········）“）
break；（跳出）
}
}
})
给圆圈绑定事件
$(".left1 .ul2 .li").click(function(){
var index = $(this(获取当前的dom对象转成JQ对象)).index（）；
fun （index+1）；（因为index获取到的是下标从0开始的，而fun函数定义是从1开始的，所以要加1）
time=index（避免time和index不同而影响num，当程序运行时，先点击圆圈确定了下标值，但是time还是默认为0，所以再点击右箭头时time为1）
}）
因为图片多，所以可以选择容器装起来，对象{}（数组[]）
用数组更好var arrs = [”http：//····················“，”http：//····················“，”http：//····················“]从而url就不用直接加链接地址，用数组下标就行
从而去掉fun（num）函数，var time=0(赋值为1的都改为0，根据下标而定)，从数组下标开始取，不用再从fun （num）函数中取，
然后切换、定时器等绑定事件的条件判断中的语句改成if（time>arrs.length（数组有多少个链接的数值）-1），fun（index）不需要加1
上面程序运行不需要用到fun（num），但是圆圈指定切换的绑定事件要用到
function fun(num){（这里的fun（num）可以接收fun（index）的下标进行对应切换）
$(".left1 .ul2 .li").eq（num）.addClass(“color(添加类，这个类可以设置圆圈背景颜色或其他)”).silbings（）.removeClass（”color“）
（点击下一个后，就会删掉原来那个兄弟元素的颜色），
这里还有点击圆圈和函数其他代码的背景颜色响应有冲突，原因是这里的num有两个变量控制（index和time），所以要在点击圆圈绑定事件设置time=index来重新赋值time变量
box.css（”background-image“，”url（arr[num（这里借用fun（num）接收的下标对应值，让fun（num）形成新的函数运行））]）“）
以上有个误区：”url（）“属于一个字符串，但是arr[num]是一个变量，所以运行后arr[num]不能起作用，
需要改正，进行字符串拼接变量，找到变量的位置先打两个双引号或者单引号，再到引号中加两个加号（拼接字符串），再两个加号中间写变量
即写成”url（”+arr[num]+“）“，这里把”url（”和“）“当成了字符串，变量则保留下来进行解析
} 该方法为所有前端字符串拼接的一种手段
div设置多个子元素背景图可以用ul li
-
<a href=”JavaScript：void（0）（中止后面的脚本运行）“> <p>·························</p> </a> </li> <li></li> <li></li> </ul>
li内的图片浮动，同时设置图片大小
.left2 ul li{float：left ； text（只改变关于文字的内容）-align：center（标签内的文字居中）}浮动
.left2 ul li a img{width：250px；height：200px；margin-top：10px；margin-left：10px（左边距隔开10像素）}图片重新设置大小
.left2 ul li a p{font-size：14px（关于文字大小只能到p标签才能准确改变）}
.left2 ul li a {text-decoration：none（清除下划线）}
方便的调节大小也可以到网页看代码的位置在style栏选定px值键盘的上下箭头进行调整，来模拟观察合适的位置，然后再记录好数值回到操作代码改好
鼠标移至目标，绑定放大图片事件
.left2 ul li a img：hover{transform：scale（2）； transition：2s（渐变放大，2秒完成）}仅仅只是这样会让图片放大的同时挤出原来的外边框
为了放大的同时不跳出外边框，先把a标签设置成块级标签，这样才能设置超出部分隐藏
.left2 ul li a {display：block； overflow：hidden（超出部分隐藏）}仍然有放大跳出的现象，原因是隐藏设置是在a标签设置的，不超过a边框，但是会超出img边框
设置垂直居中的时候，同时设置高度是为了让垂直行高和副级高度保持一致height：60px；line-height：60px
设置边框线的粗细border-bottom：5px，因为边框线在盒子外缘的，这里边框线太大的时候会看起来像是溢出盒子模型，
所以可以设置box-sizing：border-box；呈现出带有指定宽度和高度的框（即只是60px而不是60+5px），并把边框和内边距放入框中。
直接把图片标签的宽和高修改后，这个标签的图片的大小也会跟着变
把图片标签的边框中的图片修改成圆角矩形：border-radius（边框圆角）：10%（长宽都截取10%组成圆角）
把标签转成行内块标签:display：inline(行级)-block（块级）（同时有行级标签和块级标签的特性，能从左至右排列和同时给元素设置宽和高）
定位口诀：父相（相对定位）子绝（绝对定位）:同时设置父盒子标签相对定位，和设置子盒子标签绝对定位，
然后在子盒子标签里加left：50px，父盒子也会贴合子盒子相对的移动
div可以嵌套进li标签，每个li都要设类名来绑定事件 （ t h i s ） . a d d C l a s s （ ” a c t i v e （ 选 择 器 用 于 选 择 活 动 链 接 ） “ ） . s i b l i n g s ( “ l i ” ) . r e m o v e C l a s s ( “ a c t i v e ” ) 未 访 问 、 已 访 问 、 悬 浮 和 活 动 链 接 a : l i n k v i s i t e d h o v e r a c t i v e 获 取 当 前 正 在 点 击 l i 的 下 标 ， v a r i n d e x = （this）.addClass（”active（选择器用于选择活动链接）“）.siblings(“li”).removeClass(“active”) 未访问、已访问、悬浮和活动链接 a:link visited hover active 获取当前正在点击li的下标，var index= （this）.addClass（”active（选择器用于选择活动链接）“）.siblings(“li”).removeClass(“active”)未访问、已访问、悬浮和活动链接a:linkvisitedhoveractive获取当前正在点击li的下标，varindex=（this）.index（）
让科目介绍信息对应的li，var lis = $（”.left4 ul li（获取当前ul所有的li）“）
lis.eq（index）.removeClass（”hide“）.addClass（”show“）先移除隐藏，再把对应的li内容显示出来
lis.eq（index）.siblings（）.removeClass（”show“）.addClass（”hide“）兄弟元素则要隐藏
分割线标签
,可以放到盒子的内容最后输入，用来显示一条与下一个盒子的分割线
引入css用,引入js用
把多余的文字转成省略号：先设置文字盒子的宽和高，然后设置行高，再设置超出部分隐藏overflow：hidden（超出部分隐藏），不仅图片可以用，文字也可以用的属性
隐藏后用省略号代替被隐藏的文本：text-overflow：ellipsis（省略号的属性值）
必须要结合：将div作为弹性伸缩盒子模型显示（避免文字在网页被放大的时候，隐藏的部分会往下掉，不利于布局的灵活）
display：-webkit（开源的浏览器引擎）-box
然后显示的函数，用来限制在一个块元素显示的文本行数
-webkit-line-clamp：2（限制在两行内）
必须要结合：设置文字排列方式
-webkit-box-orient：vertical（两行内容垂直并列排下来）
文字盒子和图片并排浮动，不仅要让图片浮动，左边的文字也要设置浮动
不使用选择器，直接设置属性浮动也可以：