parent
712ca16f92
commit
1b469ad4b6
@ -0,0 +1,284 @@
|
||||
<!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>
|
||||
Loading…
Reference in new issue