Bootstrap响应式布局案例- -阿里百秀

最新推荐文章于 2023-03-03 20:07:59 发布

是草莓味的啊

最新推荐文章于 2023-03-03 20:07:59 发布

阅读量420

点赞数 1

分类专栏： Web前端文章标签： bootstrap

本文链接：https://blog.csdn.net/weixin_43908649/article/details/120429037

版权

Web前端专栏收录该内容

45 篇文章 0 订阅

订阅专栏

文章目录

1.搭建结构

在这里插入图片描述

2.show.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!-- 要求当前网页使用IE浏览器最高版本的内核来渲染 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- 视口的设置，视口的宽度和设备一致，默认的缩放比例和PC端一致，用户不能自行缩放 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 解决IE678的浏览器对html5新增标签的不识别和浏览器对css3 Media Query（媒体查询）的不识别的问题 -->
    <!--[if lt IE 9]>
        <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]-->
    <!-- 引入bootstrap样式文件 -->
    <link rel="stylesheet" href="./lib/css/bootstrap.min.css">
    <!-- 引入自己的css文件 -->
    <link rel="stylesheet" href="./css/index.css">
</head>
<body>
    <div class="container">
        <div class="row">
            <header class="col-md-2">
                <!-- .logo+.nav 快捷生成 -->
                <div class="logo">
                    <!-- 在xs屏幕下隐藏img，显示span -->
                    <img src="./images/logo.png" class="hidden-xs">
                    <span class="visible-xs">阿里百秀</span>
                </div>
                <div class="nav">
                    <!-- ul>li*5>a -->
                    <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><a href="#" class="glyphicon glyphicon-th">奇趣事</a></li>
                        <li><a href="#" class="glyphicon glyphicon-cutlery">美食杰</a></li>
                    </ul>
                </div>
            </header>
            <article class="col-md-7">
                <!-- 新闻模块 -->
                <div class="news clearfix">   <!-- clearfix清除浮动，是bootstrap的类，由于上面的新闻模块有浮动，底下的发行模块要显示出来就需要清楚浮动 -->
                    <ul>
                        <li>
                            <a href="#">
                                <img src="./uploads/baixiu.png">
                                <p>阿里百秀</p>
                            </a>
                        </li>
                        <li>    
                            <a href="#">
                                <img src="./uploads/gushi.jpg">
                                <p>漫漫豫闽路:唐末固始人移民福建的路线选择</p>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <img src="./uploads/mayun.jpg">
                                <p>最具有影响力的企业家</p>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <img src="./uploads/haitunwan.jpg">
                                <p>海豚湾--哪里还有海豚的家？</p>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <img src="./uploads/haimianbb.jpg">
                                <p>海绵宝宝--充满勇气与力量，幽默而充满想象力</p>
                            </a>
                        </li>
                    </ul>
                </div>
                <!-- 发表模块 -->
                <div class="publish">
                    <div class="row">
                        <div class="col-sm-9">
                            <!-- bootstrap已经将h3预定好了是24px -->
                            <h3>生活馆 关于指甲的10个健康知识 你知道几个？</h3>
                            <!-- class="text-muted"是bootstrap提供的关于文字颜色的样式（灰色） -->
                            <p class="text-muted hidden-xs">alibaixiu 发布于 2015-11-23</p>
                            <p class="hidden-xs">指甲是经常容易被人们忽略的身体部位，事实上从指甲的健康状况可以看出一个人的身体健康状况，快来看看10个暗藏在指甲离的知识把！</p>
                            <p class="text-muted hidden-xs">阅读(2417) 评论(1) 赞(18) 标签:健康/感染/指甲/疾病/皮肤/营养/趣味生活</p>
                            <p class="text-muted visible-xs">阅读(2417) 评论(1) 赞(18)</p>
                        </div>
                        <div class="col-sm-3">
                            <img src="./uploads/nail.jpg" class="hidden-xs">
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-sm-9">
                            <!-- bootstrap已经将h3预定好了是24px -->
                            <h3>生活馆 关于指甲的10个健康知识 你知道几个？</h3>
                            <!-- class="text-muted"是bootstrap提供的关于文字颜色的样式（灰色） -->
                            <p class="text-muted hidden-xs">alibaixiu 发布于 2015-11-23</p>
                            <p class="hidden-xs">指甲是经常容易被人们忽略的身体部位，事实上从指甲的健康状况可以看出一个人的身体健康状况，快来看看10个暗藏在指甲离的知识把！</p>
                            <p class="text-muted hidden-xs">阅读(2417) 评论(1) 赞(18) 标签:健康/感染/指甲/疾病/皮肤/营养/趣味生活</p>
                            <p class="text-muted visible-xs">阅读(2417) 评论(1) 赞(18)</p>
                        </div>
                        <div class="col-sm-3">
                            <img src="./uploads/nail.jpg" class="hidden-xs">
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-sm-9">
                            <!-- bootstrap已经将h3预定好了是24px -->
                            <h3>生活馆 关于指甲的10个健康知识 你知道几个？</h3>
                            <!-- class="text-muted"是bootstrap提供的关于文字颜色的样式（灰色） -->
                            <p class="text-muted hidden-xs">alibaixiu 发布于 2015-11-23</p>
                            <p class="hidden-xs">指甲是经常容易被人们忽略的身体部位，事实上从指甲的健康状况可以看出一个人的身体健康状况，快来看看10个暗藏在指甲离的知识把！</p>
                            <p class="text-muted">阅读(2417) 评论(1) 赞(18) <span class="hidden-xs">标签:健康/感染/指甲/疾病/皮肤/营养/趣味生活</span></p>
                        </div>
                        <div class="col-sm-3">
                            <img src="./uploads/nail.jpg" class="hidden-xs">
                        </div>
                    </div>
                </div>
            </article>
            <aside class="col-md-3">
                <!-- 图片 -->
                <a href="#" class="banner">
                    <img src="./uploads/boke.jpg">
                </a>
                <!-- 热点 -->
                <a href="#" class="hot">
                    <!-- btn btn-primary,不是只有按钮才能使用 -->
                    <span class="btn btn-primary">热搜索</span>
                    <!-- class="text-primary"添加一个蓝色文字样式 -->
                    <h4 class="text-primary">欢迎加入中国博客联盟</h4>
                    <p class="text-muted">这里收录国内各个领域的优秀博客，是一个全人工编辑的开放式博客联盟交流和展示平台......</p>
                </a>
            </aside>
        </div>
    </div>
</body>
</html>

3.index.css

# index.css
ul{
    /* 取消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;
    }
}

/* header,想要把图片顶到角上，消除左侧带来的padding:15px,由于header标签的权重是1，类的权重是10 */
/* .col-md-3带来的padding:15px权重要高，使用！important可以强制将权重提到最高 */
header{
    padding-left: 0!important;
}

.logo{
    background-color: #3595DA;
}

/* 实现图片可以随着窗口的缩小而等比缩小，就让它的宽占父元素的100%即可 */
.logo img{
    /* width: 100%; */
    /* 当变成小屏的时候，logo图片不需要缩放 */
    max-width: 100%;
    height: 80px;
}

.logo span{
    display: block;
    height: 50px;
    line-height: 50px;
    color: #fff;
    font-size: 18px;
    text-align: center;
}

/* 左侧导航栏 */
.nav{
    background-color: #eee;
    border-bottom: 1px solid #ccc;
}
.nav a{             /*bolck将超链接显示为块级元素 */
    display: block; 
    height: 50px;
    line-height: 50px;  /* 文字垂直居中时，高多少，行高就多少 */
    padding-left: 30px;
    font-size: 16px;
}
.nav a:hover{      /* 鼠标滑动时背景颜色变为白色 */
    background-color: #fff;
    color: #333;
}
.nav a::before{   /*添加小图标是在超链接a中加了一个::before==$0,需要给小图标调整一下位置 */
    vertical-align: middle;
    padding-right: 5px;
}
/*当进入小屏幕或超小屏幕后*/
@media screen and (max-width:991px) {
    /* 让小li浮动，并且每个宽度占20% */
    .nav li{
        float: left;
        width: 20%;
    }
    /* 让article距离nav有一个外边距 */
    article{
        margin-top: 10px;
    }
}
/*当进入超小屏幕后让小li中的文字缩小*/
@media screen and (max-width:767px) {
    .nav li a{
        font-size: 14px;
        padding-left: 3px;
    }
    /* 当处于超小屏幕，news板块的第一个li宽度占100%，剩下的占50% */
    .news li{
        width: 50%!important;
    }
    .news li:nth-child(1){
        width: 100%!important;
    }
    .publish h3{
        font-size: 14px;
    }
}
/* 中间新闻部分 */
.news li{         /* 5个小li,4个小的宽度25%，浮动即可 */
    float: left;
    width: 25%;
    height: 128px;
    padding-right: 10px;   /*为了使图片之间有空隙，因为图片无法顶到padding中去，图片宽度设置为100%，空隙就出现了*/
    margin-bottom: 10px;
}
.news li:nth-child(1){  /* 一个大的宽度50% */
    width: 50%;
    height: 266px;     /*这个设置的高度会把上面给所有小li设置的高度刷新*/
}
.news li:nth-child(1) p{  /* 第一个小li的字体有特殊设置 */
    line-height: 41px;     
    font-size: 20px;
    padding: 0 10px;
}
.news li a{
    position: relative;  /* p标签的父标签,子绝父相（子元素相对定位，父元素要绝对定位）*/
    display: block;
    width: 100%;      
    height: 100%;
}
.news li a img{
    width: 100%;
    height: 100%;
}
.news li a p{
    position: absolute;   /* p标签，子元素相对父元素定位*/
    bottom: 0;            /* 因为在a的左下方，所以设置距离底边和左面都是0*/
    left: 0;
    width: 100%;
    height: 41px;
    padding: 5px 10px;      /* 上下0，左右10px，所有的p中的文字都与边框有个内边距*/
    font-size: 12px;
    color: #fff;
    background-color: rgba(0, 0, 0, .5);
    margin-bottom: 0;  /* 去掉p的外边距*/
}
.news li a p:nth-child(4){
    padding-top: 10px;
}

/* 发布模块 */
.publish{
    border-top: 1px solid #ccc;    /* 顶上指定一个边框 */
}
.publish .row{
    border-bottom: 1px solid #ccc;    /* 每一行指定一个边框 */
    padding: 10px 0;
}
.publish .row div img{
    width: 100%;              /* 图片大小跟着屏幕大小变化而变化 */
    margin-top: 10px;
    padding-right: 10px;
}
.banner img{
    width: 100%;
}
.hot{
    display: block;             /* 把超链接变成块级元素*/
    margin-top: 20px;
    padding: 0 20px 20px 20px;  /* 文字的内边距*/
    border: 1px solid #ccc;   /* 边框 */
}
.hot span{
    border-radius: 0;           /* 去掉btn btn-primary带的圆角*/
    margin-bottom: 20px;
}
.hot p{
    font-size: 12px;
}

4.所需图片

请添加图片描述

是草莓味的啊

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
Bootstrap响应式布局案例- -阿里百秀

文章目录1.搭建结构2.show.html3.index.css4.所需图片1.搭建结构2.show.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8">  <meta http-equiv="X-UA-Compatible" content="IE=edge">
复制链接

扫一扫