html、css、js簡單的頁面應用
阿新 • • 發佈：2018-12-14
主要實現三個方面（主頁、登陸頁、註冊頁、新聞詳情頁） 其中主頁包括（上面的導航欄，中間資訊分類、資訊詳情和資訊推薦）
- 主頁
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="css/bootstrap.min.css"> <link rel="stylesheet" href="css/main.css"> <script href="js/bootstrap.min.js"></script> </head> <body> <nav class="navbar navbar-default"> <div class="container-fluid"> <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> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav"> <li><a href="#">首頁<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"><span class="glyphicon glyphicon-log-in"></span> 登陸</a></li> <li><a href="signup.html"><span class="glyphicon glyphicon-log-out"></span> 註冊</a></li> </ul> </div> </div> </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-8"> <div class="media"> <div class="media-left"> <a href="#"> <img class="media-object news-png" src="img/zq.jpg" alt="新聞圖片"></a> </div> <div class="media-body"> <h4 class="media-heading">新聞名稱</h4> <div class="news-info"> <span>梅西更新ins宣佈將與CirqueduSoleil 合作，在2019年推出一個基於梅西的生活和足球故事的節目《MessiCirque》</span>. <span>25K評論</span>. <span>7分鐘前</span> </div> </div> </div> <div class="media"> <div class="media-left"> <a href="#"> <img class="media-object news-png" src="img/np.jpg" alt="新聞圖片"> </a> </div> <div class="media-body"> <h4 class="media-heading">新聞名稱</h4> <div class="news-info"> <span>【女排世錦賽】F組，中國3-0橫掃美國終結對手連勝排名升至小組第二位晉級六強（25-17,26-24,25-18）</span>. <span>21K評論</span>. <span>3分鐘前</span> </div> </div> </div> <div class="media"> <div class="media-left"> <a href="#"> <img class="media-object news-png" src="img/ym.jpg" alt="新聞圖片"> </a> </div> <div class="media-body"> <h4 class="media-heading">新聞名稱</h4> <div class="news-info"> <span>【姚明攜中國男女籃抵達朝鮮訪問】訪朝期間，中國男女籃將帥，將與朝鮮男女籃共同訓練，並赴基層，進行友好交流和比賽</span>. <span>34K評論</span>. <span>2分鐘前</span> </div> </div> </div> <div class="media"> <div class="media-left"> <a href="#"> <img class="media-object news-png" src="img/wq.jpg" alt="新聞圖片"> </a> </div> <div class="media-body"> <h4 class="media-heading">新聞名稱</h4> <div class="news-info"> <span>吳易昺三盤苦戰6-3/0-6/3-6不敵日本名將錦織圭</span>. <span>18K評論</span>. <span>5分鐘前</span> </div> </div> </div> <nav aria-label="..."> <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-2"> <span><h3>新聞推薦：</h3></span> <div class="list"> <div class="list_nod clearfix"> <a href="news.html"><img alt="" src="img/qm.jpg" class="fix-a"></a> </div> <div class="list_des"> <div class="des_info"> <span>2018全美音樂節</span>. <span>5分鐘前</span> </div> </div> </div> <div class="list"> <div class="list_nod clearfix"> <a href="https://weibo.com/a/hot/7560359242670081_1.html?type=new"><img alt="" src="img/ry.jpg" class="fix-a"></a> </div> <div class="list_des"> <div class="des_info"> <span>網上熱議《如懿傳》錦集 </span>. <span>4分鐘前</span> </div> </div> </div> <div class="list"> <div class="list_nod clearfix"> <a href="https://weibo.com/a/hot/7562328895168513_1.html?type=new"><img alt="" src="img/sj.jpg" class="fix-a"></a> </div> <div class="list_des"> <div class="des_info"> <span>今天釋出新手機了麼</span>. <span>6分鐘前</span> </div> </div> </div> <div class="list"> <div class="list_nod clearfix"> <a href="https://weibo.com/a/hot/7555147954692097_1.html?type=new"><img alt="" src="img/mg.jpg" class="fix-a"></a> </div> <div class="list_des"> <div class="des_info"> <span>喵星人和汪星人的甜蜜時光</span>. <span>2分鐘前</span> </div> </div> </div> <div class="list"> <div class="list_nod clearfix"> <a href="https://weibo.com/a/hot/7557969638103041_1.html?type=new"><img alt="" src="img/bm.jpg" class="fix-a"></a> </div> <div class="list_des"> <div class="des_info"> <span>北冥有雕其名為沙</span>. <span>1分鐘前</span> </div> </div> </div> </div> </div> </div> </div> <div class="footer"> 京ICP備11008151號京公網安備11010802014853 </div> </body> </html>
- 登陸頁:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <link rel="stylesheet" href="css/bootstrap.min.css"> <link rel="stylesheet" href="css/main.css"> </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><a href="#">首頁<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="#"><span class="glyphicon glyphicon-log-in"></span> 登陸</a></li> <li><a href="#"><span class="glyphicon glyphicon-log-out"></span> 註冊</a></li> </ul> </div><!-- /.navbar-collapse --> </div><!-- /.container-fluid --> </nav> <div class="container container-small"> <h1>登入 <small>沒有賬號？<a href="signup.html">註冊</a></small> </h1> <form> <div class="form-group"> <label>使用者名稱/手機/郵箱</label> <input type="text" class="form-control"> </div> <div class="form-group"> <label>密碼</label> <input type="password" class="form-control"> </div> <div class="form-group"> <button class="btn btn-primary btn-block" type="submit">登入</button> </div> <div class="form-group"> <a href="#">忘記密碼？</a> </div> </form> </div> </body> </html>
- 註冊頁：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <link rel="stylesheet" href="css/bootstrap.min.css"> <link rel="stylesheet" href="css/main.css"> </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><a href="#">首頁<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="#"><span class="glyphicon glyphicon-log-in"></span> 登陸</a></li> <li><a href="#"><span class="glyphicon glyphicon-log-out"></span> 註冊</a></li> </ul> </div><!-- /.navbar-collapse --> </div><!-- /.container-fluid --> </nav> <div class="container container-small"> <h1>註冊 <small>沒有賬號？<a href="signup.html">註冊</a></small> </h1> <form> <div class="form-group"> <label>手機</label> <input type="text" class="form-control"> </div> <div class="form-group"> <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"> </div> <div class="form-group"> <button class="btn btn-primary btn-block" type="submit">註冊</button> </div> <div class="form-group"> 註冊西部開源即代表您同意<a href="#">西部開源服務條款</a> </div> </form> </div> </body> </html>
- 新聞詳情頁：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Title</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/main.css">
</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><a href="#">首頁<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="#"><span class="glyphicon glyphicon-log-in"></span>
登陸</a></li>
<li><a href="#"><span class="glyphicon glyphicon-log-out"></span>
註冊</a></li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<div class="new">
<div class="new-row">
<div class="col-xs-9">
<div class="new-paper">
<span><h2>2018全美音樂獎獲獎名單揭曉 黴黴大贏破紀錄</h2></span><br>
<hr>
<div class="new-img">
<img src="img/01.jpg" alt="黴黴全美音樂獎" class="img-mm">
</div>
新浪娛樂訊 2018全美音樂獎頒獎典禮北京時間10月10日舉行，黴黴獲得年度藝人、最受歡迎流行/搖滾專輯、年度巡演等成最大贏家，並打破惠特尼休斯頓的紀錄，成為AMA史上獲獎最多的女歌手。卡妹獲得年度新人、最受歡迎流行/搖滾歌曲，Cardi B獲得最受歡迎說唱藝人，BTS防彈少年團獲得最受歡迎社交藝人。<br>
完整獲獎名單：<br>
年度藝人 ARTIST OF THE YEAR<br>
Taylor Swift<br>
年度新人 NEW ARTIST OF THE YEAR<br>
Camila Cabello<br>
年度合作 COLLABORATION OF THE YEAR<br>
Camila Cabello ft. Young Thug, “Havana”<br>
年度巡演 TOUR OF THE YEAR<br>
Taylor Swift<br>
年度MV VIDEO OF THE YEAR<br>
Camila Cabello ft. Young Thug, “Havana”<br>
最受歡迎社交藝人 FAVORITE SOCIAL ARTIST<br>
BTS -- WINNER<br>
最受歡迎流行/搖滾男歌手 FAVORITE MALE ARTIST -- POP/ROCK<br>
Post Malone<br>
最受歡迎流行/搖滾女歌手 FAVORITE FEMALE ARTIST -- POP/ROCK<br>
Taylor Swift<br>
最受歡迎流行/搖滾歌曲 FAVORITE DUO OR GROUP -- POP/ROCK<br>
Migos<br>
最受歡迎流行/搖滾專輯 FAVORITE ALBUM -- POP/ROCK<br>
Taylor Swift, reputation<br>
最受歡迎流行/搖滾歌曲 FAVORITE SONG -- POP/ROCK<br>
Camila Cabello ft. Young Thug, “Havana”<br>
</div>
</div>
<div class="col-xs-3">
<span><h3>新聞推薦：</h3></span>
<div class="list">
<div class="list_nod clearfix">
<a href="#"><img alt="" src="img/gj.jpg" class="fix-a"></a>
</div>
<div class="list_des">
<div class="des_info">
<span>冠軍時刻</span>.
<span>5分鐘前</span>
</div>
</div>
</div>
<div class="list">
<div class="list_nod clearfix">
<a href="https://weibo.com/a/hot/7560359242670081_1.html?type=new"><img alt="" src="img/ry.jpg" class="fix-a"></a>
</div>
<div class="list_des">
<div class="des_info">
<span>網上熱議《如懿傳》錦集 </span>.
<span>4分鐘前</span>
</div>
</div>
</div>
<div class="list">
<div class="list_nod clearfix">
<a href="https://weibo.com/a/hot/7562328895168513_1.html?type=new"><img alt="" src="img/sj.jpg" class="fix-a"></a>
</div>
<div class="list_des">
<div class="des_info">
<span>今天釋出新手機了麼</span>.
<span>6分鐘前</span>
</div>
</div>
</div>
<div class="list">
<div class="list_nod clearfix">
<a href="https://weibo.com/a/hot/7555147954692097_1.html?type=new"><img alt="" src="img/mg.jpg" class="fix-a"></a>
</div>
<div class="list_des">
<div class="des_info">
<span>喵星人和汪星人的甜蜜時光</span>.
<span>2分鐘前</span>
</div>
</div>
</div>
<div class="list">
<div class="list_nod clearfix">
<a href="https://weibo.com/a/hot/7557969638103041_1.html?type=new"><img alt="" src="img/bm.jpg" class="fix-a"></a>
</div>
<div class="list_des">
<div class="des_info">
<span>北冥有雕其名為沙</span>.
<span>1分鐘前</span>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
- CSS樣式： 注意：這裡還匯入了bootstrap標準框架，http://www.bootcss.com/， 可在上面的網址去下載
.navbar-brand{
/*設定背景圖片*/
background-image: url("../img/logo.jpg");
/*設定div寬度*/
width: 50px;
/*設定圖片的位置--讓上下左右均居中;*/
background-position: center center;
/*圖片太大， 縮小至90%*/
background-size: 90%;
/*預設背景圖片不夠時， 會重複出現， 此處設定為不重複出現;*/
background-repeat: no-repeat;
}
.navbar{
box-shadow: 5px 5px 5px #f3eded;
background: white;
border: 1px solid snow ;
font-size: 120%;
height: 65px;
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: #b792ec;
border: 1px purple;
}
.news-png{
width: 200px;
height: 100px;
margin-right: 50px;
}
.media-heading{
margin-top: 15px;
}
.news-info{
margin-top: 15px;
color: darkgrey;
}
.list-group .active, .list-group .active:hover{
background: #b792ec;
border: 1px purple;
}
.active-page{
background: rebeccapurple;
}
.hot-news .list-group-item:hover{
color: mediumpurple;
}
.btn-block{
background: purple;
border: 1px purple;
}
.btn-block:hover{
background: rebeccapurple;
}
.footer{
text-align: center;
margin-top: 50px;
color: darkgrey;
}
.clearfix{
display: block;
}
.clearfix .fix-a{
width: 120px;
height: 70px;
}
.clearfix .list_des .des_info{
margin-top: 15px;
color: darkgrey;
}
.new-img{
margin-left: 190px;
}
.new-img .img-mm{
width: 500px;
height: 300px;
}
-
JS校驗頁： 注意：這裡依然匯入的是寫好的bootstrap框架 就像是這樣子的：
-
整體執行的結果：
主頁部分：
登陸部分：
註冊部分：
新聞詳情頁：
恩～確實有點low