You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
284 lines
8.6 KiB
284 lines
8.6 KiB
<!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;
|
|
}
|
|
|
|
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;
|
|
}
|
|
|
|
.mid {
|
|
width: 980px;
|
|
margin: 0px auto;
|
|
margin-top: 90px;
|
|
}
|
|
|
|
.imgs {
|
|
width: 980px;
|
|
height: 400px;
|
|
}
|
|
|
|
.imgs img {
|
|
width: 980px;
|
|
height: 400px;
|
|
}
|
|
|
|
.Newsuse {
|
|
width: 980px;
|
|
margin-top: 25px;
|
|
text-align: center;
|
|
font-size: 22px;
|
|
color: #fff;
|
|
background-color: skyblue;
|
|
}
|
|
|
|
.Newsuse .tital {
|
|
display: inline-block;
|
|
border-bottom: 3px solid #fff;
|
|
}
|
|
|
|
.NewsText {
|
|
font-size: 16px;
|
|
cursor: pointer;
|
|
line-height: 60px;
|
|
}
|
|
|
|
.NewsText li {
|
|
list-style-type: none;
|
|
transition: 0.3s;
|
|
}
|
|
|
|
.NewsText li:hover {
|
|
color: #000;
|
|
}
|
|
|
|
.NewsText2 p {
|
|
text-align: left;
|
|
font-size: 18px;
|
|
padding: 20px;
|
|
text-indent: 2em;
|
|
line-height: 30px;
|
|
}
|
|
</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="mid">
|
|
<div class="imgs">
|
|
<img src="#" alt="">
|
|
</div>
|
|
<div class="Newsuse">
|
|
<div class="tital">新闻的作用</div>
|
|
<div class="NewsText">
|
|
<ul>
|
|
<script>
|
|
let TextArr = [
|
|
{ text: '1.消除受众的不确定性。新闻通过报道新发生的事件和情况，帮助受众了解世界的最新变化。' },
|
|
{ text: '2.新闻能够反映社会现象和问题，影响和引导公众的思想和行为，实现社会舆论的监督引导。' },
|
|
{ text: '3.新闻报道涉及广泛的科学技术和社会生活领域，有助于人们获取新知识和新发现教育普及。' },
|
|
{ text: '4.新闻媒介还传播各种趣味性内容，如奇闻异事、风土人情等，在紧张工作得到娱乐和享受。' },
|
|
]
|
|
for (let i = 0; i < TextArr.length; i++)
|
|
document.write(`
|
|
<li>${TextArr[i].text}</li>
|
|
`)
|
|
</script>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div class="Newsuse">
|
|
<div class="tital">新闻的定义</div>
|
|
<div class="NewsText2">
|
|
<script>
|
|
let Text2 = { text: '新闻，也叫消息、资讯，是通过报纸、电台、广播、电视台等媒体途径所传播信息的一种称谓。是记录社会、传播信息、反映时代的一种文体。新闻概念有广义与狭义之分，就其广义而言，除了发表于报刊、广播、互联网、电视上的评论与专文外的常用文本都属于新闻之列，包括消息、通讯、特写、速写（有的将速写纳入特写之列）等等，狭义的新闻则专指消息，消息是用概括的叙述方式，比较简明扼要的文字，迅速及时地报道国内外新近发生的、有价值的事实，让别人了解。' }
|
|
document.write(`<p>${Text2.text}</p>`)
|
|
</script>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<footer>
|
|
<p>web新闻网站</p>
|
|
</footer>
|
|
<div class="Top">↑</div>
|
|
<script>
|
|
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[0].style.color = '#0091ea'
|
|
right[0].style.borderBottom = '3px #0091ea solid'
|
|
for (let i = 0; i < right.length; i++) {
|
|
if (i == 0) {
|
|
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
|
|
})
|
|
const imgs = document.querySelector('.imgs img')
|
|
let Picsrc = [
|
|
{ src: '../image/1rd.png' },
|
|
{ src: '../image/2rd.jpg' },
|
|
{ src: '../image/3rd.jpg' },
|
|
{ src: '../image/4rd.jpg' }
|
|
]
|
|
let i = 0
|
|
setInterval(function Imgs() {
|
|
if (i < Picsrc.length) {
|
|
imgs.src = Picsrc[i].src
|
|
console.log(i)
|
|
i++
|
|
if (i == Picsrc.length) {
|
|
i = 0
|
|
}
|
|
}
|
|
}, 1000)
|
|
window.addEventListener('load', function () {
|
|
imgs.src = Picsrc[0].src
|
|
})
|
|
</script>
|
|
</body>
|
|
|
|
</html> |