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¢er=江门市第八中学" />
</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用户。
(记得别忘记一键三连哦,据说收藏,点赞或关注博主的人都会在事业与学业上有好运哦!)