自己仿的一个网页，比较适合小白入门

HTML

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>超星首页</title><link rel="stylesheet" href="css/style.css">
</head>
<body><div class="head"><nav class="top-nav"><img class="logo" src="data:images/head-logo.png"/><ul class="list"><li><a href="#"><h3>首页</h3><span>Home</span></a></li><li><a href="#"><h3>课程</h3><span>Courses</span></a></li><li><a href="#"><h3>服务</h3><span>Service</span></a></li><li><a href="#"><h3>资源</h3><span>Resource</span></a></li></ul><div class="search"><img src="data:images/icon_search.png" ><input type="text" placeholder="请输入课程、教师、专题、讲座名称"></div><div class="login"><img src="data:images/icon_login.png"><a href="#">登录</a></div></nav></div><div class="block"><div class="box_big "><div class="box"><a href="#"><img src="data:images/1.jpg"/></a></div><div class="box"><a href="#"><img src="data:images/2.jpg"/></a></div><div class="box"><a href="#"><img src="data:images/3.jpg"/></a></div><div class="box"><a href="#"><img src="data:images/4.jpg"/></a></div><div class="box"><a href="#"><img src="data:images/5.jpg"/></a></div><div class="box"><a href="#"><img src="data:images/6.jpg"/></a></div><div class="box"><a href="#"><img src="data:images/7.jpg"/></a></div><div class="box"><a href="#"><img src="data:images/8.jpg"/></a></div><div class="box"><a href="#"><img src="data:images/9.jpg"/></a></div><div class="box"><a href="#"><img src="data:images/10.jpg"/></a></div><div class="box"><a href="#"><img src="data:images/11.jpg"/></a></div><div class="box"><a href="#"><img src="data:images/1.jpg"/></a></div></div><div class="spot"><div class="spot_list"></div><div class="spot_list"></div><div class="spot_list"></div><div class="spot_list"></div><div class="spot_list"></div><div class="spot_list"></div><div class="spot_list"></div><div class="spot_list"></div><div class="spot_list"></div><div class="spot_list"></div><div class="spot_list"></div></div><div class="btn"><div class="left_btn"><img src="data:images/icon_left.png" alt=""></div><div class="right_btn"><img src="data:images/icon_right.png" alt=""></div></div></div><div class="content"><div class="index_title"><img src="data:images/index_title.png"></div><div class="tuijian_block"><div class="tuijian_box_big"><!--<div class="tuijian_box"><a href="#"><img class="tuijian" src="data:images/swiper7.jpg"></a></div><div class="tuijian_box"><a href="#"><img class="tuijian" src="data:images/swiper8.jpg"></a></div><div class="tuijian_box"><a href="#"><img class="tuijian" src="data:images/swiper9.jpg"></a></div><div class="tuijian_box"><a href="#"><img class="tuijian" src="data:images/swiper10.jpg"></a></div>--><div id="1" class="tuijian_box"><a href="#"><img src="data:images/swiper0.jpg"></a></div><div id="2" class="tuijian_box"><a href="#"><img src="data:images/swiper1.jpg"></a></div><div id="3" class="tuijian_box"><a href="#"><img src="data:images/swiper2.png"></a></div><div id="4" class="tuijian_box"><a href="#"><img src="data:images/swiper3.png"></a></div><div id="5" class="tuijian_box"><a href="#"><img src="data:images/swiper4.png"></a></div><div id="6" class="tuijian_box"><a href="#"><img src="data:images/swiper5.jpg"></a></div><div class="tuijian_box"><a href="#"><img src="data:images/swiper6.jpg"></a></div><div class="tuijian_box"><a href="#"><img src="data:images/swiper7.png"></a></div><div class="tuijian_box"><a href="#"><img src="data:images/swiper8.jpg"></a></div><div class="tuijian_box"><a href="#"><img src="data:images/swiper9.jpg"></a></div><div class="tuijian_box"><a href="#"><img src="data:images/swiper10.jpg"></a></div><div class="tuijian_box"><a href="#"><img src="data:images/swiper0.jpg"></a></div><div class="tuijian_box"><a href="#"><img src="data:images/swiper1.jpg"></a></div><div class="tuijian_box"><a href="#"><img src="data:images/swiper2.png"></a></div><div class="tuijian_box"><a href="#"><img src="data:images/swiper3.png"></a></div></div><div class="next"><div class="left_btn_1"><img src="data:images/icon_left.png" alt=""></div><div class="right_btn_1"><img src="data:images/icon_right.png" alt=""></div></div></div><div class="more_class"><img src="data:images/btn_look_more.png"></div></div><hr><footer class="page-footer"><img src="data:images/head-logo.png"><div class="footer_content"><div class="word"><span class="right">关于尔雅</span><span class="right">常见问题</span><span class="right">在线客服</span><span>后台管理</span></div><div class="company">Copyright©2016 超星公司旗下网站-尔雅通识课</div></div></footer><script src="js/index.js"></script>
</body>
</html>

CSS


*{margin:0;padding:0;
}
.clears{clear:both;height:0;line-height:0;font-size:0;overflow: hidden;
}
a{text-decoration:none;color: #000;
}
img{border:none;/*图片放在超链接里一些老的浏览器（ie）会有一个蓝色的边框*/
}
ul,li,ol{list-style:none;
}
li{float: left;width: 80px;height: 60px;text-align: center;padding-top: 20px;
}
.logo{float: left;line-height: 80px;
}
.list{width: 400px;margin-left: 300px;
}
.list span{font-size: 12px;
}
.head{width: 100%;height: 80px;background: #ffffff;
}
.top-nav{/*height: 105px;*/width: 1200px;height: 80px;display: block;margin: 0 auto;
}
.search{width: 253px;height: 34px;background: #f7f7f7;float: left;/*text-align: center;*/line-height: 34px;margin-top: 20px;margin-right: 45px;margin-left: 90px;border-radius: 4px;
}
.search img{width: 16px;height: 16px;display: inline-block;float: left;margin-top: 9px;margin-right: 6px;margin-left: 10px;}
.search input{border: none;background: none;width: 200px;height: 34px;font-size: 12px;outline: none;
}
.login{width: 105px;height: 20px;float: left;margin-top: 30px;}
.login img{float: left;margin-right: 5px;}
/*.big-img{position: absolute;width: 1520px;height: 580px;!*width: 100%;*!!*height: 100%;*!!*display: block;*!overflow: hidden;
}
.main_img img{overflow: hidden;!*display: inline-block;*!!*animation-play-state:paused;*!margin: 0 auto;float: left;width: 1520px;height: 580px;overflow: hidden;!*float: left;*!
}
.main_img{width: 16720px;height: 580px;position: absolute;!*overflow: hidden;*!!*left: 0px;*!!*animation: move 10s ease 5s infinite;*!!*animation-play-state:paused;*!animation-name: move;animation-duration: 40s;animation-timing-function: step-start;!*animation-timing-function: ;*!animation-iteration-count: infinite;}
@keyframes move {0% {left: 0px;}10% {left: -1520px;}
}*/.page-footer{width: 600px;height: 64px;margin: 0 auto;padding-top: 7px;position: relative;/*float: left;*/
}
.page-footer img{float: left;
}
.footer_content{width: 380px;height: 54px;position: absolute;right: 0px;/*top: 0px;*//*right: 0;*/
}
.word{width: 380px;height: 22px;margin-top: 11px;text-align: center;
}
.word span{width: 87px;height: 22px;display: inline-block;color: #666666;/*border: 1px;*/
}
.right{border-right: 1px solid #666666;
}
.company{font-size: 12px;text-align: center;margin-top: 6px;color: #666666;
}/* 图片轮播*/.block {width: 1520px;height: 580px;/*border: 1px solid black;*/margin: 0 auto;position: relative;overflow: hidden;box-sizing: border-box;
}.box_big {position: absolute;width: 18240px;float: left;height: 580px;}.nav {transition: margin-left 0.5s linear;
}.box {width: 1520px;height: 580px;float: left;
}.box_big img {width: 100%;height: 100%;/*display: block;*/float: left;
}.spot {position: absolute;width: 100%;text-align: center;bottom: 5px;
}.spot_list {width: 8px;height: 8px;/*font-size: 20px;*//*text-align: center;*/border: 1px solid gray;border-radius: 5px;/*line-height: 30px;*/font-weight: bolder;margin: 10px;display: inline-block;background: rgba(255, 255, 255, 0.3);
}/*.btn {width: 100%;height: 48px;position: absolute;margin: 0 auto;top: 266px;
}*/.left_btn,.left_btn_1{float: left;left: 0;margin-left: 22px;width: 48px;height: 48px;position: absolute;
}
.left_btn,.right_btn{top: 266px;
}
.left_btn_1,.right_btn_1{top: 106px;
}
.right_btn,.right_btn_1{right: 0;float: right;margin-right: 22px;width: 48px;height: 48px;position: absolute;
}.content{/*margin-top: 580px;*//*position: absolute;*/
}
.index_title{height: 150px;width: 100%;background: #ffffff;display: inline-block;text-align: center;margin-top: 70px;/*line-height: 220px;*//*margin: 0 auto;*/}
.tuijian_block{/*text-align: center;*/height: 260px;width: 1350px;/*margin: 0 auto;*/position: relative;overflow: hidden;margin-bottom: 70px;margin-left: auto;margin-right: auto;/*border: 1px solid black;*/box-sizing: border-box;
}
.tuijian_box_big{position: absolute;width: 5175px;float: left;height: 260px;
}
.tuijian_box{/*position: absolute;*/width: 345px;height: 260px;float: left;
}
.tuijian_box img{box-sizing: border-box;width: 315px;height: 100%;float: left;
}
/*.first{position: absolute;left: 0;top: 0;
}
.second{position: absolute;left: 345px;top: 0;
}
.third{position: absolute;left: 690px;top: 0;
}
.fourth{position: absolute;left: 1035px;top: 0;
}*/
/*.next{width: 100%;height: 48px;position: absolute;margin: 0 auto;top: 106px;
}*/
.tuijian_box img:hover{transform: scale(0.98,0.98);transition: all 0.2s;border: 4px solid #902320;
}
.more_class{/*margin: 0 auto;*/text-align: center;margin-bottom: 40px;border-bottom: 1px;
}

//首先获取元素，这里获取了所有需要的元素。var box = document.getElementsByClassName("box_big")[0];var spot = document.getElementsByClassName("spot_list");var block = document.getElementsByClassName("block")[0];var left_btn = document.getElementsByClassName("left_btn")[0];var right_btn = document.getElementsByClassName("right_btn")[0];var tuijian_block = document.getElementsByClassName("tuijian_images")[0];var tuijian_box_big = document.getElementsByClassName("tuijian_box_big")[0];var tuijian_box = document.getElementsByClassName("tuijian_box")[0];var left_btn_1 = document.getElementsByClassName("left_btn_1")[0];var right_btn_1 = document.getElementsByClassName("right_btn_1")[0];var time = null;spot[0].style.background = "#ffffff";var count = 0;showtime();//鼠标进入计时器停止block.onmouseenter = function () {clearInterval(time);};//鼠标出来计时器打开block.onmouseleave = function () {showtime();};//点的事件for (var i = 0; i < spot.length; i++) {spot[i].index = i;spot[i].onmouseenter = function () {spot[count].style.background = "rgba(255, 255, 255, 0.3)";this.style.background = "#ffffff";count = this.index;box.style.marginLeft = (count * -1520) + "px";}}//图片左边划left_btn.onclick = function () {spot[count].style.backgroundColor = "rgba(255,255,255,0.3)";count--;if (count < 0) {box.className = "box_big";count = box.children.length - 2;box.style.marginLeft = "-16720px";}setTimeout(function () {box.className = "box_big nav";box.style.marginLeft = (-1520 * count) + "px";spot[count].style.backgroundColor = "#ffffff";}, 1);};//图片右边划right_btn.onclick = function () {mate();};//计时器function showtime() {time = setInterval(function () {mate();}, 5000);}//正常滚动function mate() {box.className = "box_big nav";spot[count].style.background = "rgba(255, 255, 255, 0.3)";count++;spot[count > box.children.length - 2 ? 0 : count].style.background = "#ffffff";box.style.marginLeft = (count * -1520) + "px";setTimeout(function () {if (count > box.children.length - 2) {count = 0;box.className = "box_big";box.style.marginLeft = "0px"}}, 200)}var time_ = null;var count_ = 0;showtime1();//鼠标进入计时器停止//计时器function showtime1() {time_ = setInterval(function () {mate1();}, 5000);}tuijian_block.onmouseenter = function () {clearInterval(time_);};//鼠标出来计时器打开tuijian_block.onmouseleave = function () {showtime1();};//正常滚动function mate1() {tuijian_box_big.className = "tuijian_box_big nav";count_++;tuijian_box_big.style.marginLeft = (count_ * -345) + "px";setTimeout(function () {if (count_ > tuijian_box_big.children.length - 5) {count_ = 0;// tuijian_box.className = "tuijian_box";tuijian_box_big.className = "tuijian_box_big";tuijian_box_big.style.marginLeft = "0px"}}, 200)}//图片左边划left_btn_1.onclick = function () {count_--;if (count_ < 0) {tuijian_box_big.className = "tuijian_box_big";count_ = tuijian_box_big.children.length - 5;tuijian_box_big.style.marginLeft = "-3795px";}setTimeout(function () {tuijian_box_big.className = "tuijian_box_big nav";tuijian_box_big.style.marginLeft = (-345 * count_) + "px";}, 1);};//图片右边划right_btn_1.onclick = function () {mate1();};// document.getElementById('1').className = 'tuijian_box first'// document.getElementById('2').className = 'tuijian_box second'// document.getElementById('3').className = 'tuijian_box third'// document.getElementById('4').className = 'tuijian_box fourth'

自己仿的一个网页，比较适合小白入门相关推荐

切分数据集（train_test_split）,思路分享及手打代码和介绍sklearn中train_test_split，适合小白入门
本篇博客介绍train_test_split,步骤1-4是自己手打代码和思路分享,步骤5介绍如何使用sklearn中的train_test_split,步骤3有介绍随机种子哦,简单易懂,适合小白入门 ...
网页设计用表格设计一个计算器界面用于小白入门安排
网页设计用表格设计计算器界面用于小白入门 <!DOCTYPE html> <html lang="en"> <head><meta ch ...
推荐：适合小白入门的Asp.Net Core 开源学习手册
前言推荐一个入门级的.NET Core开源项目,非常适合新手入门学习.NET Core. 开源地址: https://github.com/windsting/little-aspnetcore-b ...
零基础入门微信小程序,真真真·零基础,一个完全的小白写出来的才适合小白入门,踩坑日记
进入微信小程序官网选择适合自己的平台及工具,这里我选择开发版工具下载完成,安装以下就是初始界面了点击+号新建一个项目选择不适用模板,然后填写小程序工程名,路径,ID(可先不填写) 创建即可小 ...
网页设计实现读书信息反馈表适合小白入门安排
<!DOCTYPE html > <html lang="en"> <head> <head><meta charset=&q ...
适合小白入门的随机森林介绍
作者:Abner,王宇一.随机森林简介随机森林是机器学习中的一种常用方法,而随机森林背后的思想,更是与群体智慧,甚至"看不见的手"相互映照. 上世纪八十年代Breiman等人发 ...
python 进阶【封装】适合小白入门
面向对象的三大特性: 封装,继承,多态是面向对象的三大特性面向对象编程,是许多编程语言都支持的一种编程思想. 简单理解是:基于模板(类)去创建实体(对象),使用对象完成功能开发. 封装: 封装指的 ...
Vue2简单使用及相关基础知识概念（适合小白入门，看完就能上手）
Vue2相关知识一.概念 1.前端模式 2.MVVM模式 2.1 概念 2.2 优点 (1)低耦合 (2)可复用 (3)独立开发 (4)可测试 3.Vue 3.1 概念 3.2 优点 3.3 参考网 ...
Unity人脸识别（一），基于百度大脑的Unity3dC#简单的人脸对比（搜索）功能，适合小白入门
离线版人脸识别参考我的另外一篇博客:https://blog.csdn.net/GottaYiWanLiu/article/details/90442274 最近忽然对物联网开发蛮感兴趣,但无奈物联网 ...
适合小白入门的100个微信小程序云开发项目
1.答题小程序 2.通告类小程序3.抽奖小程序.4打牌记账小程序.5.物联网小程序 6.小程序云开发.7.商城小程序 8.地图小程序创建云开发小程序创建一个带有云开发的小程序基本没有问题: 创建云 ...

自己仿的一个网页，比较适合小白入门

自己仿的一个网页，比较适合小白入门相关推荐

最新文章

热门文章