一、水平居中

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

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

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

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

        div{

            width: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="data: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大数据学习视频礼包

HTML连载60-水平居中与设计一个团购界面的更多相关文章

  1. iOS开发:一个高仿美团的团购ipad客户端的设计和实现(功能:根据拼音进行检索并展示数据,离线缓存团购数据,浏览记录与收藏记录的批量删除等)

    大致花了一个月时间,利用各种空闲时间,将这个客户端实现了,在这里主要是想记录下,设计的大体思路以及实现过程中遇到的坑...... 这个项目的github地址:https://github.com/wz ...

  2. Java开源生鲜电商平台-团购模块设计与架构(源码可下载)

    Java开源生鲜电商平台-团购模块设计与架构(源码可下载) 说明:任何一个电商系统中,对于促销这块是必不可少的,毕竟这块是最吸引用户的,用户也是最爱的模块之一,理由很简单,便宜. 我的经验是无论是大的 ...

  3. 浅谈DevExpress<二>:设计一个完整界面(1)

    昨天谈了界面的换肤问题,今天拿一个简单的界面来介绍一下怎么设计一个五脏俱全的界面,总体效果如下图(种类的图片随便找的^^):

  4. iOS UI基础-9.1 UITableView 团购

    概述 接下来,我们要做的是团购界面的设计,最张要实现的效果图及项目结构图      团购数据的展示 思路: 系统自带的tableCell不能展示三个文本,不能满足条件,自定义tableCell 每一个 ...

  5. ecshop 团购点击价格变动

    前提:价格阶梯只能设置一级 需要用到: jquery,transport.js(transport_jquery.js),Ajax.call html页面 js代码,还需要插入jquery,trans ...

  6. swift项目-模仿团购(主界面的搭建,以及首页的一些细节)

    以前学习oc的时候写的一个团购的项目,现在学习swift,拿来用swift写一遍,也是连猜带蒙的,一点一点的往上凑. 今天主要是把主要的架子搭起来了. 主要有:UITabBarController,U ...

  7. iOS_21团购_发送请求【点评】数据

    结果表明,一个简单的请求: 用到的点评封装的类: 使用tableView简单展示: // // DealListController.m // 帅哥_团购 // // Created by beyon ...

  8. webview之如何设计一个优雅健壮的Android WebView?(上)(转)

    转接:https://iluhcm.com/2017/12/10/design-an-elegant-and-powerful-android-webview-part-one/ 前言 Android ...

  9. [每日电路图] 7、设计一个PCB的流程及细节·总结——给外行的同学或刚入行的同学一个宏观鸟瞰电路板设计的大致流程的文章

    前言 最近两天使用AD14软件设计了一个蓝牙防丢器电路板(PCB)图纸,中间有一些细节在本文中记录下,方便下次设计PCB时参考.也希望能给外行的同学或刚入行的同学一个宏观鸟瞰电路板设计的大致流程的文章 ...

随机推荐

  1. Winform递归绑定树节点

    /// <summary> /// 绑定树节点 /// </summary> /// <param name="pid"></param& ...

  2. 二叉树(5)HuffmanTree

    构建一棵 HuffmanTree. 测试代码 main.cpp: #include <iostream> #include "HuffmanTree.h" using ...

  3. 在ASP.NET 中调用 WebService 服务

    一.webservice定义 详见 https://www.cnblogs.com/phoebes/p/8029464.html 二.在ASP.NET MVC 中调用 webservice 1:要调用 ...

  4. 剑指offer 39. 是否为平衡二叉树

    39. 是否为平衡二叉树 题目描述 输入一棵二叉树,判断该二叉树是否是平衡二叉树 任意结点的左右子树高度差不大于1就是平衡二叉树. C++解法 class Solution { public: boo ...

  5. Vue 实例挂载的实现(六)

    Vue 中我们是通过 $mount 实例方法去挂载 vm 的,$mount 方法在多个文件中都有定义,如 src/platform/web/entry-runtime-with-compiler.js ...

  6. Python发带附件的邮件

    python实现发送带附件的邮件 import smtplib from email.mime.text import MIMEText from email.mime.multipart impor ...

  7. 关于vue :style 的几种使用方式

    :style的使用 一 ,最通用的写法 <p :style="{fontFamily:arr.conFontFamily,color:arr.conFontColor,backgrou ...

  8. 利用Marshal来管理非托管资源

    void MarshalChartDemo() { string name = "xuwei"; IntPtr pName = Marshal.AllocHGlobal(name. ...

  9. 【Unity|C#】基础篇(6)——const、readonly、static readonly

    [学习资料] <C#图解教程>(第6章):https://www.cnblogs.com/moonache/p/7687551.html 电子书下载:https://pan.baidu.c ...

  10. 使用acme.sh签发Let's Encrypt的免费数字证书

    --------------安装----------------curl https://get.acme.sh | sh#让alias生效source ~/.bashrc ------------- ...