Bootstrap制作虚拟系统初始版本(无聊随便做的)

Bootstrap制作虚拟系统初始版本(无聊随便做的)

距离我上次发博客已经有了很久了,这次纯属无聊来更新下。PS:(这个前端程序花了我2小时才写完)
废话不多说,直接上代码。

主系统

<!doctype html>
<html>
  <head>
    <meta charset="BGK">
    <title>Ming Ying web page simulation system</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">  
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <style>p1{position:absolute; left:800px;}body{background-image:url('https://i0.hdslb.com/bfs/article/e34d8be472c7d17eebdc3e827dce3c6f0e6f286f.jpg');}</style>
  </head>
  <body>
      <div id="container" style="width:1439px"><div id="header" style="clear:both;text-align:center;">
<p1>
        	<p id="demo"></p>
<script>
var myVar=setInterval(function(){Timer()},1000);
function Timer(){
	var d=new Date();
	var t=d.toLocaleTimeString();
	document.getElementById("demo").innerHTML=t;
}
</script>
    </p1>
  </div></div>
</body>
<body>
   <div id="container" style="width:1439px">
      <div class="container-fluid">
      <div class="navbar-header">
        
      </div>
      </div>
      <ul class="nav navbar-nav navbar-letf">

          <ul class="nav nav-pills"><a href="file:///C:/Documents%20and%20Settings/Administrator/%E6%A1%8C%E9%9D%A2/%E7%BD%91%E9%A1%B5%E8%AF%95%E9%AA%8C%E7%89%88WinXP/%E6%B5%8F%E8%A7%88%E5%99%A8(%E8%AF%95%E9%AA%8C%E5%9E%8B).html" class="btn btn-info btn-lg">
            <span class="glyphicon glyphicon-globe"></span></a><p>
            浏览器
            </p></ul></ul></div>
  </body>
  <body>
    <nav class="navbar navbar-default navbar-fixed-bottom navbar navbar-inverse class" role="navigation">
    <div class="container-fluid">
      <div class="navbar-header">
        
      </div>
      </div>
      <ul class="nav navbar-nav navbar-letf">
        <ul class="nav nav-pills">
                         <a href="#" class="btn btn-info btn-lg">
          <span class="glyphicon glyphicon-wrench"></span>
        </a>
                  <a href="file:///C:/Documents%20and%20Settings/Administrator/%E6%A1%8C%E9%9D%A2/%E7%BD%91%E9%A1%B5%E8%AF%95%E9%AA%8C%E7%89%88WinXP/%E5%B7%A5%E5%85%B7.html" class="btn btn-info btn-lg">
          <span class="glyphicon glyphicon-cog"></span>
        </a>
            <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                    start<b class="caret"></b>
                </a>
                <ul class="dropdown-menu">
                                    <li><a href="#"><span class="glyphicon glyphicon-th-large" style="color: rgb(255, 121, 60); font-size: 5px;"></span> procedure</a></li>
                    <li><a href="#"><span class="glyphicon glyphicon-folder-close"></span>folder</a></li>
                    <li><a href="#"> <span class="glyphicon glyphicon-search"></span>search</a></li>
                    <li><a href="#"><span class="glyphicon glyphicon-off"></span>close</a></li>
                  <li><a href="#"><span class="glyphicon glyphicon-calendar"></span>Data and time</a></li>
                  <li>	<form class="navbar-form navbar-left" role="search">
		<div class="form-group">
			<input type="text" class="form-control"placeholder="Search tools">
		</div>
	</form></li>
                </ul>
              
          </li>
      </ul>
  </ul>
      </nav>
  </body>
</html>

别问时间为什么要放哪里,那个原因我也不知道,反正以后会改在Data and time那就对了。

浏览器

<!doctype html>
<head>
<html>
<meta charset="GBK">
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!--图形库-->

<link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">
<style>
div.a
{
width:1399px;
padding:4px;
border:1px solid gray;
margin:0px;
}
.flex-b{
    display: -webkit-flex;
    display: flex;
    width: 1391px;
    height: 45px;
}

.flex-a{
    width: 70px;
    height: 20px;
    margin: 15px;
}
.flex-c{
    display: -webkit-flex;
    display: flex;
    width: 1031px;
    height: 200px;
}
div.b
{
width:1399px;
padding:4px;
border:1px solid gray;
margin:0px;
}
.flex-d {
    display: -webkit-flex;
    display: flex;
    width: 854px;
    height: 350px;
   
}
div.c
{
width:165px;
padding:4px;
border:1px solid gray;
margin:0px;
}
div.d
{
width:1265px;
padding:4px;
border:1px solid gray;
margin:0px;
}
.flex-e{
  display:-webkit-flex;
  display:flex;
  width:200px;
  height:80px;
}
div.e
{
width:700px;
padding:4px;
border:1px solid gray;
margin:0px;
}
.flex-g{
  display:-webkit-flex;
  display:flex;
}
  .flex-h{
    display:-webkit-flex;
    display:flex;
    width:100px;
    height:50px;
  }
    .flex-i{
    width: 105px;
    height: 20px;
    margin: 15px;
  }
      .flex-j{
    width: 70px;
    height: 2px;
    margin: 1px;
  }
  h4
{
	text-shadow: 5px 5px 5px grey;
}
    h1
{
	text-shadow: 5px 5px 5px grey;
}
</style>
<script>
function a(){
C=window.history.back();
}
function b(){
C=window.history.forward();
}
function openWin(){
A=window.open("file:///C:/Documents%20and%20Settings/Administrator/%E6%A1%8C%E9%9D%A2/%E7%BD%91%E9%A1%B5%E8%AF%95%E9%AA%8C%E7%89%88WinXP/%E6%B5%8F%E8%A7%88%E5%99%A8.html",'','width=800,height=800'); 
}
function closeWin(){
A.close();
}
function c(){
C=window.history.go(0);
}
</script>
</head>
<body>

<nav class="nav navbar-inverse"role="navigation">
	<div class="container-fluid"> 
	<div class="navbar-header">
	
</div>

<div class="collapse navbar-collapse" id="example-navbar-collapse">
<ul class="nav navbar-nav">

<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Tools<b class="dropdown-menu"></b></a>
<ul class="dropdown-menu">
<li><a href="https://www.baidu.com"target="_blank">新建选项卡</a></li>
<li><a href="file:///C:/Documents%20and%20Settings/Administrator/%E6%A1%8C%E9%9D%A2/%E7%BD%91%E9%A1%B5%E8%AF%95%E9%AA%8C%E7%89%88WinXP/%E6%B5%8F%E8%A7%88%E5%99%A8.html"target="_parent">重复选项卡</a></li>
<li><input type="button" value="新建窗口" onclick="openWin()"></li>
<li><input type="button" value="新建会话"οnclick="openWin()"></li>
<li><input type="button" value="关闭当前会话"οnclick="closeWin()"></input></li>
<li><a href="file:///C:/Documents%20and%20Settings/Administrator/%E6%A1%8C%E9%9D%A2/%E7%BD%91%E9%A1%B5%E8%AF%95%E9%AA%8C%E7%89%88WinXP/%E7%94%BB%E6%9D%BF.html">画板</a></li>
	</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Help<b class="dropdown-menu"></b></a>
<ul class="dropdown-menu">
<li><a href="file:///C:/Documents%20and%20Settings/Administrator/%E6%A1%8C%E9%9D%A2/%E7%BD%91%E9%A1%B5%E8%AF%95%E9%AA%8C%E7%89%88WinXP/%E6%B5%8F%E8%A7%88%E5%99%A8%E4%BD%BF%E7%94%A8%E6%89%8B%E5%86%8C.html">浏览器使用手册</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Refresh and flip
<b class="dropdown-menu"></b></a>
<ul class="dropdown-menu">
<li><input type="button" value="向后一页" onclick="a()"></input></li>
<li><input type="button" value="向前一页" onclick="b()"></input></li>
<li><input type="button" value="刷新" onclick="c()"></input></li>
</ul>
</li>
<li class="dropdown"><button style="font-size:30px">send email<i class="fa fa-envelope-o"></i></button><b clas="dropdown-menu"></b>
<ul class="dropdown-menu"></ul></li>
		</div>
			</div>
		</nav>
	</body>
<body>
<div id="container"style="width:1391px">
<div id="footer" style="background-color:#F0F8FF;clear:both;text-align:center;"><form id="1" action="https://www.baidu.com/s"><input type="text"name="wd"id="container"><input type="submit" value="搜索"></form>
</div>
</div>
</body>
<body>
<div class="a"><div class="flex-b"><div class="flex-a"><button style="font-size:1px"><i class="fa fa-home"></i></button></div>
<div class="flex-a"><a href="http://www.xinhuanet.com/">新闻</a></div>
<div class="flex-a"><a href="http://hao.360.com/rili/#cid=youlike">万年历</a></div>
<div class="flex-a"><a href="https://ai.taobao.com/?pid=mm_26632323_6762370_25910879&clk1=34ccfea205b8b6777cb3d8d55cce1ae0">购物</a></div>
<div class="flex-a"><a href="https://www.kugou.com/">音乐</a></div>
<div class="flex-a"><a href="http://www.4399.com/?hao360a">游戏</a></div>
<div class="flex-a"><a href="https://licai.360.cn/bank#cid=2">银行</a></div>
<div class="flex-a"><i class="fa fa-file-movie-o"><a href="https://www.iqiyi.com/">电影</a></i></div>
<div class="flex-a"><a href="http://www.zggszx.com/">股市</a></div>
<div class="flex-a"><a href="https://www.creprice.cn/">房地产</a></div>
<div class="flex-a"><a href="http://auto.szhk.com/industry/">汽车</a></div>
<div class="flex-a"><a href="http://www.xigushi.com/">故事</a></div>
<div class="flex-a"><a href="https://www.zhcw.com/">彩票</a></div>
<div class="flex-a"><a href="https://www.ly.com/">旅游</a></div>
</div></div>
  <div class="a"><div class="flex-b"><div class="flex-j">
    <h4>
      <i>News</i>
    </h4>
    </div><div class="flex-i"><a href="http://www.people.com.cn/">人民网</a></div>
    <div class="flex-i"><a href="http://www.xinhuanet.com/">新华网</a></div><div class="flex-i"><a href="https://www.cctv.com/">央视网</a></div>
    <div class="flex-i">
      <a href="http://www.china.com.cn/">中国网</a>
    </div>
    <div class="flex-i">
      <a href="http://www.cri.cn/">国际在线</a>
    </div>
        <div class="flex-i">
      <a href="http://cn.chinadaily.com.cn/">中国日报</a>
    </div>
        <div class="flex-i">
      <a href="http://www.ce.cn/">中国经济网</a>
    </div>
        <div class="flex-i">
      <a href="http://www.gmw.cn/">光明网</a>
    </div>
        <div class="flex-i">
      <a href="http://www.cnr.cn/">央广网</a>
    </div>
        <div class="flex-i">
      <a href="http://www.qstheory.cn/">求是网</a>
    </div>
        <div class="flex-i">
      <a href="http://www.youth.cn/">中青网</a>
    </div>
        <div class="flex-i">
      <a href="http://www.cac.gov.cn/">网信网</a>
    </div>
    </div></div>
</body>
<body>
<div id="container"style="width:1391px;height:16px">
<div id="header" style="background-color:#FFFFFF;width:1391px;height:16px">
</div></div>
</body>
<body>
  <div class="b">
<div class="flex-d">
  <div class="c">
<img src="http://hbimg.huabanimg.com/bd5a5c8eefc31d7eebaf15304bded4fa79a9707d261f0-CfymvR_fw658"width="100"height="100">
  <table>
    <tr>
    <td>
      <div class="flex-h"><a href="http://www.xinhuanet.com/">新闻|</a><a href="http://www.81tt.net/?360k">军事</a></div>
              <div class="flex-h"><i class="fa fa-file-movie-o"></i><a href="https://yule.360.com/">娱乐|</a><a href="https://www.iqiyi.com/">电影</a></div>
         <div class="flex-h">
     <i class="fa fa-microphone" style="font-size:24px"></i><a href="http://kan.sogou.com/zongyi/">综艺|</a><a href="https://www.kugou.com/">音乐</a>
      </div>
      <div class="flex-h">
        <a href="https://tianqi.so.com/weather/101250101">天气|</a><i class="fa fa-map"></i><a href='http://api.map.baidu.com/geocoder?address=北京市&output=html' target='_blank'>地图</a>
      </div>
              <div class="flex-h">
          <a href="https://www.ihonker.org/index.php">HUC|</a><i class="fa fa-laptop"></i><a href="https://www.csdn.net/?spm=1001.2101.3001.5359">CSDN</a>
        </div>
      </td>
    </tr>
  </table>
  </div>
 <p>
    <div class="d">
  <div class="flex-d"><table><tr><td>
    <div class="flex-e">
      <a href="http://www.xinhuanet.com/">新华网</a>
      </div>
    <div class="flex-e">
      <a href="http://gz.nongcun5.com/">羊城网</a>
    </div>
             <div class="flex-e">
      <a href="https://ai.taobao.com/?pid=mm_26632323_6762370_25910879&clk1=41c01ff762b17f832c4bb98798e05a28">爱淘宝</a>
    </div>
    <div class="flex-e">
      <a href="https://www.sohu.com/">搜狐</a>
    </div>
        <div class="flex-e">
      <a href="https://outlook.live.com/owa/">Outlook邮箱</a>
    </div>
    </td></tr></table><table><tr><td>
    <div class="flex-e">
      <a href="https://www.ctrip.com/?allianceid=1328&sid=1643">携程旅游</a>
    </div>
    <div class="flex-e">
      <a href="http://www.81tt.net/?360k">环球军事新闻</a>
    </div>
    <div class="flex-e">
      <a href="https://www.163.com/">网易</a>
    </div>
    <div class="flex-e">
      <a href="https://news.sina.com.cn/">新浪新闻</a>
    </div>
    <div class="flex-e">
      <a href="https://www.ifeng.com/">凤凰网</a>
    </div></td></tr></table><table><tr><td>
    <div class="flex-e">
      <a href="https://news.qq.com/">腾讯新闻</a>
    </div>
    <div class="flex-e">
      <a href="https://www.baidu.com/">百度</a>
    </div>
    <div class="flex-e">
      <a href="http://www.cyol.net/">中青在线</a>
    </div>
    <div class="flex-e">
      <a href="https://www.csdn.net/?spm=1001.2101.3001.5359">CSDN</a>
    </div>
<div clas=="flex-e">
<a href="https://www.bilibili.com/">bilibili</a>
</div></td></tr></table><table><tr><td>
<div class="flex-e">
<a href="https://www.tmall.com/?ali_trackid=2:mm_26632323_6762370_25910656:1613034695_133_2146019542&union_lens=recoveryid:1613034695_133_2146019542&bxsign=tbkpI6LyIpom0/W/cQTX8v9xbXrLnJqaNcH0nixCfwtjlWVWo56zL1fwznvaIL0YBk7Av3tGNIaiFkT9mGhdBtdTdvzQOIUPgjLKR13LU8MTbg=">天猫</a>
</div>
<div class="flex-e"> <a href="https://licai.360.cn/bank#cid=2">银行*理财</a></div>
<div class="flex-e">
<a href="http://www.jd.com/?cu=true&utm_source=hao.360.com&utm_medium=tuiguang&utm_campaign=t_1000003625_360mz&utm_term=992df18f3ed04c91904811b63d75d423">京东</a></div>
<div class="flex-e"><a href="https://www.iqiyi.com/">爱奇艺</a></div>
<div class="flex-e"><a href="https://dev.tg.wan.360.cn/?channel=515300026&placeid=">热血战歌</a></div></td></tr></table>
<table><tr><td><div class="flex-e"><a href="https://www.12306.cn/index/">中铁</a></div>
<div class="flex-e"><a href="https://www.douban.com/">豆瓣</a></div>
<div class="flex-e"><a href="https://www.bilibili.com/anime/?spm_id_from=333.337.b_696e7465726e6174696f6e616c486561646572.2">番剧</a></div>
<div class="flex-e"><a href="https://mil.ifeng.com/">军事</a></div>
<div class="flex-e"><a href="http://www.uimaker.com/">设计</a></div>
</td></tr></table>
</div></div>
<div class="e">
<div class="flex-g">
    <a href='http://api.map.baidu.com/geocoder?address=江门市第八中学&output=html' target='_blank'> <img style="margin:2px" width="400" height="340" src="http://api.map.baidu.com/staticimage? 
        width=400&height=300&zoom=17&center=江门市第八中学" />  
    </a>
</div>
</div>
    </div></div>
</body>
<body>
  <div id="container" style="width:1391px"><div id="content" style="background-color:#EEEEEE;height:00px;width:1391px;text-align:center;"><h1>
    9月后再开工
    </h1>
    <img src="http://wx4.sinaimg.cn/large/ab4cb34aly1fylbsenicmj20k00f03z4.jpg">
</div></div>
</body>
</html>

这个浏览器中的Map是调用了百度地图静态API接口做的,纯属为了霸占位置,正式版本时会把它放到个人页面中。

效果图

主系统

在这里插入图片描述

浏览器

在这里插入图片描述
好了,这次就更到这里吧,6月中考完后我将会再次更新,到时将会推出新版Python教程,同时也会重做这个浏览器与系统给大家阅读与学习。
好了,6月中考完后见,各位亲爱的CSDN用户。
(记得别忘记一键三连哦,据说收藏,点赞或关注博主的人都会在事业与学业上有好运哦!)

  • 2
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值