网页
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>网页</title>
<style>
* {
margin: 0;
padding: 0
}
.box {
width: 500px;
height: 450px;
border: 1px solid #ccc;
margin: 100px auto;
padding: 5px;
}
.inner{
width: 500px;
height: 300px;
position: relative;
overflow: hidden;
}
.inner img{
width: 500px;
height: 300px;
vertical-align: top
}
ul {
width: 1000%;
position: absolute;
list-style: none;
left:0;
top: 0;
}
.inner li{
float: left;
}
ol {
position: absolute;
height: 20px;
right: 20px;
bottom: 20px;
text-align: center;
padding: 5px;
}
ol li{
display: inline-block;
width: 20px;
height: 20px;
line-height: 20px;
background-color: #fff;
margin: 5px;
cursor: pointer;
}
ol .current{
background-color: red;
}
#arr{
display: none;
}
#arr span{
width: 40px;
height: 40px;
position: absolute;
left: 5px;
top: 50%;
margin-top: -20px;
background: #fff;
cursor: pointer;
line-height: 40px;
text-align: center;
font-weight: bold;
font-family: '黑体';
font-size: 30px;
color: #000;
opacity: 0.5;
border：1px solid #ff;
}
#arr #right {
right: 5px;
left: auto;
}
</style>
</head>
<body>
<div class="box" id="box">
<div class="inner">
<!--轮播图-->
<ul>
<li><a href="#"><img src="C:\Users\l\Desktop\网页\images\1.jpg" alt=""></a></li>
<li><a href="#"><img src="C:\Users\l\Desktop\网页\images\2.jpg" alt=""></a></li>
<li><a href="#"><img src="C:\Users\l\Desktop\网页\images\3.png" alt=""></a></li>
</ul>
<ol class="bar">
</ol>
<!--左右焦点-->
<div id="arr">
<span id="left">
</span>
<span id="right">
</span>
</div>
</div>
<img style="padding:20px 0px; "src="C:\Users\l\Desktop\网页\images\空白.jpg" width="50"height = "50"></a></li>
<img src="C:\Users\l\Desktop\网页\images\4.png" width="50"height = "50"></a></li>
<img src="C:\Users\l\Desktop\网页\images\空白.jpg" width="50"height = "50"></a></li>
<img src="C:\Users\l\Desktop\网页\images\5.png" width="50"height = "50"></a></li>
<img src="C:\Users\l\Desktop\网页\images\空白.jpg" width="50"height = "50"></a></li>
<img src="C:\Users\l\Desktop\网页\images\6.png" width="50"height = "50"></a></li>
<img src="C:\Users\l\Desktop\网页\images\空白.jpg" width="50"height = "50"></a></li>
<img src="C:\Users\l\Desktop\网页\images\7.png" width="50"height = "50"></a></li>
<img src="C:\Users\l\Desktop\网页\images\空白.jpg" width="50"height = "50"></a></li>
<tr>
<table>
<td style="padding:0px 63px; font-size:8px"><p> 全部应用 </p>
<td style="padding:0px 10px;font-size:8px"><p>360搜索 </p>
<td style="padding:0px 69px;font-size:8px"><p>360商城 </p>
<td style="padding:0px 9px;font-size:8px"><p>360游戏 </p>
</table>
</tr>
</div>
<script>
function my$(id) {
return document.getElementById(id);
}
//获取各元素，方便操作
var box=my$("box");
var inner=box.children[0];
var ulObj=inner.children[0];
var list=ulObj.children;
var olObj=inner.children[1];
var arr=my$("arr");
var imgWidth=inner.offsetWidth;
var right=my$("right");
var pic=0;
//根据li个数，创建小按钮
for(var i=0;i<list.length;i++){
var liObj=document.createElement("li");
olObj.appendChild(liObj);
liObj.innerText=(i+1);
liObj.setAttribute("index",i);
//为按钮注册mouseover事件
liObj.onmouseover=function () {
//先清除所有按钮的样式
for (var j=0;j<olObj.children.length;j++){
olObj.children[j].removeAttribute("class");
}
this.className="current";
pic=this.getAttribute("index");
animate(ulObj,-pic*imgWidth);
}
}
olObj.children[0].className = "current";
//克隆一个ul中第一个li,加入到ul中的最后=====克隆
ulObj.appendChild(ulObj.children[0].cloneNode(true));
var timeId=setInterval(onmouseclickHandle,1000);
//左右焦点实现点击切换图片功能
box.onmouseover=function () {
arr.style.display="block";
clearInterval(timeId);
};
box.onmouseout=function () {
arr.style.display="none";
timeId=setInterval(onmouseclickHandle,1000);
};
right.onclick=onmouseclickHandle;
function onmouseclickHandle() {
//如果pic的值是5,恰巧是ul中li的个数-1的值,此时页面显示第六个图片,而用户会认为这是第一个图,
//所以,如果用户再次点击按钮,用户应该看到第二个图片
if (pic == list.length - 1) {
//如何从第6个图,跳转到第一个图
pic = 0;//先设置pic=0
ulObj.style.left = 0 + "px";//把ul的位置还原成开始的默认位置
}
pic++;//立刻设置pic加1,那么此时用户就会看到第二个图片了
animate(ulObj, -pic * imgWidth);//pic从0的值加1之后,pic的值是1,然后ul移动出去一个图片
//如果pic==5说明,此时显示第6个图(内容是第一张图片),第一个小按钮有颜色,
if (pic == list.length - 1) {
//第五个按钮颜色干掉
olObj.children[olObj.children.length - 1].className = "";
//第一个按钮颜色设置上
olObj.children[0].className = "current";
} else {
//干掉所有的小按钮的背景颜色
for (var i = 0; i < olObj.children.length; i++) {
olObj.children[i].removeAttribute("class");
}
olObj.children[pic].className = "current";
}
}
left.onclick=function () {
if (pic==0){
pic=list.length-1;
ulObj.style.left=-pic*imgWidth+"px";
}
pic--;
animate(ulObj,-pic*imgWidth);
for (var i = 0; i < olObj.children.length; i++) {
olObj.children[i].removeAttribute("class");
}
//当前的pic索引对应的按钮设置颜色
olObj.children[pic].className = "current";
};
function animate(element, target) {
clearInterval(element.timeId);
//定时器的id值存储到对象的一个属性中
element.timeId = setInterval(function () {
//获取元素的当前的位置,数字类型
var current = element.offsetLeft;
//每次移动的距离
var step = 10;
step = current < target ? step : -step;
//当前移动到位置
current += step;
if (Math.abs(current - target) > Math.abs(step)) {
element.style.left = current + "px";
} else {
//清理定时器
clearInterval(element.timeId);
//直接到达目标
element.style.left = target + "px";
}
}, 10);
}
</script>
</body>
<body>
<div class="box" id="box">
<table>
<td style="padding:10px 10px; font-size:20px"><p><b>手机软件</b></p></td>
</table>
<img style="padding:10px 0px;" src="C:\Users\l\Desktop\网页\images\空白.jpg" width="50"height = "50"></a>
<img src="C:\Users\l\Desktop\网页\images\8.png" width="50"height = "50"></a>
<img src="C:\Users\l\Desktop\网页\images\空白.jpg" width="50"height = "50"></a>
<img src="C:\Users\l\Desktop\网页\images\9.png" width="50"height = "50"></a>
<img src="C:\Users\l\Desktop\网页\images\空白.jpg" width="50"height = "50"></a>
<img src="C:\Users\l\Desktop\网页\images\10.png" width="50"height = "50"></a>
<img src="C:\Users\l\Desktop\网页\images\空白.jpg" width="50"height = "50"></a>
<img src="C:\Users\l\Desktop\网页\images\11.png" width="50"height = "50"></a>
<img src="C:\Users\l\Desktop\网页\images\空白.jpg" width="50"height = "50"></a>
<tr>
<table>
<td style="padding:0px 63px; font-size:8px"><p> 手机卫士 </p>
<td style="padding:0px 10px;font-size:8px"><p>手机助手 </p>
<td style="padding:0px 69px;font-size:8px"><p>浏览器 </p>
<td style="padding:0px 9px;font-size:8px"><p>清理大师 </p>
</table>
<table>
<td style="padding:0px 67px; font-size:8px"><p> 8.95M </p>
<td style="padding:0px 20px;font-size:8px"><p>6.5M </p>
<td style="padding:0px 66px;font-size:8px"><p>23.16M </p>
<td style="padding:0px 17px;font-size:8px"><p>5.8M </p>
</table>
<table>
<td style="padding:0px 68px; font-size:8px;"><p> 下载 </p>
<td style="padding:0px 23px;font-size:8px;"><p>下载 </p>
<td style="padding:0px 67px;font-size:8px;"><p>下载 </p>
<td style="padding:0px 22px;font-size:8px;"><p>下载 </p>
</table>
</tr>
<img style="padding:10px 0px;" src="C:\Users\l\Desktop\网页\images\空白.jpg" width="50"height = "50"></a></li>
<img src="C:\Users\l\Desktop\网页\images\12.png" width="50"height = "50"></a></li>
<img src="C:\Users\l\Desktop\网页\images\空白.jpg" width="50"height = "50"></a></li>
<img src="C:\Users\l\Desktop\网页\images\13.png" width="50"height = "50"></a></li>
<img src="C:\Users\l\Desktop\网页\images\空白.jpg" width="50"height = "50"></a></li>
<img src="C:\Users\l\Desktop\网页\images\14.png" width="50"height = "50"></a></li>
<img src="C:\Users\l\Desktop\网页\images\空白.jpg" width="50"height = "50"></a></li>
<img src="C:\Users\l\Desktop\网页\images\15.png" width="50"height = "50"></a></li>
<img src="C:\Users\l\Desktop\网页\images\空白.jpg" width="50"height = "50"></a></li>
<tr>
<table>
<td style="padding:0px 63px; font-size:8px"><p> 影视大全 </p>
<td style="padding:0px 10px;font-size:8px"><p>省电王 </p>
<td style="padding:0px 69px;font-size:8px"><p>免费WII </p>
<td style="padding:0px 11px;font-size:8px"><p>ROOT </p>
</table>
<table>
<td style="padding:0px 67px; font-size:8px"><p> 20.7M </p>
<td style="padding:0px 20px;font-size:8px"><p>2.8M </p>
<td style="padding:0px 67px;font-size:8px"><p>3.8M </p>
<td style="padding:0px 19px;font-size:8px"><p>4.8M </p>
</table>
<table>
<td style="padding:0px 68px; font-size:8px;"><p> 下载 </p>
<td style="padding:0px 23px;font-size:8px;"><p>下载 </p>
<td style="padding:0px 66px;font-size:8px;"><p>下载 </p>
<td style="padding:0px 22px;font-size:8px;"><p>下载 </p>
</table>
</tr>
<img style="padding:10px 0px;" src="C:\Users\l\Desktop\网页\images\空白.jpg" width="30"height = "30"></a></li>
<img src="C:\Users\l\Desktop\网页\images\16.png" width="15"height = "15" > 影视大全 </a></li>
<img style="padding:10px 0px;" src="C:\Users\l\Desktop\网页\images\空白.jpg" width="30"height = "30"></a></li>
<img src="C:\Users\l\Desktop\网页\images\17.png" width="15"height = "15" > 360商城 </a></li>
<img style="padding:10px 0px;" src="C:\Users\l\Desktop\网页\images\空白.jpg" width="30"height = "30"></a></li>
<img src="C:\Users\l\Desktop\网页\images\18.png" width="15"height = "15" > 手机专家 </a></li>
<img style="padding:10px 0px;" src="C:\Users\l\Desktop\网页\images\空白.jpg" width="30"height = "30"></a></li>
<img src="C:\Users\l\Desktop\网页\images\19.png" width="15"height = "15" > 流量卫士 </a></li>
<img style="padding:10px 0px;" src="C:\Users\l\Desktop\网页\images\空白.jpg" width="30"height = "30"></a></li>
<img src="C:\Users\l\Desktop\网页\images\20.png" width="15"height = "15" > 360天气 </a></li>
<img style="padding:10px 5px;" src="C:\Users\l\Desktop\网页\images\空白.jpg" width="30"height = "30"></a></li>
<img src="C:\Users\l\Desktop\网页\images\21.png" width="15"height = "15" > 360金融 </a></li>
<img style="padding:10px 0px;" src="C:\Users\l\Desktop\网页\images\空白.jpg" width="30"height = "30"></a></li>
<img src="C:\Users\l\Desktop\网页\images\22.png" width="15"height = "15" > 360借条 </a></li>
<img style="padding:10px 3px;" src="C:\Users\l\Desktop\网页\images\空白.jpg" width="30"height = "30"></a></li>
<img src="C:\Users\l\Desktop\网页\images\23.png" width="15"height = "15" > 信用卫士 </a></li>
<img style="padding:10px 0px;" src="C:\Users\l\Desktop\网页\images\空白.jpg" width="30"height = "30"></a></li>
<img src="C:\Users\l\Desktop\网页\images\24.png" width="15"height = "15" > 贷款神器 </a></li>
<img style="padding:10px 0px;" src="C:\Users\l\Desktop\网页\images\空白.jpg" width="30"height = "30"></a></li>
<img src="C:\Users\l\Desktop\网页\images\25.jpg" width="15"height = "15" > 安全客 </a></li>
</div>
</body>
<style>
.box1 {
width: 500px;
height: 630px;
border: 1px solid #ccc;
margin: 100px auto;
padding: 5px;
background-color:#f9f9f9
}
#p1{
width:480px;
height:50px;
background-color:#ffffff;
}
#p2{
width:247px;
height:195px;
background-color:#ffffff;
}
#p3{
width:247px;
height:100px;
background-color:#ffffff;
}
#p4{
width:247px;
height:91px;
background-color:#ffffff;
}
#p5{
width:247px;
height:175px;
background-color:#ffffff;
}
#p6{
width:247px;
height:175px;
background-color:#ffffff;
}
#p7{
width:247px;
height:175px;
background-color:#ffffff;
}
#p8{
width:247px;
height:175px;
background-color:#ffffff;
}
</style>
<body>
<div class="box1" id="box1">
<table>
<p id="p1"style="padding:10px 10px; font-size:20px">智能硬件
</table>
<p id="p2"style="position:relative;left:0px;top:5px">360安全路由器2V2<br>信号覆盖200平米<br >109元</br>
<img style="padding:5px 60px;" src="C:\Users\l\Desktop\网页\images\26.png" width="120"height = "120" >
</p>
<p id="p3" style="position:relative;left:253px;top:-190px" ><img style="padding:30px 20px;" src="C:\Users\l\Desktop\网页\images\27.jpg" width="70"height = "70" align="right" >
360可视门铃<br>门前异常推动<br>349元</br> </p>
<p id="p4" style="position:relative;left:253px;top:-186px" ><img style="padding:0px 40px;" src="C:\Users\l\Desktop\网页\images\28.jpg" width="60"height = "60" align="right" >
360儿童手表<br>打电话可定位<br>169元</br></p>
<p id="p5"style="position:relative;left:0px;top:-180px">360行车记录仪<br>2K高清拍摄<br >499元</br>
<img style="padding:10px 50px;" src="C:\Users\l\Desktop\网页\images\29.jpg" width="150"height = "80" >
</p>
<p id="p6"style="position:relative;left:253px;top:-355px">360摄像机 云台版<br>360全景无盲区<br >99元</br>
<img style="padding:10px 50px;" src="C:\Users\l\Desktop\网页\images\30.jpg" width="150"height = "80" >
</p>
<p id="p7"style="position:relative;left:0px;top:-350px">360扫地机器人<br>干净无死角<br >1399元</br>
<img style="padding:10px 50px;" src="C:\Users\l\Desktop\网页\images\31.jpg" width="150"height = "80" >
</p>
<p id="p8"style="position:relative;left:250px;top:-530px">
<img src="C:\Users\l\Desktop\网页\images\32.png" width="247"height = "175" >
</p>
</table>
</div>
</body>
<style>
.box2 {
width: 500px;
height: 175px;
border: 1px solid #ccc;
margin: 100px auto;
padding: 5px;
}
.box3 {
width: 500px;
height: 220px;
border: 1px solid #ccc;
margin: 100px auto;
padding: 5px;
}
#p9{
width:163px;
height:40px;
background-color:#f7f7f7;
text-align:center;
line-height:40px;
}
</style>
<body>
<div class="box2" id="box2">
<table>
<p style="padding:10px 10px; font-size:20px"><b>智能硬件</b></p>
</table>
<p id="p9" > 360搜索 </p>
<p id="p9" style="position:relative;left:168px;top:-40px"> 360导航 </p>
<p id="p9" style="position:relative;left:335px;top:-80px"> 360金融 </p>
<p id="p9" style="position:relative;left:0px;top:-75px"> 360新闻</p>
<p id="p9" style="position:relative;left:168px;top:-115px"> 360影视 </p>
<p id="p9" style="position:relative;left:335px;top:-155px"> 360贷款神器 </p>
<p id="p9" style="position:relative;left:0px;top:-150px"> 信用卫士 </p>
<p id="p9" style="position:relative;left:168px;top:-190px"> 安全客 </p>
<p id="p9" style="position:relative;left:335px;top:-230px"> 安全教育 </p>
</div >
</body>
<body>
<div class="box3" id="box3">
<table>
<p style="padding:10px 10px; font-size:20px"><b>企业安全</b></p>
</table>
<p id="p9" > 大数据安全 </p>
<p id="p9" style="position:relative;left:168px;top:-40px"> 边界安全 </p>
<p id="p9" style="position:relative;left:335px;top:-80px"> 终端安全 </p>
<p id="p9" style="position:relative;left:0px;top:-75px"> 内容安全</p>
<p id="p9" style="position:relative;left:168px;top:-115px"> 网站安全 </p>
<p id="p9" style="position:relative;left:335px;top:-155px"> 移动安全 </p>
<p id="p9" style="position:relative;left:0px;top:-150px"> 云安全 </p>
<p id="p9" style="position:relative;left:168px;top:-190px"> 无线安全 </p>
<p id="p9" style="position:relative;left:335px;top:-230px"> 代码安全 </p>
<p id="p9" style="position:relative;left:0px;top:-225px"> 工业安全 </p>
<p id="p9" style="position:relative;left:168px;top:-265px"> 攻防实训 </p>
</div >
</body>
</html>
