html,css,js實現簡單的頁面應用
阿新 • • 發佈：2018-12-23
主要實現三個方面(主頁，登陸頁，註冊頁，新聞詳情頁)
主頁包括（上面的導航欄，中間資訊分類，資訊詳情和資訊推薦）
1.主頁
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>index</title> <link rel="stylesheet" href="css/bootstrap.min.css"> <link rel="stylesheet" href="css/main.css"> <script src="js/bootstrap.min.js"></script> </head> <body> <!--導航欄--> <nav class="navbar navbar-default"> <div class="container-fluid"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="index.html"></a> </div> <!-- Collect the nav links, forms, and other content for toggling --> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav"> <li class="active" style="padding-bottom: 15px;"><a href="index.html">首頁<span class="sr-only">(current)</span></a></li> <li><a href="#">國內</a></li> <li><a href="#">數讀</a></li> <li><a href="#">社會</a></li> </ul> <ul class="nav navbar-nav navbar-right"> <li><a href="login.html">登陸</a></li> <li><a href="signup.html">註冊</a></li> </ul> </div><!-- /.navbar-collapse --> </div><!-- /.container-fluid --> </nav> <div class="container container-fluid"> <div class="row"> <!--左側導航--> <div class="col-xs-2"> <div class="list-group left-side"> <a class="list-group-item left-side-active" href="#">綜合</a> <a class="list-group-item" href="#">電影</a> <a class="list-group-item" href="#">電視劇</a> <a class="list-group-item" href="#"> 明星</a> <a class="list-group-item" href="#">娛樂</a> </div> </div> <!--中間新聞--> <div class="col-xs-7"> <div class="media"> <div class="media-left"> <a href="news.html"> <img class="media-object news-png" src="img/index1.jpg" alt="新聞圖片"></a> </div> <div class="media-body"> <h4 class="media-heading"><b>2年前他為教育和高圓圓分手，今成這般，高圓圓：我有一句MMP如哽在喉</b></h4> <div class="news-info"> <img class="news-logo" src="img/u=1271327272,62771227&fm=26&gp=0.jpg"> <span>王花花</span>. <span>25K評論</span>. <span>7分鐘前</span> </div> </div> </div> <div class="media"> <div class="media-left"> <a href="news.html"> <img class="media-object news-png" src="img/2.2.jpg" alt="新聞圖片"></a> </div> <div class="media-body"> <h4 class="media-heading"><b>2年前他為教育和高圓圓分手，今成這般，高圓圓：我有一句MMP如哽在喉</b></h4> <div class="news-info"> <img class="news-logo" src="img/u=1271327272,62771227&fm=26&gp=0.jpg"> <span>王花花</span>. <span>25K評論</span>. <span>7分鐘前</span> </div> </div> </div> <div class="media"> <div class="media-left"> <a href="news.html"> <img class="media-object news-png" src="img/2.jpg" alt="新聞圖片"></a> </div> <div class="media-body"> <h4 class="media-heading"><b>2年前他為教育和高圓圓分手，今成這般，高圓圓：我有一句MMP如哽在喉</b></h4> <div class="news-info"> <img class="news-logo" src="img/u=1271327272,62771227&fm=26&gp=0.jpg"> <span>王花花</span>. <span>25K評論</span>. <span>7分鐘前</span> </div> </div> </div> <div class="media"> <div class="media-left"> <a href="news.html"> <img class="media-object news-png" src="img/2.2.jpg" alt="新聞圖片"></a> </div> <div class="media-body"> <h4 class="media-heading"><b>2年前他為教育和高圓圓分手，今成這般，高圓圓：我有一句MMP如哽在喉</b></h4> <div class="news-info"> <img class="news-logo" src="img/u=1271327272,62771227&fm=26&gp=0.jpg"> <span>王花花</span>. <span>25K評論</span>. <span>7分鐘前</span> </div> </div> </div> <div class="media"> <div class="media-left"> <a href="news.html"> <img class="media-object news-png" src="img/index1.jpg" alt="新聞圖片"></a> </div> <div class="media-body"> <h4 class="media-heading"><b>2年前他為教育和高圓圓分手，今成這般，高圓圓：我有一句MMP如哽在喉</b></h4> <div class="news-info"> <img class="news-logo" src="img/u=1271327272,62771227&fm=26&gp=0.jpg"> <span>王花花</span>. <span>25K評論</span>. <span>7分鐘前</span> </div> </div> </div> <div class="media"> <div class="media-left"> <a href="news.html"> <img class="media-object news-png" src="img/2.2.jpg" alt="新聞圖片"></a> </div> <div class="media-body"> <h4 class="media-heading"><b>2年前他為教育和高圓圓分手，今成這般，高圓圓：我有一句MMP如哽在喉</b></h4> <div class="news-info"> <img class="news-logo" src="img/u=1271327272,62771227&fm=26&gp=0.jpg"> <span>王花花</span>. <span>25K評論</span>. <span>7分鐘前</span> </div> </div> </div> <!--頁角--> <nav aria-label="Page navigation"> <ul class="pagination"> <li class="disabled"><a href="#" aria-label="Previous"><span aria-hidden="true">上一頁</span></a> </li> <li class="active"><a href="#">1 <span class="sr-only">(current)</span></a></li> <li><a href="#">2 <span class="sr-only">(current)</span></a></li> <li><a href="#">3 <span class="sr-only">(current)</span></a></li> <li><a href="#">4 <span class="sr-only">(current)</span></a></li> <li><a href="#">... <span class="sr-only">(current)</span></a></li> <li><a href="#">10 <span class="sr-only">(current)</span></a></li> <li class="disabled"><a href="#" aria-label="Previous"><span aria-hidden="true">下一頁</span></a> </li> </ul> </nav> </div> <div class="col-xs-3"> <!--搜尋欄--> <div class="input-group input-info"> <input type="text" class="form-control" placeholder="搜一下"> </div> <!--有害資訊--> <div class="bad-infomation"> <table id="bad-table"> <tr> <td rowspan="2"> <img class="bad-jpg" src="img/4.png"> </td> <td id="bad-font1">有害資訊舉報專區</td> </tr> <tr> <td id="bad-font2"> 舉報電話12377 </td> </tr> </table> </div> <!--新聞推薦--> <div class="list-group hot-news"> <a href="#" class="list-group-item"> <span style="font-size: larger"><b>24小時熱聞</b></span> </a> <a href="#" class="list-group-item"><span style="font-size: large"> Lorem ipsum dolor sit amet,consectetur adipisicing</span><div class="news-info"> <span>25K評論</span> <span>7分鐘前</span></div></a> <a href="#" class="list-group-item"><span style="font-size: large"> Lorem ipsum dolor sit amet,consectetur adipisicing</span><div class="news-info"> <span>25K評論</span> <span>7分鐘前</span></div></a> <a href="#" class="list-group-item"><span style="font-size: large"> Lorem ipsum dolor sit amet,consectetur adipisicing</span><div class="news-info"> <span>25K評論</span> <span>7分鐘前</span></div></a> <a href="#" class="list-group-item"><span style="font-size: large"> Lorem ipsum dolor sit amet,consectetur adipisicing</span><div class="news-info"> <span>25K評論</span> <span>7分鐘前</span></div></a> <a href="#" class="list-group-item"><span style="font-size: large"> Lorem ipsum dolor sit amet,consectetur adipisicing</span><div class="news-info"> <span>25K評論</span> <span>7分鐘前</span></div></a> </div> </div> </div> </div> <div class="footer"> 京ICP備11008151號京公網安備11010802014853 </div> </body> </html>
2.登陸頁
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>login</title> <link rel="stylesheet" href="css/bootstrap.min.css"> <link rel="stylesheet" href="css/main.css"> <script src="js/bootstrap.min.js"></script> </head> <body> <!--導航欄--> <nav class="navbar navbar-default"> <div class="container-fluid"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="index.html"></a> </div> <!-- Collect the nav links, forms, and other content for toggling --> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav"> <li class="active" style="padding-bottom: 15px;"><a href="index.html">首頁<span class="sr-only">(current)</span></a></li> <li><a href="#">國內</a></li> <li><a href="#">數讀</a></li> <li><a href="#">社會</a></li> </ul> <ul class="nav navbar-nav navbar-right"> <li><a href="login.html">登陸</a></li> <li><a href="signup.html">註冊</a></li> </ul> </div><!-- /.navbar-collapse --> </div><!-- /.container-fluid --> </nav> <!--登陸介面--> <div class="container container-small login"> <h1>登入 <small>沒有賬號？<a href="signup.html">註冊</a></small> </h1> <form> <div class="form-group"> <label>使用者名稱/手機/郵箱</label> <input type="text" class="form-control username-text"> </div> <div class="form-group"> <label>密碼</label> <input type="password" class="form-control passwd-text"> </div> <div class="form-group"> <button class="btn btn-primary btn-block block-sure" type="submit">登入</button> </div> <div class="form-group"> <a href="#">忘記密碼？</a> </div> </form> </div> </body> </html>
3.註冊頁
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>signup</title> <link rel="stylesheet" href="css/bootstrap.min.css"> <link rel="stylesheet" href="css/main.css"> <script src="js/bootstrap.min.js"></script> </head> <body> <!--導航欄--> <nav class="navbar navbar-default"> <div class="container-fluid"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="index.html"></a> </div> <!-- Collect the nav links, forms, and other content for toggling --> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav"> <li class="active" style="padding-bottom: 15px;"><a href="index.html">首頁<span class="sr-only">(current)</span></a></li> <li><a href="#">國內</a></li> <li><a href="#">數讀</a></li> <li><a href="#">社會</a></li> </ul> <ul class="nav navbar-nav navbar-right"> <li><a href="login.html">登陸</a></li> <li><a href="signup.html">註冊</a></li> </ul> </div><!-- /.navbar-collapse --> </div><!-- /.container-fluid --> </nav> <!--註冊介面--> <div class="container container-small login"> <h1>註冊 <small>沒有賬號？<a href="signup.html">註冊</a></small> </h1> <form> <div class="form-group"> <label>手機</label> <input type="text" class="form-control username-text"> </div> <div class="form-group username-text"> <label>驗證碼</label> <div class="input-group"> <input type="text" class="form-control"> <div class="input-group-btn"> <div class="btn btn-default">獲取驗證碼</div> </div> </div> </div> <div class="form-group"> <label>密碼</label> <input type="password" class="form-control username-text"> </div> <div class="form-group"> <button class="btn btn-primary btn-block block-sure" type="submit">註冊</button> </div> <div class="form-group"> 註冊咖啡或浮雲即代表您同意<a href="#">咖啡或浮雲服務條款</a> </div> </form> </div> </body> </html>
4.新聞詳情頁
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>news</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/main.css">
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<!--導航欄-->
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html"></a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active" style="padding-bottom: 15px;"><a href="index.html">首頁<span class="sr-only">(current)</span></a></li>
<li><a href="#">國內</a></li>
<li><a href="#">數讀</a></li>
<li><a href="#">社會</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="login.html">登陸</a></li>
<li><a href="signup.html">註冊</a></li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<div class="col-xs-1"></div>
<!--新聞-->
<div class="col-xs-7">
<h2>2年前他為教育和高圓圓分手，今成這般，高圓圓：我有一句MMP如哽在喉</h2>
<h6>25k閱讀 35分鐘之前釋出 <span class="label label-default">教育</span> <span class="label label-default">情感</span></h6>
China has approved 17 new cancer drugs for inclusion in its national health insurance system,
China's State Medical Insurance Administration announced on Wednesday.<br>
<img src="img/2.2.jpg"><br>
<p>The 17 adopted drugs are crucial to treating cancers including kidney,
colorectal and lymphoma,
the statement released by the administration read.</p>
<p>The addition would make cancer drugs more affordable to the general public and
improve their treatment, administration head Hu Jinglin told China Central Television (CCTV).
Ten out of the 17 are new drugs that came onto the market after 2017, the CCTV report said.
Purchasing new drugs encouraged pharmaceutical companies to expand their
investment in research, Hu was quoted as saying.</p>
<p>Shortly after its establishment at the end of May,
the administration began negotiating with pharmaceutical
companies for the purchase of new cancer drugs for listing on
China's national health system.</p>
<p>Previously the 17 drugs were mainly imported and not
covered by the country's health insurance.
Negotiations sought to balance patient demand with adequate
profits for pharmaceutical companies, CCTV reported.
The price of new China-made drugs on the list was
slashed 56.7 percent, while the imported drugs would cost
"36 percent lower than neighboring countries," the statement read.</p>
<p>Chinese pharmaceutical companies lag behind their international
counterparts in research and development due to the high up front investment
threshold and the risk of failure after decades of research, Chinese experts noted.</p>
</div>
<!--右邊推薦欄-->
<div class="col-xs-3">
<div class="media right-news">
<h4 style="padding-left: 7px">相關推薦</h4>
<div class="media-left">
<a href="news.html">
<img class="media-object news-png-html"
src="img/2.2.jpg"
alt="新聞圖片"></a>
</div>
<div class="media-body">
<h4 class="media-heading">Shortly after its <br>at the end of May</h4>
<div class="news-info">
<span>25K閱讀</span>.
<span>7分鐘前</span>
</div>
</div>
<div class="media right-news">
<div class="media-left">
<a href="news.html">
<img class="media-object news-png-html"
src="img/2.jpg"
alt="新聞圖片"></a>
</div>
<div class="media-body">
<h4 class="media-heading">Shortly after its <br>at the end of May</h4>
<div class="news-info">
<span>25K閱讀</span>.
<span>7分鐘前</span>
</div>
</div>
</div>
<div class="media right-news">
<div class="media-left">
<a href="news.html">
<img class="media-object news-png-html"
src="img/2.2.jpg"
alt="新聞圖片"></a>
</div>
<div class="media-body">
<h4 class="media-heading">Shortly after its <br>at the end of May</h4>
<div class="news-info">
<span>25K閱讀</span>.
<span>7分鐘前</span>
</div>
</div>
</div>
<div class="media right-news">
<div class="media-left">
<a href="news.html">
<img class="media-object news-png-html"
src="img/2.2.jpg"
alt="新聞圖片"></a>
</div>
<div class="media-body">
<h4 class="media-heading">Shortly after its <br>at the end of May</h4>
<div class="news-info">
<span>25K閱讀</span>.
<span>7分鐘前</span>
</div>
</div>
</div>
</div>
<!--新聞推薦-->
<div class="list-group hot-news">
<a href="#" class="list-group-item">
<span style="font-size: larger"><b>24小時熱聞</b></span>
</a>
<a href="#" class="list-group-item"><span style="font-size: large"> Lorem ipsum dolor sit amet,consectetur adipisicing</span><div class="news-info">
<span>25K評論</span>
<span>7分鐘前</span></div></a>
<a href="#" class="list-group-item"><span style="font-size: large"> Lorem ipsum dolor sit amet,consectetur adipisicing</span><div class="news-info">
<span>25K評論</span>
<span>7分鐘前</span></div></a>
<a href="#" class="list-group-item"><span style="font-size: large"> Lorem ipsum dolor sit amet,consectetur adipisicing</span><div class="news-info">
<span>25K評論</span>
<span>7分鐘前</span></div></a>
<a href="#" class="list-group-item"><span style="font-size: large"> Lorem ipsum dolor sit amet,consectetur adipisicing</span><div class="news-info">
<span>25K評論</span>
<span>7分鐘前</span></div></a>
</div>
</div>
</body>
</html>
main.css
/*index*/
.navbar-brand{
background-image: url("../img/u=1271327272,62771227&fm=26&gp=0.jpg");
width: 50px;
background-position: center center;
background-size: 75%;
background-repeat: no-repeat;
height: 40px;
}
.navbar-nav > li > a {
padding-top: 10px;
padding-bottom: 15px;
}
.navbar{
box-shadow: 5px 5px 5px #f3eded;
background: rgba(228, 227, 227, 0.25);;
border: 1px solid rgba(228, 227, 227, 0.25);
font-size: 120%;
height: 40px;
padding-top: 4px;
}
.left-side a, .left-side{
/*設定邊框為0*/
border: 0;
border-radius: 2px ;
margin-top: 5px;
font-size: 110%;
margin-right: 20px;
text-align: center;
}
.left-side a:hover, .left-side-active{
background: #F35F5F;;
/*background: mediumpurple;*/
border: 1px #F35F5F;
}
.news-png {
width: 210px;
height: 110px;
margin-right: 10px;
}
.media-heading{
margin-top: 0;
}
.news-logo{
width: 20px;
height: 20px;
}
.news-info{
color: rgba(138, 140, 138, 0.69);
}
.input-info{
width: 100%;
}
.bad-infomation{
width: 100%;
height: 150px;
border-radius: 3px;
background-color: #E6E2E1;
margin-top: 20px;
}
.bad-jpg{
height: 120px;
}
#bad-table{
width: 100%;
height: 100%;
}
#bad-font1{
font-size: x-large;
}
#bad-font2{
height: 50px;
padding-bottom: 25px;
}
.hot-news a {
width: 100%;
margin-top: 7px;
background: #E6E2E1;
border-radius: 3px;
border: 0;
}
.hot-news{
width: 100%;
margin-top: 20px;
background: #E6E2E1;
border-radius: 3px;
border: 0;
}
.footer{
text-align: center;
margin-top: 50px;
color: darkgrey;
}
/*login signup*/
.login{
width: 50%;
padding-top: 20px;
}
.username-text, .passwd-text{
width: 80%;
}
.block-sure{
width: 80%;
background-color: #F35F5F;
border: 1px solid #F35F5F;
}
.block-sure:hover{
background-color: #EF4646;
border: 1px solid #EF4646;
}
/*news*/
.news-png-html {
width:160px;
height: 80px;
margin-right: 10px;
padding-left: 7px;
}
.right-news{
background-color: #E6E2E1;
}