一、先放上几张效果图吧!
二、大致讲解
顶部导航栏
使用了固定定位,这样可以使导航栏始终出现在屏幕上方。
中间轮播图
先把所有轮播图垂直排列在一个盒子中,给这个盒子设置overflow:hidden,并且盒子的大小和单个图片大小相同。这样的话,每次展现给用户的就是一张图片。然后利用JavaScript设置一个定时器,每隔2s就会时全部图片整体的margin-top上移一个图片的垂直高度,这样在盒子中展示的图片就会每隔2s自动切换到下一张,建立一个索引,当在盒子中的图片为最后一张时,索引归零,重新计数,margin-top恢复初始值。这样就可以使得图片循环切换。
轮播图下方的Tab切换
左边是几个板块的标题,右边是每个板块对应的内容。首先将右边的内容全部设置display:none,这样就可以将他们全部隐藏。然后利用JavaScript设置鼠标浮动事件,当鼠标放到某个板块标题上时,将对应的内容设置成display:block,这样就可以实现鼠标放到某个板块显示某个板块内容的效果了。
下方的六大板块
采用了HTML5里面的table标签,这样可以更加方便的设计出样式和布局。表格为5行5列,第一行用来承载第一行板块的标题,第二行承载的是军事天地、娱乐头条和电脑百科的内容。第三行为分隔条,第四行用来承载第二行板块的标题,第五行承载的是科技要闻、大街小事和教育前沿的内容。第二列和第四列为分隔条。
三、关键代码
1、HTML部分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>网站首页</title>
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<header>
<div id="hea-bar">
<ul>
<li>
<a id="title" href="index.html">新闻天下</a>
</li>
</ul>
<ul>
<li>
<a href="index.html">首页</a>
</li>
<li>
<a href="#">分类</a>
</li>
<li>
<a href="#">网站地图</a>
</li>
<li>
<a href="#">关于我们</a>
</li>
</ul>
<ul class="ul-right">
<li>
<form>
<input type="text" placeholder="关键字" class="text">
<button type="submit" class="button">搜索</button>
</form>
</li>
<li>
<a href="register.html">注册</a>
</li>
<li>
<a href="login.html">登录</a>
</li>
</ul>
</div>
</header>
<section>
<div id="wrap">
<ul id="pic">
<li><img src="images/01.jpg" alt=""></li>
<li><img src="images/02.gif" alt=""></li>
<li><img src="images/03.jpg" alt=""></li>
</ul>
<div id="bar_left"></div>
<div id="bar_right"></div>
<ol id="list">
<li class="on">1</li>
<li>2</li>
<li>3</li>
</ol>
</div>
<div class="container">
<div class="side">
<ul id="tab">
<li>最新发布</li>
<li>本周热门</li>
<li>浏览最多</li>
<li>网友求助</li>
<li>政民互动</li>
</ul>
</div>
<div id="content">
<div class="nohide">
<table class="table1">
<tbody>
<tr>
<td><a href="#">这是一行新闻测试,切勿当真。这是一行新闻测试,切勿当真。</a></td>
<td>发布日期2020-05-01</td>
</tr>
<tr>
<td><a href="#">这是一行新闻测试,切勿当真。这是一行新闻测试,切勿当真。</a></td>
<td>发布日期2020-04-30</td>
</tr>
<tr>
<td><a href="#">这是一行新闻测试,切勿当真。这是一行新闻测试,切勿当真。</a></td>
<td>发布日期2020-04-29</td>
</tr>
<tr>
<td><a href="#">这是一行新闻测试,切勿当真。这是一行新闻测试,切勿当真。</a></td>
<td>发布日期2020-04-28</td>
</tr>
<tr>
<td><a href="#">这是一行新闻测试,切勿当真。这是一行新闻测试,切勿当真。</a></td>
<td>发布日期2020-04-27</td>
</tr>
<tr>
<td><a href="#">这是一行新闻测试,切勿当真。这是一行新闻测试,切勿当真。</a></td>
<td>发布日期2020-04-26</td>
</tr>
<tr>
<td><a href="#">这是一行新闻测试,切勿当真。这是一行新闻测试,切勿当真。</a></td>
<td>发布日期2020-04-25</td>
</tr>
</tbody>
</table>
</div>
<div class="tex">
<table class="table1">
<tbody>
<tr>
<td><a href="#">为中华民族崛起而读书!!!</a></td>
<td>发布日期2020-04-01</td>
</tr>
<tr>
<td><a href="#">为中华民族崛起而读书!!!</a></td>
<td>发布日期2020-03-30</td>
</tr>
<tr>
<td><a href="#">为中华民族崛起而读书!!!</a></td>
<td>发布日期2020-03-29</td>
</tr>
<tr>
<td><a href="#">为中华民族崛起而读书!!!</a></td>
<td>发布日期2020-03-28</td>
</tr>
<tr>
<td><a href="#">为中华民族崛起而读书!!!</a></td>
<td>发布日期2020-01-27</td>
</tr>
<tr>
<td><a href="#">为中华民族崛起而读书!!!</a></td>
<td>发布日期2020-06-26</td>
</tr>
<tr>
<td><a href="#">为中华民族崛起而读书!!!</a></td>
<td>发布日期2020-04-25</td>
</tr>
</tbody>
</table>
</div>
<div class="tex">
<table class="table1">
<tbody>
<tr>
<td><a href="#">浏览量最多的新闻当然是在这里啦,快来看看吧!</a></td>
<td>发布日期2020-03-23</td>
</tr>
<tr>
<td><a href="#">浏览量最多的新闻当然是在这里啦,快来看看吧!</a></td>
<td>发布日期2020-03-22</td>
</tr>
<tr>
<td><a href="#">浏览量最多的新闻当然是在这里啦,快来看看吧!</a></td>
<td>发布日期2020-03-21</td>
</tr>
<tr>
<td><a href="#">浏览量最多的新闻当然是在这里啦,快来看看吧!</a></td>
<td>发布日期2020-03-20</td>
</tr>
<tr>
<td><a href="#">浏览量最多的新闻当然是在这里啦,快来看看吧!</a></td>
<td>发布日期2020-03-19</td>
</tr>
<tr>
<td><a href="#">浏览量最多的新闻当然是在这里啦,快来看看吧!</a></td>
<td>发布日期2020-03-18</td>
</tr>
<tr>
<td><a href="#">浏览量最多的新闻当然是在这里啦,快来看看吧!</a></td>
<td>发布日期2020-03-16</td>
</tr>
</tbody>
</table>
</div>
<div class="tex">
<table class="table1">
<tbody>
<tr>
<td><a href="#">网友求助的内容在此,请帮他解答吧~</a></td>
<td>发布日期2020-02-27</td>
</tr>
<tr>
<td><a href="#">网友求助的内容在此,请帮他解答吧~</a></td>
<td>发布日期2020-02-25</td>
</tr>
<tr>
<td><a href="#">网友求助的内容在此,请帮他解答吧~</a></td>
<td>发布日期2020-02-23</td>
</tr>
<tr>
<td><a href="#">网友求助的内容在此,请帮他解答吧~</a></td>
<td>发布日期2020-02-21</td>
</tr>
<tr>
<td><a href="#">网友求助的内容在此,请帮他解答吧~</a></td>
<td>发布日期2020-02-20</td>
</tr>
<tr>
<td><a href="#">网友求助的内容在此,请帮他解答吧~</a></td>
<td>发布日期2020-02-09</td>
</tr>
<tr>
<td><a href="#">网友求助的内容在此,请帮他解答吧~</a></td>
<td>发布日期2020-02-01</td>
</tr>
</tbody>
</table>
</div>
<div class="tex">
<table class="table1">
<tbody>
<tr>
<td><a href="#">想知道政民互动的最新消息?进来看就对了!</a></td>
<td>发布日期2020-01-31</td>
</tr>
<tr>
<td><a href="#">想知道政民互动的最新消息?进来看就对了!</a></td>
<td>发布日期2020-01-30</td>
</tr>
<tr>
<td><a href="#">想知道政民互动的最新消息?进来看就对了!</a></td>
<td>发布日期2020-01-27</td>
</tr>
<tr>
<td><a href="#">想知道政民互动的最新消息?进来看就对了!</a></td>
<td>发布日期2020-01-25</td>
</tr>
<tr>
<td><a href="#">想知道政民互动的最新消息?进来看就对了!</a></td>
<td>发布日期2020-01-23</td>
</tr>
<tr>
<td><a href="#">想知道政民互动的最新消息?进来看就对了!</a></td>
<td>发布日期2020-01-16</td>
</tr>
<tr>
<td><a href="#">想知道政民互动的最新消息?进来看就对了!</a></td>
<td>发布日期2020-01-05</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<table class="table2">
<tbody>
<tr>
<td class="headline">军事天地</td>
<td rowspan="2" class="blank"></td>
<td class="headline">娱乐头条</td>
<td rowspan="2" class="blank"></td>
<td class="headline">电脑百科</td>
</tr>
<tr>
<td>此处为军事新闻版块</td>
<td>此处为娱乐头条板块</td>
<td>此处为电脑百科版块</td>
</tr>
<tr>
<td colspan="5" id="blank2"></td>
</tr>
<tr>
<td class="headline">科技要闻</td>
<td rowspan="2" class="blank"></td>
<td class="headline">大街小事</td>
<td rowspan="2" class="blank"></td>
<td class="headline">教育前沿</td>
</tr>
<tr>
<td>此处为科技新闻版块</td>
<td>此处为大街小事版块</td>
<td>此处为教育前沿版块</td>
</tr>
</tbody>
</table>
</section>
<footer>
CopyRight By LiKang
</footer>
<script src="js/main.js"></script>
</body>
</html>
2、CSS部分
html{
background: #F1F1F1;
}
*{
list-style: none;
}
a{
text-decoration: none;
color: black;
}
body {
padding: 0;
margin: 0;
}
header {
background: #FFF;
width: 100%;
height: 70px;
border-bottom: 1px solid rgba(0, 0, 0, 0.1);/*设置下边框颜色*/
position: fixed;/*设置固定定位*/
top: 0;
right: 0;
z-index: 1000;/*保持导航条在最上方*/
}
header ul {
float: left;
margin-left: 20px;
height: 40px;
}
/* 导航栏内容全在里面 */
#hea-bar {
width: 90%;
margin-bottom: 20px;
height: 40px;
position: relative;
margin: 0 auto;
}
/* 新闻天下 */
#title {
font-size: 25px;
color: gray;
}
/* 首页、分类、网站地图、关于我们 */
ul li a {
text-decoration: none;
color: gray;
line-height: 40px;
}
/* 搜索输入框 */
.text {
height: 25px;
padding: 6px 12px;
font-size: 14px;
color: #555;
background-color: #fff;
border: 1px solid #ccc;
border-radius: 4px; /*设置圆滑边框*/
}
/* 搜索按钮 */
.button {
display: inline-block;
padding: 6px 12px;
margin-bottom: 2px;
font-size: 14px;
line-height: 1.8;
text-align: center;
vertical-align: middle;
cursor: pointer;
background-color: #fff;
border: 1px solid #ccc;
border-radius: 4px;
}
header ul li{
float: left;
list-style: none;
margin-right: 20px
}
/* 关键字、搜索、注册、登录 */
.ul-right {
position: absolute;
right: 100px;
}
.ul-right li {
margin-left: 30px;
}
/* 下 */
section {
width: 90%;
margin: 0 auto;
}
#wrap {
/* margin: 10px; */
width: 100%;
height: 500px;
overflow: hidden;
position: relative;
}
#pic{
margin: 0;
padding: 0;
clear: both;
}
#pic img{
width: 100%;
height: 520px;
}
#list {
position: absolute;
bottom: 0px;
right: 30px;
list-style: none;
}
#list li {
float: left;
margin-right: 15px;
cursor: pointer;
width: 23px;
height: 23px;
line-height: 23px;
text-align: center;
background: #ADA79D;
color: #FFF;
border-radius: 50%;
}
#list .on {
background: red;
}
#bar_left,
#bar_right {
width: 33px;
height: 80px;
line-height: 80px;
position: absolute;
top: 205px;
background: rgba(0, 0, 0, 0.3);
}
#bar_left {
left: -33px;
}
#bar_right {
right: -33px;
}
/*下面利用伪元素实现左侧和右侧的小箭头*/
#bar_left:after,
#bar_left:before,
#bar_right:before,
#bar_right:after {
content: "";
border-top: 15px solid transparent;
border-bottom: 15px solid transparent;
position: absolute;
top: 25px;
}
/*左边箭头*/
#bar_left:before {
border-left: 15px solid transparent;
border-right: 15px solid #F1F1F1;
right: 10px;
}
#bar_left:after {
border-left: 15px solid transparent;
border-right: 15px solid rgba(0, 0, 0, 0.3);
right: 7px;
}
/*右边箭头*/
#bar_right:before {
border-right: 15px solid transparent;
border-left: 15px solid #F1F1F1;
left: 10px;
}
#bar_right:after {
border-right: 15px solid transparent;
border-left: 15px solid rgba(0, 0, 0, 0.3);
left: 7px;
}
#wrap:hover #bar_left {
left: 0;
cursor: pointer;
transition: left 0.5s;
}
#wrap:hover #bar_right {
/* display: block; */
right: 0px;
cursor: pointer;
transition: right 0.5s;
}
#recent {
width: ;
}
/* 文字 */
.container {
margin: 0;
padding: 0;
border: 1px solid #ccc;
/* width: 100%; */
height: 270px;
background: #FFF;
}
.side {
width: 20%;
/* margin: 10px 10px; */
float: left;
}
#tab{
padding: 0;
}
#tab li {
padding: 10px;
margin-top: 10px;
color: #015293;
background: #ECF8F8;
border-radius: 15px;
font-weight: bold;
text-align: center;
cursor: pointer;
position: relative;
}
.hov:after {
content: '';
border: 15px solid transparent;
border-left: 15px solid #015293;
position: absolute;
top: 5px;
right: -23px;
}
#content {
/* border: 1px solid #E8E8E8; */
width: 77%;
height: 265px;
margin: 0 15px;
float: left;
background: #FFF;
}
#content>div {
display: none;
}
.table1{
width: 100%;
}
.table1 tbody tr td:first-child{
width: 70%;
}
.table1 td{
border-bottom: 1px dashed #CCC;
height: 32px;
font-weight: normal;
}
.nohide {
display: block !important;
font-weight: bold;
/* overflow: auto; */
}
.table2{
margin: 20px auto;
border: none;
width: 100%;
background: #FFF;
border-collapse: collapse;//挤压两条边框为1条
}
.table2 tbody tr:nth-child(1){
height: 50px;
font-weight: bold;
}
.table2 tbody tr:nth-child(2){
height: 300px;
color: #337AB7;
}
.table2 tbody tr:nth-child(3){
height: 30px;
background: #F1F1F1;
}
.table2 tbody tr:nth-child(4){
height: 50px;
font-weight: bold;
}
.table2 tbody tr:nth-child(5){
height: 300px;
color: #337AB7;
}
/* tr td:nth-child(1){//选择第一列
background: #CCC;
} */
.table2 td{
border: 1px solid #ccc;
text-align: center;
}
.blank{
border: 0 !important;
background: #F1F1F1;
width: 20px;
}
#blank2{
border:none;
border-right: 1px solid #F1F1F1;
}
.headline{
background-color: #F5F5F5;
color: black;
border-top: 1px solid #CCC;
}
footer{
/* display: block; */
width: 90%;
margin: 10px auto;
height: 70px;
border: 1px solid #CCC;
background: #FFF;
border-radius: 15px !important;
text-align: center;
line-height: 70px;
font-weight: bold;
}
3、JS部分
// 轮播图
var wrap = document.getElementById('wrap');
var pics = document.getElementById('pic');
var lists = document.getElementById('list').getElementsByTagName('li');
var point_l = document.getElementById('bar_left');
var point_r = document.getElementById('bar_right');
var index = 0;
var counter = null;
function change() { //计时器
counter = setInterval(function() {
index++;
if (index === lists.length) {
index = 0;
}
img(index);
}, 2000)
}
change();
function img(curIndex) { //切换图片
for (var i = 0; i < lists.length; i++) {
if (curIndex === i) {
lists[i].className = 'on';
} else {
lists[i].className = '';
}
}
index = curIndex;
pics.style.marginTop = -504 * curIndex + 'px'; //图片上移
wrap.onmouseover = function() { //鼠标放到图片上时图片停止播放
pics.style.cursor = "pointer";
clearInterval(counter); //清除计时器
}
pics.onmouseout = change;
}
//鼠标放到指定序号切换到指定图片
for (var i = 0; i < lists.length; i++) {
lists[i].id = i;
lists[i].onmouseover = function() {
img(this.id);
this.className = 'on';
}
}
//当鼠标放在箭头上时,点击箭头切换到下一张图片
point_l.onmousedown = function() { //点击左边箭头
if (index <= 0) {
index = lists.length;
}
img(index - 1);
}
point_r.onmousedown = function() { //点击右边箭头
if (index >= lists.length - 1) {
index = -1;
}
img(index + 1);
}
// tab切换
var tabs = document.getElementById('tab').getElementsByTagName('li');
var sen = document.getElementById('content').children;
for (var i = 0; i < tabs.length; i++) {
tabs[i].onmouseover = function() {
changes(this);
}
}
// console.log(tabs.length)
function changes(obj) {
for (var i = 0; i < tabs.length; i++) {
if (tabs[i] === obj) {
tabs[i].className = "hov";
tabs[i].style.color = "#ECF8F8";
tabs[i].style.background = "#015293";
sen[i].className = "nohide";
} else {
tabs[i].style.color = "#015293";
tabs[i].style.background = "#ECF8F8";
tabs[i].className = '';
sen[i].className = '';
}
}
}