随笔分类 -  HTML/CSS

摘要:原因:简单。 简单就意味着更快的开发速度,更小的维护成本,同时往往具有更好的体验。 一,导航高亮 效果图: 代码: 二,鼠标悬浮时显示 实现方法:把隐藏的对象如子菜单,信息框作为hover目标的子元素或者相邻元素 方法一,使用相邻元素 方法二,使用子元素 三,自定义radio/checkbox的样式 阅读全文
posted @ 2018-05-09 19:56 水墨墨心 阅读(550) 评论(0) 推荐(0)
摘要:定义和使用 使用 @media 查询,你可以针对不同的媒体类型定义不同的样式。 @media 可以针对不同的屏幕尺寸设置不同的样式,特别是如果你需要设置设计响应式的页面,@media 是非常有用的。 当你重置浏览器大小的过程中,页面也会根据浏览器的宽度和高度重新渲染页面。 浏览器支持 表格中的数字表 阅读全文
posted @ 2017-04-12 22:06 水墨墨心 阅读(747) 评论(0) 推荐(1)
摘要:1,常用选择器:元素(标签/简单)选择器、ID选择器、类选择器、后代选择器(可以将类或者ID应用于它们的祖先,然后使用后代选择器来定位) 2,伪类:有时候,我们需要根据文档结构之外的其他条件对元素应用样式,例如表单元素或链接的状态,可以使用伪类选择器来完成: :link和:visited成为链接伪类 阅读全文
posted @ 2017-04-11 22:05 水墨墨心 阅读(835) 评论(0) 推荐(0)
摘要:盒模型代码简写 还记得在讲盒模型时外边距(margin)、内边距(padding)和边框(border)设置上下左右四个方向的边距是按照顺时针方向设置的:上右下左。具体应用在margin和padding的例子如下: margin:10px 15px 12px 14px;/*上设置为10px、右设置为 阅读全文
posted @ 2017-04-01 18:34 水墨墨心 阅读(664) 评论(0) 推荐(0)
摘要:CSS全称为“层叠样式表 (Cascading Style Sheets)” CSS代码语法 css 样式由选择符和声明组成,而声明又由属性和值组成,如下图所示: 选择符:又称选择器,指明网页中要应用样式规则的元素,如本例中是网页中所有的段(p)的文字将变成蓝色,而其他的元素(如ol)不会受到影响。 阅读全文
posted @ 2017-04-01 17:41 水墨墨心 阅读(730) 评论(0) 推荐(0)
摘要:DTD(文档类型定义)是一种机器可读的规则,它们定义XML或HTML的特定版本中允许有什么、不允许有什么。在解析网页时,浏览器将使用这些规则检查页面的有效性并且采取相应的措施。浏览器通过分析页面的DOCTYPE声明来了解要使用哪个DTD,由此知道要使用HTML哪个版本。 选择什么样的DOCTYP X 阅读全文
posted @ 2017-04-01 17:28 水墨墨心 阅读(734) 评论(0) 推荐(0)
摘要:MIME(Multipurpose Internet Mail Extensions)多用途互联网邮件扩展类型。是设定某种扩展名的文件用一种应用程序来打开的方式类型,当该扩展名文件被访问的时候,浏览器会自动使用指定应用程序来打开。多用于指定一些客户端自定义的文件名,以及一些媒体文件打开方式。 它是一 阅读全文
posted @ 2017-04-01 11:12 水墨墨心 阅读(360) 评论(0) 推荐(0)
摘要:由于HTML中缺少相应的元素,很难突出显示人、地点或日期等类型的信息。为了解决这个问题,有一组开发人员决定开发一套标准的命名约定盒标记模式来表示这些数据。这些命名约定基于vCard和iCalendar等现有的数据格式,现在称为微格式(microformat)。请看下面的例子: 什么是微格式 微格式: 阅读全文
posted @ 2017-04-01 10:36 水墨墨心 阅读(1783) 评论(0) 推荐(1)
摘要:所有HTML元素可以看作盒子,在CSS中,"box model"这一术语是用来设计和布局时使用。 CSS盒模型本质上是一个盒子,封装周围的HTML元素,它包括:边距,边框,填充,和实际内容。 盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。 下面的图片说明了盒子模型(Box Model): 阅读全文
posted @ 2017-04-01 09:39 水墨墨心 阅读(530) 评论(0) 推荐(0)
摘要:ID用于标识页面上的特定元素(比如站点导航),而且必须是唯一的。 ID也可以用来标识持久的结构性元素,例如主导航或内容区域。 ID还可以用来标识一次性元素,例如某个链接或表单元素。 一个ID只能应用于页面上的一个元素。 同一个类名可以应用于页面上任意多个元素,因此类的功能强大的多。类非常适合表示内容 阅读全文
posted @ 2017-03-31 19:21 水墨墨心 阅读(3025) 评论(0) 推荐(0)
摘要:简单地说,都是i自加1。区别是,i++是执行完后面的语句才加1;而++i就先做i+1才执行后面的语句。请看下面2个例子: function Foo() { var i = 0; return function() { console.log(i++); } } var f1 = Foo(); ... 阅读全文
posted @ 2017-03-30 21:57 水墨墨心 阅读(572) 评论(2) 推荐(1)
摘要:1,浏览器兼容问题一:不同浏览器的标签默认的margin和padding不同 问题症状:随便写几个标签,不加样式控制的情况下,各自的margin 和padding差异较大。 碰到频率:100% 解决方案: 可以使用Normalize来清除默认样式,具体可参考文章:来,让我们谈一谈 Normalize 阅读全文
posted @ 2017-03-30 21:24 水墨墨心 阅读(27506) 评论(0) 推荐(3)
摘要:一,行内元素与块级元素的区别: 1.行内元素与块级元素直观上的区别二、行内元素与块级元素的三个区别 行内元素会在一条直线上排列(默认宽度只与内容有关),都是同一行的,水平方向排列。 块级元素各占据一行(默认宽度是它本身父容器的100%(和父元素的宽度一致),与内容无关),垂直方向排列。块级元素从新行 阅读全文
posted @ 2017-03-28 21:40 水墨墨心 阅读(30874) 评论(0) 推荐(5)
摘要:伪类和伪元素皆独立于文档结构。它们获取元素的途径也不是基于id、class、属性这些基础的元素特征,而是在处于特殊状态的元素(伪类),或者是元素中特别的内容(伪元素)。区别总结如下: css伪元素 (Pseudo-elements):用于向某些选择器设置特殊效果,是对元素中的特定内容进行设置和操作, 阅读全文
posted @ 2017-03-28 21:08 水墨墨心 阅读(1487) 评论(0) 推荐(0)
摘要:面试中看到这个问题,自己想的不全面,下面整理下,一起学习: 一、CSS元素隐藏 在CSS中,让元素隐藏(指屏幕范围内肉眼不可见)的方法很多,有的占据空间,有的不占据空间;有的可以响应点击,有的不能响应点击。一个一个看。 代码如下: { display: none; /* 不占据空间,无法点击 */ 阅读全文
posted @ 2017-03-27 11:32 水墨墨心 阅读(3592) 评论(2) 推荐(1)
摘要:==用于一般比较, 用于严格比较;==在比较的时候可以转换数据类型, 严格比较,只要类型不匹配就返回flase。举例说明: "1" == true; //true 类型不同,"=="将先做类型转换,把true转换为1,即为 "1" == 1;此时,类型仍不同,继续进行类型转换,把"1"转换为1,即为 阅读全文
posted @ 2017-03-27 11:07 水墨墨心 阅读(912) 评论(0) 推荐(0)
摘要:第一眼看到这个题目,这两个名词都不熟悉,回头查了相关资料,看了下,实际自己之前用过,但是不知道原来有这么两个好听的名字。先看两个例子: 第一个例子的写法叫做渐进增强(progressive enhancement),第二个例子的写法叫做优雅降级(graceful degradation)。(关于渐进 阅读全文
posted @ 2017-03-27 10:50 水墨墨心 阅读(13944) 评论(1) 推荐(3)
摘要:HTML 表单包含表单元素。 <form> 元素定义 HTML 表单 表单元素指的是不同类型的 input 元素、复选框、单选按钮、提交按钮等等。 HTML 表单用于搜集不同类型的用户输入。 <input> 元素是最重要的表单元素。 <input> 元素有很多形态,根据不同的 type 属性。 这是 阅读全文
posted @ 2016-09-13 16:25 水墨墨心 阅读(607) 评论(0) 推荐(1)
摘要:URL - Uniform Resource Locator URL 可以由单词组成,比如 “w3school.com.cn”,或者是因特网协议(IP)地址:192.168.1.253。大多数人在网上冲浪时,会键入网址的域名,因为名称比数字容易记忆。 语法规则: scheme://host.doma 阅读全文
posted @ 2016-09-13 11:38 水墨墨心 阅读(591) 评论(0) 推荐(0)
摘要:定义和用法 <base> 标签为页面上的所有链接规定默认地址或默认目标。 通常情况下,浏览器会从当前文档的 URL 中提取相应的元素来填写相对 URL 中的空白。 使用 <base> 标签可以改变这一点。浏览器随后将不再使用当前文档的 URL,而使用指定的基本 URL 来解析所有的相对 URL。这其 阅读全文
posted @ 2016-09-13 11:34 水墨墨心 阅读(2806) 评论(0) 推荐(0)