CSS创建竖排文字的方法大全
在制作网页的时候我们经常需要创建一些竖排的文字,或许这对你来说是一件很简单的事情,但是你是否想过用CSS可有N种创建竖排文字的方法?下面是由我翻译自Nettuts+的文章,希望这几种方法能够给你带来一些提示。 方法一:<br />标签 一种可能的方法(…
清理浮动的几种方法以及对应规范说明
前言 浮动 Floats 是 CSS 中的一种布局方式。它的渲染位置在行框与包含块之间,这样就可以使行框内文字与浮动元素不重叠并且环绕它显示。在布局过程中也经常会使用它来达到左右并排布局的效果。但是,由于浮动特性,容器如果没有明确设定高度,会依照普通…
Flexbox——快速布局神器
简介 在很多方面HTML和CSS是一个强大的内容发布机制——易学、灵活和强大。但复杂的布局是他不擅长的。如果你想创建一个简单的图片与文本的布局,那么还算简单,但是制作一个复杂的多列布局,要做的众多浏览器的兼容一致那还是很复杂的。我们通常都是使用浮…
让网站变灰的css代码(支持IE、Firefox和Chrome)
四川雅安芦山发生7.0级别大地震,不少网站首页已经变成了灰色表示哀悼。下面笔者整理了几种让网页变灰色的CSS代码,供各位站长参考! 方法1:支持IE <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.or…
码农如何快速打造一个有设计感的网站
拥有属于自己的网站是很多人的梦想,但大多数人只能借助像 WordPress 这样的 CMS 实现,甚至很多公司网站也是这样。但这些网站大多数看起来都比较缺乏设计感,通俗来讲就是有点“土”。那么对于像程序员以及其他对设计比较小白们来说,如何能让你的网站看起…
使用Twitter Bootstrap 20分钟打造你的网站
这篇教程旨在让你在20分钟内学会使用twitter bootstrap创建一个站点。看完这个教程后你应该能够使用bootstrap来建立一个基本的响应式布局的页面,了解栅格系统,并且能够使用bootstrap导航、导航条和了解响应式设计的基础。这些全部都是使用twitter bootst…
jQuery超简单实现的“回到顶部”按钮
今天我们介绍的这篇web开发小技巧将使用jQuery实现一个超简单的滚动到页面顶端的功能,代码如下: JavaScript代码: $(document).ready(function() { // 滚动窗口来判断按钮显示或隐藏 $(window).scroll(function() { if ($(this).scrollTop() >…
textarea自适应高度JQuery插件
其实吧这个效果以前也写过,那个是使用div模拟的这样的话可以不用考虑删除的时候不变化的情况,还有就是复制黏贴的情况,这些不是大家熟悉的事件,这里要使用 onpropertychange和oninput来实现,还有就是当设置了最大高度的时候的问题,我这里实现了Math.m…
关于css z-index 层叠一些不为人知的事儿
关于z-index的真正问题是,很少有人理解它到底是怎么用。其实它并不复杂,但是如果你从来没有花一定时间去看具体的z-index相关文档,那么你很可能会忽略一些重要的信息。 不相信我吗?好吧,看看你能否解决下面这个问题: 问题: 在 接下来的xhtml代码里有…
伪元素:before和:after学习和使用
如果你一直密切关注着各种网页设计的博客,你可能已经注意到了:before和:after伪元素已经在前端开发中获得了相当多的关注。特别是在Nicolas Gallagher的博客中,后期运用了很多伪类元素。 Nicolas Gallagher使用伪元素用静态的HTML标签创建84个GUI图标…
如何自适应宽度的水平居中
当父元素和子元素都没有定义宽度的情况下实现水平居中: display:inline-block 可以使用text-align:center和display:inline-block相结合,这个技巧需要一个父元素。 HTML代码: <div class="navbar"> <ul> <li>&…
通过CSS3 Media Query实现响应式Web设计
如今的屏幕分辨率,小至320px(iPhone),大到2560px甚至更高(大显示器),变化范围极大。除了使用传统的台式机,用户会越来越多的通过手机、上网本、iPad一类的平板设备来浏览页面。 这种情况下,固定宽度的设计方案将会显得越发不合理。页面需要有更好的适…
使用jQuery-DropKick插件美化select下拉框
DropKick 是一个下拉框美化插件,使用非常简单,直接为下拉框 select 调用方法即可,瞬间让你摆脱繁琐。DropKick 有 3 种主题,你可以选择一种与你的页面更加搭配的,当然你也可以自己定义 CSS样式。 DropKick 支持键盘上下选择;支持回调,可以轻松的获取…
灵活性响应式网页设计
在过去的一年里,如果你不是住在深山里,就一定知道响应式网页设计,它已经成为当今的主流。响应式设计是Ethan Marcotte提出的,概念很简单:使网站的页面布局能够根据不同设备和分辨率进行自动调整。 当我第一次了解到它时,我就立即被迷住了-特别…
margin负值-权威指南
在1998年CSS2的建议使用CSS进行页面设计布局,table就渐渐淡出了历史舞台。也因为如此,CSS也变成了编码优雅的代名词。 页面设计者用过的所有CSS概念中,margin常被设计者使用,而负margin应当是最少被谈及的定位方法,margin每个人都使用它,但很少人去讨…