css实现一个写信的格式
一、目标
目标实现如下效果:
二、完成
1、分析
这个效果看起来很简单,实际上可能并不那么容易实现。
首先是全部东西都居中显示,除了“亲爱的starof”这个称呼的地方。这也是难点,也是本文要重点说的地方。
开始我尝试将“ 亲爱的starof:” 和下面那段文字分别独立成两个段落,一个居左,一个居左。结果当然是不理想的,因为“亲爱的starof”部分其实并不是真正意义上的居左,而是以下面这段文字作为参考的一个居左。现在说说我的实现方法。首先全部文字都用<p>包裹,inline-block显示,然后绝对定位。具体过程如下,各位如有不同见解或实现方式欢迎指点讨论。
2、实现
第一步,代码基础框架如下
全部文字都放在一个<p>标签内。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>demo of starof</title> <style> .top{margin:0 5%; text-align:center; } .top span{color:red; } </style> </head> <body><div class="top"><p class="first"> <span> 亲爱的starof:</span><br/>恭喜您获得快速升级年费资格,您仅需开通<span>4个月</span>会员,即可自动升级为尊贵的年费会员,差额部分享受<span>8折优惠</span>哦!</p></div> </body> </html>
此时效果:
下图为了方便后面对比。
第二步,设在<p>的display为inline-block,实现居中。
因为p本身是个块级元素,我们下一步要以它为参照实现定位。所以需要设在display属性让它大小根据内容而定,同时实现居中。
增加下面css样式。
.top .first{display:inline-block; position:relative; }
效果如下
看起来和上面很像,实际上已经发生了本质变化。
第三步,通过绝对定位实现目标效果。
增加下面css样式。<p>相对定位作为参照,第一个<span>绝对定位。
.top .first{... position:relative; }.first span:first-child{position:absolute; }
此时效果如下:
如果觉得效果不理想,可通过left,top稍微调整一下。
.first span:first-child{position:absolute; left:0; top:-5px; }
这就是我要的效果
第四步,完成其他部分
剩下的就都很简单了,完整代码如下:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>demo of starof</title> <style> .top{margin:0 5%; text-align:center; } .top span{color:red; } .top .first{display:inline-block; position:relative; } .first span:first-child{position:absolute; left:0; top:-5px; } .top input{width:20%; padding:8px 20px; margin:5px; background-color:#e9322a; color:white; font-size:18px; border:1px solid #666; border-radius:5px; } </style> </head> <body><div class="top"><p class="first"> <span> 亲爱的starof:</span><br/>恭喜您获得快速升级年费资格,您仅需开通<span>4个月</span>会员,即可自动升级为尊贵的年费会员,差额部分享受<span>8折优惠</span>哦! </p><div><input type="button" value="立即升级"/><p>已有<span>23919</span>人享此优惠</p></div></div> </body> </html>
3、浏览器兼容性
IE6,IE7不完全支持display:inline-block的写法。具体是对默认是display:block的元素设置display:inline-block无效,对默认是display:inline的元素设置display:inline-block可生效。所以要兼容IE6,IE7可替换标签。
本文作者starof,因知识本身在变化,作者也在不断学习成长,文章内容也不定时更新,为避免误导读者,方便追根溯源,请诸位转载注明出处:http://www.cnblogs.com/starof/p/4832947.html有问题欢迎与我讨论,共同进步。
css实现一个写信的格式相关推荐
- 【4003】通过html+css做一个图片列表的静态页面。
[4003]通过html+css做一个图片列表的静态页面. 学习目标: [ 1]学习前端第三天掌握 html与css(基础选择器,有.无序列表相关)入门知识,梳理今天的学习知识点: [ 2]通过已学知 ...
- 如何用 css 画一个心形
如何用 css 画一个心形 (How to draw hearts using CSS) 用两个长方形切圆角倾斜位移并合并为一个心形 第一步 画一个长方形 (Draw a rectangle) 这个长 ...
- java语言显示运算时间_JAVA语言之ACM日期计算:输入一个日期,格式如:2010 10 24 ,判断这一天是这一年中的第几天...
本文主要向大家介绍了JAVA语言之ACM日期计算:输入一个日期,格式如:2010 10 24 ,判断这一天是这一年中的第几天,通过具体的内容向大家展示,希望对大家学习JAVA语言有所帮助. ACM日期 ...
- PHP框架半透明,CSS设定一个元素半透明
这篇文章主要介绍了用CSS设定一个元素半透明的相关资料,非常不错,具有参考借鉴价值,需要的朋友参考下吧.opacity{ filter:alpha(opacity=50); /* IE */ -moz ...
- html按钮按下效果_【CSS小分享】纯CSS实现一个水波纹效果按钮
前言 如果大家有用过Material Design风格的UI库,那么一定对水波纹按钮很熟悉,我们这次就是使用纯CSS实现一个最简单的水波纹效果按钮,先上成品: 原理 在按钮中放置一个默认隐藏径向渐变的 ...
- button按钮onclick触发不了_手把手教你深入CSS实现一个粒子动效的按钮
按钮(button)可能是网页中最常见的组件之一了,大部分都平淡无奇,如果你碰到的是一个这样的按钮,会不会忍不住多点几次呢? 转载链接: https://github.com/XboxYan/note ...
- html怎么让方块自动旋转,如何使用纯CSS实现一个圆环旋转错觉的动画效果(附源码)...
本篇文章给大家带来的内容是关于如何使用纯CSS实现一个圆环旋转错觉的动画效果,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 效果预览 源代码下载 https://github.com ...
- [css] 用css创建一个三角形,并简述原理
[css] 用css创建一个三角形,并简述原理 width: 0;height: 0;margin: 100px auto;border-top: 50px solid transparent;bor ...
- [css] 用CSS绘制一个三角形
[css] 用CSS绘制一个三角形 .triangle{width: 0;border-bottom: 35px solid lightgreen;border-left: 35px solid tr ...
最新文章
- 004_URL 路由 - 对磁盘文件的请求进行路由
- 【FPGA】SRIO IP核的三层协议的作用?
- 2008年北大核心有效期 计算机类核心(2011-01-31 15:02:46)
- 翻翻git之---溜的飞起的载入效果AVLoadingIndicatorView
- Longest Increasing Subsequence(LIS入门dp)
- 托管 非托管_如何在托管的Kubernetes上备份Neo4J
- [转载]FPGA/CPLD重要设计思想及工程应用(时序及同步设计)
- 数组----数组的拷贝、排序、遍历、引用,console交互
- 二分算法模板及oj练习题题解
- 小米卢伟冰回应“低价误国”;国产统一操作系统 UOS 正全面适配;Vue 2.6.11 发布 | 极客头条...
- Python移植MATLAB的巴特沃斯滤波器,椭圆滤波器
- 3招教你花式导入Excel数据到JMP
- 一起来学k8s 37.二进制k8s集群etcd备份和恢复
- win 10简繁体切换快捷键
- python自动化测试实战-无涯(学习与研究)[一]
- 有4个圆塔,圆心分别为(2,2)、(-2,2)、(-2,-2)、(2,-2),圆半径为1,这4个塔的高度为10m,塔以外无建筑物。今输入任一点的坐标,求该点的建筑高度(塔外的建筑高度为零)
- NOI 模拟试题(一)
- ubuntu1804安装mysql5.7教程
- E.03.22 Learning Apps Have Boomed in the Pandemic. Now Comes the Real Test.
- 准备编译环境,安装gcc,工具make
热门文章
- 安装mysql 10055_Can’t connect to MySQL server on ‘localhost’ (10055) | 学步园
- htmljavascript 事件触发机制
- Jupyter中出现ModuleNotFoundError: No module named ‘matplotlib‘的解决办法
- Save a tree as XML using XmlSerializer
- python 引用传递和值传递(实参,形参)
- Vue:Elementui中的Tag与页面其它元素相互交互的两三事
- 数据中心在2017年的愿望清单
- 六大重点工程构筑兰州大数据产业
- 【CF应用开发大赛】微博社交简历
- 不走寻常路 IBM云计算解决方案解读