bootstrap导航栏加部分页面
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/5699df9f7b485153d7a064bccb57bd91.png)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link href="bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
<style>
.zong {
margin: 0 auto;
padding-bottom: 24px;
width: 1205px;
}
.zong1 {
position: relative;
width: 1205px;
margin: 0 auto 10px;
overflow: hidden;
z-index: 0;
}
.hd_label {
float: left;
font-size: 24px;
color: #333;
line-height: 31px;
}
.hd_more {
position: relative;
top: 4px;
right: -6px;
float: right;
color: #666;
font-size: 14px;
line-height: 31px;
text-decoration: none;
}
.hd_more .i-icon {
position: relative;
top: 3px;
display: inline-block;
width: 18px;
height: 18px;
background: url(//s.stu.126.net/res/images/ui/ui_sprite.png?1367c4a…) no-repeat -1px -1674px;
margin-left: 3px;
}
.um-live-live-list-ct {
margin: 0 auto 0 -12px;
width: 1254px;
font-size: 0px;
}
.um-live-live-card.z-col-3 {
display: inline-block;
padding: 12px;
margin-right: 24px;
width: 370px;
font-size: 0px;
vertical-align: top;
margin-bottom: 4px;
}
.um-live-live-card-head {
float: left;
margin-right: 20px;
height: 80px;
width: 80px;
font-size: 0px;
}
.um-live-live-card-head_img {
height: 100%;
width: 100%;
border-radius: 50%;
}
.um-live-live-card.z-col-3 .um-live-live-card-action {
margin-left: 100px;
}
.um-live-live-card .um-live-live-card-action.z-remind .um-live-live-card-action_label::after, .um-live-live-card .um-live-live-card-action.z-join .um-live-live-card-action_label::after {
position: absolute;
content: "";
height: 12px;
width: 1px;
background: #999;
right: -8px;
top: 2px;
}
.um-live-live-card-action {
position: relative;
margin-bottom: 8px;
font-size: 14px;
line-height: 19px;
color: #333;
}
.um-live-live-card-tit {
margin-bottom: 8px;
font-size: 16px;
line-height: 24px;
word-break: break-all;
color: #333;
}
.um-live-live-card-subtit {
position: relative;
font-size: 12px;
line-height: 16px;
color: #666;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
</style>
<script>
</script>
<link href="bootstrap-3.3.7-dist/css/bootstrap.css" rel="stylesheet">
<script src="jQuery/jquery-3.4.1.min.js"></script>
<script src="bootstrap-3.3.7-dist/js/bootstrap.js"></script>
<script>
var z = 86;
</script>
</head>
<body>
<div class="container">
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<span class="navbar-brand">
英雄联盟
</span>
</div>
<div>
<ul class=" nav navbar-nav">
<li><a>流行英雄</a></li>
<li><a>过期英雄</a></li>
<li class="dropdown">
<a href="" data-toggle="dropdown">快过期英雄</a>
<ul class="dropdown-menu">
<li><a href="">a</a></li>
<li><a href="">b</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
</div>
<div class="zong1">
<div class="zong1">
<h2 class="hd_label">课堂直播</h2>
<a class="hd_more">
<span>更多</span>
<span class="i-icon"></span>
</a>
</div>
<div class="um-live-live-list-ct">
<div class="um-live-live-card z-col-3">
<div class="um-live-live-card-head">
<img class="um-live-live-card-head_img" src="01.jpg">
</div>
<div class="um-live-live-card-action z-remind">
<span class="um-live-live-card-action_label">
今天 20:00
</span>
<span class="um-live-live-card-action_btn text-success">开启提醒</span>
</div>
<div class="um-live-live-card-tit">运营插画四部曲</div>
<div class="um-live-live-card-subtit">艾琦aiki</div>
</div>
<div class="um-live-live-card z-col-3">
<div class="um-live-live-card-head">
<img class="um-live-live-card-head_img"
src="02.png">
</div>
<div class="um-live-live-card-action z-remind">
<span class="um-live-live-card-action_label">
今天 20:00
</span>
<span class="um-live-live-card-action_btn text-success">开启提醒</span>
</div>
<div class="um-live-live-card-tit">网易技术这些年,JAVA后端架构体系是怎么发展起来得!</div>
<div class="um-live-live-card-subtit">王建安 网易特邀Java高级工程师</div>
</div>
<div class="um-live-live-card z-col-3">
<div class="um-live-live-card-head">
<img class="um-live-live-card-head_img" src="03.jpg">
</div>
<div class="um-live-live-card-action z-remind">
<span class="um-live-live-card-action_label">
今天 20:00
</span>
<span class="um-live-live-card-action_btn text-success">开启提醒</span>
</div>
<div class="um-live-live-card-tit">应用打包优化之被遗忘的精髓</div>
<div class="um-live-live-card-subtit">彭锡 网易网易特邀安卓高级工程师</div>
</div>
<div class="um-live-live-card z-col-3">
<div class="um-live-live-card-head">
<img class="um-live-live-card-head_img" src="04.jpg">
</div>
<div class="um-live-live-card-action z-remind">
<span class="um-live-live-card-action_label">
今天 20:00
</span>
<span class="um-live-live-card-action_btn text-success">开启提醒</span>
</div>
<div class="um-live-live-card-tit">助力求职同时兼具理财神技:用Python优化股票仓位</div>
<div class="um-live-live-card-subtit">Leo 网易特邀数据分析讲师</div>
</div>
<div class="um-live-live-card z-col-3">
<div class="um-live-live-card-head">
<img class="um-live-live-card-head_img" src="05.jpg">
</div>
<div class="um-live-live-card-action z-remind">
<span class="um-live-live-card-action_label">
今天 20:00
</span>
<span class="um-live-live-card-action_btn text-success">开启提醒</span>
</div>
<div class="um-live-live-card-tit">从源码探究构建工具之手动实现webpack</div>
<div class="um-live-live-card-subtit">谭金龙 网易特邀前端高级工程师</div>
</div>
<div class="um-live-live-card z-col-3">
<div class="um-live-live-card-head">
<img class="um-live-live-card-head_img" src="06.jpg">
</div>
<div class="um-live-live-card-action z-remind">
<span class="um-live-live-card-action_label">
今天 20:00
</span>
<span class="um-live-live-card-action_btn text-success">开启提醒</span>
</div>
<div class="um-live-live-card-tit">Python极速入门:教你做电影实时票房爬虫网站</div>
<div class="um-live-live-card-subtit">毕滢 网易AI专家讲师</div>
</div>
</div>
</div>
</body>
</html>
(js)1、页面中有一个按钮要求,能实现点击这个按钮弹出显示按钮中的值。
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/414341cae28af1037864e750df3ae411.png)
<script>
var z = 86;
</script>
<div>
<button onclick="alert(z)">
显示86
</button>
</div>
2、使用js打印出1000以内的水仙花数
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/30abcddc691e5136faea1c4a41844971.png)
<script>
var i,a,b,c;
for(i=100;i<1000;i++){
a=parseInt(i/100);
b=parseInt((i-a*100)/10);
c=parseInt(i-a*100-b*10);
if( a*a*a+b*b*b+c*c*c == i){
document.write(i+"<br>");
}
}
</script>