HTML连载60-水平居中与设计一个团购界面
一、水平居中
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-水平居中与设计一个团购界面的更多相关文章
- iOS开发：一个高仿美团的团购ipad客户端的设计和实现（功能：根据拼音进行检索并展示数据，离线缓存团购数据，浏览记录与收藏记录的批量删除等）
大致花了一个月时间,利用各种空闲时间,将这个客户端实现了,在这里主要是想记录下,设计的大体思路以及实现过程中遇到的坑...... 这个项目的github地址:https://github.com/wz ...
- Java开源生鲜电商平台-团购模块设计与架构(源码可下载）
Java开源生鲜电商平台-团购模块设计与架构(源码可下载) 说明:任何一个电商系统中,对于促销这块是必不可少的,毕竟这块是最吸引用户的,用户也是最爱的模块之一,理由很简单,便宜. 我的经验是无论是大的 ...
- 浅谈DevExpress<二>：设计一个完整界面（1）
昨天谈了界面的换肤问题,今天拿一个简单的界面来介绍一下怎么设计一个五脏俱全的界面,总体效果如下图(种类的图片随便找的^^):
- iOS UI基础-9.1 UITableView 团购
概述 接下来,我们要做的是团购界面的设计,最张要实现的效果图及项目结构图 团购数据的展示 思路: 系统自带的tableCell不能展示三个文本,不能满足条件,自定义tableCell 每一个 ...
- ecshop 团购点击价格变动
前提:价格阶梯只能设置一级 需要用到: jquery,transport.js(transport_jquery.js),Ajax.call html页面 js代码,还需要插入jquery,trans ...
- swift项目－模仿团购（主界面的搭建，以及首页的一些细节）
以前学习oc的时候写的一个团购的项目,现在学习swift,拿来用swift写一遍,也是连猜带蒙的,一点一点的往上凑. 今天主要是把主要的架子搭起来了. 主要有:UITabBarController,U ...
- iOS_21团购_发送请求【点评】数据
结果表明,一个简单的请求: 用到的点评封装的类: 使用tableView简单展示: // // DealListController.m // 帅哥_团购 // // Created by beyon ...
- webview之如何设计一个优雅健壮的Android WebView？（上）(转)
转接:https://iluhcm.com/2017/12/10/design-an-elegant-and-powerful-android-webview-part-one/ 前言 Android ...
- [每日电路图] 7、设计一个PCB的流程及细节·总结——给外行的同学或刚入行的同学一个宏观鸟瞰电路板设计的大致流程的文章
前言 最近两天使用AD14软件设计了一个蓝牙防丢器电路板(PCB)图纸,中间有一些细节在本文中记录下,方便下次设计PCB时参考.也希望能给外行的同学或刚入行的同学一个宏观鸟瞰电路板设计的大致流程的文章 ...
随机推荐
- 封装 axios
大家是否有印象,在开发项目中,我们往往会把axios给封装起来,写在一个js文件夹里,最后引入的也是js文件夹,而不是直接对axios进行操作,那为什么? 1. 如果一个组件需要请求数据,就要用到ax ...
- Chrome浏览器控制台报Refused to get unsafe header "XXX"的错误
最近在调试后端下载的接口时在浏览器的控制台中发现了红色的错误信息,例如Refused to get unsafe header "XXX":前端是采用XMLHttpRequest对 ...
- 51 nod 1212 无向图最小生成树
http://www.51nod.com/Challenge/Problem.html#problemId=1212 代码 #include<bits/stdc++.h> using na ...
- 4 Values whose Sum is 0 UVA 1152
题目链接:https://vjudge.net/problem/UVA-1152 这题题意就是在四个集合内.每个集合分别里挑一个数a,b,c,d,求a+b+c+d=0有多少种选法. 暴力的话就是四重循 ...
- 分析器错误消息: Reference.svcmap:未能加载文件
-------------- 缺少了:System.Web.Razor.dll
- badge徽章、挂件模版
markdown语法 Gitee卡片 Gitee挂件 Github挂件 Gitee卡片 [,12;// 赋值优先级高于逗号,相当于a=x=2,12是多余的 printf("a=%d",a); 结果:a=2 例2 int x; i ...
- Python读取execl表格
读取execl表格 import xlrd Execl = xlrd.open_workbook(r'Z:\Python学习\python26期视频\day76(allure参数.读excel.发邮件 ...
- javaScript--ECMAScript 6
ECMAScript 6 一.ECMAScript 6 简介 1.ECMAScript 和 JavaScript 的关系 一个常见的问题是,ECMAScript 和 JavaScript 到底是什么关 ...