第一次写博客~

最新推荐文章于 2020-02-29 14:30:15 发布

猿丶计划

最新推荐文章于 2020-02-29 14:30:15 发布

阅读量186

点赞数 1

文章标签： bootstrap web前端

本文链接：https://blog.csdn.net/qq_36804221/article/details/73929402

版权

不知道说什么，随便打点东西，心情不是太好~~~~~

自己做了一个基于bootstrap的网页，刚开始做，有点累了，先上传这些上去，以后还会更新~~~~~~~~

--------------------------------------------------------------------------------------------心情低落的分割线--------------------------------------------------------------------------------------------

首先是截图

对bootstrap的一些简单的应用，很简单。。。。下面是代码~~~~~~~~~

HTML：

<!DOCTYPE html>
<html>


	<head>
		<meta charset="utf-8" />
		<title>我的网站</title>
		<link rel="stylesheet" href="https://fonts.gdgdocs.org/css?family=Lobster" type="text/css">
		<!-- 导入谷歌字体 -->
		<link rel="stylesheet" href="css/bootstrap.min.css">
		<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
	</head>


	<body>
		<div class="carousel-inner">
			<nav class="navbar navbar-default navbar-fixed-top" style="margin-bottom: 0px;">
				<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="#"><b>丶</b></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"><a href="#">因为一个人<span class="sr-only">(current)</span></a></li>
							<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="#">我的Ps</a></li>
									<li><a href="#">我的代码</a></li>
									<li><a href="#">我的心情</a></li>
									<li role="separator" class="divider"></li>
									<li><a href="#">额~ 一些骚东西</a></li>
									<!-- <li role="separator" class="divider"></li> -->
								</ul>
							</li>
							<li><a href="http://www.cleanall.xyz/birthday/boot/index.html">Happy birthday！</a></li>
						</ul>
						<form class="navbar-form navbar-left" οnsubmit="return baiduWithHttps(this)" action="http://www.baidu.com/baidu" target="_blank">
							<div class="form-group">
								<input type="text" οnfοcus="checkHttps" class="form-control" name="word"  placeholder="也许~">
							</div>
							<button type="submit" class="btn btn-default">这一刻永恒</button>
						</form>	
							<!--  -->
							
									<script src="http://s1.bdstatic.com/r/www/cache/global/js/BaiduHttps_20150714_zhanzhang.js"></script>


									<script>
    									function checkHttps () {
  									      BaiduHttps.useHttps();    
  									  };
  									  function baiduWithHttps (formname) {
  									      var data = BaiduHttps.useHttps();
  									      if (data.s === 0) {
   									         return true;
   									     }
   									     else {
   									         formname.action = 'https://www.baidu.com/baidu' + '?ssl_s=1&ssl_c' + data.ssl_code;
   									         return true;
   									     }
 									   };
									</script>


							<!--  -->
							
					</div>
					<!-- /.navbar-collapse -->
				</div>
				<!-- /.container-fluid -->
			</nav>




                                                 <!-- banner -->




			<!-- <img class="center-block" src="img/banner.jpg" width="100%" /> -->
				<div id="myCarousel" class="carousel slide">
		<!-- 轮播（Carousel）指标 -->
					<ol class="carousel-indicators">
						<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
						<li data-target="#myCarousel" data-slide-to="1"></li>
						<li data-target="#myCarousel" data-slide-to="2"></li>
					</ol>   
					<!-- 轮播（Carousel）项目 -->
					<div class="carousel-inner">
						<div class="item active">
							<img src="img/banner.jpg" alt="First slide">
						</div>
						<div class="item">
							<img src="img/banner1.jpg" alt="Second slide">
						</div>
						<div class="item">
							<img src="img/banner2.jpg" alt="Third slide">
						</div>
					</div>
					<!-- 轮播（Carousel）导航 -->
					<a class="carousel-control left" href="#myCarousel" 
					   data-slide="prev">‹</a>
					<a class="carousel-control right" href="#myCarousel" 
					   data-slide="next">›</a>
				</div> 
		</div>
		<!--导航结束-->


	<div">
		<h2>专业知识</h2>


										<!-- 进度条 -->
		<p style="float: left; margin-left: 50px; margin-right: 50px; font-weight: bold;">web前端</p>
			<div class="progress progress-striped active">
			    <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 40%;">
			        <span class="sr-only">40% 完成</span>
			    </div>
			</div>
		<p style="float: left; margin-left: 50px; margin-right: 50px; font-weight: bold;">平面设计</p>
			<div class="progress progress-striped active">
			    <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
			        <span class="sr-only">40% 完成</span>
			    </div>
			</div>
		<p style="float: left; margin-left: 50px; margin-right: 50px; font-weight: bold;">学习能力</p>
			<div class="progress progress-striped active">
			    <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 70%;">
			        <span class="sr-only">40% 完成</span>
			    </div>
			</div>
	</div>
	<div style="clear: both;"></div>	
									<!-- 进度条结束 -->

	</body>
	<script src="js/jquery-3.2.0.min.js"></script>
	<script src="js/bootstrap.min.js"></script>


</html>

喜欢的关注一下，感到我做的不好的，请指点我，真的，很喜欢前端设计，~~~~只希望自己可以勤能补拙~~~~~~~~~~~

上文网页所在的网址：

www.cleanall.xyz

猿丶计划

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
第一次写博客~

不知道说什么，随便打点东西，心情不是太好~~~~~自己做了一个基于bootstrap的网页，刚开始做，有点累了，先上传这些上去，以后还会更新~~~~~~~~ --------------------------------------------------------------------------------------------心情低
复制链接

扫一扫