50例有用的编码技术（CSS布局，视觉效果及表格）
50有用的编码技术（CSS布局，视觉效果及表格）虽然一般认为CSS是一种简单明了的语言，有时它需要创造力，技能和实验位。
好消息是，世界各地的设计师和开发人员常常面临类似的问题，选择分享他们的见解和更广泛的社区解决方法。这是我们英寸我们来一直在寻找，收集岗位这类物品，以便我们能够提供的最有用和相关的内容对我们的读者。在这个后，我们提出了有益的CSS概述/ jQuery的编码提示，技巧和视觉效果，形成布局和网页设计技术，以帮助您找到您的问题正在处理的或将要在日后处理解决方案。您可能想看看类似的CSS相关的职位，我们发表的最后几个月：
* 45强大的CSS和JavaScript技术
* 50辉煌CSS3/JavaScript编码技术
* 5有用的编码方案对设计与开发
CSS布局：技术和解决方法
Facebook Style Footer Admin Panel
了解如何重新创建Facebook的页脚使用CSS和jQuery管理面板。也请参阅第 2部分.
Adaptable View: How Do They Do It?
本教程介绍了如何手动更改布局，它显示了两个伟大的例子，“他们怎么做。”
轻松显示开关CSS和jQuery
一种快速简便的方法，使用户能够切换页面布局使用CSS和jQuery。
Quick Tip – Resizing Images Based On Browser Window Size
在流体布局，设置文本格式的顺利调整窗口的大小非常简单，但图像没有流体友好。这种快速提示说明了如何在两个图像大小切换基于浏览器，大小的DIV或其他任何您选择。
One Page Résumé Site
在一个页面上，从字面上（只有一个可选的图像index.html文件干净的布局）。它带有微格式的联系信息，并使用一个定义列表简历（DL）中的主要领域。并打印好。
圈：自动显示：固定+ +
克里斯韦瑟雷尔员额的钉住，一个可以有一个滚动条，而是独立滚动开发战略。第一个之后，其他项目上的点击状态之间的大小。你会看到一个地区的滚动配置而定。
CSS 100% Height
设计师常见的问题是如何让一个div伸展100窗口的高度％。有一出有几个不同的技术，和本教程显示其中之一。
CSS3下拉菜单干净
干净，简单的一个很好的导航菜单，路易斯安那州的尼克设计
CSS Trick for a Scrolling Transparent Background Effect
滚动页面观看善与恶之间形成的战斗。其效果需要两个形象：一个透明的和一个平铺梯度图像。根据透明PNG的梯度卷轴。由于比赛在巴新的颜色，每一套的图像消失了，这取决于他们的梯度你之上的一部分。
Fluid Images
默认情况下，图像元素，是500像素并没有完全发挥一大如800像素或100个小如一个货柜不错。什么是设计师怎么办呢？
Scroll/Follow Sidebar, Multiple Techniques
一个非常简单的概念：你的侧边栏如下你向下滚动页面。有很多方法去做数目。这里涉及两个：CSS和JavaScript（jQuery的），与奖金的CSS技巧。
Vertical Centering With CSS
垂直中心使用CSS几种不同的方式，这里是一个最好的方法的列表和如何创建一个很好的解释为中心的网站。
Create YouTube-like adaptable view using CSS and jQuery
比关灯“功能”转向外，YouTube已如“更改视图”功能，它可以切换正常和广泛的模式，从而扩大或缩小了视频领域的伟大的东西。创造这个道理很简单。
How To Create a Horizontally Scrolling Site
如果网站是木制的，粮食，将会出现上下。垂直是Web的自然流动。但浏览器配有垂直和水平滚动条，对不对？我们可以选择反其道而行并创建网页，主要是水平滚动，即使扩大水平以容纳更多的内容。也许可用性轻微打击，但仍然冷静创造性接触！
Purely CSS – Faking Minimum Margins
min-margin is non-existent in the CSS world. After you’ve pondered and Googled it, check out the solution here.
Create Sidebars of Equal Height with Faux Columns
CSS can be tricky business. Creating columns of equal height, where the content in one column is longer than the content in another, is frustrating. Here’s where the faux-column technique can help. Find out how this solution makes even the most complicated layout a breeze to code.
Setting Equal Heights with jQuery
下面是一个脚本来匹配在同一容器中框的高度
Quick Tip: Centered Fake Floats
没有人对中心的方式，左对齐浮动的元素，但后来内联块流行起来，一切都改变了。经过修补位，Zaharenia Atzitzikaki找到了一个有效的和（多数）的跨浏览器兼容的中心元素的方式不浮动。
6 Flexible jQuery Plugins to Control Web Page Layouts Easily
许多jQuery的插件收集插件管理页面布局容易。
Four Methods to Create Equal-Height Columns
本文讨论如何创造高度相等（包括IE6的所有主要浏览器）。这些方法均显示了如何创建三栏布局。
How to: CSS Large Background
不同的教学与CSS针对如何创建一个大背景：使用一种单一的形象或双图象的例子。
A Nice Little CSS Positioning Technique
在这里，我们已与左浮动图像的基本无序列表（UL），其中的文本不换行下的图像。当然，这种技术可以部署在其他情况下的负载。
Perfect Full Page Background Image
这种技术允许的图像，以填补空白，没有页面。图像的规模和需要保留其比例，而且没有产生滚动条。
图像和视觉效果的CSS
使用CSS和jQuery创建美丽苹果式幻灯片库
创建一个苹果，像幻灯片库，类似于苹果的网站上展示的产品所使用的1。它工作在前端完全，没有PHP或数据库的要求。
Rolling a coke can around with pure CSS
罗曼科尔特斯是有很多乐趣做这些天的CSS技巧。他只是建立了一个滚动焦炭可以使用背景附件，背景，地位和一些其他方法达到的效果。这里没有华丽的CSS3！
使用CSS和jQuery灰度悬停效果
几个月前，詹姆斯Padolsey引进了技术不冷静灰度IE浏览器。他的技术启发苏氏田中拿出一个有类似的效果解决方法了。他的解决依赖于CSS精灵和jQuery的几行，但它需要实施前的准备位。不建议对大型项目，可能是最佳的组合件。
Codename Rainbows
一些JavaScript和CSS魔术是用来这里申请两色渐变为文本。阴影和高光也可应用。这尤其适用于各大网站和动态内容而建立的每一个实例图像将是不切实际的。
3个简单的CSS技术和快速的仿图像剪裁
本文总结了只显示图像的一部分三个快速简便CSS技巧。所有的技术只需要一个CSS的几行。你是不是真的种植，这就是为什么它被称为人造图像剪裁。这些技术可以帮助如果您想保留影像到一定规模的（例如，缩略图在新闻节）。能够使用CSS来控制的图像的显示部分是巨大的。
图像翻转边框不改变布局
使用CSS，任何边界块级元素是计入元素的布局中的大小。因此，如果您添加边框就悬停元素，布局将转移。在这个岗位，你会发现如何使用定期边境财产和建立内部边界，以解决这一问题。
水平条纹
本教程介绍如何创建永无止境在您的网页设计使用CSS的水平条纹。
CSS图片替换
把九个图片替换不同的技术考验。
CSS3和jQuery散景效果
本教程教你如何重新创建与CSS 3散景的效果。随着一些jQuery的帮助，我们可以添加一些颜色，大小和位置随机性的影响。
固定标志与CSS这页上滚动变化
下面是一个有趣的效果修改标志当页面滚动，使用CSS的背景附件属性。
剪影淡出
为了实现上述图像效果，我们首先需要作为背景图像的轮廓的DIV。然后，我们将在这四个图像DIV的，都是一模一样的大小，每个乐队成员强调。这些图像默认隐藏。然后，你绝对立场四个DIV的顶部区域;这些都是对链路地区推出。使用jQuery，我们应用悬停事件当中，相应的图像褪色。
CSS创建三角形
很少有人意识到，浏览器的角度绘制边界。这种技术利用了这种优势。其中一个边界两边是由于箭头颜色，其余的是透明的。然后你给边境大宽度;以上的的20个像素。
A parallax optical illusion with CSS: The Horse in Motion
时间一些CSS和光学幻想的乐趣。
纯CSS线图
这里的想法是，不仅提供的数据可视化的人谁不舒服使用的脚本语言，而是说明CSS的权力，并提供了不同的方式使用CSS。如果您不是一个路线图和数据可视化的球迷，你可能仍然受益于这篇文章。你可以把它作为一个CSS实验，并了解一件事情或两个有关CSS精灵和定位。
缩放使用jQuery和CSS
这个职位与jQuery和CSS缩放有关文本。这是一个基层有关更改样式使用jQuery脚本教程。一个简单的变焦网站的内容。
调整大小创建缩略图使用overflow属性
本教程教你如何控制缩略图的大小。有时，我们没有足够的空间，以适应大缩略图，但我们宁愿避免小难懂的图像。使用这个技巧，我们可以限制默认的缩略图尺寸和显示他们在全尺寸时，对他们的用户鼠标。
跨浏览器阴影使用纯CSS
添加下拉阴影内容块大多数方法需要额外的HTML标记和一个或多个PNG图像。但是，结合辉光和阴影过滤器，这是历史相当接近于呈现CSS3阴影可以实现的。
为您的博客添加日期徽章和评论泡沫
你的事情要处理时，您的博客成长之一是不得不搬进更小的空间信息显示所有您想要显示。有一件事你可以做的是添加一个日期图标，然后在它与该职位的若干意见泡沫。
CSS表格和Web表单
UX的技巧：为表格数据显示表单数据
这是一个小把戏，以加强各种形式的用户体验。它显示为可读可编辑数据表格形式的数据。
表：不像你想象的邪恶
表是邪恶的，对不对？是也不是。对于表格数据，他们当然不会。这就是表在首位。 CSS可以做一个正确格式化样式表出色的工作，并表的结构提供了良好的脚手架JavaScript调用。但什么是在这里讨论使用非表，表格数据的布局（即）。是的，正确的：使用布局表格。
完美下拉登录中使用jQuery的像Twitter箱
这说明如何创建一个Twitter式下拉登录形式使用jQuery。这真的很容易，它保存在页面上的旅客空间感觉真棒切换的形式舒适。
选项打印
当打印，它选择要素的网页时，选择下拉打印它看起来就像在网络上。当然，这实际上是没有用在打印页面上。一个负责处理这个选择是跟随一个无序列表，重复的内容都选择HTML元素。隐藏在你的主的CSS无序列表文件并显示与您的打印样式表了。这是一种合理的方法，只是它的一大醇’是屁股疼痛处理所有的时间。让我们在jQuery的依赖也这样做，而繁重。
Twitter-Like Log-In With jQuery and CSS
这个职位说明如何获取Twitter的隐藏和显示在使用jQuery和CSS记录的影响。“很简单：短短五年的JavaScript线为隐藏（）和show（）事件和一个小的CSS。
Clean and Pure CSS Form Design
本教程介绍了如何设计不使用HTML表格一纯CSS的形式。
CSSG Collection: Free Comment Styles
这是从CSS全球第二CSSG集合。
Have a Field Day with HTML5 Forms
这里有一个如何将一个美丽的HTML5风格形式看使用一些先进的CSS和最新的CSS3技术。你一定想重新表单后，读这篇文章的风格。
Editable/Printable Invoice
创建编辑和打印发票的使用CSS和一些JavaScript。这是版本从荣范2。
How to Mask Passwords Like the iPhone
许多智能手机，包括iPhone，最后一个字符显示您在密码字段中键入的延迟一两秒钟。你可以看到的最后一个字符，而不是整个密码。但浏览器并不做这些移动设备做。这里是一个解决方案，一些奇特的JavaScript和幕后幕后弄虚作假。
Make Web Forms Suck Less With Labels
我们已经多年填写Web表单，我们大家都抱怨，他们可以做得更好。即使慷慨的填充，领域太小。但几乎没有人，改善了最低估他们的互动都：复选框和单选按钮。
FancyForm：JavaScript复选框更换
FancyForm是一个功能强大和灵活的复选框替换脚本变化的外观和功能的HTML表单元素。这是方便，易于使用，而且缓慢下降对老年人不支持的浏览器。
jQuery的复选框v.1.3.0测试版1
轻量级定制式的jQuery的1.2.x和1.3.x的复选框执行
Disabled labels and the Trilemma plug-in
The form above on the left makes use of the disabled attribute, but the default browser settings for disabled inputs don’t contrast as much as one would like. To better distinguish at a glance between which inputs are disabled and enabled, the labels of disabled inputs in the form on the right are styled with a faint gray color.
Fluid Search Box
创建流体搜索框如果你只有一个元素旁边实在是微不足道。你应该做的是包裹在一个元素，并使用填充的投入，创造固定元素的空间，然后在固定位置的元素绝对（或相对的填充创建的空间）。
Last Click
Browser Pong
A whole new pong game using three browser windows for the ball and racquets. Clever!
英文：50 Useful Coding Techniques (CSS Layouts, Visual Effects and Forms)
翻译：web启点
来源：50例有用的编码技术（CSS布局，视觉效果及表格）|web启点
相关文章
nice!