加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
文件
该仓库未声明开源许可证文件(LICENSE),使用请关注具体项目描述及其代码上游依赖。
克隆/下载
main.html 11.95 KB
一键复制 编辑 原始数据 按行查看 历史
Intyitai 提交于 2019-09-01 22:53 . 修改背景效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--目的是让bootstrap开发的玩网站对移动设备更加友好,确保适当的绘制和触屏缩放 -->
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="jquery/jquery-3.4.1.js"></script>
<link rel="stylesheet" href="bootstrap/css/bootstrap.css">
<link rel="shortcut icon" href="image/hxmcatton.ico" type="image/x-icon">
<script>
$(document).ready(function(){
$(document).ready(function(){
$(".hello").animate({
width: "100%",
height: "100px",
}, 1000);
$("#title").animate({
"font-size": "50px"
}, 1000);
$("#btn1").click(function(){
alert("所以我建议你 依然还是听我的");
})
$("#btnmovie,#btnvideo, #btnNb").click(function(){
alert("只能为你找到腾讯");
});
$("#btnshow").click(function(){
$("#show").slideToggle(1000)
});
$("#btnshow2").click(function(){
$(".showpicture").fadeToggle(1000);
});
$("#introduce").click(function(){
$("#introduceHXM").toggle(600);
});
});
})
</script>
<style>
body{
background-image: url('image/hxmcatton.jpg');
background-color: #cccccc;
background-repeat:repeat;
background-attachment: fixed;
margin: 0px;
padding: 0px;
}
.hello{
width: 1px;
height: 1px;
background-color: rgb(58, 71, 75);
position: fixed;
opacity: 0.8;
z-index: 2;
/*设置导航栏位于显示的最上面 */
}
#title{
text-align:left;
letter-spacing: 20px;
font-size: 1px;
margin: 10px;
color: rgb(221, 240, 52);
filter: blur(1px);
left: 40px;
}
p{
color: white;
font-size: 18px;
}
h1{
color:rgb(243, 4, 124);
}
.showpicture img{
width: 400px;
height: 300px;
}
#show, .showpicture{
display: none;
}
.item img{
width: 100%;
height: 100%;
}
</style>
<title>hxm</title>
</head>
<body>
<div>
<div class="hello">
<p style="display:inline; position: absolute;" id="title" >纯属娱乐 并无恶意</p>
<form class="form-inline" role="form" style="display: inline; position: absolute; right: 20px; top: 30px;">
<div class="form-group" id="search">
<input type="text" class="form-control" id="search" placeholder="no response">
<button class="btn btn-success" id="btn1">搜索</button>
</div>
</form>
</div>
</div>
<br>
<br>
<br>
<br>
<br>
<!--这一段轮播图是从官方文档中粘贴,然后自己定制的,但是已经初步了解了它的属性和用法-->
<div class="container">
<div class="row">
<div id="hxm_movie_carousel" class="carousel slide" data-ride="carousel" style="width:800px; height: 480px;margin-left: 140px;">
<!-- 指示器 -->
<ol class="carousel-indicators">
<li data-target="#hxm_movie_carousel" data-slide-to="0" class="active"></li>
<li data-target="#hxm_movie_carousel" data-slide-to="1"></li>
<li data-target="#hxm_movie_carousel" data-slide-to="2"></li>
</ol>
<!-- 内容 -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="image/hxmmovie1.jpg">
</div>
<div class="item">
<img src="image/hxmmovie2.jpg">
</div>
<div class="item">
<img src="image/hxmmovie3.jpg">
</div>
</div>
<!-- 左右控件 -->
<a class="left carousel-control" href="#hxm_movie_carousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
</a>
<a class="right carousel-control" href="#hxm_movie_carousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
</a>
</div>
<br><br><br>
<a href="https://v.qq.com/x/search/?q=%E9%BB%84%E6%99%93%E6%98%8E&stag=0&smartbox_ab=" role="button">
<button class="btn btn-success col-md-5 col-md-offset-3 btn-lg" type="button" id="btnmovie">黄晓明的电影</button>
</a>
<br><br><br>
<div id="hxm_video_carousel" class="carousel slide" data-ride="carousel" style="width:800px; height: 480px;margin-left: 140px;">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#hxm_video_carousel" data-slide-to="0" class="active"></li>
<li data-target="#hxm_video_carousel" data-slide-to="1"></li>
<li data-target="#hxm_video_carousel" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="image/hxmvideo1.jpg" alt="...">
</div>
<div class="item">
<img src="image/hxmvideo2.jpg" alt="...">
</div>
<div class="item">
<img src="image/hxmvideo3.jpg" alt="...">
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#hxm_video_carousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
</a>
<a class="right carousel-control" href="#hxm_video_carousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
</a>
</div>
<br><br><br><br>
<a href="https://v.qq.com/x/search/?q=%E9%BB%84%E6%99%93%E6%98%8E&stag=0&smartbox_ab=" role="button">
<button class="btn btn-success col-md-5 col-md-offset-3 btn-lg" type="button" id="btnvideo">黄晓明的电视剧</button>
</a>
<br><br><br>
<div id="hxm_nb_carousel" class="carousel slide" data-ride="carousel" style="width:800px; height: 480px;margin-left: 140px;">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#hxm_nb_carousel" data-slide-to="0" class="active"></li>
<li data-target="#hxm_nb_carousel" data-slide-to="1"></li>
<li data-target="#hxm_nb_carousel" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="image/hxmNb.jpg" alt="...">
</div>
<div class="item">
<img src="image/hxmNb2.jpg" alt="...">
</div>
<div class="item">
<img src="image/hxmNb3.jpg" alt="...">
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#hxm_nb_carousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
</a>
<a class="right carousel-control" href="#hxm_nb_carousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
</a>
</div>
<br><br><br><br>
<<a href="https://v.qq.com/x/search/?q=%E9%BB%84%E6%99%93%E6%98%8E&stag=0&smartbox_ab=" role="button">
<button class="btn btn-success col-md-5 col-md-offset-3 btn-lg" type="button" id="btnNb">黄晓明的综艺</button>
</a>
</div>
</div>
<div class="container">
<br>
<button class="btn btn-danger" id="introduce">黄晓明简介</button>
<p id="introduceHXM" style="display: none">
黄晓明,1977年11月13日生于山东省青岛市市南区,中国内地男演员、歌手、商人,毕业于北京电影学院表演系<br>
</p>
<br>
<br>
<button class="btn btn-danger" id="btnshow">明人明言</button>
<div id="show">
<br>
<h1>三大原则:</h1>
<p>都听我的原则,我觉得原则,我不管原则</p>
<h1>四项必须:</h1>
<p>
必须是个问题,也是你的问题。<br>
必须解决,你来解决<br>
必须搞定,全部搞定<br>
必须说一个就一个
</p>
<h1>经典语录:</h1>
<p>
1. 我不要你觉得,我要我觉得。<br>
2.你们不要闹了,就这样,都听我的。<br>
3. 我不觉得这是个问题!<br>
4.这是你的问题,你必须要解决!<br>
5.这个问题不需要商量,都听我的。<br>
6.万一呢?要是有人想一个人吃三分套餐。<br>
7.要不我觉得你别干了吧。<br>
8.买!什么都可以买!<br>
9.我不管几个,我要全部搞定,我再说一遍,全部搞定,不要再问我几个,全部,听懂了吗!全部搞定!<br>
10.我不管,我说一个就一个。
</p>
</div>
<br>
<br>
<button class="btn btn-danger" id="btnshow2">明人明包</button>
<div class="showpicture">
<img src="image/hxmhhh1.jpg" class="img-circle">
<img src="image/hxmhhh2.jpg"class="img-circle col-lg-offset-3">
<img src="image/hxmhhh3.jpg"class="img-circle">
<img src="image/hxmhhh4.jpg"class="img-circle col-lg-offset-3">
<img src="image/hxmhhh5.jpg"class="img-circle">
<img src="image/hxmhhh6.jpg"class="img-circle col-lg-offset-3">
<img src="image/hxmhhh7.jpg"class="img-circle">
<img src="image/hxmhhh8.jpg"class="img-circle col-lg-offset-3">
<img src="image/hxmhhh9.jpg"class="img-circle">
<img src="image/hxmhhh10.jpg"class="img-circle col-lg-offset-3">
</div>
</div>
<script src="jquery/jquery-3.4.1.js"></script>
<script src="bootstrap/js/bootstrap.js"></script>
</body>
</html>
马建仓 AI 助手
尝试更多
代码解读
代码找茬
代码优化