HTML - 随笔分类 - Avenstar

清除float浮动造成影响的几种解决方案

摘要：1. “清除浮动” ？？准确的描述应该是“清除浮动造成的影响” 学习浮动推荐的视频教程《CSS深入理解之float浮动》 2.如何清除浮动造成的影响？？？栗子块级div元素包含一个内联img元素，此时div的高应该是图片img撑开的高度，当设置了图片img元素设置浮动后，div高度就会坍塌浮动阅读全文

posted @ 2017-06-16 08:24 Avenstar 阅读(1108) 评论(0) 推荐(0)

CSS层叠样式选择器归纳

摘要：常用选择器 1.1 类型选择器:用来寻找特定类型的元素标签 { 声明 } 1.2 后代选择器: 选择一个元素的所有后代，中间使用空格标签 1 标签 2 {声明} article后代的 p元素才会应用字体加粗的样式 1.3 class选择器标识具有相同特征的元素 .class名 { } 1.4 阅读全文

posted @ 2017-06-03 15:04 Avenstar 阅读(1391) 评论(0) 推荐(0)

CSS3中三角形及三角形组合图实现

摘要：几何之三角形及三角形的组合图案理论三角形( triangle ['traɪæŋɡl])可以看成正方形对角线交叉形成的图形若想得到编号①方向向下三角形，只需对编号②③④三角形让其透明transparent；border-top设置需要显示颜色即可若想得到编号②方向向左三角形，只需对编号①③④三角阅读全文

posted @ 2017-04-18 23:19 Avenstar 阅读(599) 评论(0) 推荐(0)

IE常见bug及其修复方法

摘要：一、双边距浮动的bug 1.1一段无错的代码把一个居左浮动(float:left)的元素放置进一个容器盒(box) 2.1在浮动元素上使用了左边界(margin-left)来令它和容器的左边产生一段距离在ie6或更低版本中产生双倍外边距修复方法在浮动元素上添加display:inline属性即阅读全文

posted @ 2017-04-12 22:54 Avenstar 阅读(767) 评论(0) 推荐(0)

强大而灵活的字体图标替代库iconfont

摘要：前言概述在开发网页制作过程中通常需要一些网页小图标，前端需要PS切图，将单个小图标icon组合成CSS雪碧图过程中，需要一些时间和精力; 如果网页制作中需要的小图标icon有一套css框架库集成起来将大大提高开发效率于是就有了接下来要说的字体图标库fontAwesome、iconfont font 阅读全文

posted @ 2017-03-25 23:32 Avenstar 阅读(1335) 评论(0) 推荐(0)

透明兼容写法

摘要：针对IE透明写法 opacity透明兼容所有浏览器写法只针对背景透明 startColorStr、endColorstr:设置或检索色彩渐变的开始颜色和透明度。其中startColorstr=#7f000000 7f是透明度十六进制值，000000颜色值【资料参考】 http://caniuse 阅读全文

posted @ 2017-02-14 21:51 Avenstar 阅读(1059) 评论(0) 推荐(0)

转 CSS3+js实现多彩炫酷旋转圆环时钟效果

摘要：源文转载 http://www.zhangxinxu.com/wordpress/2010/08/css3js多彩炫酷旋转圆环时钟效果阅读全文

posted @ 2017-02-11 12:00 Avenstar 阅读(1545) 评论(0) 推荐(0)

两列布局的几种实现方案

摘要：方案一、基于浮动实现两列布局方案方案二、利用margin边距+浮动实现两列布局方案（浮动脱离文档流，不占据位置）方案三、利用margin边距+绝对定位实现两列布局方案 (方案三的实现本质与方案二一致) 作者：Avenstar 出处：http://www.cnblogs.com/zjf-1992 阅读全文

posted @ 2017-02-05 14:06 Avenstar 阅读(417) 评论(0) 推荐(0)

界面组件之导航菜单备案

摘要：界面组件一、分页导航菜单界面组件二、纵向导航菜单界面组件三、水平导航菜单界面组件四、三级菜单作者：Avenstar 出处：http://www.cnblogs.com/zjf-1992/p/6291130.html 关于作者：专注于WEB前端开发本文版权归作者所有,转载请标明原文链接。作阅读全文

posted @ 2017-01-17 21:31 Avenstar 阅读(181) 评论(0) 推荐(0)

常见CSS与HTML使用误区

摘要：误区一.多div症上述使用使用多余的div标签现状，就称为“多div症”，理应简化成下误区二.多类class症注意点class可以应用于页面任意多个元素，非常适合标识内容类型或其他相似的条目一段新闻（新闻标题、新闻详情内容）上述类名使用news-head与news-text 就称为"多类症阅读全文

posted @ 2017-01-07 00:06 Avenstar 阅读(753) 评论(0) 推荐(1)

css知多少之绝对定位小记

摘要：一.position定位常见属性对于属性position来说，属性值有static/relative/absolute/fixed/inherit以下只对绝对定位position:absolute详述说明看栗子以上属性列表中最复杂的是position:absolute绝对定位，有如下几大特性阅读全文

posted @ 2017-01-03 21:41 Avenstar 阅读(300) 评论(0) 推荐(0)

css中line-height行高的深入学习

摘要：之前对css中行高line-height的理解还是有些肤浅，深入后才发觉里面包罗万象。学习行高line-height,首先从基本原理开始（标注该文章转载 http://www.cnblogs.com/dolphinX/p/3236686.html 该文章略有补充四种盒子）顶线/中线/基本/底线阅读全文

posted @ 2016-12-20 13:29 Avenstar 阅读(816) 评论(0) 推荐(0)

HTML5的新语义化的标签

摘要：在HTML5之前采用HTML+CSS文档结构写法【ID选择器说明 id选择器——用于标识页面上特定元素(比如站点导航、页眉、页脚)而且必须唯一; 也可以用来标识持久结构性元素（如主导航、内容区域）】【class选择器说明 class类选择器——可以应用于页面任意多个元素，非常适合标识内容类型或其阅读全文

posted @ 2016-12-16 16:05 Avenstar 阅读(11308) 评论(0) 推荐(0)

利用伪类:before&&:after实现图标库图标

摘要：一、实现如下效果二、代码实现思路图案一源码 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title>伪类绘图</title> 6 <style> 7 .button { 8 display: inline-b 阅读全文

posted @ 2016-11-17 15:43 Avenstar 阅读(347) 评论(0) 推荐(0)

转载【CSS进阶】伪元素的妙用--单标签之美

摘要：1.单个颜色实现按钮 hover 、active 的明暗变化请点击转载利用伪元素单个颜色实现 hover 和 active 时的明暗变化效果 2.利用after伪类清除浮动 3.增强用户体验，使用伪元素实现增大点击热区。适合用在点击区域较小的移动端,PC端看上去是很奇怪的哦 1 <!DOCTYP 阅读全文

posted @ 2016-11-15 22:38 Avenstar 阅读(469) 评论(0) 推荐(0)

转载文章利用旋转正方形与图形的组合实现爱心

摘要：实现爱心效果图源码文章转载【CSS进阶】伪元素的妙用--单标签之美阅读全文

posted @ 2016-11-15 22:37 Avenstar 阅读(424) 评论(0) 推荐(0)

html5实现银联海购商品分类列表

摘要：银联海购官网请点击 http://haigou.unionpay.com/ 1.实现效果预览展示如下： 2.源码如下 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title>银联海购</title> 6 <lin 阅读全文

posted @ 2016-11-12 22:22 Avenstar 阅读(3440) 评论(0) 推荐(0)

常见选项卡内容切换+折叠+展开效果实现

摘要：1.选项卡效果预览 2.源码与简要说明 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>切换选项卡功能实现</title> 6 <link rel="stylesheet" href="css/switchT 阅读全文

posted @ 2016-11-12 15:03 Avenstar 阅读(740) 评论(0) 推荐(0)

从条纹边框实现谈盒子模型

摘要：效果图源代码如下文章转载谈谈一些有趣的CSS题目（二）-- 从条纹边框的实现谈盒子模型阅读全文

posted @ 2016-11-06 21:49 Avenstar 阅读(260) 评论(0) 推荐(0)

box-sizing重置盒子模型计算规则

摘要：目标大纲一.语法声明二.属性值说明三.浏览器的兼容性说明IE8及以上版本支持该属性，Firefox 需要加上浏览器厂商前缀-moz-，对于低版本的IOS和Android浏览器也需要加上-webkit- 测试代码 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <m 阅读全文

posted @ 2016-11-03 23:41 Avenstar 阅读(920) 评论(0) 推荐(0)

苍暮之星

随笔分类 - HTML

公告