精华内容
下载资源
问答
  • css绝对布局

    2018-06-20 09:57:24
    css 想在哪在哪position:absolute;left:50px;top:100px;
    css 
    想在哪在哪
    position:absolute;
    left:50px;
    top:100px;
    展开全文
  • relative 相对布局,正常的,从上到下。绝对布局absolute,就像不占位置,透明了一样,会和别的重合 转载于:https://www.cnblogs.com/yangAL/p/5071641.html

    relative 相对布局,正常的,从上到下。绝对布局absolute,就像不占位置,透明了一样,会和别的重合

    转载于:https://www.cnblogs.com/yangAL/p/5071641.html

    展开全文
  • 转载自:CSS经典布局之Sticky footer布局 何为Sticky footer布局?  我们常见的网页布局方式一般分为header(页头)部分,content(内容区...

    何为Sticky footer布局?

      我们常见的网页布局方式一般分为header(页头)部分,content(内容区)部分和footer(页脚)部分。当页头区和内容区的内容较少时,页脚区不是随着内容区排布而是始终显示在屏幕的最下方。当内容区的内容较多时,页脚能随着文档流撑开始终显示在页面的最下方。这就是传说中的Sticky footer布局。

    Sticky footer布局实现

    一、负 margin 布局方式

    <div class="detail">
        <div class="wrapper clearfix">
            <div class="title">
                <h1>这里是头部</h1>
            </div>
            <div class="main">
            <p>这里是main content区域...</p>
            <p>这里是main content区域...</p>
            <p>这里是main content区域...</p>
            <p>这里是main content区域...</p>
            </div>
        </div>
    </div>  
    <div class="footer">
        <p>© 2017 No rights reserved.</p> 
        <p>Made with ♥ by an anonymous pastafarian.</p> 
    </div>
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17

    !!!特别说明!!!:使用这个布局的前提,就是footer要在总的div容器之外,footer使用一个层,其它所有内容使用一个总的层。如果确实需要到添加其它同级层,那这个同级层就必须使用position:absolute进行绝对定位。

    * {margin: 0; padding: 0; text-align: center;}
    html,body,.detail {height: 100%;}
    body>.detail {height: 100%; min-height: 100%;}
    .main {padding-bottom: 64px;}
    .footer {position: relative; margin-top: -64px; height: 64px; clear: both; background-color: red;}
    
    .clearfix::after {    /* 测试于两栏悬浮布局 */
        display: block;
        content: ".";
        height: 0;
        clear: both;
        visibility: hidden;
    }
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13

    PC端效果图:

    这里写图片描述
    移动端效果图:
    这里写图片描述

    二、flex 布局方式

    <header> 
        <h1>Site name</h1> 
    </header> 
    <div class="main"> 
        <p>Bacon Ipsum dolor sit amet...</p> 
        <p>Bacon Ipsum dolor sit amet...</p>
        <p>Bacon Ipsum dolor sit amet...</p>
        <p>Bacon Ipsum dolor sit amet...</p>
    </div> 
    <footer> 
        <p>© 2017 No rights reserved.</p> 
        <p>Made with ♥ by an anonymous pastafarian.</p> 
    </footer>
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    * {margin: 0; padding: 0;}
    body{display: flex; flex-flow: column; min-height: 100vh; overflow:auto;}
    h1{font-size: 60px; text-align: center;}
    p{font-size: 24px; text-align: center;}
    .main{flex:1;}   /* 若不懂请看本文末尾的链接 */
    footer{background-color: red;}
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6

    PC端效果图:
    这里写图片描述
    移动端效果图:
    这里写图片描述
    flex布局结构简单,代码精简。因为flex存在着兼容性,所以在使用这种方式布局时需要注意。


    若不懂flex: 1;请跳转 【CSS】由 flex: 1; 引发的思考

    展开全文
  • css相对布局和绝对布局的案例

    千次阅读 2018-10-31 10:41:20
    今天学习了一下css,感觉要记录一下常见案例。 简单的商品展示布局,如图: 代码如下: &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset=&...

    今天学习了一下css,感觉要记录一下常见案例。
    简单的商品展示布局,如图:
    在这里插入图片描述
    代码如下:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style type="text/css">
            *{
                margin: 0px;
                padding: 0px;
            }
          .box1{
              width: 275px;
              height: 283px;
              border: 1px solid #ff7e00;
              margin: 100px;
              position: relative;
          }
            .box1 .image img{
                width: 275px;
                height: 175px
            }
            .dtc{
                width: 52px;
                height: 28px;
                background: url("assets/img/icons.png") no-repeat -108px 0;
                left: 9px;
                top: -9px;
                position: absolute;
            }
            .myy{
                width: 52px;
                height: 28px;
                background: url("assets/img/icons.png") no-repeat -54px 0;
                left: 61px;
                top: -9px;
                position: absolute;
            }
            .xd{
                width: 52px;
                height: 28px;
                background: url("assets/img/icons.png");
                left: 113px;
                top: -9px;
                position: absolute;
            }
            .box1 h3{
                width: 275px;
                height: 36px;
                line-height: 36px;
                background: #000000;
                color: #ffffff;
                font-size: 14px;
                top: 139px;
                position: absolute;
                opacity: 0.9;
            }
            .box1 h4{
                font-size: 14px;
                overflow: hidden;
                text-overflow:ellipsis;
                white-space: nowrap;
            }
            .txt{
                overflow: hidden;
                text-overflow:ellipsis;
                font-size: 14px;
            }
            .price{
                width: 275px;
                height: 36px;
                line-height: 36px;
                padding: 0 15px;
                position: absolute;
                bottom: 15px;
            }
            .price .new {
                color:  #ff7e00;
            }
            .price .new span{
                font-size: 24px;
            }
            .price .old{
                color: #8c939d;
    
            }
            .price .sold{
               float: right;
               padding-right: 30px;
                color: #8c939d;
            }
            .price .sold .sold_num{
                color:  #ff7e00;
            }
    
        </style>
    </head>
    <body>
        <div class="box1">
            <span class="dtc"></span>
            <span class="myy"></span>
            <span class="xd"></span>
            <p class="image">
                <img src="assets/img/mm.jpg">
            </p>
            <h3><span style="padding-left: 15px;">奶茶</span></h3>
            <h4><span style="padding-left: 15px;">奶茶奶茶奶茶奶茶奶茶奶茶奶茶奶茶奶茶奶茶奶茶奶茶奶茶奶茶</span></h4>
            <div class="txt"><span style="padding-left: 15px;">奶茶奶茶奶茶奶茶奶茶奶茶奶茶</span></div>
            <div class="price">
                <span class="new">¥<span>85</span></span>
                <del class="old">¥100</del>
                <span class="sold">已售<span class="sold_num">10</span></span>
            </div>
        </div>
    </body>
    </html>
    
    

    所需的图标:
    在这里插入图片描述

    在这里插入图片描述

    展开全文
  • 1. CSS实现绝对布局的垂直水平居中 1. CSS实现绝对布局的垂直水平居中 <html> <head> <style> .mydiv{ //实现水平垂直居中 position:absolute; transform:translate(50%,50%); left:50%; top...
  • 接下来DIVCSS5为大家介绍position绝对定位方法布局以上小的案例。 一、用到CSS样式和HTML标签及相应解释 - TOP 1、要用到CSS样式单词及解释 position:绝对定位样式实现DIV定位布局其设置值absolute和rela
  • CSS_绝对布局

    2017-09-21 14:27:06
    <link rel="stylesheet" type="text/css" href="css/new_file.css"/> <div class="da"></div> <div class="db"></div> <div class="dc"></div>  
  • CSS网页布局教程:绝对定位和相对定位。通过本文你绝对能理解绝对定位和相对定位了,如果你看完本篇文章还不理解绝对定位和相对定位的话,我看你就别学CSS了!哈哈! 概要: 本文主要描述XHTML中相对定位和绝对定位...
  • 何为Sticky footer布局?   我们常见的网页布局方式一般分为header(页头)部分,content(内容区)部分和footer(页脚)部分。当页头区和内容区的内容较少时,页脚区不是随着内容区排布而是始终显示在屏幕的最下方...
  • CSS网页布局

    2021-01-19 19:05:03
    CSS布局很容易。如果你已经习惯用表格布局的话,起先会感觉比较困难。其实不难,只不过动机不同,并且在实践中更有意义。 你可以把这一页面的各个部分当作独立的版块来看待,无论你选择哪一块。你可以绝对或相对...
  • CSS中,实现分栏布局有两种方法。第一种方法是使用四种CSS定位选项(absolute 、static、relative和fixed)中的绝对定位(absolute positioning),它可以将文档中的某个元素从其原本位置上移除,并重新定位在期望的...
  • CSS常见布局

    2020-10-27 14:41:08
    CSS常见布局 单列布局: header,content,和footer等宽的的单列布局 header与footer等宽,content略窄的单列布局 两列自适应布局 float+overflow:hidden Flexbox布局(display:flex) Grid布局(display:grid...
  • 本文主要描述XHTML中相对定位和绝对定位各自的... CSS网页布局教程:绝对定位和相对定位。通过本文你绝对能理解绝对定位和相对定位了,如果你看完本篇文章还不理解绝对定位和相对定位的话,我看你就别学CSS了!哈哈!...
  • CSS布局-绝对尾部

    2018-03-19 06:17:10
    title: CSS布局-绝对尾部(Css Sticty Footer) date: 2017年9月10日 17:49:51 tags: css categories: 教程 author: "JiaWei" 当做一个页面时,如果页面内容很少,不足于填充一屏的窗口区域,通过Css Sticty...
  • HTML布局CSS绝对定位

    2016-05-14 13:12:05
    [align=center]HTML布局CSS绝对定位[/align] [b]1.1 CSS绝对定位——position[/b] [b]1.1.1语法[/b] position:static; 无特殊定位,对象遵循HTML定位规则。 position:absolute; 将对象从文档流中拖出(即...
  • 很多人对CSS布局有困惑,实际的应用场景中由于布局种类多难以选择。今天我花些时间总结下自己对CSS布局的理解,分析下了解各种布局的优劣,同时希望能分享给初入前端的朋友们一些在布局上的经验,如果有那些地方...
  • CSS经典布局

    2020-11-18 15:26:18
    css经典布局一、圣杯布局1. flex弹性布局2. 绝对定位3. float浮动布局二、双飞翼布局三、table布局四、calc 一、圣杯布局 1. flex弹性布局 ①父盒子设置flex布局 ②左右盒子flex属性的拓展和收缩比例为0、1,基准值...
  • CSS定位属性 position:把元素放置到一个静态的、相对的、绝对的、或固定的位置中。 top:定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。 right:定义了定位元素右外边距边界与其包含块右边界...
  • CSS中的绝对布局

    2016-10-03 21:52:30
    元素3 被设置成绝对定位,代码如下:一定要注意,局对定位的元素是相对于父节点而言被设置成绝对定位的元素会被流完全忽视,并且绝对定位的元素的边界不会影响其它块元素中包含的内联元素的流向FR:徐海涛(Hunk Xu)
  • CSS居中布局

    2020-12-28 22:30:02
    CSS居中布局 水平居中元素: 通用方法,元素的宽高未知 方式一:CSS3 transform .parent { position: relative; } .child { position: absolute; left: 50%; transform: translateX(-50%); } 方式二:Flex ...
  • CSS之页面布局之四(绝对布局

    千次阅读 2014-11-17 13:11:59
    绝对布局(Absolute Layout)和冻结布局(Frozen Layout)间的就是凝胶布局(Jello Layout)
  • CSS常用布局

    2018-05-28 15:54:00
    CSS常用布局 定位布局 什么是定位 定位允许您从正常的文档流布局中取出元素,并使它们具有不同的行为,例如放在另一个元素的上面,或者 始终保持在浏览器视窗内的同一位置。 定位的属性值 静态定位 相对定位 绝对...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 3,025
精华内容 1,210
关键字:

css绝对布局