认识Bootstrap框架
/** * 不失真 */ 方法1：矢量图 方法2：字体图标，特点是纯色显示
/** *Bootstrap */ Bootstrap，中文意思是“引导程序” 时下最流行的响应式布局的开源框架，设计目的是方便程序员开发
/** * Bootstrap的优势 */ 响应式布局，自动显示或隐藏控件 自动切换大图和小图，节省用户流量 国内最流行，不断地更新完善 界面组件美观大方
/** * Bootstrap官方网站 */ http://getbootstrap.com/
/** * Bootstrap中文网站 */ http://v3.bootcss.com/
/** * Bootstrap版本历史 */ 2.3.2 目前停止维护，优点是支持更多浏览器，缺点是代码繁冗，功能较弱,目前基本没人用 3.x.x 最新稳定版，缺点是不支持IE7前的IE和早期的火狐，IE8效果未完善
/** * 项目结构 */
<!doctype html>
<html lang="zh-CN">
<head>
<!--设置字符集-->
<meta charset="UTF-8">
<!--设置视口，声明在移动端的展示方式，-->
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<!--设置浏览器的引擎版本，edge表示最新版-->
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!--引入bootstrap核心CSS-->
<link href="//cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet">
<!--条件注释，满足条件时注释自动失效-->
<!--[if lt IE 9]>
<!--引入html5shiv，使浏览器识别H5标签-->
<script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<!--引入respond，使浏览器支持媒体查询-->
<script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<!--引入自定义CSS-->
<link href="css/index.css" rel="stylesheet">
<title>WeWeZhang</title>
</head>
<body>
<!--引入jquery核心JS-->
<script src="//cdn.bootcss.com/jquery/3.1.0/jquery.js"></script>
<!--引入bootstrap核心JS-->
<script src="//cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.js"></script>
<!--引入自定义JS-->
<script src="js/index.js"></script>
</body>
</html>
/** * reset.css去哪了？ */ Bootstrap.css内部使用Normalize.css，专业的css重置样式库
/** * 两种布局容器 */ Bootstrap内部提供了两种布局容器: <div class="container"></div> <div class="container-fluid"></div> container容器，宽高固定，支持响应式 container-fluid容器，占满视口，不支持响应式
/**
* 媒体查询 mediaquery
*/
@media (max-width:0px) {
.container {
width：100%;
}
}
@media (max-width:750px) {
.container {
width：62px;
}
}
@media (max-width:970px) {
.container {
width：81px;
}
}
@media (max-width:1170px) {
.container {
width：97px;
}
}
body {
font-family: "Helvetica Neue",Helvetica,Microsoft Yahei,Hiragino Sans GB,WenQuanYi Micro Hei,sans-serif;
}
/** * 开发约定 */ 防止样式冲突：加前缀，像“adobe”这种肯定经常发生样式冲突，建议写成“weAdobe” 边线：统一使用盒子的bottom线 防止样式覆盖：统一使用id限定，尽可能使用直接子代选择器
字体图标 优点：放大不会出现锯齿，不会失真 使用方法 1.所有图标都需要一个基类和对应每个图标的类 2.为了设置正确的内补（padding），务必在图标和文本之间添加一个空格 3.创建一个嵌套的 <i> 标签，并将图标类应用到这个 <i> 标签上 4.图标类只能应用在不包含任何文本内容或子元素的元素上
/**
* 字体图标CSS
*/
@font-face {
font-family: 'weFont';
src:
url('../font/xxx.eot') format('embedded-opentype'),
url('../font/xxx.svg') format('svg'),
url('../font/xxx.ttf') format('truetype'),
url('../font/xxx.woff') format('woff');
}
[class^="we-"],[class*=" we-"] {
font-family: 'weFont';
font-style: normal;
}
.we-laughing::before {
content: '\e345';
font-size: 16px;
}
<i class="glyphicon glyphicon-fire"></i>
<!--顶部通栏-->
<header id="weHeader">
<div class="weTopbar">
<div class="container">
<div class="row">
<div class="col-md-2">
<a href="#" class="weStantLink">
<i class="glyphicon glyphicon-fire"></i>
<span>幻剑书盟</span>
<i class="glyphicon glyphicon-chevron-down"></i>
<img src="http://wx4.sinaimg.cn/mw690/005N4zdUgy1fctfhay8ozj30g40hpadd.jpg" alt="美眉" width="100px" />
</a>
</div>
<div class="col-md-5">
<a class="weStantLink" href="#">
<i class="zw-icon-telephone"></i>
<span>4006-89-4006（服务时间：9:00~21:00） 联系在线客服</span>
</a>
</div>
<div class="col-md-2">
<a class="weStantLink" href="#">财富登录</a>
<a class="weStantLink" href="#">常见问题</a>
</div>
<div class="col-md-3">
<a class="btn btn-danger btn-sm " href="#">免费注册</a>
<a class="btn btn-danger btn-sm " href="#">立即登录</a>
</div>
</div>
</div>
</div>
<div class="weNav"></div>
</header>
.weStantLink {
color: #2afffa;
}
.weStantLink:hover {
text-decoration: none;
color: #2afffa;
}
#weHeader {
height: 100px;
background-color: #ff5cec;
}
#weHeader > .weTopbar {
background-color: #35fffa;
border-bottom: 1px solid #e5e8ff;
}
#weHeader > .weTopbar >.container {
background-color: #56ff41;
}
#weHeader > .weTopbar >.container >.row > div {
height: 40px;
line-height: 40px;
text-align: center;
background-color: #ff525e;
}
#weHeader > .weTopbar >.container >.row > div:nth-of-type(2n) {
background-color: #ffcd4d;
}
#weHeader > .weTopbar >.container >.row > div+div {
border-left: 1px solid #4644ff;
}
#weHeader > .weTopbar >.container >.row > div > .weStantLink > img {
display: none;
position: absolute;
top: 30px;
left: 50%;
margin-left: -50px;
}
#weHeader > .weTopbar >.container >.row > div > .weStantLink:hover > img {
display: block;
}
/** * 字体图标的制作 * 境外网站iCOMOON https://icomoon.io
* 点击icoMoon App 点击import icons选择svg文件 选择需要的图标 点击generate font * Preferences设置字体名字类前缀 输入特殊的编码 下载zip解压到项目中的font文件夹下 **/
/**
* Bootstrap静态导航条组件
*/
<nav class="navbar navbar-default navbar-static-top">
<div class="container">
<div class="navbar-header">
<a href="#" class="navbar-brand">幻剑书盟</a>
</div>
<ul class="nav navbar-nav">
<li><a href="#">玄幻</a></li>
<li><a href="#">穿越</a></li>
<li><a href="#">言情</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">我的</a></li>
</ul>
</div>
</nav>
