zoukankan      html  css  js  c++  java
  • HTML连载60-水平居中与设计一个团购界面

    一、水平居中

    1.margin:0 auto在绝对定位中就失效了

    2.如何让绝对定位的元素水平居中?

    只需要设置绝对定位元素的left:50%;然后再设置绝对定位元素的margin-left:-元素宽的一半;

    这样就可以完成水平居中了

            div{
    
                50px;/*如果数值为100%,就代表这个div的宽度就是浏览器的整个宽度*/
    
                height:50px;
    
                background-color: red;
    
                position:absolute;
    
                left:50%;/*使用百分比意味着这个绝对定位的块左边距离浏览器一半的距离*/
    
            }
    
     .......省略代码......
    
     <body>
    
    <div></div>
    
    </body>
    
     

    二、团购界面

    注意点:这里的标志以及电脑配置,都是通过设置背景图片和绝对定位、相对定位来​进行配置上的;这里面使用了span这个标签,由于已经脱离了标准流,因此不需要在设置为display:inline-block;了

     
    
    <!DOCTYPE html>
    
    <html lang="en">
    
    <head>
    
        <meta charset="UTF-8">
    
        <title>D155_GroupPurchase</title>
    
        <style>
    
            *{
    
                margin:0px;
    
                padding:0px;
    
            }
    
            div{
    
                width: 500px;
    
                height: 550px;
    
                border:1px black solid;
    
                margin:0 auto;
    
                margin-top:100px;
    
                position:relative;/*这里想要利用子绝父相来进行排版图片的商标和配置的信息*/
    
            }
    
            div img{
    
                width: 500px;
    
                height: 500px;
    
            }
    
            div .brand{
    
                width: 111px;
    
                height: 29px;
    
                background: url("image/laptop_label.jpg") no-repeat -21px -12px;
    
                position:absolute;
    
                left: 20px;
    
                top:0px;
    
            }
    
            div .configuration{
    
                width: 435px;
    
                height: 40px;
    
                background:url("image/laptop_label.jpg") no-repeat -78px -515px;
    
                position:absolute;
    
                left:20px;
    
                top:505px;
    
            }
    
    </style>
    
    </head>
    
    <body>
    
    <div>
    
        <img src="image/laptop.jpg" alt="">
    
        <span class = "brand"></span>
    
        <span class = "configuration"></span>
    
    </div></body>
    
    </html>

    三、源码:

    D154_CenterHorizontally.html

    D155_GroupPurchase.html

    地址:

    https://github.com/ruigege66/HTML_learning/blob/master/D154_CenterHorizontally.html

    https://github.com/ruigege66/HTML_learning/blob/master/D155_GroupPurchase.html

    2.CSDN:https://blog.csdn.net/weixin_44630050

    3.博客园:https://www.cnblogs.com/ruigege0000/

    4.欢迎关注微信公众号:傅里叶变换,个人账号,仅用于技术交流,后台回复“礼包”获取Java大数据学习视频礼包

     

  • 相关阅读:
    嵌入式交叉编译环境的搭建
    linux驱动模块编写规范以及Makefiel文件的编写规范
    socket通信
    傀儡进程脱壳三步曲
    Thymeleaf 学习笔记-实例demo(中文教程)
    IntelliJ IDEA 快捷键
    github团队协作教程
    thymeleaf 学习笔记-基础篇(中文教程)
    二维码的生成
    .Net Core Web Api实践(四)填坑连接Redis时Timeout performing EVAL
  • 原文地址:https://www.cnblogs.com/ruigege0000/p/12131099.html
Copyright © 2011-2022 走看看