一、水平居中

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. 09 : 构造方法 & 代码块

    构造方法 概念 构造方法是一种特殊的方法,它是一个与类同名的方法 对象的创建就是通过构造方法来完成. 其功能主要是完成对象的创建或者对象的初始化 当类实例化new一个对象时会自动调用构造方法 构造方法 ...

  2. python笔记07

    今日内容 深浅拷贝(面试) 文件操作 今日内容 深浅拷贝 v1=[1,2,[34,67,9]] import copy 浅拷贝: 拷贝第一层 v2=copy(v1)---将v1的地址copy,最外层壳 ...

  3. Scrum简介

    1. 什么是Scrum Scrum是一种轻量级的框架,适合于小型的.结合紧密的团队开发复杂的产品.Scrum是二十世纪后期一些软件工程师协同努力的脑力劳动的成果,现已成为技术领域最具魅力的方法.但Sc ...

  4. JavaScript 继承 -JavaScript高级程序设计

    oo(Object Oriented)面向对象 许多oo语言都支持两种继承方式:接口继承和实现继承.接口继承只继承方法签名,而实现继承则继承实际的方法.函数没有签名,在ecmascript中无法实现接 ...

  5. poj2387- Til the Cows Come Home（最短路板子题）

    题目描述 Description Bessie is out in the field and wants to get back to the barn to get as much sleep a ...

  6. 占位 DL

    占位 DL include: DL404

  7. Vs2013以管理员身份运行

    VS快捷方式目录下的devenv.exe 右键->兼容性疑难解答->疑难解答程序->勾选该程序需要附加权限即可,以后每次打开VS时都会以管理员身份运行了!

  8. C# Timer 控件的用法

    一.主要的属性 在 Windows 窗体应用程序中,定时器控件(Timer)与其他的控件略有不同,它并不直接显示在窗体上,而是与其他控件连用. Enabled 属性: 用于设置该Timer控件是否可用 ...

  9. 共享v2射线局域网http代理方法

    问题描述 默认v节点大部分是socks代理,实际使用过程中存在以下问题: 部分浏览器无法支持socks需要走http代理. 局域网内其他设备(手机.PS4等)需要配置代理. 解决方法 1.在PC托盘图 ...

  10. Linq To Sqlite使用心得

    若要使用Linq To Sqlite类库,可以安装Devart Linq Connect Model,如图: 新建这个Model就可以和Linq To Sql一样使用Linq模型,下载地址:https ...