一、水平居中

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. 【Python可视化】超详细Pyecharts 1.x教程，让你的图表动起来～

    前言 pyecharts 是一个用于生成 Echarts 图表的Python库.Echarts是百度开源的一个数据可视化 JS 库,可以生成一些非常酷炫的图表. Pyecharts在1.x版本之后迎来 ...

  2. MySQL的去重+列的表达式

    MySQL的去重+列的表达式 1. 去重 作用:去除SELECT查询出来的结果中重复的数据,重复的数据只显示一条. SELECT * FROM `repeat_num`                 ...

  3. unrecognized import path "golang.org/x/*"的解决办法

    由于国内网络原因,因此访问https://golang.org/网站会被限制.所以在go get下载其他第三方包的时候,如果这个第三方包又引用了https://golang.org/x/下的包,通常会 ...

  4. Xshell 5

    Xshell 5安装步骤(带安装包):http://www.cnblogs.com/ysocean/p/7702243.html

  5. glog入门demo

    glog 一. 下载与安装 git clone https://github.com/google/glog.git cd glog ./autogen.sh ./configure make mak ...

  6. H5与native 普及

    H5与native 普及: H5是基于web,native基于客户端native是使用原生系统内核的,相当于直接在系统上操作.,是我们传统意义上的软件,更加稳定.但是H5的APP先得调用系统的浏览器内 ...

  7. 剑指offer系列——59/60.按之字形顺序打印二叉树/把二叉树打印成多行

    Q:请实现一个函数按照之字形打印二叉树,即第一行按照从左到右的顺序打印,第二层按照从右至左的顺序打印,第三行按照从左到右的顺序打印,其他行以此类推. A:BFS,偶数层reverse vector&l ...

  8. [SDOI2014] 重建 - 矩阵树定理,概率期望

    #include <bits/stdc++.h> #define eps 1e-6 using namespace std; const int N = 55; namespace mat ...

  9. java-判断年份是不是闰年

    if ((year%4==0)&&(year%100!=0)||(year%400==0)) {//是闰年 leapYear = true; }

  10. （转）Boyer-Moore算法

    转自:Boyer-Moore算法 一．简述 在当前用于查找子字符串的算法中,BM(Boyer-Moore)算法是当前有效且应用比较广的一中算法,各种文本编辑器的“查找”功能(Ctrl+F),大多采用B ...