随笔分类 -  HTML/CSS

CSS 响应式设计
摘要：响应式设计是指在不同分辨率的设备中，网页布局可以自适应的调整。这种弹性化的布局使网站在不同设备中的布局都比较合理，可以为不同终端的用户提供更加舒适的界面和更好的用户体验，其根本理念是使原本 PC 上的网站兼容手机和平板。简单理解就是可以让一个网站兼容多个终端，而不是为每个终端做一个特定的版本，响应式 阅读全文
posted @ 2016-03-16 21:56 彼岸时光 阅读(2512) 评论(2) 推荐(0)
DIV+CSS 网页布局之：混合布局
摘要：在了解了一列、两列和三列布局之后，混合布局也就不难理解了，混合布局也可以叫综合型布局，那么混合布局就可以在一列布局的基础之上，分为两列布局，三列布局，网页布局的结构普遍都是三列布局，但是在三列布局的基础上，可以根据实际需求，对网页再进行划分。 固定宽度的混合布局结构，同固定宽度的三列布局模式相同。 阅读全文
posted @ 2016-03-14 22:28 彼岸时光 阅读(6560) 评论(0) 推荐(0)
DIV+CSS 网页布局之：三列布局
摘要：三列布局的原理和两列布局的原理是一样的，只不过多了一列，只需给宽度自适应两列布局中间再加一列，然后重新计算三列的宽度，就实现了宽度自适应的三列布局。 同样的道理，更多列的布局，其实和两列、三列的布局模式是一样的。 要想实现左右两列固定宽度，中间宽度自适应的布局，那么使用浮动就做不到了，使用浮动之后页 阅读全文
posted @ 2016-03-14 22:16 彼岸时光 阅读(21532) 评论(1) 推荐(2)
DIV+CSS 网页布局之：两列布局
摘要：两列布局可以使用浮动来完成，左列设置左浮动，右列设置右浮动，这样就省的再设置外边距了。 当元素使用了浮动之后，会对周围的元素造成影响，那么就需要清除浮动，通常使用两种方法。可以给受到影响的元素设置 clear:both，即清除元素两侧的浮动，也可以设置具体清除哪一侧的浮动：clear:left 或 阅读全文
posted @ 2016-03-14 22:04 彼岸时光 阅读(19516) 评论(0) 推荐(2)
DIV+CSS 网页布局之：一列布局
摘要：布局（layout）即对事物的全面规划和安排，页面布局是对页面的文字、图像或表格进行格式化版式排列。网页布局对改善网站的外观非常重要，又称版式布局，大多数网站会把内容安排到多个列中，就像杂志或报纸那样，网页版面的设计延续了传统纸媒的特点，但又比传统的纸媒更灵活，传统的纸媒由于纸张大小的限制，只能在有 阅读全文
posted @ 2016-03-14 21:52 彼岸时光 阅读(6860) 评论(0) 推荐(0)
CSS 常用命名
摘要：在前端开发中，规范使用 DIV+CSS 命名，可以增强团队合作提高开发效率，有利于页面后期的维护和优化。 wrap：外套、包裹，用于最外层。 wrapper：外套，用于页面外围控制整体布局宽度。 box：盒子，容器。 header：头部，用于页头部分。 nav：导航，主导航。 main：主要区域，内 阅读全文
posted @ 2016-03-13 01:50 彼岸时光 阅读(4864) 评论(0) 推荐(1)
这 30 类 CSS 选择器，你必须理解！
摘要：CSS 选择器是一种模式，用于选择需要添加样式的元素。平时使用最多也是最简单的就是 #id、.class 和标签选择器，在 CSS 中还有很多更加强大更加灵活的选择方式，尤其是在 CSS3 中，增加了很多新的选择器，使得选择元素更加便捷，所以必须理解这些选择器，只有先理解了，多用几次，自然而然就记住 阅读全文
posted @ 2016-03-12 22:28 彼岸时光 阅读(7643) 评论(2) 推荐(2)
CSS 下拉菜单
摘要：使用 CSS 可以创建一个鼠标移入后显示下拉菜单的效果。 当鼠标移入指定元素时，显示下拉菜单。代码如下： 实例解析： HTML 部分： 可以使用任何 HTML 元素来打开下拉菜单，比如 <span>，或 <a>、<button> 等元素。 然后，使用 <div> 元素来创建一个容器，用于包含下拉菜单 阅读全文
posted @ 2016-03-12 21:21 彼岸时光 阅读(11603) 评论(3) 推荐(1)
CSS 高级
摘要：1、CSS 盒模型（Box Model） 所有 HTML 元素都可以看作是盒子，在 CSS 中，“Box Model”这一术语主要是在布局时使用。 CSS 盒模型（Box Model）规定了处理元素内容、边框、内边距 和 外边距 的方式。 CSS 盒模型本质上是一个盒子，封装周围的 HTML 元素， 阅读全文
posted @ 2016-02-27 20:38 彼岸时光 阅读(2771) 评论(0) 推荐(1)
CSS 基本知识
摘要：1、CSS 简介 CSS 指层叠样式表 (Cascading Style Sheets)，是一种用来表现 HTML 文档样式的语言，样式定义如何显示 HTML 元素，是能够真正做到网页表现与结构分离的一种样式设计语言。样式通常存储在样式表中，外部样式表通常存储在 CSS 文件中，多个样式定义可层叠为 阅读全文
posted @ 2016-02-26 13:05 彼岸时光 阅读(9218) 评论(4) 推荐(6)
HTML 事件
摘要：1、HTML 全局事件属性 HTML4 的新特性之一就是可以使 HTML 事件触发浏览器中的行为，比方说当用户点击某个 HTML 元素时启动一段 JavaScript，在 HTML5 中还增加了一些新的事件属性。 HTML 事件就是发生在 HTML 元素上的事情。当在 HTML 页面中使用 Java 阅读全文
posted @ 2016-02-11 23:39 彼岸时光 阅读(1543) 评论(1) 推荐(1)
HTML 表单和表格
摘要：1、使用表单标签 网站使用 HTML 表单可与用户进行交互，表单元素是允许用户在表单中输入内容，比如：文本框、文本域、单选框、复选框、下拉列表、按钮等等，表单可以把浏览者输入的数据传送到服务器端，这样服务器端程序就可以处理表单传过来的数据。表单使用表单标签 <form> 来定义： <form met 阅读全文
posted @ 2016-02-11 18:42 彼岸时光 阅读(15751) 评论(0) 推荐(0)
HTML 多媒体
摘要：1、多媒体简介 Web 上的多媒体指的是音效、音乐、视频和动画，多媒体有多种不同的格式，它可以是听到或看到的任何内容，文字、图片、音乐、音效、录音、电影、动画等等。在互联网上，几乎在所有网站都能发现嵌入网页中的多媒体元素，现代浏览器已支持多种多媒体格式。 第一代浏览器只支持文本，而且即使是对文本的支 阅读全文
posted @ 2016-02-06 00:59 彼岸时光 阅读(3134) 评论(0) 推荐(0)
HTML 全局属性
摘要：HTML5 除了支持原有的全局属性之外，还添加了8个新的全局属性。 1、 id 属性规定元素的唯一 id id 属性规定 HTML 元素的唯一的 id。id 在 HTML 文档中必须是唯一的。id 属性可用作链接锚，通过 JavaScript（HTML DOM）或通过 CSS 可以为带有指定 id 阅读全文
posted @ 2016-02-04 16:30 彼岸时光 阅读(1490) 评论(0) 推荐(0)
HTML 基础
摘要：1、HTML 简介 W3C（World Wide Web Consortium），W3C 组织，万维网联盟，这个组织制订网页标准。W3C 标准不是一个标准，而是一系列的标准的集合，包含三部分的标准：结构标准，表现标准和动作标准，与结构标准对应的是 HTML，与表现标准对应的是 CSS，与动作标准对应 阅读全文
posted @ 2016-02-02 21:29 彼岸时光 阅读(1307) 评论(0) 推荐(0)