随笔分类 -  HTML / CSS

上一页 1 2 3 下一页
notes for html & css
CSS盒子模型的理解及其计算方式汇总
摘要：一、盒模型的分类 二、标准模型与 IE 模型的区别 从上图可看出，两者的区别在于宽度和高度的计算方式不同： 标准模型计算的是 content 的宽/高 IE 模型计算的是 content + padding + border 的宽/高 三、标准模型与 IE 模型的设置 1、标准模型（默认） box- 阅读全文
posted @ 2019-08-15 17:47 Leophen 阅读(2874) 评论(0) 推荐(0)
HTML块级元素、行内元素和置换元素
摘要：一、块级元素和行内元素 特点 常见 块级元素 独占一行 行高和边距可变 可以容纳块级元素和内联元素 display: block / table; div header nav article aside section footer p h1~h6 ul ol... 行内元素 与其他元素在同一行上 阅读全文
posted @ 2019-08-15 01:42 Leophen 阅读(798) 评论(0) 推荐(0)
如何理解HTML语义化
摘要：一、什么是 HTML 语义化 所谓 HTML 语义化，就是用恰当的标签去展示恰当的内容，像 HTML5 中新增的 header、nav、footer 等标签，而非什么都用 div 这种不具备语义化的标签来显示 二、HTML 语义化的作用 1、方便代码的维护，语义化的 HTML 代码更具可读性 2、有 阅读全文
posted @ 2019-08-15 01:18 Leophen 阅读(695) 评论(0) 推荐(0)
WEB前端-搜索引擎工作原理与SEO优化
摘要：一、搜索引擎工作原理 搜索引擎的工作分为三个阶段，即爬行，索引和检索 1、爬行 搜索引擎具有网络爬虫或蜘蛛来执行爬网，每次抓取工具访问网页时，它都会复制该网页并将其网址添加到索引中。 在“蜘蛛”抓取网页内容，提炼关键词的这个过程中，就存在一个问题：“蜘蛛”能否看懂。如果网站内容是 flash 和 j 阅读全文
posted @ 2019-08-14 16:03 Leophen 阅读(1888) 评论(0) 推荐(0)
error: invalid-first-character-of-tag-name错误解决方案
摘要：HTML 特殊字符写法要用原始码，例如： ‘<’ 原始码为 &lt; ‘>’ 原始码为 &gt; 解决示例： 原错误代码 <div><</div> 修改后代码 <div>&lt;</div> 阅读全文
posted @ 2019-08-02 00:27 Leophen 阅读(8938) 评论(0) 推荐(0)
SASS 和 LESS 的区别
摘要：1、编译环境不同 SASS 的安装需要 Ruby 环境，是在服务端处理的； LESS 需要引入 less.js 来处理代码输出 CSS 到浏览器，也可以在开发环节使用 LESS，然后编译成 CSS 文件直接使用 2、变量符不同 SASS 变量符是 $ LESS 变量符是 @ 3、变量作用域不同 > 阅读全文
posted @ 2019-07-27 02:47 Leophen 阅读(528) 评论(0) 推荐(0)
Bootstrap 基本模板
摘要：<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content= 阅读全文
posted @ 2019-07-11 22:43 Leophen 阅读(376) 评论(0) 推荐(0)
LESS变量
摘要：一、普通的变量 1. 变量的定义方式：@ 2. 示例： less 文件： @blue:#5B83AD; #header{ color:@blue; } 编译后的 css 文件： #header { color: #5b83ad; } 二、作为选择器和属性名 1. 使用的时候将变量以“@{变量名}”的 阅读全文
posted @ 2019-07-10 16:35 Leophen 阅读(255) 评论(0) 推荐(0)
LESS简介与使用方法
摘要：less 是一门 CSS 预处理语言，它扩展了 CSS 语言，增加了变量、Mixin、函数等特性，使 CSS 更易维护和扩展。 一、传统写法与 less 写法对比 1. 传统 css 写法： .content ul{ list-style:none; } .content li{ height:24 阅读全文
posted @ 2019-07-10 12:31 Leophen 阅读(988) 评论(0) 推荐(0)
一个简易的css reset
摘要：/*css reset*/ /*清除内外边距*/ body, h1, h2, h3, h4, h5, h6, p, hr, /*结构元素*/ ul, ol, li, dl, dt, dd, /*列表元素*/ form, fieldset, legend, input, button, select, 阅读全文
posted @ 2019-07-04 21:07 Leophen 阅读(284) 评论(0) 推荐(0)
CSS3之响应式布局及其应用
摘要：使用 Media 属性前需添加兼容移动设备优先代码 <meta name=”viewport”content=”width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=”no”> /*参数说明： - width=dev 阅读全文
posted @ 2019-07-04 00:46 Leophen 阅读(468) 评论(0) 推荐(0)
深入理解 CSS - Flex 布局
摘要：一、Flex 布局的由来 1、css 2.1 CSS2.1 定义了四种布局方式，由一个盒与其兄弟，祖先盒的关系决定其尺寸与位置的算法： 块布局：呈现文档的布局模式 行内布局：呈现文本的布局模式 表格布局：用表格呈现2D数据的布局模式 定位布局：能够直接地定位元素的布局模式，定位元素奴基本与其他元素没 阅读全文
posted @ 2019-07-04 00:14 Leophen 阅读(261) 评论(0) 推荐(0)
响应式开发移动端入门必备知识
摘要：一、移动端布局计算 Flex： 采用Flex布局的元素，它的所有子元素自动成为容器成员，可以自动分配空间，适合做移动端开发 rem： 在不同的设备上显示不同的效果，因此适合做移动端开发 二、移动设备常见属性 physical pixel： 物理像素值（屏幕分辨率） device-independen 阅读全文
posted @ 2019-07-03 23:48 Leophen 阅读(304) 评论(0) 推荐(0)
CSS3过渡与动画
摘要：一、CSS3 过渡 transition-property 规定过渡效果的 CSS 属性名 -webkit-transition-property: none / all / property; -moz-transition-property: none / all / property; -ms 阅读全文
posted @ 2019-07-03 23:18 Leophen 阅读(705) 评论(0) 推荐(0)
CSS3常用转换总结
摘要：一、2D转换 translate(npx,npx) 相对当前元素位置移动 /* 实现div向左移动50个像素，并向下移动100个像素 */ div { transform: translate(50px,100px); -ms-transform: translate(50px,100px); /* 阅读全文
posted @ 2019-07-03 19:38 Leophen 阅读(376) 评论(0) 推荐(0)
CSS3背景与渐变
摘要：一、CSS3 背景图像区域 background-clip（指定背景绘制区域） ackground-clip: border-box / padding-box / content-box; /*没有padding的时候，content-box和padding-box效果一样*/ 兼容性：IE9+、 阅读全文
posted @ 2019-07-03 14:59 Leophen 阅读(417) 评论(0) 推荐(0)
CSS3边框与圆角
摘要：1. CSS3 圆角 border-radius 属性 一个最多可指定四个border -*- radius属性的复合属性，这个属性允许你为元素添加圆角边框！语法：border-radius: 1-4 length|% / 1-4 length|%;兼容性：IE9+、FireFox4+、Chrome 阅读全文
posted @ 2019-07-03 14:50 Leophen 阅读(293) 评论(0) 推荐(0)
CSS3文本与字体
摘要：一、CSS3 换行 1、word-break（规定自动换行的处理方法） word-break: normal / break-all / keep-all; /* normal：使用浏览器默认的换行规则 break-all：允许在单词内换行 keep-all：只能在半角空格或连字符处换行 */ 兼容 阅读全文
posted @ 2019-07-03 14:47 Leophen 阅读(300) 评论(0) 推荐(0)
CSS3常用选择器
摘要：一、基本选择器 子元素选择器 概念：子元素选择器只能选择某元素的子元素语法格式：父元素 > 子元素 （Father > Children）兼容性：IE8+、FireFox、Chrome、Safari、Opera 相邻兄弟元素选择器 概念：相邻兄弟选择器可以选择紧接在另一元素后的元素，而且他们具有一个 阅读全文
posted @ 2019-07-03 14:41 Leophen 阅读(1469) 评论(1) 推荐(0)
HTML5新增的表单验证功能
摘要：一、HTML5表单的特点： 二、HTML5新增的控件类型： 要求输入格式正确的 email 地址，否则浏览器不允许提交，同时会提示错误信息 要求输入格式正确的数字 显示一个可拖动的滑块条，通过设定 max/min/step 值限定拖动范围，拖动时会反馈给value一个值 输入一个搜索关键字，通过 r 阅读全文
posted @ 2019-07-03 13:42 Leophen 阅读(1726) 评论(0) 推荐(0)

上一页 1 2 3 下一页