10.简单网页编写

（清除默认网页修饰） 要测量div大小可以多使用截图来看旁边的像素数字 标签不跳转链接为 先想出结构，再思考进行填充演练 去标签的类或ID的名字时要对号入座便于回忆，否则容易忘记 头部区域： 让div中的所有li标签中导航项目一行浮动排列显示为.header.nav（先输入选择器） ul li{float：left ；padding：0 40px（使文字撑开局部div）} 给项目行的a标签去除下滑线 .nav ul li a{text-decoration：none（清除下划线）； color：white（字体颜色设置）} 给项目行设置伪类选择器 .nav ul li ： hover（该伪类选择器作用是选择鼠标指针浮动在其上的元素，并设置其样式）{border-bottom：5px solid #7CF00} 设置防止下边框溢出盒子模型，可以在上一条代码中加入box-sizing：border-box（前提是一定要让当前的li设置高度） 设置行高就可以实现垂直居中line-height：69px 使用图标1、引入图片链接 2、图标放置在标签前，在标签前新建一个

尾部区域：
与头部大小大致一样，可以把头部的复制来用
标签背景不平铺设置：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、设置行标签，设置箭头选项&lt；和&gt；
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（࿰