
HTML&CSS
闲逛上海滩
闲逛上海滩
展开
-
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
1,X-UA-Compatible是神马? 文档:https://www.modern.ie/en-us/performance/how-to-use-x-ua-compatible X-UA-Compatible是IE8的一个专有属性,它告诉IE8采用何种IE版本去渲染网页,在html的标签中使用。可以在微软官方文档获取更多介绍。 为什么要用X-UA-Compatible?转载 2017-01-04 21:56:22 · 326 阅读 · 0 评论 -
CSS3 ::selection{}
定义和用法::selection 选择器匹配被用户选取的部分。只能向 ::selection 选择器应用少量 CSS 属性:color、background、cursor 以及 outline。::selection { background-color: #b3d4fc; text-shadow: none;}设置选中文字的原创 2016-07-09 21:09:13 · 357 阅读 · 0 评论 -
em, rem
原创 2016-07-09 20:46:26 · 254 阅读 · 0 评论 -
表格的示例
Report / Transaction CodeFeatures Level of DetailDrill DownDisplay VariantsPCG*NotesActual Line Items KE5ZDocument Line Item Y Y原创 2016-05-30 18:12:27 · 448 阅读 · 0 评论 -
valign属性
valign 属性规定单元格中内容的垂直排列方式。原创 2016-05-30 18:10:18 · 1009 阅读 · 0 评论 -
colspan, rowspan
colspan是跨列,rowspan是跨行,可以看作是网页设计表格中的列和行的一个属性。跨列相当于把两列或者多列合并成一个单元格;跨行同理是把两行或者多行合并成一行;colspan和rowspan分别作用于是网页设计表格的、中。两者的作用都是合并,其主要区别就是一个是水平方向可以合并列,即colspan;垂直方向是合并行,即rowspan。原创 2016-05-30 18:06:06 · 2276 阅读 · 0 评论 -
新闻列表制作小技巧
PS:时间日期的代码要放在左边,这样在ie中时间日期才不会下移。 2014-06-01 【慕客访谈 用户篇】“有为屌丝”在路上 2014-06-01【有奖活动】给父亲的三行书信 20原创 2016-05-29 19:00:26 · 607 阅读 · 0 评论 -
HTML&CSS——琐碎的知识点(1)
1.head部分的标签 ... ... ...2.标签:在和标签之间的文字内容是网页的标题信息,它会出现在浏览器的标题栏中。网页的title标签用于告诉用户和搜索引擎这个网页的主要内容是什么,搜索引擎可以通过网页标题,迅速的判断出网页的主题。3.代码注释 4.注意一段文字一个标签,如在一篇新闻文章中有3段文字,就原创 2016-05-05 17:40:04 · 3741 阅读 · 0 评论 -
常见的块状元素与内联元素
xHTML究竟有多少个标签?绝大部分人都不能得出一个正确的答案,现在就有个机会,自己数数。答案:91个,哈哈,被你找到了~a, abbr, b, base, body, br, dd, div, dl, dt, em, fieldset, form, h1, h2, h3, h4, h5, h6, head, hr, html, i, img, li, link, meta, ol, p,转载 2016-05-29 17:40:09 · 357 阅读 · 0 评论 -
float元素详解
CSS float 浮动属性 本篇主要介绍float属性:定义元素朝哪个方向浮动。目录:1. 页面布局方式:介绍文档流、浮动层以及float属性。2. float:left :介绍float为 left 时的布局方式。3. float:right :介绍float为 right 时的布局方式。4. 相邻元素含有float属性:介绍相邻元素含转载 2016-05-29 17:28:48 · 874 阅读 · 0 评论 -
转义字符大集合
1.> >原创 2016-05-29 14:26:31 · 433 阅读 · 0 评论 -
搜索框设置填充
文字覆盖了右边的背景图片,我们需要设置input的右填充因为放大镜的图片的宽度是25px,所以我们设置padding-right:25px;原创 2016-05-28 18:38:35 · 328 阅读 · 0 评论 -
隐藏元素 display:none visibility: hidden区别
display直接隐藏对应元素而且挤占该元素的空间hidden虽然将元素隐藏了,但是将空间让出来了,不会挤占元素空间.invisible { visibility: hidden;}.hide { display: none !important;}原创 2016-07-09 21:37:31 · 2063 阅读 · 0 评论 -
line-height
简单来说,line-height是行高的意思,height则是定义元素自身的高度。例如下面这段代码文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字如果我们定义.test {line-height:20px;},那么这个元素的实际高度将取决于其中内容的多少,假如文字部分在浏览器里面显示为一行,那么这个div的实际高度原创 2016-07-10 19:39:41 · 390 阅读 · 0 评论 -
dl dt dd
标记定义了一个定义列表,定义列表中的条目是通过使用标记(“definition title”,定义标题)和标记(“definition description”,定义描述)创建的。给出了术语名,标记给出了术语的定义。也就是说用来创建列表中的上层项目,用来创建列表中最下层项目,和都必须放在标志对之间。我们在做列表标题我们在做列表我们在做列表我们在做列表我们在做列表dl代表的是列表原创 2016-06-13 16:45:39 · 510 阅读 · 0 评论 -
ul li本来就是快标签,为什么还要用display:block来修饰
在Internet Explorer 8, Opera 9, Chrome, Firefox 2 & 3, and Safari下,添加display:block会让有序或无序列表中li元素的项目编号消失。但在IE6和IE7下,添加display:block项目符号依旧存在。可能是这个原因 - -原创 2016-11-25 22:32:55 · 3241 阅读 · 0 评论 -
DIV+CSS中标签dl dt dd常用的用法
http://smallpig301.blog.163.com/blog/static/9986093201010262499229/用来创建一个普通的列表,用来创建列表中的上层项目,用来创建列表中最下层项目,和都必须放在标志对之间。 实例一:效果: 源码:body{ font-size转载 2016-11-20 20:38:09 · 639 阅读 · 0 评论 -
class 里面 role属性
role是无障碍阅读,是给有阅读障碍的人设置的属性,有阅读障碍的人可以用读屏软件来解析,跟正常人没多大关系。可以不设置,不设置的话读屏软件就无法解析,有阅读障碍的人也就"看"不了了原创 2016-10-28 22:11:58 · 1100 阅读 · 0 评论 -
time元素和pubdate属性
time元素代表24小时中的某个时刻和某个日期,表示时刻时允许带时差,它可以定义很多格式的时间datetime属性中日期与时间之间需要用T文字分隔,T表示时间;我生日是晚上八点时间加上Z文字表示给机器编码时使用UTC时间标准;我生日是晚上八点加上时差,表示向机器编码另一地区时间,如果是编码本地时间,则不需要添加时差我生日是晚上八点pubdate属性:这是转载 2016-10-23 20:02:35 · 820 阅读 · 0 评论 -
小技巧,logo使用<img>嵌入
原创 2016-07-08 13:34:00 · 1170 阅读 · 0 评论 -
class与id
原创 2016-07-08 13:22:54 · 378 阅读 · 0 评论 -
一个书页卷角的HTML&CSS效果
layOut body{ font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 16px; color: #ED6F6F; background: whites原创 2016-07-18 11:18:30 · 3435 阅读 · 0 评论 -
CSS3媒体查询
随着响应式设计模型的诞生,Web网站又要发生翻天腹地的改革浪潮,可能有些人会觉得在国内IE6用户居高不下的情况下,这些新的技术还不会广泛的蔓延下去,那你就错了,如今淘宝,凡客,携程等等公司都已经在大胆的尝试了这项技术,并完美的应用在了自己的网站上了。再不更新知识你就老了。我今天就总结一下响应式设计的核心CSS技术Media(媒体查询器)的用法。准备工作1:设置Meta标签转载 2016-07-05 17:58:57 · 314 阅读 · 0 评论 -
CSS-Float全解析
经验分享:CSS浮动(float,clear)通俗讲解 很早以前就接触过CSS,但对于浮动始终非常迷惑,可能是自身理解能力差,也可能是没能遇到一篇通俗的教程。 前些天小菜终于搞懂了浮动的基本原理,迫不及待的分享给大家。 写在前面的话: 由于CSS内容比较多,小菜没有精力从头到尾讲一遍,只能有针对性的讲解。转载 2016-07-13 16:12:11 · 403 阅读 · 0 评论 -
li里面嵌套a标签html和css小例子
总效果:html:响应式CSS:/* 网站头部 */header { width: 100%;}header .top { line-height: 3rem; padding: 0 1.5rem; color: #fff; background: #555; bor原创 2016-07-11 11:03:09 · 8986 阅读 · 2 评论 -
响应式网页必备——media媒体查询
@media all and (min-width:xxx) and (max-width:xxx){/*这段查询的all是针对所有设备(有些设备不一定是屏幕,也许是打字机,盲人阅读器)*/}@media only screen and (min-width:xxx) and (max-width:xxx){/*上面针对了所有设备,这段是只(only)针对彩色屏幕设备*/}还有个一是#media原创 2016-07-11 09:08:49 · 1413 阅读 · 0 评论 -
inline-block元素总结
input元素原创 2016-05-28 18:05:37 · 320 阅读 · 0 评论 -
a:link,a:visited,a:hover,a:active
1:解释link:连接平常的状态visited:连接被访问过之后hover:鼠标放到连接上的时候active:连接被按下的时候 详细的: :hover版本:CSS1/CSS2 兼容性:IE4+ NS4+ 语法: Selector : hover { sRules } 说明: 设置对象在其鼠标悬停时的样式表属性。 在转载 2016-05-28 16:32:54 · 303 阅读 · 0 评论 -
HTML&CSS——css中postion的fixed与absolute区别详解
fixed固定定位,参照位置是浏览器窗口的左上角,即坐标点为(0px, 0px)absolute绝对定位,参展位置是离当前元素最近的定位方式为fixed,absolute,relative的祖先原则的左上角,举个例子复制代码代码如下:我的参照坐标是id=p2通过上面的例子,可知h2的绝对定位参照点是转载 2016-05-10 11:31:28 · 625 阅读 · 0 评论 -
HTML&CSS——Position属性四个值:fixed、absolute和relative的区别和用法
用Div+CSS进行网站布局时,做一些浮动层等特殊效果时要考虑到定位问题。这就要用到Position属性等。Position属性有四个值:static、fixed、absolute和relative,后面两个在布局中的定位里是经常用到的,顾名思义,absolute是指绝对定位,即将对象从文档流中拖出,使用left,right,top,bottom等属性进行绝对定位,而其层叠通过转载 2016-05-10 11:27:27 · 700 阅读 · 0 评论 -
CSS清楚浮动float
CSS清除浮动方法集合一、浮动产生原因 - TOP一般浮动是什么情况呢?一般是一个盒子里使用了CSS float浮动属性,导致父级对象盒子不能被撑开,这样CSS float浮动就产生了。浮动产生样式效果截图本来两个黑色对象盒子是在红色盒子内,因为对两个黑色盒子使用了float浮动,所以两个黑色盒子产生了浮动,导致红色盒子不能撑开,这样浮动就产生了。转载 2016-05-10 14:49:14 · 326 阅读 · 0 评论 -
HTML&CSS——选择器中间加空格和逗号的区别?
p span{}选择了P元素下的所有span元素。这是后代选择器,空格是后代选择器的标识符。p,span{}选择了P元素和span元素。这是多元素选择器,同时选择多个元素,元素之间用逗号分隔。转载 2016-04-14 19:06:40 · 15705 阅读 · 0 评论 -
HTML&CSS——margin:0 auto居中
margin后面如果只有两个参数的话,第一个表示top和bottom,第二个表示left和right因为0 auto,表示上下边界为0,左右则根据宽度自适应相同值(即居中)转载 2016-04-14 14:23:19 · 455 阅读 · 0 评论 -
HTML&CSS——nth-child()选择器
实例规定属于其父元素的第二个子元素的每个 p 的背景色:p:nth-child(2){background:#ff0000;}亲自试一试浏览器支持IEFirefoxChromeSafariOpera 所有主流浏览器均支持 :nt转载 2016-04-14 14:13:36 · 543 阅读 · 0 评论 -
HTML&CSS——text-indent:2em详解
记得过去刚开始学习制作页面的时候,要想让一段文字首行缩进两个文字,总是在前面加上8个“ ”,因为过去大家对CSS不熟悉,这种方法实现虽然比较直接,但是文字多的时候会有很多“ ”充斥在代码中,代码显着比较乱,现在我们实现这种效果就简单多了,直接在CSS代码中加入:text-indent:2em;就很容易实现文本段落的缩进~text-indent:2em;解释一下:text转载 2016-04-14 10:52:46 · 16044 阅读 · 0 评论 -
HTML&CSS——css中设定的背景图片无法显示的解决方法
原文链接:http://blog.youkuaiyun.com/houqd2012/article/details/8111815曾经在html中编写网页的时候, 将外部的css样式表链接到网页中,其它像:background-color . padding , margin 等都可以正常起作用,但就是background-image不起作用,而且有时一气之下将background-ima转载 2016-04-13 09:49:55 · 24607 阅读 · 12 评论 -
HTML&CSS——CSS3 Background-size
Background大家一定不会陌生,但是CSS3开始,给这个Background属性增加了几个新的属性值 :Background-size,Background-clip和Background-origin。那么从今天开始分几节内容分别来介绍一下background-size,background-clip,background-origin等新属性。今天的主题是Background-siz转载 2016-04-12 15:04:33 · 711 阅读 · 0 评论 -
HTML&CSS——line-height设置成height使得文字居中
首先行高是文字的字符大小和字符上下的边距决定的,关键就是这个上下的边距是相等的,你可以把行高想象是两条看不见的水平平行线,而在平行线内,字符与平行线上下的边距总是相等的,就是垂直居中的意思。而height这个属性是盒子属性的高度,盒子并没有像行高这样与上下的边距是相等的要求。而是默认在左上角所以不是行高line-height与文字高height一样就能让文字居中,而是应该这样理解,字符本来转载 2016-04-12 14:35:57 · 2569 阅读 · 0 评论 -
HTML&CSS
完成如下的结构:代码如下:This以及以下的代码加了一个BLOCKQUOTE的标签This initiative re-enforces adherence to the policy and is effective December Close FY16. By applying this threshold, we will significantly reduc原创 2016-04-05 14:08:58 · 280 阅读 · 0 评论 -
水平居中,position:relative;left:-50%;
例如下面代码中,inner想要在outer内水平居中,给inner外部添加了一个wrap包裹: class="outer"> class="wrap"> class="inner"> CSS代码为:.wrap{ float:left; position:relative; left:50%; } .outer{ width:300px; hei转载 2016-05-10 13:28:54 · 4308 阅读 · 0 评论