From 1b469ad4b6e5ba423b45c082d6cf9415c04ec63e Mon Sep 17 00:00:00 2001
From: p6pqowu53 <3038288332@qq.com>
Date: Wed, 30 Oct 2024 22:53:15 +0800
Subject: [PATCH] ADD file via upload

---
 首页.html | 284 ++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 284 insertions(+)
 create mode 100644 首页.html
diff --git a/首页.html b/首页.html
new file mode 100644
index 0000000..9499fb5
--- /dev/null
+++ b/首页.html
@@ -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>
\ No newline at end of file
