一、由于案例比较长我们先简单分析首页中header 部分的制做情况。
<!DOCTYPE html>
<html lang="zh-CN"><head>
<meta charset="utf-8">
二、下面表示用最新的的浏览器解析网站代码,为了保证网站解析效果的完整性
<meta http-equiv="X-UA-Compatible" content="IE=edge">
三、下面是浏览器视口的声明,initial-scale代表着初始化缩放为1是代表着不缩放的意思,为了保证1:1提供最佳的效果体验,user-scalabel是用户可缩放的属性设置no
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<title>传智播客 - 安全的互联网微金融资产交易平台</title>
四、对于JS中的某些样式能放在后面的要放在后面,让用户更加快捷的浏览到网页的内容,把DOM树更快的加载完成。提供网页的解析速度。对于网页的样式的CSS文件需要放在header部分。jQuery文件放在body中是可以的。最好不要放在</html>后。
<link rel="stylesheet" href="css/main.css">
五、下面是条件注释,满足条件会执行的操作。前者为了让浏览器兼容H5 后者为了兼容CSS中的媒体查询功能
<!--[if lt IE 9]><script src="lib/html5shiv/html5shiv.min.js"></script>
<script src="lib/respond/respond.min.js"></script>
<![endif]-->
六、下面重点说bootstrap是怎么使用的问题了。我们可到中文bootstrap官网查看。有源码版本可以更改自己喜欢的样式。下载用于生产环境的版本。可以引入到网页中使用。开发项目使用的是压缩版,使用的是bootstrap.css 关于主题的版本暂时不用。
bootstrap怎么用,有时候我们看着就蒙了,其实没有什么,就是在源码中我们需要简单浏览,他的样式的设置。他就是一个帮我们定义了我们开发中常用功能的模块的集合。我们需要关注它定义了那些类,需要使用直接复制粘贴代码,引入到我们的网页代码中就可以。
七、bootstrap定义的板块分类
1.全局CSS样式:表格 表单 按钮 图片 栅格系统