首页 博客列表 精选博客 智能问答 chat-GPT 关于我
HTML——阿里百秀案例
发布日期：2021-06-29 11:16:38 浏览次数：2 分类：技术文章

本文共 11949 字，大约阅读时间需要 39 分钟。

阿里百秀

bootstrap

bootstrap：前端开发框架

一、使用
1.创建文件夹
2.创建html骨架
3.引入相关样式
4.书写内容
二、栅格系统
1.把页面布局划分为等宽的列，然后通过列数的定义来模块化页面布局。
2.

①行必须放到container容器里

②实现列的划分需要给列加类前缀
③列大于12，多余的列将会作为整体另起一行
④xs-超小；sm-小；md-中等；lg-大
⑤<768px–width:100%;height:.col-xs-; >=768px–width:750px;height:.col-sm-; >=992px–width:970px;height:.col-md-; >=1200px–width:1170px;height:.col-lg-;
⑥可以同时为一列指定多个设备类名，以便划分不同的份数。如class=“col-md-4 col-sm-6”
⑦每一列默认有左右15px的padding（可用css强制去掉）

3.列嵌套：栅格系统内置的栅格系统将内容再次嵌套，一个列内再分成若干个小列。（列嵌套最好加个行row，这样可以取消父元素的padding，且高度自动和父级一样高）

4.列偏移：col-md-offset-（偏移的份数是12-两个盒子的份数）；如果只有一个盒子且想要居中，则偏移（12-盒子的份数）/2
5.列排序：col-md-push-：推。col-md-pull-：拉。
6.响应式工具：利用媒体查询，针对不同设备进行展示或隐藏内容
隐藏：hidden-xs/sm/md/lg
显示：visible-xs/sm/md/lg

  • 本次的案例用到了栅格系统，因此所有的html代码写在.container的大盒子里。写栅格系统样式的步骤为先写网页宽度时的样式，写完后再根据需求添加页面变化后的样式。

整体效果

效果

案例

前期工作

引入bootstrap样式

设置公共样式

/* 利用媒体查询，修改.container的最大宽度为1280px（根据美工的需求） */@media screen and (min-width:1280px) {
       .container {
           width: 1280px;    }}ul {
       list-style: none;    margin: 0;    padding: 0;}a {
       color: #666;    text-decoration: none;}a:hover {
       color: #666;    text-decoration: none;}

左侧

左侧的内容占2份，分上logo盒子和下导航栏li部分。

   
            
                
    
                
                 
    
        
   
header {
       padding-left: 0!important;    /* 去掉左内边距，header的权重比媒体查询小，无法去除，因此加个!important */}header .logo {
       background-color: #429ad9;}header .logo img {
       /* 当屏幕缩小时有部分图片会被裁剪，显示不全，因此让img的大小为100% */    /* 下面是响应式布局 */    /* 1.图片尺寸太大，设置最大宽度可以缩小图片大小 */    display: block;    max-width: 100%;    /* 2.把img转换为块级元素，用margin居中 */    margin: 0 auto;}/* 响应式布局：当屏幕超小时图片隐藏，事先准备好的span文本显示 */header .logo span {
       display: block;    height: 50px;    line-height: 50px;    text-align: center;    color: #fff;    font-size: 16px;}header .nav {
       background-color: #eee;    border-bottom: 1px solid #ccc;}header .nav ul li a {
       /* 别忘了加display: block;转为块级元素 */    display: block;    height: 50px;    line-height: 50px;    font-size: 16px;    padding-left: 30px;}header .nav ul li a:hover {
       background-color: #fff;    color: #333;}header .nav ul li a::before {
       vertical-align: middle;    padding-right: 5px;}

效果

中间

新闻模块

新闻模块分为5个li，第一个li的宽度为父盒子的50%，其余li的宽度为25%。li里插入图片，宽高为100%，下面的文本部分用p标签进行绝对定位，用margin-bottom消除p的下边距，使p贴合li下边
小技巧：想要实现案例中每个li之间有个空白空隙，只需要把li宽高设置大，然后用内边距padding把li的内容挤小，就能露出白色的空白。

   
                
                
   
active .news {
       margin: 15px 0 10px;}active .news li {
       float: left;    width: 25%;    height: 133px;    padding: 0 10px 10px 0;    /* 设置内边距，把li挤小，留出空白部位 */}active .news li a {
       position: relative;    display: block;    width: 100%;    height: 100%;}active .news ul li img {
       width: 100%;    height: 100%;}active .news ul li p {
       position: absolute;    left: 0;    bottom: 0;    width: 100%;    height: 41px;    margin-bottom: 0;    /* 消除p的下边距，使p贴合li下边 */    padding: 5px 10px;    background-color: rgba(0, 0, 0, .5);    color: #fff;    font-size: 12px;    transition: all .3s;}active .news ul li a:hover p {
       background-color: rgb(253, 120, 120);}active .news ul li:first-child {
       width: 50%;    height: 266px;}active .news ul li:first-child p {
       line-height: 41px;    font-size: 20px;    padding-top: 0;}

发表模块

   
                
                    
    
                    
     
                        一周热门排行                    
                    
     
                            
          
  • 暂无文章!
    •                     
         
                
    
                
                    
    
                    
     
                        热门推荐                    
                    
                     
    
                
                    
    
                    
     
                        最新发布                        24小时更新：0篇   一周更新：0篇                    
                    
                         
                         
                         
                     
    
            
   
        
active .publish h3 {
       margin: 0;    border-bottom: 1px solid #ccc;}active .publish h3 span {
       border-bottom: 2px solid rgb(243, 116, 116);}active .publish .pai ul {
       padding: 20px 0 0;    margin: 0 0 20px;}active .publish .tui ul {
       padding: 15px 0 0;}active .publish .tui ul li {
       width: 25%;    float: left;    margin-bottom: 20px;    height: 175px;    overflow: hidden;}active .publish .tui ul li:hover a {
       color: orange;}active .publish .tui ul li a {
       display: block;    margin-right: 10px;    /* position: relative; */    color: #666;}active .publish .tui ul li img {
       display: block;    max-width: 100%;    margin-bottom: 5px;    height: 132px;}active .publish .fa h3 em {
       float: right;    font-style: normal;    line-height: 25px;    font-size: 14px;    color: #555;}active .publish .fa article {
       padding: 25px 0;    border-bottom: 1px solid #ccc;}active .publish .fa article h3 {
       margin-bottom: 10px;    border: 0;}active .publish .fa article div {
       margin: 0;    padding: 0;}/* 多行文本溢出省略号显示 */active .publish .fa article .col-sm-9 p {
       overflow: hidden;    text-overflow: ellipsis;    display: -webkit-box;    -webkit-line-clamp: 4;    -webkit-box-orient: vertical;}active .publish .fa article .col-sm-9 span,active .publish .fa article .col-sm-9 a {
       margin: 0 20px 0 0;    font-size: 12px;}active .publish .fa article .col-sm-9 a::before {
       vertical-align: middle;    padding-right: 5px;}

右侧

   
aside .meng {
       margin: 15px 0;}aside .meng img {
       width: 100%;    height: 100%;}aside .hotfind {
       position: relative;    width: 100%;    height: 145px;    padding: 0 20px;    border: 1px solid #ccc;}aside .hotfind:hover {
       border: 1px solid rgb(255, 53, 53);}aside .hotfind .re {
       position: absolute;    top: 0;    left: 20px;    width: 50px;    height: 25px;    line-height: 25px;    text-align: center;    font-size: 15px;    background-color: rgb(255, 53, 53);    color: #fff;}aside .hotfind h3 {
       margin-top: 50px;    color: rgb(255, 53, 53);}aside .hotfind p {
       color: #555;    font-size: 12px;    overflow: hidden;    text-overflow: ellipsis;    display: -webkit-box;    -webkit-line-clamp: 2;    -webkit-box-orient: vertical;}aside .newest h3 {
       margin-bottom: 0;    border-bottom: 1px solid #ccc;}aside .newest h3 span {
       border-bottom: 2px solid rgb(255, 53, 53);}aside .newest article a {
       display: block;    width: 100%;    height: 80px;    padding-top: 10px;    color: black;    border-bottom: 1px solid #ccc;}aside .newest article a p {
       margin-bottom: 0;}aside .newest article a:hover p {
       color: rgb(255, 53, 53);}aside .newest article a:hover {
       background-color: rgb(223, 219, 219);}aside .newest article a span {
       font-size: 12px;    color: #555;}aside .newest article a img {
       display: block;    float: right;    width: 80px;    height: 60px;}

响应式布局

@media screen and (max-width:991px) {
       /* 响应式布局：当屏幕为 小 或 超小 时，nav里的li浮动，宽度为20% */    .nav li {
           float: left;        width: 20%;    }    /* 响应式布局：当屏幕为 小 或 超小 时，header里的li左内边距为5px */    header .nav li a {
           padding-left: 5px!important;    }}@media screen and (max-width:767px) {
       /* 响应式布局：当屏幕为 超小 时，.nav里的文本大小为10px */    .nav a {
           font-size: 10px!important;    }    /* 响应式布局：当屏幕为 超小 时，.news里的第一个li独占一行，剩下四个一行两个 */    active .news li:first-child {
           width: 100%!important;    }    active .news li {
           width: 50%!important;    }    .fa article a h3 {
           font-size: 16px!important;    }}

效果

转载地址：https://blog.csdn.net/zx2014567296/article/details/117452908 如侵犯您的版权，请留言回复原文章的地址，我们会给您删除此文章，给您带来不便请您谅解！

上一篇：JavaScript——简易ATM取款机
下一篇：HTML——携程旅游案例

发表评论

最新留言

留言是一种美德,欢迎回访！
[***.207.175.100]2024年04月04日 17时47分27秒

关于作者

    喝酒易醉，品茶养心，人生如梦，品茶悟道，何以解忧？唯有杜康！
-- 愿君每日到此一游！

推荐文章

如何才能学好单片机？ 2019-04-29
一根网线有这么多“花样”，你知道吗？ 2019-04-29
雷军1994年写的诗一样的代码，我把它运行起来了！ 2019-04-29
2020年大学生电子设计竞赛，B题，单相在线式不间断电源，详细技术方案！ 2019-04-29
大佬终于把鸿蒙OS讲明白了，收藏了！ 2019-04-29
C语言指针，这可能是史上最干最全的讲解啦（附代码）！！！ 2019-04-29
国内大陆有哪些芯片公司处于世界前10？一起看看！ 2019-04-29
单精度、双精度、多精度和混合精度计算的区别是什么? 2019-04-29
中国35位“大国工匠”榜单出炉！西工大、西电合计占半壁江山！清华仅1人！... 2019-04-29
知乎热议：嵌入式开发中C++好用吗？ 2019-04-29
2020，Python 已死？ 2019-04-29
漫画：程序员相亲？哈哈哈哈哈哈 2019-04-29
30种EMC标准电路分享，再不收藏就晚了！ 2019-04-29
这100道Linux常见面试题，看看你会多少？ 2019-04-29
十年硬件老司机，结合实际案例，带你探索单片机低功耗设计！ 2019-04-29
“2020年嵌入式软件秋招经验和对嵌入式软件未来的一点思考” 2019-04-29
嵌入式的坑在哪方面? 2019-04-29
三种常见嵌入式设备通信协议 2019-04-29
硬核，这个充电宝居然烧煤气！ 2019-04-29
什么是模块化代码？如何写？ 2019-04-29
白红宇的个人博客 - 记录点点滴滴的事 - 您是第 309923799 位访客
访问时间: 2024-05-02 06:45:03 访问IP: 18.118.102.225     Copyright © 2020 - 2023 blog.css8.cn 京ICP备2021015314号-1 手机版