导航条加按钮分页
来源：互联网 发布：3个人合唱的歌曲 知乎 编辑：程序博客网 时间：2024/05/17 07:45
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>day-12</title>
<style>
daohang{
float: left;
width: 100%;
height: 60px;
position: absolute;
background-color: aqua;
}
#div{
width: 100%;
background-color: aqua(255,225,180,100,0.9);
text-align: center;
font-size: 15px;
color: burlywood;
}
#h1{
text-align: center;
width: 100%;
}
p1{
color: black;
font-family:
Gill Sans, Gill Sans MT, Myriad Pro, DejaVu Sans Condensed, Helvetica, Arial," sans-serif";
align-content: center;
}
.nav>li>a {
position: relative;
float: left;
/* display: block; */
padding: 10px 15px;
}
</style>
</head>
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
crossorigin="anonymous">
<!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp"
crossorigin="anonymous">
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
crossorigin="anonymous"></script>
<body style="background: url(%E5%86%B7%E8%8F%8A/images/tupian2.jpg)">
<div class="daohang">
<ul class="nav nav-tbbs">
<li>
<a href="#" data-toggle="dropdown">城市<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">青岛</a></li>
<li><a href="#">贵阳</a></li>
<li><a href="#">湖北</a></li>
<li><a href="#">四川</a></li>
<li><a href="#">上海</a></li>
<li><a href="#">广东</a></li>
</ul>
</li>
<li>
<a href="#" data-toggle="dropdown">区域<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">观山湖区</a></li>
<li><a href="#">南明区</a></li>
<li><a href="#">武当区</a></li>
<li><a href="#">云岩区</a></li>
<li><a href="#">花溪区</a></li>
<li><a href="#">白云区</a></li>
</ul>
</li>
<li>
<a href="#" data-toggle="dropdown">美食<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">火锅</a></li>
<li><a href="#">串串香</a></li>
<li><a href="#">烙锅</a></li>
<li><a href="#">烧烤</a></li>
<li><a href="#">各种饮料</a></li>
<li><a href="#">各种水果</a></li>
</ul>
</li>
<form class="navbar-form navbar-left">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">搜索</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">游乐场</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">服务 <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">酒店</a></li>
<li><a href="#">停车</a></li>
<li><a href="#">超市</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">KTV</a></li>
</ul>
</li>
</ul>
</ul>
</div>
<hr>
<h1 id="h1">再别康桥</h1>
<div id="div">
<p calss"p1">轻轻的我走了，</p>
<p id="p1">正如我轻轻的来；</p>
<p id="p1">作别西天的云彩。</p>
<p id="p1">那河畔的金柳，</p1>
<p id="p1">是夕阳中的新娘;</p>
<p id="p1">波光里的艳影，</p>
<p id="p1">在我的心头荡漾。</p>
<p1 id="p1">软泥上的青荇，</p1>
<p id="p1">油油的在水底招摇；</p>
<p id="p1">在康河的柔波里，</p>
<p id="p1">我甘心做一条水草！</p>
<p1 id="p1">那榆荫下的一谭，</p1>
<p id="p1">不是清泉，是天上虹;</p>
<p id="p1">柔碎在浮藻间，</p>
<p id="p1">沉淀着彩虹似的梦。</p>
<p id="p1">寻梦？撑一支长篙，</p1>
<p id="p1">向青草更青处漫溯;</p>
<p id="p1">满载一船星辉，</p>
<!--<p id="p1">在星辉斑斓里放歌。</p>
<!--<p1 id="p1">但我不能放歌，</p1>
<p id="p1">悄悄是别离的笙箫；</p>
<p id="p1">夏虫也为我沉默，</p>
<p id="p1">沉默是今晚的康桥！！</p>
<p1 id="p1">悄悄的我走了，</p1>
<p id="p1">正如我悄悄的来；</p>
<p id="p1">我挥一挥衣袖，</p>
<p id="p1">不带走一片云彩。</p>-->
<div style="text-align: left">
<canvas id="cv1" width="800" height="100" style="background-color:#FFC(255,150,100,0.3);"></canvas>
</div>
<script>
var ctx1=document.getElementById("cv1").getContext("2d");
var grad=ctx1.createLinearGradient(5,10,100,80);
grad.addColorStop(0,"red");
grad.addColorStop(0.5,"orange");
grad.addColorStop(1,"purple");
//绘制文本text
ctx1.shadowBlur=5;
ctx1.shadowColor="grey";
ctx1.shadowOffsetX=2;
ctx1.shadowOffsetY=2;
ctx1.font="italic bold 30px 微软雅黑"; //设置画布上的文本字体
ctx1.strokeStyle=grad;
//后两个参数是文本所在的坐标x，y的值
ctx1.strokeText(" I do,you know I really do Sundy ",100,100);
ctx1.fillStyle=grad;
ctx1.fillText("you are my sunshine！",200,50);
ctx1.fillStyle=grad;
ctx1.fillText("Sundy",50,50);
</script>
<br><br>
<button type="button" class="btn btn-success btn-lg">赞 <span class="glyphicon glyphicon-thumbs-up"></span></button>
<button type="button" class="btn-danger btn-lg">收藏 <span class="glyphicon glyphicon-heart"></span></button>
<button type="button" class="btn btn-success btn-lg">分享 <span class="glyphicon glyphicon-share-alt"></span></button>
<br><br>
<nav aria-label="Page navigation">
<ul class="pagination">
<li>
<a href="#" aria-label="Previous">
<span aria-hidden="true">«</span>
</a>
</li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li>
<a href="#" aria-label="Next">
<span aria-hidden="true">»</span>
</a>
</li>
</ul>
</nav>
</div>
<blockquote class="blockquote-reverse">
<p>我是一个平常的人，我不能在人海中值得你一转眼的注意。</p>
<footer>——-徐志摩<cite>《爱的灵感》</cite>Sundy 2017.8.1</footer>
</blockquote>
</body>
</html>
<html>
<head>
<meta charset="utf-8">
<title>day-12</title>
<style>
daohang{
float: left;
width: 100%;
height: 60px;
position: absolute;
background-color: aqua;
}
#div{
width: 100%;
background-color: aqua(255,225,180,100,0.9);
text-align: center;
font-size: 15px;
color: burlywood;
}
#h1{
text-align: center;
width: 100%;
}
p1{
color: black;
font-family:
Gill Sans, Gill Sans MT, Myriad Pro, DejaVu Sans Condensed, Helvetica, Arial," sans-serif";
align-content: center;
}
.nav>li>a {
position: relative;
float: left;
/* display: block; */
padding: 10px 15px;
}
</style>
</head>
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
crossorigin="anonymous">
<!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp"
crossorigin="anonymous">
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
crossorigin="anonymous"></script>
<body style="background: url(%E5%86%B7%E8%8F%8A/images/tupian2.jpg)">
<div class="daohang">
<ul class="nav nav-tbbs">
<li>
<a href="#" data-toggle="dropdown">城市<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">青岛</a></li>
<li><a href="#">贵阳</a></li>
<li><a href="#">湖北</a></li>
<li><a href="#">四川</a></li>
<li><a href="#">上海</a></li>
<li><a href="#">广东</a></li>
</ul>
</li>
<li>
<a href="#" data-toggle="dropdown">区域<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">观山湖区</a></li>
<li><a href="#">南明区</a></li>
<li><a href="#">武当区</a></li>
<li><a href="#">云岩区</a></li>
<li><a href="#">花溪区</a></li>
<li><a href="#">白云区</a></li>
</ul>
</li>
<li>
<a href="#" data-toggle="dropdown">美食<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">火锅</a></li>
<li><a href="#">串串香</a></li>
<li><a href="#">烙锅</a></li>
<li><a href="#">烧烤</a></li>
<li><a href="#">各种饮料</a></li>
<li><a href="#">各种水果</a></li>
</ul>
</li>
<form class="navbar-form navbar-left">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">搜索</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">游乐场</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">服务 <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">酒店</a></li>
<li><a href="#">停车</a></li>
<li><a href="#">超市</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">KTV</a></li>
</ul>
</li>
</ul>
</ul>
</div>
<hr>
<h1 id="h1">再别康桥</h1>
<div id="div">
<p calss"p1">轻轻的我走了，</p>
<p id="p1">正如我轻轻的来；</p>
<p id="p1">作别西天的云彩。</p>
<p id="p1">那河畔的金柳，</p1>
<p id="p1">是夕阳中的新娘;</p>
<p id="p1">波光里的艳影，</p>
<p id="p1">在我的心头荡漾。</p>
<p1 id="p1">软泥上的青荇，</p1>
<p id="p1">油油的在水底招摇；</p>
<p id="p1">在康河的柔波里，</p>
<p id="p1">我甘心做一条水草！</p>
<p1 id="p1">那榆荫下的一谭，</p1>
<p id="p1">不是清泉，是天上虹;</p>
<p id="p1">柔碎在浮藻间，</p>
<p id="p1">沉淀着彩虹似的梦。</p>
<p id="p1">寻梦？撑一支长篙，</p1>
<p id="p1">向青草更青处漫溯;</p>
<p id="p1">满载一船星辉，</p>
<!--<p id="p1">在星辉斑斓里放歌。</p>
<!--<p1 id="p1">但我不能放歌，</p1>
<p id="p1">悄悄是别离的笙箫；</p>
<p id="p1">夏虫也为我沉默，</p>
<p id="p1">沉默是今晚的康桥！！</p>
<p1 id="p1">悄悄的我走了，</p1>
<p id="p1">正如我悄悄的来；</p>
<p id="p1">我挥一挥衣袖，</p>
<p id="p1">不带走一片云彩。</p>-->
<div style="text-align: left">
<canvas id="cv1" width="800" height="100" style="background-color:#FFC(255,150,100,0.3);"></canvas>
</div>
<script>
var ctx1=document.getElementById("cv1").getContext("2d");
var grad=ctx1.createLinearGradient(5,10,100,80);
grad.addColorStop(0,"red");
grad.addColorStop(0.5,"orange");
grad.addColorStop(1,"purple");
//绘制文本text
ctx1.shadowBlur=5;
ctx1.shadowColor="grey";
ctx1.shadowOffsetX=2;
ctx1.shadowOffsetY=2;
ctx1.font="italic bold 30px 微软雅黑"; //设置画布上的文本字体
ctx1.strokeStyle=grad;
//后两个参数是文本所在的坐标x，y的值
ctx1.strokeText(" I do,you know I really do Sundy ",100,100);
ctx1.fillStyle=grad;
ctx1.fillText("you are my sunshine！",200,50);
ctx1.fillStyle=grad;
ctx1.fillText("Sundy",50,50);
</script>
<br><br>
<button type="button" class="btn btn-success btn-lg">赞 <span class="glyphicon glyphicon-thumbs-up"></span></button>
<button type="button" class="btn-danger btn-lg">收藏 <span class="glyphicon glyphicon-heart"></span></button>
<button type="button" class="btn btn-success btn-lg">分享 <span class="glyphicon glyphicon-share-alt"></span></button>
<br><br>
<nav aria-label="Page navigation">
<ul class="pagination">
<li>
<a href="#" aria-label="Previous">
<span aria-hidden="true">«</span>
</a>
</li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li>
<a href="#" aria-label="Next">
<span aria-hidden="true">»</span>
</a>
</li>
</ul>
</nav>
</div>
<blockquote class="blockquote-reverse">
<p>我是一个平常的人，我不能在人海中值得你一转眼的注意。</p>
<footer>——-徐志摩<cite>《爱的灵感》</cite>Sundy 2017.8.1</footer>
</blockquote>
</body>
</html>
阅读全文
0 0
- 导航条加按钮分页
- 导航条加阴影
- 按钮和导航条
- 导航条按钮设置
- bootstrap( 导航条、分页导航)
- Bootstrap导航条、分页导航
- 5.导航条、分页导航
- bootstrap导航条、分页导航
- 为导航条添加按钮
- ios导航条添加按钮
- ios导航条添加按钮
- 自定义导航条返回按钮
- bootstrap 汉堡包导航条按钮
- UIBarButtonItem导航条按钮封装
- ASP显示分页导航条
- ASP显示分页导航条
- Bootstrap(五) 导航条、分页导航
- Bootstrap学习-导航条-分页导航
- kafka java客户端调用问题
- 侧拉
- Android studio导出的apk在真机上安装提示“文件不存在或已失效”的解决方法
- 调用阿里云api获取解析记录列表
- Android activity在屏幕显示方向设置
- 导航条加按钮分页
- Mybatis流程学习总结（待续）
- 对称加密、非对称加密、数字签名
- 1026. 程序运行时间(15)
- Mapper中insert方法与insertSelective的区别
- 移动端UI自动化测试框架对比
- 阿里云ECS
- 安卓自定义绘制View中遇到的问题
- 采用dblink与merge结合的方法完成数据库之间的数据更新
