随笔分类 - css/html
摘要：在线制作h5 官网：http://www.godgiftgame.com在线制作h5首页预览效果图如下：一、主要功能区域主要功能区域分布在上中左右三个地方，1、上面区域是功能选择区，包括图片素材、添加图片、添加文字、设置声音、设置分享、发布及链接、个人信息等。2、中间区域是图片、文字编辑区，可以实现
阅读全文
摘要：本来打算写关于手机端的知识，想了想先从meta着手。接下来请大家看几个网站的例子。一、天猫(http://m.tmall.com)天猫触屏版 二、淘宝(http://m.taobao.com)淘宝网触屏版三、京东(http://m.jd.com) 京东 - 手机版 四、网易(http://3g.163.com)手机网易网五、百度(http://m.baidu.com)meta指元素可提供有关页面的元信息（meta-information），比如针对搜索引擎和更新频度的描述和关键词。 标签位于文档的头部，不包含任何内容...
阅读全文
摘要：如何管理CSS和JS文件，一直是前端一个热门的话题。下面将简单分享一下使用心得，欢迎大家吐槽、拍砖和提供更好的实现方式。一、管理CSS文件，本博客将讨论less管理。iReset.less、iButton.less、iCss3.less、iIcon.less、iTab.less、iMenu.less、iDialog.less、iForm.less、iDatagrid.less等等文件、以上文件都是最小模块文件。把上面的文件按实际需要合并成一个iBase.less文件。如：打算将iReset.less、iButton.less合并在iBase.less中。在iBase.less中引入如下文件即可
阅读全文
摘要：首先祝大家，在新年里，好的、善良的都都马上有。关于css实现面包屑已经是一个典型例子了。不过今天还是与大家分享一下实现的原理。原理：每一段元素固定宽度并向左浮动，头尾突出部分相对父元素用相对定位固定位置，默认为同一颜色，高亮设置指定样式。详解见下图：合并小图标，减少链接请求数量DEMO： 面包屑 1 第一项 2 第二项 ...
阅读全文
摘要：仿网页nec首页动画效果nec链接：http://nec.netease.com/首先，介绍animationanimation检索或设置对象所应用的动画特效。animation由“keyframes”这个属性来实现这样的效果。keyframes具有其自己的语法规则，他的命名是由"@keyframes"开头，后面紧接着是这个“动画的名称”加上一对花括号“{}”，括号中就是一些不同时间段样式规则，有点像我们css的样式写法一样。关于animation属性介绍：animation-name：检索或设置对象所应用的动画名称animation-duration：检索或设置对象动画的
阅读全文
摘要：gruntjs官方教程：http://gruntjs.com本次主要讲述Gruntfile.js配置文件在项目中的应用配合jade、less一起使用。项目目录包括jade文件夹、less文件夹、css文件夹、js文件夹等等jade文件夹中包含首页、版本选择页以及提示信息页活动首页样式变化频繁，但是jade可以实现超文本标记语言结构化，简化开发利于维护版本选择页变化较小，一次开发，以后基本维持。结果页及信息提示页实现结构化，主要变动标题及链接，可以通过配件tip_conf.jade文件，每次修改这个配置文件即可。tip_conf.jade源码介绍：title = '活动标题',b
阅读全文
摘要：祈福雅安雅安发生地震，需要大家热心的无私的帮助。希望大家心连心铸造爱心。为灾区人民献一份力量。谢谢大家。作为一名打酱油烂的不能再烂的前端攻城师。关于浏览器变灰的实现方式：1、最干脆最直接的办法是把图片变灰。（适合少量修改图片，兼容有所的浏览器）2、用滤镜（IE滤镜和css3滤镜）控制，如（能够修改所有元素（包括图片），兼容IE系列及webkit系列）-webkit-filter:grayscale(100%);-o-filter:grayscale(100%);-ms-filter:grayscale(100%);filter:grayscale(100%); filter:progid...
阅读全文
摘要：jade:https://github.com/visionmedia/jade基本示例介绍：1、DOCTYPE2、元素标签的使用3、元素的id、class属性4、元素的其他属性及自定义属性5、| 的作用示例：-------------------------------------------------------------------------------------------------doctype 5html head title jadeTest link(rel="stylesheet",href="*.css") script(s
阅读全文
摘要：css 运动背景原理：animation-name: bgmove;animation-duration: 100s;animation-timing-function: linear;animation-delay: 0;animation-iteration-count: infinite; animation介绍：属性描述animation指定定义所有动画属性（除了 animation-play-state 外）的速记值。animation-delay指定显示动画前动画循环内的偏移（从循环开始的时间量）。 此属性值应采用秒作为单位（后面附加“s”—例如 animation-delay:
阅读全文
摘要：众所周知IE浏览器兼容问题是最头痛最头痛的事情了。在不影响功能的前提下，不知道各位有没有放弃IE中样式兼容性问题。在处理IE兼容性问题，大牛们采用了各种各样的方式，使IE向其他浏览器靠拢，这也是问题的关键点？！咋一看，这样是带来了好处是在IE也达到了同样的效果。然而，其中以藏着一个巨大的问题，用户一直使用着固有的浏览器，没有让用户真正感受到浏览器已经发生跨时代的转变，当然用户也不关心这些事情。仅想说明，放弃兼容IE6-IE8中的css3兼容性，让用户真正体验到变化，让用户自己选择。这样能在不兼容IE中推动发展。下面两张效果图：1、现代浏览器中的显示效果：2、IE8中的效果css样式：1、浮动布
阅读全文
摘要：css遮罩图片采用形状透明的（alpha透明度），图片格式为png8。备注：IE6仅支持100%。使用position定位。父容器relative，子容器absolute。带形状遮罩层 带颜色透明层 内容层 mask opacity content有机的结合会美化网站。示例效果图如下：<!DOCTYPE html><html><head> <title>css遮罩</title> <style type="text/css"> *{margin:0px;padding:0px;} body{backgr
阅读全文
摘要：大概有两个来月没有写博客了，把这两天遇到的问题做个总结。1、图片背景怎么适应各种pc端的浏览器设计图为宽度为1300px当前默认宽度为980px1300 - 980 = 320 160 980 160图片背景 纯色 图片背景body{ background:url("./images/bodybg.jpg") center top no-repeat; }#page{ width:980px; margin: 0px auto; }2、默认情况下body为屏幕分辨率的高度html , body { height : 100% ; overflow : hidden ; }3
阅读全文
摘要：记录下蛮好的一些总结内容，摘抄的网上原文（http://www.zhangxinxu.com/wordpress/），只有用过的才会知道哈。一点一滴的积累。哈哈，慢慢享用。。。display:none是个相当惨无人道的声明，子孙后代全部搞死（株连性），而且连块安葬的地方都不留（不留空间），导致全体民众哗然（渲染与回流）。visibility:hidden则具有人道主义关怀，虽然不得已搞死子孙，但是子孙可以通过一定手段避免（伪株连性），而且死后全尸，墓地俱全（占据空间），国内民众比较淡然（无渲染与回流）。记住这个：position: absolute元素溢出overflow: hidden元素的
阅读全文
摘要：每天都胡乱的写些内容，至关于一些工作遇到的问题哈这些天一直在写html和css能指定高度宽度的尽量指定高度宽度常常会一起使用的css属性，O(∩_∩)O~zoom：1float:left;display:inline;display:inline解决ie6双边距的问题行内元素（内联元素）转换为块级元素display:block; width:*px; height:*px相对定位于绝对定位position:relativeposition:absolute;left:*px;top:*px;上一篇文章《postion_relative_absolute》中写过了，巧妙使用css属性标签有利于网
阅读全文
摘要：为标题栏增加边既美观又大方实现方式html结构： 1 <div class="title">2 <span>标题</span>3 <a href="#" target="_blank">更多>></a>4 <div class="sidebar">5 </div>6 </div>css样式：1 *{margin:0px; padding:0px;}2 .title{width:960px;he
阅读全文
摘要：zoom的使用触发IE浏览器的haslayout解决ie下的浮动，margin重叠等一些问题zoom只有在IE中才起作用background-image:url(名称)background-color:transparentbackground-position:*px *px;background-repeat:background:url(名称) no-repeat *px *px;写页面布局时，要先写出页面的html的骨架，在根据一块块内容写css样式。导航<div id="nav"> <dl> <dd class="test1
阅读全文
摘要：隐藏字体overflow:hiddentext-indent:-999px如在网站的logo上使用，有利于爬虫抓取。<a class="logo">网站名称</a>.logo{background-image:url(./Images/图片名称);background-repeat:no-repeat;display:block;width:100px;height:35px;overflow:hidden;text-indent:-999px}块级元素转换行级元素display：block文件大纲清晰的目录结构h1 h2 h3 可用火狐的web d
阅读全文
摘要：frameset框架标记，用以宣告html文件为框架模式，并设定视窗如何分割。属性： cols rows frameborder border bordercolor framespacingcols="90,*" 垂直切割画面，整数值，百分比，*则代表剩下的空间。中间用逗号分割。rows="90,*"水平切割画面，同上。cols与rows量参数尽量不要在同一个frameset标记。frame只是设定某个框架内的参数属性。属性：src name frameborder framespacing bordercolor scrolling norsize
阅读全文
摘要：css/html 透明度和背景透明 opacity&transparent 线性渐变（linear-gradient） base_css 理解box-shadow 理解border-radius
阅读全文
摘要：1、透明度opacity: 0.3;filter:alpha(opacity=30); opacity设置透明度，后代元素会继承当前元素的透明度。效果如下图：<!DOCTYPE html><html><head> <title>透明度---opacity---www.cnblogs.com/kuikui</title> <style type="text/css"> .test { width: 500px; height: 300px; text-align: center; ...
阅读全文