<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link href="./bootstrap-3.3.7-dist/css/bootstrap.css" rel="stylesheet">
<style>
body {
width: 100%;
}
.a {
margin-left: 170px;
}
.a li {
list-style: none;
float: left;
font-size: 14px;
margin: 15px 0px 0px 25px;
}
.a a {
text-decoration: none;
color: gray;
}
.a a:hover {
color: white;
}
.a1:after {
content: "";
position: absolute;
top: 0px;
right: -10px;
padding: 3px;
z-index: 9999999;
background: #d9534f;
border-radius: 50%;
font-size: 0;
line-height: 0;
border: 1px solid #d43f3a;
}
.a1 {
position: relative;
}
.b {
background-color:black;
margin-top:51px;
padding-top: 50px;
width:100% ;
height: 450px;
text-align: center;
}
.b li a:hover {
color:white;
}
.b1 {
color: gray;
}
.c {
width: 100%;
height: 54px;
background:#f5f5f5;
margin-top: -25px;
padding-left: 500px;
}
.c li {
list-style: none;
float: left;
font-size: 14px;
margin: 15px 0px 0px 25px;
}
.c li a {
color:gray;
}
.c li a:hover {
color: red;
}
#scrollUp {
background-color: #777;
color: #eee;
font-size: 40px;
line-height: 1;
text-align: center;
text-decoration: none;
bottom: 20px;
right: 20px;
width: 46px;
height: 46px;
border: none;
}
</style>
</head>
<body>
<div>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="a">
<a class="navbar-brand hidden-sm" href="">Bootstrap中文网</a>
<li><a href="">Bootstrap2中文文档</a></li>
<li><a href="">Bootstrap3中文文档</a></li>
<li><a href="">Bootstrap4中文文档</a></li>
<li><a href="">Less 教程</a></li>
<li><a href="">jQuery API</a></li>
<li><a class="a1" href="">网站实例</a></li>
<li style="float: right;margin-right: 180px;"><a href="">关于</a></li>
</div>
</div>
<div class="b">
<div>
<h1 style="font-size: 100px;color: white;">Bootstrap</h1>
<h2 style="color: white; ">简洁、直观、强悍的前端开发框架，让web开发更迅速、简单。</h2>
<p style="padding-top: 20px">
<a class="btn btn-lg btn-primary btn-shadow" href="">Bootstrap3中文文档(v3.3.7)</a></p>
<li style="list-style: none;padding-top:10px; ">
<a href="" class="b1">Bootstrap2中文文档(v2.3.2)</a>
</li>
</div>
</div>
<div class="c">
<ul>
<li><a href="" style="color:gray;">
<img src="1.jpg"width="35"height="25" >
Bootstrap问答社区</a></li>
<li><a href="" style="border-left:1px solid gray;padding-left: 25px;">
<img src="2.jpg"width="35"height="25" >
Bootstrap中文网官方微博</a></li>
</ul>
</div>
<div class="d" style="margin-left: 54px;">
<div class="d1" style="text-align: center;border-bottom:1px solid gainsboro;margin: 0 auto;
width: 684px;height: 120px;">
<h2 style="font-size: 40px;padding-top:30px; ">
Bootstrap相关优质项目推荐</h2>
<p>这些项目或者是对Bootstrap进行了有益的补充，或者是基于Bootstrap开发的</p>
</div>
<div class="row" style="margin-left: 80px;">
<div class="col-sm-6 col-md-4 col-lg-3 "
style="width: 265px;height: 352px;margin: 20px;
border:1px solid gainsboro; ">
<div>
<a href=""><img src="https://cdn.jsdelivr.net/npm/@bootcss/www.bootcss.com@0.0.3/dist/img/expo.png"
width="250" height="130" style="margin-top: 5px;margin-left: -10px"></a>
</div>
<div style="text-align: center;">
<h3 style="color: blue"><a href="" style="text-decoration: none;">优站精选</a>
<br>
<small> Bootstrap 网站实例</small>
</h3>
<p>Bootstrap 优站精选频道收集了众多基于 Bootstrap 构建、设计精美的、有创意的网站。</p>
</div>
</div>
<div class="col-sm-6 col-md-4 col-lg-3 "
style="width: 265px;height: 352px;margin: 20px;
border:1px solid gainsboro; ">
<div>
<a href=""><img src="https://cdn.jsdelivr.net/npm/@bootcss/www.bootcss.com@0.0.3/dist/img/webpack.png"
width="250" height="130" style="margin-top: 5px;margin-left: -10px"></a>
</div>
<div style="text-align: center;">
<h3 style="color: blue"><a href="" style="text-decoration: none;">Webpack</a>
<br>
<small> 是前端资源模块化管理和打包工具</small>
</h3>
<p>Webpack 是当下最热门的前端资源模块化管理和打包工具。
它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源。</p>
</div>
</div>
<div class="col-sm-6 col-md-4 col-lg-3 "
style="width: 265px;height: 352px;margin: 20px;
border:1px solid gainsboro; ">
<div>
<a href="" ><img src="https://cdn.jsdelivr.net/npm/@bootcss/www.bootcss.com@0.0.3/dist/img/react.png"
width="250" height="130" style="margin-top: 5px;margin-left: -10px;"></a>
</div>
<div style="text-align: center;">
<h3 style="color: blue"><a href="" style="text-decoration: none;">React</a>
<br>
<small>用于构建用户界面的 JavaScript 框架</small>
</h3>
<p>React 起源于 Facebook 的内部项目，是一个用于构建用户界面的 JavaScript 库。</p>
</div>
</div>
<div class="col-sm-6 col-md-4 col-lg-3 "
style="width: 265px;height: 352px;margin: 20px;
border:1px solid gainsboro; ">
<div>
<a href=""><img src="https://cdn.jsdelivr.net/npm/@bootcss/www.bootcss.com@0.0.3/dist/img/typescript.png"
width="250" height="130" style="margin-top: 5px;margin-left: -10px"></a>
</div>
<div style="text-align: center;">
<h3 style="color: blue"><a href="" style="text-decoration: none;">TypeScript</a>
<br>
<small>中文手册</small>
</h3>
<p>TypeScript 是由微软开源的编程语言。
它是 JavaScript 的一个超集，而且本质上向这个语言添加了可选的静态类型和基于类的面向对象编程。</p>
</div>
</div>
<div class="col-sm-6 col-md-4 col-lg-3 "
style="width: 265px;height: 352px;margin: 20px;
border:1px solid gainsboro; ">
<div>
<a href=""><img src="https://cdn.jsdelivr.net/npm/@bootcss/www.bootcss.com@0.0.3/dist/img/jqueryapi.png"
width="250" height="130" style="margin-top: 5px;margin-left: -10px"></a>
</div>
<div style="text-align: center;">
<h3 style="color: blue"><a href="" style="text-decoration: none;">jQuery API</a>
<br>
<small>中文手册</small>
</h3>
<p>根据最新的 jQuery 1.11.x 和 2.1.x 版本翻译的 jQuery API 中文文档/手册。</p>
</div>
</div>
<div class="col-sm-6 col-md-4 col-lg-3 "
style="width: 265px;height: 352px;margin: 20px;
border:1px solid gainsboro; ">
<div>
<a href=""><img src="https://cdn.jsdelivr.net/npm/@bootcss/www.bootcss.com@0.0.3/dist/img/nextjs.png"
width="250" height="130" style="margin-top: 5px;margin-left: -10px"></a>
</div>
<div style="text-align: center;">
<h3 style="color: blue"><a href="" style="text-decoration: none;">Next.js</a>
<br>
<small>中文手册</small>
</h3>
<p>Next.js 是一个轻量级的 React 服务端渲染应用框架。</p>
</div>
</div>
<div class="col-sm-6 col-md-4 col-lg-3 "
style="width: 265px;height: 352px;margin: 20px;
border:1px solid gainsboro; ">
<div>
<a href=""><img src="https://cdn.jsdelivr.net/npm/@bootcss/www.bootcss.com@0.0.3/dist/img/babeljs.png"
width="250" height="130" style="margin-top: 5px;margin-left: -10px"></a>
</div>
<div style="text-align: center;">
<h3 style="color: blue"><a href="" style="text-decoration: none;">Babel</a>
<br>
<small>是一个 JavaScript 编译器。</small>
</h3>
<p>Babel 是一个 JavaScript 编译器。Babel 通过语法转换器支持最新版本的 JavaScript 语法。</p>
</div>
</div>
<div class="col-sm-6 col-md-4 col-lg-3 "
style="width: 265px;height: 352px;margin: 20px;
border:1px solid gainsboro; ">
<div>
<a href=""><img src="https://cdn.jsdelivr.net/npm/@bootcss/www.bootcss.com@0.0.3/dist/img/nodejs.png"
width="250" height="130" style="margin-top: 5px;margin-left: -10px"></a>
</div>
<div style="text-align: center;">
<h3 style="color: blue"><a href="" style="text-decoration: none;">Node.js</a>
<br>
<small>中文文档 / 手册</small>
</h3>
<p>Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境
。Node.js 使用了一个事件驱动、非阻塞式 I/O 的模型，使其轻量又高效。</p>
</div>
</div>
</div>
</div>
<div style="height: 189px;border-top:1px solid gainsboro;margin-top:60px; ">
<div style="width: 1200px; height:160px;margin-top: 40px;margin-left: 150px;border-bottom:1px solid gainsboro; ">
<div class="col-md-6 col-lg-6">
<h4><img src="https://cdn.jsdelivr.net/npm/@bootcss/www.bootcss.com@0.0.3/dist/img/logo.png"></h4>
<p style="color: #777;">我们一直致力于为广大开发者提供更多的优质技术文档和辅助开发工具！</p>
</div>
<div class="col-md-6 col-lg-5 col-lg-offset-1">
<div class="row about">
<div class="col-sm-3">
<h4 style="font-size:17px;color:purple; ">关于</h4>
<ul class="list-unstyled">
<li>
<a href="" style="color: #777; ">关于我们</a>
</li>
<li>
<a href="" style="color: #777; ">广告合作</a>
</li>
<li>
<a href="" style="color: #777; ">友情链接</a>
</li>
<li>
<a href="" style="color: #777; ">招聘</a>
</li>
</ul>
</div>
<div class="col-sm-3">
<h4 style="font-size:17px;color:purple; ">联系方式</h4>
<ul class="list-unstyled">
<li>
<a href="" style="color: #777; ">新浪微博</a>
</li>
<li>
<a href="" style="color: #777; ">电子邮件</a>
</li>
</ul>
</div>
<div class="col-sm-4">
<h4 style="font-size:17px;color:purple; ">旗下网站</h4>
<ul class="list-unstyled">
<li>
<a href="" style="color: #777; ">Laravel中文网</a>
</li>
<li>
<a href="" style="color: #777; ">Ghost中国</a>
</li>
<li>
<a href="" style="color: #777; ">BootCDN</a>
</li>
<li>
<a href="" style="color: #777; ">Packagist中国镜像</a>
</li>
</ul>
</div>
<div class="col-sm-2">
<h4 style="font-size:17px;color:purple; ">特别致谢</h4>
<ul class="list-unstyled">
<li>
<a href="" style="color: #777; ">猫云</a>
</li>
<li>
<a href="" style="color: #777; ">京东云</a>
</li>
<li>
<a href="" style="color: #777; ">又拍云</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div>
<ul>
<li style="list-style: none;text-align: center;padding-left:550px;padding-top: 20px;">
<a href="" style="float: left;border-right:1px solid gray; padding-right: 10px;color: gray;">
京ICP备11008151号-6</a></li>
<li style="list-style: none;text-align: center; padding-right:580px;color: gray">
京公网安备11010802014853</li>
</ul>
</div>
</div>
</div>
<a id="scrollUp" href="#top" style="position: fixed; ">
<p>∧</p>
</a>
</body>
</html>
作业4
最新推荐文章于 2023-06-11 12:36:48 发布
9067
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
