先让我们来研究下table，那些年曾经使用的table布局为何如此辉煌荡漾呢？她的特点有哪些呢？抛弃table的兼容性、seo、加载等与本文无关的内容不谈，只看属性，那么就两个特点：1.同行等高。2.宽度自动调节。那么table-cell是不是具备这个特点呢？答案是yes，为什么呢？css中有一个有意思的规则“创建匿名表格元素”。拿table-cell来扯，就是，当某个元素被设置为display:table-cell的时候，如果她的父节点不是display：table-row，...
本文的学习要点如下： ?圆角 border-radius ?盒阴影 box-shadow ?边界图片 border-image 1.圆角 border-radius<div>border-radius 属性允许您为元素添加圆角边框！ </div> div { width: 200px; height: 100px; padding:20px; border: 1px solid red; border-radius : 25px; }2.盒阴影 box-shadow<div></div> div { width: 200px; height: 100px; background: red; /*x轴偏移量 y轴偏移量 模糊程度 阴影颜...
响应式布局可以为不同终端的用户提供更加舒适的界面和更好的用户体验，而且随着目前大屏幕移动设备的普及，用"大势所趋"来形容也不为过。随着越来越多的设计师采用这个技术，我们不仅看到很多的创新，还看到了一些成形的模式。随着技术的发展css3的特性也被广泛应用开来,它的很多新标签也非常好用而且非常容易学习,就像css3的响应式布局也是非常6的,原本只能在pc端显示的网页现在可以通过@media的加入就可以把一个网页变成响应式了...
box-align 说明box-align属性, 指定元素内子要素纵方向排列指定时使用。<规定框中子元素的显示次序。>容器元素比子元素大很多的情况下，使用box-align属性，可以指定子元素的排序顺序，并且可以指定子元素如何表示。还有，纵方向排列一说，可以解释为元素内子元素的配置方向默认值为水平，使用此属性后垂直方向进行排列。也可以使用 box-orient:vertical来设置子元素排列方向。属性值start：标准方向元素，各子要素上端沿着元素上端...
盒子是CSS中的基础概念，我们需要使用它来配置元素的外观以及文档的整体布局。1. 为元素应用内边距应用内边距会在元素内容和边距之间添加空白。我们可以为内容盒的每个边界单独设置内边距，或者使用 padding 简写属性在一条声明中设置所有的值。如果使用百分数值指定内边距，百分数总是根包含块的宽度相关，高度不考虑在内。下面代码展示了如何为元素应用内边距。<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><t...
前言这是一款漂亮简洁的CSS3价格表样式，该价格表基于Bootstrap网格系统来进行布局，通过简单的CSS3代码来美化价格表，样式非常的时尚漂亮，且能在不同屏幕下展示良好的效果。先来看效果图查看演示 下载源码首先在页面中引入bootstrap.min.css文件，这里我用官方的CDN资源，你也可以下载到本地使用。<link rel="stylesheet" href="http//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">该css3价格表的HTML结构如下：<p c...
简要教程这是一款使用纯CSS3制作的团队人员介绍动画特效。该特效使用Bootstrap的网格系统来进行布局，在鼠标滑过每个团队成员的图片时，描述信息会有一些动画特效。 使用方法在页面中引入bootstrap样式文件。<link rel="stylesheet" type="text/css" href="path/to/css/bootstrap.min.css">HTML结构该特效的HTML结构如下：<div class="container"><div class="row"><div class="col-md-3 col-sm-6"><div class="our-team"><img src...
在很多页面制作中会设计到突出一个三角，下面给出一种兼容各种浏览器的设计方法：<!DOCTYPE HTML> <html lang="en-US"> <head><meta charset="UTF-8"><title></title><style type="text/css">.corner-top{ width:0px; height:0px; font-size:0; border-width:20px; border-style:solid dashed dashed dashed; border-color:#e66161 transparent transparent transparent; } .corner-bottom{ wi...
下面小编就为大家带来一篇Flexbox制作CSS布局实现水平垂直居中的简单实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧Flexbox实现一个p元素在body页面中水平垂直居中：<!DOCTYPE html> <html lang="en"> <head><meta charset="utf-8"/><title>Flexbox制作CSS布局实现水平垂直居中</title><style type="text/css">html { height: 100%; } body { display: -webkit-box; /* 老版本语法...
方法一：使用border来设置边框，元素有高度和宽度<i class="triangle"></i>.triangle { transform: rotate(45deg); display: block; width: 12px; height: 12px; border: 1px solid #9e9e9e; border-top-color: transparent; border-right-color: transparent; background-color: #fff; }效果：利用transform属性可以旋转三角形，达到想要的效果。 方法二：利用border来撑起来三角形<i class="triangl...
响应式布局可以为不同终端的用户提供更加舒适的界面和更好的用户体验，而且随着目前大屏幕移动设备的普及，用"大势所趋"来形容也不为过。随着越来越多的设计师采用这个技术，我们不仅看到很多的创新，还看到了一些成形的模式。随着技术的发展css3的特性也被广泛应用开来，它的很多新标签也非常好用而且非常容易学习，就像css3的响应式布局也是非常6的，原本只能在pc端显示的网页现在可以通过@media的加入就可以把一个网页变成响应式...
效果图如下实例代码如下<!DOCTYPE html> <html><head><meta charset="UTF-8"><title></title><style>body{background: #000;}.box{width: 100%;height: 600px;background: #000;}.vr {display: block;width: 71px;height: 71px;border-radius: 50%;position: absolute;left: 18px;top: 22px;background:#98FB98 url(../imges/new_img/vr.png) no-repeat left top;background-size: 100% 100%;z-index: 99;}.vr_wrap {background: #...
前言最近在工作中遇到一个需求，实现的效果是当点击商品图片右上的收藏按钮触发放大动画，后来通过查找相关的资料，发现利用css3:@keyframes animation即可实现这个效果，下面来看看详细的介绍吧。示例代码<!DOCTYPE html> <head><style type="text/css">@keyframes myfirst {0% {width: 50px;height: 50px;top: 10px;right: 10px;}75% {width: 60px;height: 60px;top: 5px;right: 5px;}100% {width: 50px;height: 50px;top: 10px;...
我先说如何制作三角形吧，相信大家在平时逛网站的时候都会看到一些导航栏中的三角形吧，比如说： 网易首页的头部菜单栏中，也会有这样的三角形当鼠标经过时，三角形会垂直翻转，如下现在我分享制作三角形的做法，主要是利用边框做成的首先，四个三角形合并在一起的正方形，也就是正方形的四条边框形成的四个三角形源代码：<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>正方形</title><style>.p{ width:...
这篇文章给大家分享了如何利用CSS3把图片变成灰色模式的效果，实现起来很简单，有需要的朋友们可以参考借鉴。实例代码：代码如下: <!DOCTYPE html> <html> <head><meta charset="{CHARSET}"><title></title><style type="text/css">.gray {-webkit-filter: grayscale(100%);-moz-filter: grayscale(100%);-ms-filter: grayscale(100%);-o-filter: grayscale(100%);filter: grayscale(100%);filter: gray;}img{width:400px;}</style...