parent
47225a51b1
commit
954e8674dc
@ -0,0 +1,84 @@
|
||||
body{
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
a{
|
||||
text-decoration: none;
|
||||
|
||||
}
|
||||
.navbar{
|
||||
width: 100%;
|
||||
height: 65px;
|
||||
position: fixed;
|
||||
background-color: lightgray;
|
||||
top: 0;
|
||||
}
|
||||
.navinit{
|
||||
width: 980px;
|
||||
height: 100%;
|
||||
margin: auto;
|
||||
|
||||
}
|
||||
.navbtnpart{
|
||||
float: right;
|
||||
}
|
||||
.logo{
|
||||
float: left;
|
||||
line-height: 65px;
|
||||
|
||||
}
|
||||
.navbtn{
|
||||
line-height: 65px;
|
||||
float: left;
|
||||
margin: 0 20px;
|
||||
}
|
||||
.navbtn a{
|
||||
color: #000;
|
||||
}
|
||||
.navbtn a:hover{
|
||||
color: #0091ea;
|
||||
}
|
||||
.mainbody{
|
||||
width: 980px;
|
||||
height: 1200px;
|
||||
margin: auto;
|
||||
}
|
||||
.titlebar{
|
||||
margin-top: 90px;
|
||||
background-color: skyblue;
|
||||
line-height: 60px;
|
||||
height: 60px;
|
||||
padding: 0 20px;
|
||||
}
|
||||
.title{
|
||||
font-size: 22px;
|
||||
display: inline-block;
|
||||
|
||||
}
|
||||
.reportbox{
|
||||
width: 30%;
|
||||
margin-top: 20px;
|
||||
}
|
||||
.boxtitle{
|
||||
height: 40px;
|
||||
background-color: skyblue;
|
||||
font-size: 18px;
|
||||
|
||||
}
|
||||
.boxcover img{
|
||||
width: 294px;
|
||||
height:210px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.boxinfo{
|
||||
background-color: #ebebeb;
|
||||
padding: 10px;
|
||||
font-size: 22px;
|
||||
text-indent: 2em;
|
||||
}
|
||||
.footer{
|
||||
height: 100px;
|
||||
background-color: #3fa8ea;
|
||||
line-height: 100px;
|
||||
text-align: center;
|
||||
}
|
||||
@ -0,0 +1,115 @@
|
||||
body{
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
a{
|
||||
text-decoration: none;
|
||||
|
||||
}
|
||||
|
||||
.Progress {
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
position: fixed;
|
||||
top: 0px;
|
||||
z-index: 1000;
|
||||
|
||||
}
|
||||
|
||||
.Prostick {
|
||||
width: 0;
|
||||
background-color: #0091EA;
|
||||
height: 5px;
|
||||
}
|
||||
.navbar{
|
||||
width: 100%;
|
||||
height: 65px;
|
||||
position: fixed;
|
||||
background-color: lightgray;
|
||||
top: 0;
|
||||
}
|
||||
.navinit{
|
||||
width: 980px;
|
||||
height: 100%;
|
||||
margin: auto;
|
||||
|
||||
}
|
||||
.navbtnpart{
|
||||
float: right;
|
||||
}
|
||||
.logo{
|
||||
float: left;
|
||||
line-height: 65px;
|
||||
|
||||
}
|
||||
.navbtn{
|
||||
line-height: 65px;
|
||||
float: left;
|
||||
margin: 0 20px;
|
||||
}
|
||||
.navbtn a{
|
||||
color: #000;
|
||||
}
|
||||
.navbtn a:hover{
|
||||
color: #0091ea;
|
||||
}
|
||||
.mainbody{
|
||||
width: 980px;
|
||||
margin: auto;
|
||||
}
|
||||
.banner{
|
||||
width: 980px;
|
||||
height: 400px;
|
||||
border: 1px solid black;
|
||||
margin-top: 95px;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
.banner img{
|
||||
justify-content: baseline;
|
||||
}
|
||||
.newszy{
|
||||
background-color: skyblue;
|
||||
|
||||
}
|
||||
.newszy h3{
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
font-size: 22px;
|
||||
border-bottom: #fff 3px;
|
||||
|
||||
}
|
||||
.newszy li{
|
||||
line-height: 60px;
|
||||
color:#FFF;
|
||||
font-size: 18px;
|
||||
}
|
||||
.newszy li:hover{
|
||||
color: #000;
|
||||
transition: 0.3s;
|
||||
|
||||
}
|
||||
.newsinfo {
|
||||
background-color: skyblue;
|
||||
|
||||
}
|
||||
.newsinfo h3{
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
font-size: 22px;
|
||||
border-bottom: #fff 3px;
|
||||
}
|
||||
.newsinfo p{
|
||||
padding: 20px;
|
||||
text-indent: 2em;
|
||||
color: #FFF;
|
||||
font-size: 18px;
|
||||
line-height: 30px;
|
||||
|
||||
}
|
||||
.footer{
|
||||
height: 100px;
|
||||
background-color: #3fa8ea;
|
||||
line-height: 100px;
|
||||
text-align: center;
|
||||
}
|
||||
@ -0,0 +1,111 @@
|
||||
body{
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
a{
|
||||
text-decoration: none;
|
||||
|
||||
}
|
||||
.navbar{
|
||||
width: 100%;
|
||||
height: 65px;
|
||||
position: fixed;
|
||||
background-color: lightgray;
|
||||
top: 0;
|
||||
}
|
||||
.navinit{
|
||||
width: 980px;
|
||||
height: 100%;
|
||||
margin: auto;
|
||||
|
||||
}
|
||||
.navbtnpart{
|
||||
float: right;
|
||||
}
|
||||
.logo{
|
||||
float: left;
|
||||
line-height: 65px;
|
||||
|
||||
}
|
||||
.navbtn{
|
||||
line-height: 65px;
|
||||
float: left;
|
||||
margin: 0 20px;
|
||||
}
|
||||
.navbtn a{
|
||||
color: #000;
|
||||
}
|
||||
.navbtn a:hover{
|
||||
color: #0091ea;
|
||||
}
|
||||
.mainbody{
|
||||
width: 980px;
|
||||
height: 1200px;
|
||||
margin: auto;
|
||||
}
|
||||
.classboxL{
|
||||
float: left;
|
||||
overflow: hidden;
|
||||
margin-top: 95px;
|
||||
width: 450px;
|
||||
background-color: 236 236 236;
|
||||
border-bottom: skyblue 6px solid;
|
||||
background-color: lightgray;
|
||||
border-radius: 5px;
|
||||
margin-left: 8px;
|
||||
}
|
||||
.title{
|
||||
background-color: skyblue;
|
||||
color: #fff;
|
||||
width: 450px;
|
||||
height: 80px;
|
||||
text-align: center;
|
||||
line-height: 80px;
|
||||
border-radius: 5px;
|
||||
margin-top: -25px;
|
||||
}
|
||||
.swbtn{
|
||||
display: inline-block;
|
||||
width: 95px;
|
||||
height: 50px;
|
||||
border-radius: 5px;
|
||||
margin: 5px 5px;
|
||||
background-color: #fff;
|
||||
line-height: 50px;
|
||||
text-align: center;
|
||||
}
|
||||
.classboxL p{
|
||||
height: 100%;
|
||||
font-size: 20px;
|
||||
text-indent: 2em;
|
||||
line-height: 35px;
|
||||
padding: 0 10px;
|
||||
background-color: skyblue;
|
||||
margin: 0 10px;
|
||||
}
|
||||
.classboxR{
|
||||
float: right;
|
||||
overflow: hidden;
|
||||
margin-top: 95px;
|
||||
width: 450px;
|
||||
background-color: 236 236 236;
|
||||
border-bottom: skyblue 6px solid;
|
||||
background-color: lightgray;
|
||||
border-radius: 5px;
|
||||
margin-right:8px;
|
||||
}
|
||||
.classboxR p{
|
||||
height: 100%;
|
||||
font-size: 20px;
|
||||
text-indent: 2em;
|
||||
line-height: 35px;
|
||||
padding: 0 10px;
|
||||
background-color: skyblue;
|
||||
margin: 0 10px;
|
||||
}
|
||||
.footer{
|
||||
height: 100px;
|
||||
background-color: #3fa8ea;
|
||||
line-height: 100px;
|
||||
text-align: center;
|
||||
}
|
||||
@ -0,0 +1,64 @@
|
||||
body{
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
a{
|
||||
text-decoration: none;
|
||||
|
||||
}
|
||||
.navbar{
|
||||
width: 100%;
|
||||
height: 65px;
|
||||
position: fixed;
|
||||
background-color: lightgray;
|
||||
top: 0;
|
||||
}
|
||||
.navinit{
|
||||
width: 980px;
|
||||
height: 100%;
|
||||
margin: auto;
|
||||
|
||||
}
|
||||
.navbtnpart{
|
||||
float: right;
|
||||
}
|
||||
.logo{
|
||||
float: left;
|
||||
line-height: 65px;
|
||||
|
||||
}
|
||||
.navbtn{
|
||||
line-height: 65px;
|
||||
float: left;
|
||||
margin: 0 20px;
|
||||
}
|
||||
.navbtn a{
|
||||
color: #000;
|
||||
}
|
||||
.navbtn a:hover{
|
||||
color: #0091ea;
|
||||
}
|
||||
.mainbody{
|
||||
width: 980px;
|
||||
margin: auto;
|
||||
}
|
||||
.searchbox{
|
||||
margin-top: 95px;
|
||||
width: 430px;
|
||||
height: 50px;
|
||||
padding-left: 20px;
|
||||
box-shadow:0px 3px 5px #606060 ;
|
||||
border-radius: 25px;
|
||||
}
|
||||
.searchicon {
|
||||
width: 85px;
|
||||
height: 50px;
|
||||
color: #FFF;
|
||||
font-size: 18px;
|
||||
}
|
||||
.footer{
|
||||
height: 100px;
|
||||
background-color: #3fa8ea;
|
||||
line-height: 100px;
|
||||
text-align: center;
|
||||
}
|
||||
@ -0,0 +1,64 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>专题报道</title>
|
||||
<link rel="stylesheet" href="css/foucsreport.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="navbar">
|
||||
<div class="navinit">
|
||||
<div class="logo">web新闻网站</div>
|
||||
<div class="navbtnpart">
|
||||
<div class="navbtn"><a href="index.html">首页</a></div>
|
||||
<div class="navbtn"><a href="newsclass.html">新闻分类</a></div>
|
||||
<div class="navbtn"><a href="#">专题报道</a></div>
|
||||
<div class="navbtn"><a href="#">新闻资讯</a></div>
|
||||
<div class="navbtn"><a href="#">互动交流</a></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mainbody">
|
||||
<div class="titlebar">
|
||||
<div class="title">《专题报道》
|
||||
<a href="#">更多>>></a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="reportbox">
|
||||
<div class="boxtitle"></div>
|
||||
<div class="boxcover"></div>
|
||||
<div class="boxinfo"></div>
|
||||
</div>
|
||||
<div class="reportbox">
|
||||
<div class="boxtitle"></div>
|
||||
<div class="boxcover"></div>
|
||||
<div class="boxinfo"></div>
|
||||
</div>
|
||||
<div class="reportbox">
|
||||
<div class="boxtitle"></div>
|
||||
<div class="boxcover"></div>
|
||||
<div class="boxinfo"></div>
|
||||
</div>
|
||||
<div class="reportbox">
|
||||
<div class="boxtitle"></div>
|
||||
<div class="boxcover"></div>
|
||||
<div class="boxinfo"></div>
|
||||
</div>
|
||||
<div class="reportbox">
|
||||
<div class="boxtitle"></div>
|
||||
<div class="boxcover"></div>
|
||||
<div class="boxinfo"></div>
|
||||
</div>
|
||||
<div class="reportbox">
|
||||
<div class="boxtitle"></div>
|
||||
<div class="boxcover"></div>
|
||||
<div class="boxinfo"></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="footer">web新闻网站</div>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,60 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>web新闻网站</title>
|
||||
<link rel="stylesheet" href="css/index.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="Progress">
|
||||
<div class="Prostick"></div>
|
||||
</div>
|
||||
<div class="navbar">
|
||||
<div class="navinit">
|
||||
<div class="logo">web新闻网站</div>
|
||||
<div class="navbtnpart">
|
||||
<div class="navbtn"><a href="index.html">首页</a></div>
|
||||
<div class="navbtn"><a href="newsclass.html">新闻分类</a></div>
|
||||
<div class="navbtn"><a href="#">专题报道</a></div>
|
||||
<div class="navbtn"><a href="#">新闻资讯</a></div>
|
||||
<div class="navbtn"><a href="#">互动交流</a></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mainbody">
|
||||
<div class="banner">
|
||||
<img src="/pics/47202.jpg">
|
||||
|
||||
</div>
|
||||
<div class="newszy">
|
||||
<h3>新闻的作用</h3>
|
||||
<ul>
|
||||
<li>示例</li>
|
||||
<li>示例</li>
|
||||
<li>示例</li>
|
||||
<li>示例</li>
|
||||
<li>示例</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="newsinfo">
|
||||
<h3>新闻的定义</h3>
|
||||
<p>示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例</p>
|
||||
<p>示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例</p>
|
||||
<p>示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="footer">web新闻网站</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 + '%'
|
||||
})
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@ -0,0 +1,47 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>新闻分类</title>
|
||||
<link rel="stylesheet" href="css/newsclass.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="navbar">
|
||||
<div class="navinit">
|
||||
<div class="logo">web新闻网站</div>
|
||||
<div class="navbtnpart">
|
||||
<div class="navbtn"><a href="index.html">首页</a></div>
|
||||
<div class="navbtn"><a href="newsclass.html">新闻分类</a></div>
|
||||
<div class="navbtn"><a href="#">专题报道</a></div>
|
||||
<div class="navbtn"><a href="#">新闻资讯</a></div>
|
||||
<div class="navbtn"><a href="#">互动交流</a></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mainbody">
|
||||
<div class="classboxL">
|
||||
<div class="title"><h2>新闻区域方面</h2></div>
|
||||
<botton class="swbtn">时政新闻</botton>
|
||||
<botton class="swbtn">经济新闻</botton>
|
||||
<botton class="swbtn">法律新闻</botton>
|
||||
<botton class="swbtn">军事新闻</botton>
|
||||
<p>
|
||||
示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例
|
||||
</p>
|
||||
</div>
|
||||
<div class="classboxR">
|
||||
<div class="title"><h2>新闻区域方面</h2></div>
|
||||
<botton class="swbtn">时政新闻</botton>
|
||||
<botton class="swbtn">经济新闻</botton>
|
||||
<botton class="swbtn">法律新闻</botton>
|
||||
<botton class="swbtn">军事新闻</botton>
|
||||
<p>
|
||||
示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例示例
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="footer">web新闻网站</div>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,27 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>新闻资讯</title>
|
||||
<link rel="stylesheet" href="css/newsinfo.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="navbar">
|
||||
<div class="navinit">
|
||||
<div class="logo">web新闻网站</div>
|
||||
<div class="navbtnpart">
|
||||
<div class="navbtn"><a href="index.html">首页</a></div>
|
||||
<div class="navbtn"><a href="newsclass.html">新闻分类</a></div>
|
||||
<div class="navbtn"><a href="#">专题报道</a></div>
|
||||
<div class="navbtn"><a href="#">新闻资讯</a></div>
|
||||
<div class="navbtn"><a href="#">互动交流</a></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="searchbox"></div>
|
||||
<div class="searchicon"></div>
|
||||
<div class="footer">web新闻网站</div>
|
||||
</body>
|
||||
</html>
|
||||
|
After Width: | Height: | Size: 52 MiB |
|
After Width: | Height: | Size: 24 MiB |
|
After Width: | Height: | Size: 21 MiB |
|
After Width: | Height: | Size: 977 KiB |
|
After Width: | Height: | Size: 14 MiB |
|
After Width: | Height: | Size: 8.0 MiB |
|
After Width: | Height: | Size: 4.2 MiB |
|
After Width: | Height: | Size: 8.8 MiB |
|
After Width: | Height: | Size: 10 MiB |
Loading…
Reference in new issue