移动Web开发——响应式布局（完结）、阿里百秀首页实战

最新推荐文章于 2023-03-14 14:15:02 发布

红人日天

最新推荐文章于 2023-03-14 14:15:02 发布

阅读量1k

点赞数

分类专栏：响应式布局文章标签： html css bootstrap

本文链接：https://blog.csdn.net/zhr_beyond/article/details/114320821

版权

响应式布局（完结）

因为网页实在是访问不了，所以直接用现有的素材做了。

在这里插入图片描述

1.技术选型

方案：采取响应式页面开发方案

技术：bootstrap框架

设计图：采取1280px设计尺寸

2.屏幕划分分析

① 屏幕缩放发现中屏幕和大屏幕布局是一致的，因此我们列定义为 col-md- 即可，md 是970以上的

② 小屏幕布局发生变化，因此我们需要为小屏幕根据需求改变布局

③ 超小屏幕布局又发生变化，因此我们需要为超小屏幕根据需求改变布局

④ 策略：我们先布局 md 以上的 pc 端布局，最后根据实际需求再修改小屏幕和超小屏幕的特殊布局样式

3.搭建文件夹结构

在这里插入图片描述

4.设置视口标签以及初始化样式

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css" />
    <link rel="stylesheet" href="css/index.css">
    <title>阿里百秀首页</title>
  </head>
	<body>
	</body>
</html>

5.body样式

ul {
   
    list-style-type: none;
    margin: 0;
    padding: 0;
}
a {
   
    color: #666;
    text-decoration: none;
}
a:hover {
   
    text-decoration: none;
}
body {
   
    background-color: #f5f5f5;
}
.container {
   
    background-color: #fff;
}
/* 修改container的最大宽度为 1280 根据设计稿来走的 */
@media screen and (min-width: 1280px) {
   
    .container {
   
        width: 1280px;
    }
}

6.左侧部分（header）

html代码

<!-- 左侧 -->
				<header class="col-md-2">
				    <div class="logo">
				        <a href="#">
				            <img src="images/logo.png" alt="">
				            <span class="visible-xs">阿里百秀</span>
				        </a>
				    </div>
				    <div class="nav">
				        <ul>
				            <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><<

最低0.47元/天解锁文章

红人日天

关注

0
点赞
踩
10

收藏

觉得还不错? 一键收藏
3
评论
移动Web开发——响应式布局（完结）、阿里百秀首页实战

响应式布局（完结）因为网页实在是访问不了，所以直接用现有的素材做了。1.技术选型方案：采取响应式页面开发方案技术：bootstrap框架设计图：采取1280px设计尺寸
复制链接

扫一扫

专栏目录