- 浏览: 77024 次
- 性别:
最新评论
文章列表
纯css3写的步奏框
- 博客分类:
- 笔记练习
.step{ position:relative;}
.step a{ position:absolute; display:inline-block; color:#fff;}
.step a span{ display:inline-block; float:left;}
.step a .span_2{ text-align:center; line-height:40px;}
.step_first .span_1{ height:40px; width:180px; background:#c5c5c5; text-align:center; line-height:4 ...
transition奥秘
- 博客分类:
- html5/css3
CSS Transition1.基本用法:在CSS3引入Transition(过渡)这个概念之前,CSS是没有时间轴的。也就是说,所有的状态变化,都是即时完成。img{ height:15px; width:15px;}img:hover{ height: 450px;
网站字体样式该如何选择
- 博客分类:
- 前端技术
详解中文字体访问一峰老师博客:http://www.ruanyifeng.com/blog/2014/07/chinese_fonts.html相比英文字体,中文字体的网页开发有着极大的局限性。因为,一套中文字体最少也要有几千个字符,体积为几个MB;单单为了浏览网页,开发者不可能让用户去下载字体,只能依靠操作系统的预装字体。(*注:确实有网站提供中文字体的web服务,从技术角度,一峰老师不推荐这样做)不同的操作系统、不同的版本预装不同的字体(因为版权),几乎没有交集。因此,大多数开发者索性忽略中文字体,让操作系统自行渲染,或者用图片呈现字体效果。
关于求字体识别不出来
- 博客分类:
- photoshop
丢入PS 复制一层
找到最清晰的色块
如图效果
看却加L调调
重复刚才那个步骤
帝国CMS的搜索表单语法规则
- 博客分类:
- 帝国CMS
帝国CMS提供了比较强大的搜索结果调用,你可以按照帝国cms搜索表单制作语法,制作出满足你需求的大部分搜索功能。如果你在你的数据库中有自定义字段,那么可能需要改一下e/search/index.php对form表单提交的数据处理,可以参考文章最后提供的例子。先来看看搜索表单变量说明:
变量名
说明
例子
搜索表单提交地址
POST方式:/e/search/index.php
<form name="searchform" method="post" action="/e/search/index.php"&g ...
Css Sprite也被为CSS精灵,这是前端攻城师必备的技能之一,也是衡量初级攻城师和中级攻城师的标准之一。
下面大概描述一下Css Sprite的基本概念:
这是一种网页图片应用处理的方法,将一个页面涉及到的一些零散的图片整合到一张图片上,减少客户端对服务器HTTP请求的次数,然后用CSS背景图定位的方法来处理需要用到的图片部分。
话说背景定位,其实就是操纵背景的坐标轴(background-position),它有两个值,X轴坐标和Y轴坐标,系统默认背景图的坐标为X轴0点和Y轴0点,下面举例说明一下:
组合按钮
某项目中的发布按钮的原始状态、鼠 ...
html5为input添加了原生的占位符属性placeholder,高级浏览器都支持这个属性,例如:
<input type="text" placeholder="我爱北京" value=" ">
默认的placeholder字体颜色是呈浅灰色,如果想改变这个默认颜色,解决方案如下:
input:-moz-placeholder,
textarea:-moz-placeholder {
color: #999999;
}
input:-ms-input-placeholder,
texta ...
响应式设计的 5 个 CSS 实用技巧
- 博客分类:
- 前端技术
响应式的Web设计其实并不难,但是要让元素在布局切换时能够平滑过渡就比较考验技巧了。本文分享在编码时常用的五个CSS技巧并举例说明。这些技巧都是使用简单的CSS属性,如min-width、max-width、overflow 和相对属性值,但是这些属性在响应式设计中发挥着很大的作用。 1. 响应式Video (demo) 响应式video的CSS技巧是由tjkdesign.com发现的。你可以阅读这篇文章来了解它。响应式**会适应它的容器宽度。 Css代码
.video {
position: relative;
padding-bottom: 56.25 ...
css中的大于号是什么意思
- 博客分类:
- html/css
css中的">"表明class样式只作用于子级元素,对于子级再往下的元素则忽略不计,比如孙级的元素就会被忽略。比如这样的代码:<div><p><span>数学</span></p><span>语文</span><span>体育</span>
HTML5的语义化标签以及属性,可以让开发者非常方便地实现清晰的web页面布局,加上CSS3的效果渲染,快速建立丰富灵活的web页面显得非常简单。
HTML5的新标签元素有:
<header>定义页面或区段的头部;
<footer>定义页面 ...
编写高质量代码base.css
- 博客分类:
- 前端技术
@charset "utf-8";
/* CSS Document */
/*CSS reset*/
html{color:#000;background:#FFF;}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,p,blockquote,th,td{margin:0;padding:0;}
table{border-collapse:collapse;border-spacing:0;}fieldset,img ...
em(倍)与px的区别
- 博客分类:
- 前端技术
在国内网站中,包括三大门户,以及“引领”中国网站设计潮流的蓝色理想,ChinaUI等都是使用了px作为字体单位。只有百度好歹做了个可调的表率。而 在大洋彼岸,几乎所有的主流站点都使用em作为字体单位,也就是可调的。没错,px比em更加容易使用,大部分读者不知道em为何物或者它相当于多少 px。国外人士如此重视网站易用性(Accessibility),不仅因为其根生蒂固的人文精神,直接原因可能是因 为有一部法律来约束他们—例如美国的Section 508,强制网站达到一定的易用性。 关键点:
dede升级了5.7后,有个地方要求调用相关文章,于是写下 dede:likeart 标签却无法实现关联,显示的则是所有文章。 发现原来从5.5版开始已经替换了该标签,把模板中 likeart 标签修改为 likearticle 就ok了。
整理一下dedecms相关文章的调用代码应该是:
{dede:likearticle}
<a href=’[field:arcurl/]‘>[field:title/]</a>
{/dede:likearticle}
参数说明:
col=” 分多少列显示(默认为单列)
row=’10′ 返回文档列表 ...
<nav class="nav" role="navigation" style="height: 195px;">
<ul class="nav-items">
<li><a target=_blank href="http://www.w2bc.com">Home</a></li>
<li><a target=_blank h ...
前端的一些内容及各大浏览器的兼容性
- 博客分类:
- 前端技术
默认样式重置(css reset) css reset原则:但凡是浏览器的样式,都不要使用body,p,h1,h2,h3,h4,h5,h6,dl,dd{margin:0}ol,ul{list-style:none,padding:0;margin:0}a{text-decoration:none;}img{border:none;}a伪类的先后顺序 link、visited、hover、active块元素和内嵌元素 ...