1 技术选型
方案:我们采取响应式页面开发方案
技术:bootstrap框架
设计图:本设计图采用1280px设计尺寸
2 页面布局分析
- 屏幕缩放发现大屏幕和中屏幕布局一致,因此列定义为col-md-即可。
- 屏幕缩放发现小屏幕布局发生变化,因此需要为小屏幕根据需求改变布局。
- 屏幕缩放发现超小屏幕布局发生变化,因此需要为超小屏幕根据需求改变布局。
- 策略:我们先布局md以上的pc端布局,最后更加需求再修改小屏幕和超小屏幕布局。
3 页面制作
Bootstrap使用4步曲:
3.1 创建文件夹结构
- 一级:alibaixiu
- 二级:alibaixiu(css /images /upload /bootstrap /index.html)
三级:css(index.css); bootstrap(css /fonts / js)
3.1 创建html骨架结构和引入相关样式文件
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!--[if lt IE 9]>
解决ie9以下浏览器对html5新增标签不识别,并导致css不起作用的问题 这里采用的线上的形式,也可以下载下来采用线下的形式
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
解决ie9以下浏览器对css3 Media Query 的不识别问题
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<!-- 一定不要忘记引入bootstrap的样式文件 -->
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
<!-- 引入首页的css文件 -->
<link rel="stylesheet" href="css/index.css">
<title>Document</title>
</head>
3.2 书写内容
3.2.0 公共样式
3.2.1 修改container宽度
本设计图采用的是1280px设计,而bootstrap里面的container宽度最大为1170px,因此需要手动修改下container宽度,于是在index.css中写入:
/* 修改container的最大宽度为 1280px */
@media screen and (min-width: 1280px) {
/* 其他的屏幕宽度还是根据bootstrap自己默认的样式 划分 */
.container {
width: 1280px;
}
}
3.2.2 整体结构搭建
<body>
<div class="container">
<!-- container默认两边有padding值,而row可以消除containtainer两边的padding值 即row里面的内容可以占据container的padding部分-->
<div class="row">
<!-- header -->
<header class="col-md-2">左侧</header>
<!-- article -->
<article class="col-md-7">中间</article>
<!-- aside -->
<aside class="col-md-3">右侧</aside>
</div>
</div>
</body>
3.2.3 左侧部分
<!-- header -->
<header class="col-md-2">
<!-- 每个列col也有一个默认的左右padding值导致里面的内容无法贴合该盒子 所以先手动修改左边的padding值 右边的先不改-->
<!-- 注意:修改的时候不要用col-md-2这个类名,这个类名不可动 应该利用header标签 同时注意提权 可以在审查元素里面查看-->
<div class="logo">
<a href="#">
<img src="images/logo.png" alt="">
</a>
</div>
<div class="nav">
<ul>
<!-- bootstrap的官网的组件中找到照相机字体图标对应的类名(glyphicon glyphicon-camera)引入即可 -->
<!-- 字体图标的实现原理可以在检查元素中查看:a里面有一个before(bootstrap已经内部设定好的) 只要给a添加这个样式,就会给a生成一个before的伪元素 即在伪元素里将这个字体图标设定好了-->
<li><a href="#" class="glyphicon glyphicon-camera">生活馆</a></li>
<li><a href="#" class="glyphicon glyphicon-picture">自然汇</a></li>
<li><a href="#" class="glyphicon glyphicon-phone">科技湖</a></li>
<li><a href="#" class="glyphicon glyphicon-gift">奇趣事</a></li>
<li><a href="#" class="glyphicon glyphicon-glass">美食节</a></li>
</ul>
</div>
</header>
/* header */
header {
padding-left: 0!important;
}
.logo {
/* 由于插入的logo.png是透明的,所以需要为其添加背景颜色 */
background-color: #429ad9;
}
.logo img {
/* 保证图片等比例缩放 */
width: 100%;
}
.nav {
background-color: #eee;
border-bottom: 1px solid #ccc;
}
.nav a {
display: block;
height: 50px;
line-height: 50px;
padding-left: 30px;
font-size: 16px;
}
.nav a:hover {
background-color: #fff;
color: #333;
}
.nav a::before {
/* 在before中修改字体图标位置 */
vertical-align: middle;
padding-right: 5px;
}
下次看第20节