HTML利用posotion属性定位 小技巧
1.居中效果
父级DIV (index-top )属性设置为 text-align:center;
子级DIV( tabIndex-main)属性设置为 margin:0 auto;
2.左右对齐效果
父级DIV( tabIndex-main)属性设置为 position:relative
子级DIV(city) 跟(search)属性为posotion:absolute
(absolute : 将对象从文档流中拖出,使用 left , right , top , bottom
等属性相对于其最接近的一个最有定位设置的父对象(position:relative)进行绝对定位。
如果不存在这样的父对象,则依据 body 对象。而其层叠通过 z-index 属性定义)
样式:
.index-top {
font-family: "微软雅黑";
font-size: 15px;
color: #f85f48;
background-color:#ffffff;
border-bottom:1rpx solid #e5e5e5;
padding:13px;
text-align:center;
}
.city{
position:absolute;
left:0;
top:0;
}
.tabIndex-main{
margin:0 auto;
position:relative
}
.tab1{
border:1px solid #f85f48;
text-align:center;
padding:2px 15px;
background-color:#f85f48;
color:#ffffff;
}
.tab2{
border:1px solid #f85f48;
text-align:center;
padding:2px 15px;
}
.search{
position: absolute;
width: 20px;
height: 24px;
right: 0;
top: 0;
/* display: -webkit-inline-box; */
background-size: contain;
background-repeat: no-repeat;
background-image:url(图片链接太长,省略)
}
代码如下:
<div class="index-top">
<div class="tabIndex-main">
<div class="city">厦门</div>
<div class="tabIndex">
<span class="tab1">问题</span><span class="tab2">答主</span>
</div>
<div class="search"><div>
</div>
</div>
HTML利用posotion属性定位 小技巧的更多相关文章
- CSS定位小技巧
CSS定位Static 默认定位Relative 相对定位:left 和topposition: relative;/*相对定位*/ left:40px;/*在原来的位置向右移动*/ top:100p ...
- TKE 体验升级:更快上手 K8s 的24个小技巧
作者 王孝威,腾讯云容器产品经理,热衷于为客户提供高效的 Kubernetes 使用方式,为客户极致降本增效服务. 背景 "功能"解决是产品有或者没有一个能力的问题,有了" ...
- iOS 【UIKit-UIPageControl利用delegate定位圆点位置 之 四舍五入小技巧】
在UIScrollView中会加入UIPageControl作为页码标识,能够让用户清楚的知道当前的页数.我们须要优化的一点是让pageControl的小圆点精确的跟着scrollView而定位.我们 ...
- JS前端下载文本文件小技巧:1、download属性;2、借助Blob转换成二进制下载
一.HTML download 与文件下载 如果希望在前端侧直接触发某些资源的下载,最方便快捷的方法就是使用HTML5原生的download属性,例如: <a href="large. ...
- flex开发小技巧集锦
关于flex开发网上有非常多的相关信息介绍,因此我们要想学习关于flex开发的知识信息技能是一件非常简单和方便的事情.而针对于flex开发小编要告诉大家的是一些flex开发小技巧.利用这些小技巧能够有 ...
- Xcode快捷键、小技巧与xib圆角设置
快捷键: 1.StoryBoard技巧 当你想直接在view中选择自己想要的元素时,但是又碍于一个view上叠加的元素太多很难直接选中,那么在这时,你同时按住键盘上的shift和 control键,然 ...
- 【Xamarin挖墙脚系列:代码手写UI,xib和StoryBoard间的博弈,以及Interface Builder的一些小技巧(转)】
正愁如何选择构建项目中的视图呢,现在官方推荐画板 Storybord...但是好像 xib貌似更胜一筹.以前的老棒子总喜欢装吊,用代码写....用代码堆一个HTML页面不知道你们尝试过没有.等页面做出 ...
- 必知的 15 个jQuery小技巧(干货)
jQuery小技巧(干活) 1.返回顶部按钮 你可以利用 animate 和 scrollTop 来实现返回顶部的动画,而不需要使用其他插件. $('a.top').click(function(){ ...
- 代码手写UI,xib和StoryBoard间的博弈,以及Interface Builder的一些小技巧
近期接触了几个刚入门的iOS学习者,他们之中存在一个普遍和困惑和疑问.就是应该怎样制作UI界面.iOS应用是非常重视用户体验的,能够说绝大多数的应用成功与否与交互设计以及UI是否美丽易用有着非常大的关 ...
随机推荐
- WPF一步步开发XMPP IM客户端2:主窗体设计
UI设计方案: 在设计窗体UI之前,先要了解一些主要的接口和帮助类: 对于主窗的左侧列表,容器内的Item必须实现ILeftItem的接口,比如联系人.系统消息.群等,接口包含点击事件 public ...
- php-fpm定时器
php-fpm有三种定时器 1)主进程接收到用户的信号,例如sigusr,主进程执行kill(子进程号,sigquit),的同时,设置定时器,在一个无限循环里如果当前时间 大于或等于 该定时器的过期时 ...
- 【OpenCV3】threshold()函数详解
threshold()函数源码 double cv::threshold( InputArray _src, OutputArray _dst, double thresh, double maxva ...
- docker安装指定版本TAG的镜像
在docker中安装镜像,一般过程是,docker search 软件名称. 本文以tomcat为例,讲解下载指定版本TAG的tomcat. 搜索tomcat镜像 $ sudo docker sear ...
- 【learning】 单调队列与单调栈用法详解
1.单调栈 单调栈是指一个栈内部的元素具有严格单调性的一种数据结构,分为单调递增栈和单调递减栈. 其具有以下两个性质: 1,满足栈底到栈顶的元素具有严格单调性. 2,满足栈的先进后出特性,越靠近栈顶的 ...
- (转)MySQL中show语法
MySQL中show语法 1. show tables或show tables from database_name; -- 显示当前数据库中所有表的名称. 2. show databases; -- ...
- 【Java并发编程】:深入Java内存模型—内存操作规则总结
主内存与工作内存 java内存模型的主要目标是定义程序中各个变量的访问规则,即在虚拟机中将变量存储到内存和从内存中取出变量这样的底层细节.此处的变量主要是指共享变量,存在竞争问题的变量.Java内存模 ...
- CentOS常用命令、快照、克隆大揭秘
不多说,直接上干货! cat是查看文件内容, cp –cp是连目录及件文件都拷贝 cp是拷贝文件 a.txt里的内容是, abc def ghi cat a.txt |grep –v gh ...
- 用python itchat写一个微信机器人自动回复
首先看一下效果: 进入正题: 一.首先要去图灵机器人网站注册一个机器人账号: 链接:http://www.tuling123.com/ 你可以获取自己的图灵机器人apikey 懒得话不注册也可以,我下 ...
- Linux-(diff)
diff 命令 1.命令格式: diff [参数] [文件1或目录1] [文件2或目录2] 2.命令功能: diff命令能比较单个文件或者目录内容.如果指定比较的是文件,则只有当输入为文本文件时 ...