parent
1b469ad4b6
commit
9de4bb7439
@ -0,0 +1,334 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Document</title>
|
||||||
|
<style>
|
||||||
|
html {
|
||||||
|
scroll-behavior: smooth;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
padding: 0;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.progress {
|
||||||
|
width: 100%;
|
||||||
|
background-color: white;
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.prostick {
|
||||||
|
width: 0;
|
||||||
|
background-color: aqua;
|
||||||
|
height: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.Nav {
|
||||||
|
position: fixed;
|
||||||
|
top: 5px;
|
||||||
|
width: 100%;
|
||||||
|
height: 65px;
|
||||||
|
font-size: 20px;
|
||||||
|
font-weight: bold;
|
||||||
|
color: black;
|
||||||
|
background-color: #f8f4f4;
|
||||||
|
box-shadow: 0 5px 6px #b4b1b1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.NavBar {
|
||||||
|
width: 980px;
|
||||||
|
height: 100%;
|
||||||
|
margin: 0 auto;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.NavBar img {
|
||||||
|
width: 40px;
|
||||||
|
height: 40px;
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.left {
|
||||||
|
display: inline-block;
|
||||||
|
margin-right: 100px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.right {
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.right li {
|
||||||
|
list-style-type: none;
|
||||||
|
display: inline-block;
|
||||||
|
margin-right: 36px;
|
||||||
|
width: 80px;
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
.right a {
|
||||||
|
text-decoration: none;
|
||||||
|
color: black;
|
||||||
|
display: inline-block;
|
||||||
|
height: 40px;
|
||||||
|
transition: 0.3s;
|
||||||
|
}
|
||||||
|
|
||||||
|
footer {
|
||||||
|
width: 100%;
|
||||||
|
height: 100px;
|
||||||
|
background-color: #3fa8ea;
|
||||||
|
font-size: 18px;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 100px;
|
||||||
|
position: fixed;
|
||||||
|
bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
footer p {
|
||||||
|
margin: 0;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.Top {
|
||||||
|
width: 30px;
|
||||||
|
height: 30px;
|
||||||
|
line-height: 30px;
|
||||||
|
text-align: center;
|
||||||
|
border-radius: 50%;
|
||||||
|
background-color: blue;
|
||||||
|
color: white;
|
||||||
|
position: fixed;
|
||||||
|
bottom: 130px;
|
||||||
|
right: 50px;
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.main {
|
||||||
|
width: 980px;
|
||||||
|
margin: 0 auto;
|
||||||
|
margin-top: 90px;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.main-left {
|
||||||
|
width: 450px;
|
||||||
|
background-color: rgb(236, 236, 236);
|
||||||
|
border-bottom: 6px solid skyblue;
|
||||||
|
border-radius: 5px;
|
||||||
|
display: inline-block;
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.main-right {
|
||||||
|
width: 450px;
|
||||||
|
background-color: rgb(236, 236, 236);
|
||||||
|
border-bottom: 6px solid skyblue;
|
||||||
|
border-radius: 5px;
|
||||||
|
display: inline-block;
|
||||||
|
position: absolute;
|
||||||
|
right: 0;
|
||||||
|
top: 0;
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.tital {
|
||||||
|
background-color: skyblue;
|
||||||
|
height: 55px;
|
||||||
|
border-radius: 5px 5px 0 0;
|
||||||
|
font-size: 22px;
|
||||||
|
line-height: 55px;
|
||||||
|
text-align: center;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tabutton1,.tabutton2 {
|
||||||
|
height: 50px;
|
||||||
|
line-height: 50px;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.tabutton1 button ,.tabutton2 button {
|
||||||
|
width: 100px;
|
||||||
|
height: 50px;
|
||||||
|
border-radius: 5px;
|
||||||
|
font-size: 18px;
|
||||||
|
background-color: #fff;
|
||||||
|
transition: 0.7s;
|
||||||
|
margin: 4.3px;
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tabtext1,.tabtext2 {
|
||||||
|
width: 400px;
|
||||||
|
height: 400px;
|
||||||
|
background-color: skyblue;
|
||||||
|
margin: 15px auto;
|
||||||
|
}
|
||||||
|
.tabtext1 p,.tabtext2 p{
|
||||||
|
height: 100%;
|
||||||
|
font-size: 20px;
|
||||||
|
text-indent: 2em;
|
||||||
|
line-height: 35px;
|
||||||
|
padding: 0 10px;
|
||||||
|
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<div class="progress">
|
||||||
|
<div class="prostick"></div>
|
||||||
|
</div>
|
||||||
|
<div class="Nav">
|
||||||
|
<div class="NavBar">
|
||||||
|
<div class="left">
|
||||||
|
<img src="#">
|
||||||
|
<sapn>web新闻网站</span>
|
||||||
|
</div>
|
||||||
|
<div class="right">
|
||||||
|
<ul>
|
||||||
|
<li><a href="首页.html">首页</a></li>
|
||||||
|
<li><a href="新闻分类.html">新闻分类</a></li>
|
||||||
|
<li><a href="#">专题报道</a></li>
|
||||||
|
<li><a href="#">新闻资讯</a></li>
|
||||||
|
<li><a href="#">互动交流</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="main">
|
||||||
|
<div class="main-left">
|
||||||
|
<div class="tital">
|
||||||
|
新闻区域方面
|
||||||
|
</div>
|
||||||
|
<div class="tabutton1">
|
||||||
|
<button>时政新闻</button>
|
||||||
|
<button>经济新闻</button>
|
||||||
|
<button>法律新闻</button>
|
||||||
|
<button>军事新闻</button>
|
||||||
|
</div>
|
||||||
|
<div class="tabtext1">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="main-right">
|
||||||
|
<div class="tital">
|
||||||
|
新闻内容方面
|
||||||
|
</div>
|
||||||
|
<div class="tabutton2">
|
||||||
|
<button>文字新闻</button>
|
||||||
|
<button>图片新闻</button>
|
||||||
|
<button>电声新闻</button>
|
||||||
|
<button>音像新闻</button>
|
||||||
|
</div>
|
||||||
|
<div class="tabtext2">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<footer>
|
||||||
|
<p>web新闻网站</p>
|
||||||
|
</footer>
|
||||||
|
<div class="Top">↑</div>
|
||||||
|
<script>
|
||||||
|
let tabutton1 = document.querySelectorAll('.tabutton1 button')
|
||||||
|
let tabtext1 = document.querySelector('.tabtext1')
|
||||||
|
let tabutton2 = document.querySelectorAll('.tabutton2 button')
|
||||||
|
let tabtext2 = document.querySelector('.tabtext2')
|
||||||
|
let totalhight = document.body.scrollHeight - window.innerHeight
|
||||||
|
const prostick = document.querySelector('.prostick')
|
||||||
|
window.addEventListener('scroll', function () {
|
||||||
|
let pro = (window.pageYOffset / totalhight) * 100
|
||||||
|
prostick.style.width = pro + '%'
|
||||||
|
})
|
||||||
|
const right = document.querySelectorAll('.right a')
|
||||||
|
right[0].style.width = '40px'
|
||||||
|
right[1].style.color = '#0091ea'
|
||||||
|
right[1].style.borderBottom = '3px #0091ea solid'
|
||||||
|
for (let i = 0; i < right.length; i++) {
|
||||||
|
if (i == 1) {
|
||||||
|
continue
|
||||||
|
}
|
||||||
|
right[i].addEventListener('mouseenter', function () {
|
||||||
|
right[i].style.color = '#0091ea'
|
||||||
|
right[i].style.borderBottom = '3px #0091ea solid'
|
||||||
|
})
|
||||||
|
right[i].addEventListener('mouseout', function () {
|
||||||
|
right[i].style.color = ''
|
||||||
|
right[i].style.borderBottom = ''
|
||||||
|
})
|
||||||
|
}
|
||||||
|
const Top = document.querySelector('.Top')
|
||||||
|
window.addEventListener('scroll', function () {
|
||||||
|
let n = document.documentElement.scrollTop
|
||||||
|
console.log(n)
|
||||||
|
if (n > 100) {
|
||||||
|
Top.style.opacity = '1'
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
Top.style.opacity = '0'
|
||||||
|
}
|
||||||
|
})
|
||||||
|
Top.addEventListener('click', function () {
|
||||||
|
document.documentElement.scrollTop = 0
|
||||||
|
})
|
||||||
|
let Text1 = [
|
||||||
|
{ text: '1.国家政治生活中新近或正在发生的事实的报道称为时政新闻。主要表现为政党、社会集团、社会势力在处理国家生活和国际关系方面的方针、政策和活动。是由政治关系在社会生活中的重要性决定的。' },
|
||||||
|
{ text: '2.国家政治生活中新近或正在发生的事实的报道称为时政新闻。主要表现为政党、社会集团、社会势力在处理国家生活和国际关系方面的方针、政策和活动。是由政治关系在社会生活中的重要性决定的。' },
|
||||||
|
{ text: '3.国家政治生活中新近或正在发生的事实的报道称为时政新闻。主要表现为政党、社会集团、社会势力在处理国家生活和国际关系方面的方针、政策和活动。是由政治关系在社会生活中的重要性决定的。' },
|
||||||
|
{ text: '4.国家政治生活中新近或正在发生的事实的报道称为时政新闻。主要表现为政党、社会集团、社会势力在处理国家生活和国际关系方面的方针、政策和活动。是由政治关系在社会生活中的重要性决定的。' }
|
||||||
|
]
|
||||||
|
for (let i = 0; i < Text1.length; i++) {
|
||||||
|
console.log(tabutton1.length)
|
||||||
|
if (i == Text1.length) {
|
||||||
|
break
|
||||||
|
}
|
||||||
|
tabutton1[i].addEventListener('click', function () {
|
||||||
|
tabutton1[i].style.backgroundColor = '#87CEEB'
|
||||||
|
for (let x = 0; x < Text1.length; x++) {
|
||||||
|
if (x == i) {
|
||||||
|
continue
|
||||||
|
}
|
||||||
|
else{ tabutton1[x].style.backgroundColor = ''}
|
||||||
|
}
|
||||||
|
tabtext1.innerHTML='<p>' + Text1[i].text + '</p>';
|
||||||
|
})
|
||||||
|
}
|
||||||
|
let Text2 = [
|
||||||
|
{ text: '1.文字新闻通常指的是通过书写文字来传递信息和知识的报道形式。它可以是报纸、杂志、书籍、网络文章等各种载体上发表的文章。' },
|
||||||
|
{ text: '2.文字新闻通常指的是通过书写文字来传递信息和知识的报道形式。它可以是报纸、杂志、书籍、网络文章等各种载体上发表的文章。' },
|
||||||
|
{ text: '3.文字新闻通常指的是通过书写文字来传递信息和知识的报道形式。它可以是报纸、杂志、书籍、网络文章等各种载体上发表的文章。' },
|
||||||
|
{ text: '4.文字新闻通常指的是通过书写文字来传递信息和知识的报道形式。它可以是报纸、杂志、书籍、网络文章等各种载体上发表的文章。' }
|
||||||
|
]
|
||||||
|
for (let i = 0; i < Text2.length; i++) {
|
||||||
|
console.log(tabutton2.length)
|
||||||
|
if (i == Text2.length) {
|
||||||
|
break
|
||||||
|
}
|
||||||
|
tabutton2[i].addEventListener('click', function () {
|
||||||
|
tabutton2[i].style.backgroundColor = '#87CEEB'
|
||||||
|
for (let x = 0; x < Text2.length; x++) {
|
||||||
|
if (x == i) {
|
||||||
|
continue
|
||||||
|
}
|
||||||
|
else{ tabutton2[x].style.backgroundColor = ''}
|
||||||
|
}
|
||||||
|
tabtext2.innerHTML='<p>' + Text2[i].text + '</p>';
|
||||||
|
})
|
||||||
|
}
|
||||||
|
window.addEventListener('load',function(){
|
||||||
|
tabutton1[0].style.backgroundColor = '#87CEEB'
|
||||||
|
tabutton2[0].style.backgroundColor = '#87CEEB'
|
||||||
|
tabtext1.innerHTML='<p>' + Text1[0].text + '</p>';
|
||||||
|
tabtext2.innerHTML='<p>' + Text2[0].text + '</p>';
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
Loading…
Reference in new issue