diff --git a/新闻分类.html b/新闻分类.html
new file mode 100644
index 0000000..c333006
--- /dev/null
+++ b/新闻分类.html
@@ -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>
\ No newline at end of file
