p6pqowu53
/
WebSrc
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

ADD file via upload

Browse Source
main
p6pqowu53 3 weeks ago
parent 1b469ad4b6
commit 9de4bb7439
1 changed files with 334 additions and 0 deletions
Show Stats Download Patch File Download Diff File

334
新闻分类.html
Unescape View File

@ -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>
Write Preview
Loading…
Cancel
Save