自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(66)
  • 收藏
  • 关注

翻译 CSS3 基础(015_媒体查询 - 示例)

原始网址:http://www.w3schools.com/css/css3_mediaqueries_ex.asp翻译:CSS3 媒体查询 - 示例(CSS3 Media Queries - Examples)CSS3 媒体查询 - 更多示例(CSS3 Media Queries - More Examples)请查看使用 media queries 的更多示例。 我们以名

2016-11-09 19:54:06 914

翻译 CSS3 基础(014_媒体查询)

原始网址:http://www.w3schools.com/css/css3_mediaqueries.asp翻译:CSS3 媒体类型(CSS3 Media Queries)CSS2 中介绍的媒体类型(CSS2 Introduced Media Types)@media 规则出现于 CSS2,这使得对不同媒体类型定义不同样式成为可能。 例如:你可能针对电脑屏幕、打印机、手持设备、电视类设备等等有各

2016-11-08 21:16:49 502

翻译 CSS3 基础(013_Flexible Box)

原始网址:http://www.w3schools.com/css/css3_flexbox.asp翻译:CSS3 Flexible BoxCSS3 Flexbox在 CSS3 中,flexible boxes 或 flexbox 是一种新的布局模式。 当页面的布局必须适应不同的屏幕尺寸和不同的显示设备时,flexbox 的使用确保元素的行为可预见。 对许多应用而言,fle

2016-11-08 20:55:01 1099

翻译 CSS3 基础(012_Box Sizing)

原始网址:http://www.w3schools.com/css/css3_box-sizing.asp翻译:CSS3 Box SizingCSS3 Box SizingCSS3 box-sizing 属性允许我们将内边距和边框包含在元素的总宽高之内。Browser Support表格里的数字代表对 CSS3 属性全面支持的各浏览器的第一个版本号。 数字之后跟从

2016-11-07 22:38:07 423

翻译 CSS3 基础(011_用户接口)

原始网址:http://www.w3schools.com/css/css3_user_interface.asp翻译:CSS3 用户接口(CSS3 User Interface)CSS3 用户接口CSS3 有新的用户接口特点,例如 resizing elements、outlines 以及 box sizing 。 本章,你将学习以下用户接口属性:resizeout

2016-11-07 22:15:53 375

翻译 CSS3 基础(010_多列布局)

原始网址:http://www.w3schools.com/css/css3_multiple_columns.asp翻译:CSS3 多列(CSS3 Multiple Columns)CSS3 多列布局(CSS3 Multi-column Layout)CSS3 多列布局对文本的多列定义来说是很容易的,它的效果如同报纸: html>head>style>.w3

2016-11-07 22:07:58 1069

翻译 CSS3 基础(009_按钮)

原始网址:http://www.w3schools.com/css/css3_buttons.asp翻译:CSS 按钮(CSS Buttons)学习使用 CSS 如何样式化按钮。基本按钮样式(Basic Button Styling).button { background-color: #4CAF50; /* Green */ border: none

2016-11-07 21:43:27 455

翻译 CSS3 基础(008_图片)

原始网址:http://www.w3schools.com/css/css3_images.asp翻译:CSS 图片(CSS Images)学习使用 CSS 如何样式化图片。圆角图片(Rounded Images)使用 border-radius 属性创建圆角图片:img { border-radius: 8px;}html>head>s

2016-11-04 19:51:38 547

翻译 CSS3 基础(007_动画)

原始网址:http://www.w3schools.com/css/css3_animations.asp翻译:CSS3 动画(CSS3 Animations)CSS3 动画(CSS3 Animations)CSS3 animations 允许在不使用 JavaScript 或 Flash 的情况下对元素添加动画效果!html>head>style>#anima

2016-11-04 19:21:54 931

翻译 CSS3 基础(006_过渡)

原始网址:http://www.w3schools.com/css/css3_transitions.asp翻译:CSS3 过渡(CSS3 Transitions)CSS3 过渡CSS3 过渡允许你在给定的持续时间之内以平缓地改变属性值(从一个值改变为另一个值)。示例:鼠标指针悬停于下列元素之上以观察 CSS3 的过渡效果 <!DOCTYPE html><html><head><style>

2016-11-03 21:27:28 432

翻译 CSS3 基础(005_3D 变换)

原始网址:http://www.w3schools.com/css/css3_3dtransforms.asp翻译:CSS3 3D 变换(CSS3 3D Transforms)CSS 3D 变换CSS3 允许你使用 3D 变换(3D transformations)格式化元素。 将鼠标指针移至以下元素,查看 2D 和 3D 变换的区别: html lang="en-

2016-11-03 20:51:08 487

翻译 CSS3 基础(005_2D 变换)

原始网址:http://www.w3schools.com/css/css3_2dtransforms.asp翻译:CSS3 2D 变换(CSS3 2D Transforms)CSS3 变换(CSS3 Transforms)CSS3 变换允许你对元素进行移动(translate)、旋转(rotate)、伸缩(scale)、倾斜(skew)。 变换效果是,让元素改变形状、大小和位置。 CSS3 支

2016-11-02 21:10:13 984

翻译 CSS3 基础(004_文本)

原始网址:http://www.w3schools.com/css/css3_text_effects.asp翻译:CSS3 文本CSS3 文本CSS3 包含几个新的文本特征。在本章,你将学习到以下文本属性:text-overflowword-wrapword-break

2016-11-02 20:38:09 544

翻译 CSS3 基础(003_背景)

原始网址:http://www.w3schools.com/css/css3_backgrounds.asp翻译:CSS3 背景(CSS3 Backgrounds)html>head>style>#example1 { background: url("http://www.w3schools.com/css/img_flwr.gif") no-repeat

2016-11-02 19:33:47 796

翻译 CSS3 基础(002_边框图)

原始网址:http://www.w3schools.com/css/css3_border_images.asp翻译:CSS3 边框图(CSS3 Border Images)<!DOCTYPE html><html><head><style>#border_image_top { -moz-border-bottom-colors: none; -moz-border-lef

2016-11-01 21:21:48 614

翻译 CSS3 基础(001_圆角)

原始网址:http://www.w3schools.com/css/css3_borders.asp翻译:CSS3 圆角(CSS3 Rounded Corners)html>head>style>.w3-theme-border { border-color: #4caf50 !important;}.w3-codespan { backgro

2016-11-01 21:11:50 513

翻译 CSS 基础(026_计数器)

原始网址:http://www.w3schools.com/css/css_counters.asp翻译:CSS 计数器(CSS Counters)CSS 计数器是由 CSS 维护的“变量”,它的值能够根据 CSS 规则(追踪它们的执行次数)不断累加。计数器让我们可以基于内容所在文档的位置来调整它的外观。Automatic Numbering With Counters

2016-11-01 21:06:25 360

翻译 CSS 基础(025_表单)

原始网址:http://www.w3schools.com/css/css_form.asp翻译:CSS 表单使用 CSS 能够对 HTML 表单的外观进行极大地改善: html lang="en-US">head>meta http-equiv="Content-Type" content="text/html; charset=UTF-8">title>CSS

2016-11-01 20:30:28 357

翻译 CSS 基础(024_属性选择器)

原始网址:http://www.w3schools.com/css/css_attribute_selectors.asp翻译:CSS 属性选择器(CSS Attribute Selectors)样式化带有特定属性的 HTML 元素样式化具有特定属性或属性值的 HTML 元素是可能的。CSS [attribute] 选择器[attribute] 选择器选择带有特定属

2016-11-01 19:55:28 436

翻译 CSS 基础(023_图片小精灵)

原始网址:http://www.w3schools.com/css/css_image_sprites.asp翻译:CSS 图片小精灵(CSS Image Sprites)图片小精灵(Image Sprites)图片小精灵是指将图片集放入单张图片中。 含有很多图片的 web 页面加载时间会很长,还会产生多个服务器请求。 使用图片小精灵将减少服务期请求数、节省带宽(bandw

2016-10-29 00:05:31 1149 1

翻译 CSS 基础(022_图片画廊)

原始网址:http://www.w3schools.com/css/css_image_gallery.asp翻译:CSS 图片画廊(CSS Image Gallery)CSS 可用于创建图片画廊:html lang="en-US">head>meta http-equiv="Content-Type" content="text/html; charset=UTF-

2016-10-28 23:25:38 743

翻译 CSS 基础(021_提示框)

原始网址:http://www.w3schools.com/css/css_tooltip.asp翻译:CSS 提示框使用 CSS 创建提示框。演示:提示框示例当用户移动鼠标指针至元素之上的时候,提示框经常用以对相关内容指定额外信息: html>head>style>.w3-row::after { clear: both; conte

2016-10-28 21:27:27 1086

翻译 CSS 基础(020_下拉式菜单)

原始地址:http://www.w3schools.com/css/css_dropdowns.asp翻译:CSS 下拉式菜单(CSS Dropdowns)使用 CSS 创建可悬停、下拉式菜单。演示:下拉式菜单示例移动鼠标至以下示例: 这里写代码片

2016-10-27 19:39:08 1101 1

翻译 CSS 基础(019_导航栏)

原始网址:http://www.w3schools.com/css/css_navbar.asp翻译:CSS 导航栏演示:导航栏 <!DOCTYPE html><html lang="en-US"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>CSS Navigation Bar<

2016-10-25 23:14:08 1407

翻译 CSS 基础(018_Opacity / Transparency)

原始网址:http://www.w3schools.com/css/css_image_transparency.asp翻译:CSS Opacity / Transparencyopacity 属性用以定义元素的 opacity/transparency 。Transparent Imageopacity 属性取值范围是 0.0 - 1.0 。值越低,越透明:

2016-10-25 22:22:31 727

翻译 CSS 基础(017_伪元素)

原始网址:http://www.w3schools.com/css/css_pseudo_elements.asp翻译:CSS 伪元素什么是伪元素?CSS 伪元素用以式样化元素的特定部分。 例如,它有以下使用:式样化首字母、行或元素在元素内容的前、后插入新内容语法伪元素的语法:selector::pseudo-element { prop

2016-10-25 19:33:21 322

翻译 CSS 基础(016_伪类)

原始网址:http://www.w3schools.com/css/css_pseudo_classes.asp翻译:CSS Pseudo-classes什么是伪类?伪类用以定义元素的特定状态。 例如,它被用于:当用户鼠标滑过时,定义元素的式样给已访问的链接和未访问的链接定义不同的式样给已获得焦点的元素定义式样 <!DOCTYPE html><html lang="en-US"><hea

2016-10-24 21:34:17 359

翻译 CSS 基础(015_Combinators)

原始网址:http://www.w3schools.com/css/css_combinators.asp翻译:CSS CombinatorsCSS Combinatorscombinator 用以解释选择器之间的关系。CSS 选择器可以包含多个简单选择器,在简单选择器之间,我们可以包含一个 combinator 。 在 CSS3 中,有以下 4 种 combinator

2016-10-24 21:09:22 621

翻译 CSS 基础(014_Align)

原始网址:http://www.w3schools.com/css/css_align.asp翻译:CSS Layout - Horizontal & Vertical Alignhtml> head> style> h2 { font-size: 30px; font

2016-10-24 19:33:12 301

翻译 CSS 基础(013_行内-块)

CSS Layout - inline-blockThe inline-block Value创建盒子式的表格,使其占据浏览器的整个宽度,并且该表格被浏览器包裹得很好(任意改变浏览器窗口的大小),使用 float 属性在很长一段时间是可能。 然而,将 display 属性设置为 inline-block 值以创建盒子式的表格会更容易。 inline-block 元素类似于行内(

2016-10-21 21:30:54 268

翻译 CSS 基础(012_浮动)

CSS Layout - float and clearfloat 属性指定元素是否需要浮动。 clear 属性用以控制浮动元素的行为。 html> head> style> div.left{ background-color: #2196F3; padding:

2016-10-20 19:13:55 295

原创 web前端(001_滚动效果)

示例:html> head> meta http-equiv="content-type" content="text/html; charset=utf-8" /> title>滚动效果title> style type="text/css"> div { border: 1px sol

2016-10-19 20:59:07 366

翻译 CSS 基础(011_Overflow)

原始网址:http://www.w3schools.com/css/css_overflow.asp翻译:CSS Layout - OverflowCSS Overflow当元素的内容太大而无法适应特定区域的时候,overflow 属性用以指定是剪切内容还是增加滚动条。 html lang="en-US"> head> style>

2016-10-18 22:31:09 262

翻译 CSS 基础(010_定位)

原始网址:http://www.w3schools.com/css/css_positioning.asp翻译:CSS Layout - The position Property

2016-10-18 21:03:47 491

翻译 CSS 基础(009_Max-width)

原始网址:http://www.w3schools.com/css/css_max-width.asp翻译:CSS Layout - width and max-width使用 width,max-width 和 margin: auto;在之前的章节中提到过,块级元素总是占据整行(向行左、右无限延伸)。 对块级元素设置 width 会阻止它向父级容器的边界延伸。接下来,为了

2016-10-18 21:02:37 296

翻译 CSS 基础(008_显示)

原始网址:http://www.w3schools.com/css/css_display_visibility.asp翻译:CSS Layout - The display Propertydisplay 属性是控制布局的最重要的 CSS 属性。The display Propertydisplay 属性用以指定元素如何被显示。 根据不同的元素类型,每一个 HTML

2016-10-15 11:42:25 535

翻译 CSS 基础(007_表格)

CSS Tables用 CSS 可以使 HTML 表格的外观得到极大改善: html lang="en-US"> head> title>CSS Styling Tablestitle> meta charset="utf-8"> style> table#customers {

2016-10-15 00:03:25 1301

翻译 CSS 基础(006_图标)

CSS Icons示例: html lang="en-US"> head> title>CSS Iconstitle> meta charset="utf-8"> link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.

2016-10-13 23:15:00 473

翻译 CSS 基础(005_轮廓)

原始网址:http://www.w3schools.com/css/css_outline.asp翻译:CSS OutlineCSS OutlineCSS 的 outline 属性用以指定轮廓的样式、颜色和宽。 轮廓是围绕元素(边框之外)的线条,用以“凸显”元素。 然而,outline 属性和 border 属性是不同的,outline 不是元素范围的部分;元素的总宽和高不

2016-10-13 21:34:20 435

翻译 CSS 基础(004_外边距)

原始网址:http://www.w3schools.com/css/css_margin.asp翻译:CSS Margins<!DOCTYPE html><html> <head> <style> div.line { border-style: solid none; border-w

2016-10-12 22:10:45 431

空空如也

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除