当前位置:首页 > CSS编程 > css基础

css基础

CSS3 圆角

12

#rcorners1{border-radius:25px;background:#8AC007;padding:20px;width:200px;height:150px;}#rcorners2{border-radius:25px;bo

CSS3 弹性盒子

7

CSS3弹性盒子(FlexBox)弹性盒子是CSS3的一种新的布局模式。CSS3弹性盒(FlexibleBox或flexbox),是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。引入弹性盒布局模型的目的是提

CSS 导航栏

16

CSS导航栏ul.horizontal{list-style-type:none;margin:0;padding:0;overflow:hidden;background-color:#333;}ul.horizontalli{float

CSS3 用户界面

6

CSS3用户界面CSS3用户界面在CSS3中,增加了一些新的用户界面特性来调整元素尺寸,框尺寸和外边框。在本章中,您将了解以下的用户界面属性:resizebox-sizingoutline-offset浏览器支持表格中的数字表示支持该属性的

CSS 图片

12

CSS图片本章节将为大家介绍如何使用CSS来布局图片。圆角图片实例圆角图片:img{border-radius:8px;}实例椭圆形图片:img{border-radius:50%;}缩略图我们使用border属性来创建缩略图。实例img{

CSS 布局 Overflow

19

CSS布局-OverflowCSSoverflow属性用于控制内容溢出元素框时显示的方式。#overflowTest{background:#4CAF50;color:white;padding:15px;width:80%;height:

CSS 颜色十六进制值

13

css颜色十六进制值按十六进制值排序列表按颜色名称进行排序colornamehexcolorblack#000000navy#000080darkblue#00008bmediumblue#0000cdblue#0000ffdarkgree

CSS margin(外边距)

14

CSSmargin(外边距)CSSmargin(外边距)属性定义元素周围的空间。marginmargin清除周围的(外边框)元素区域。margin没有背景颜色,是完全透明的。margin可以单独改变元素的上,下,左,右边距,也可以一次改变所

CSS3 渐变

11

CSS3渐变(Gradients)渐变效果CSS3渐变(gradients)可以让你在两个或多个指定的颜色之间显示平稳的过渡。以前,你必须使用图像来实现这些效果。但是,通过使用CSS3渐变(gradients),你可以减少下载的时间和宽带的

响应式 Web 设计 – 框架

11

响应式Web设计-框架本章节为大家介绍响应式Web设计框架Bootstrap。Bootstrap,来自Twitter,是目前最受欢迎的前端框架。Bootstrap是基于HTML、CSS、JAVASCRIPT的,它简洁灵活,使得Web开发更加

CSS3 多媒体查询实例

10

CSS3多媒体查询实例本章节我们将为大家演示一些多媒体查询实例。开始之前我们先制作一个电子邮箱的链接列表。HTML代码如下:实例1<!DOCTYPEhtml><html><head><style&g

CSS text-transform 属性

19

csstext-transform属性实例转换不同元素中的文本:h1{text-transform:uppercase;}h2{text-transform:capitalize;}p{text-transform:lowercase;}属

响应式 Web 设计 &#8211; 网格视图

7

响应式Web设计-网格视图什么是网格视图?很多网页都是基于网格设计的,这说明网页是按列来布局的。使用网格视图有助于我们设计网页。这让我们向网页添加元素变的更简单。响应式网格视图通常是12列,宽度为100%,在浏览器窗口大小调整时会自动伸缩。

CSS 轮廓(outline)属性

6

CSS轮廓(outline)轮廓(outline)是绘制于元素周围的一条线,位于边框边缘的外围,可起到突出元素的作用。轮廓(outline)属性指定元素轮廓的样式、颜色和宽度。轮廓(outline)实例在元素周围画线本例演示使用outlin

CSS 分页实例

6

CSS分页实例.article-bodyulli{background-image:none}.pagination,.pagination2,.pagination3{display:inline-block;padding:0;marg

CSS3 多列

7

CSS3多列CSS3可以将文本内容设计成像报纸一样的多列布局,如下实例:.newspaper{border:1pxblacksolid;padding:15px;-webkit-column-count:3;/*Chrome,Safari,

CSS 布局 &#8211; 水平 &#038; 垂直对齐

9

CSS布局-水平&垂直对齐水平&垂直居中对齐元素居中对齐要水平居中对齐一个元素(如<div>),可以使用margin:auto;。设置到元素的宽度将防止它溢出到容器的边缘。元素通过指定宽度,并将两边的空外边距平均分配:div元素

CSS Position(定位)

12

CSSPosition(定位)position属性指定了元素的定位类型。position属性的五个值:staticrelativefixedabsolutesticky元素可以使用的顶部,底部,左侧和右侧属性定位。然而,这些属性无法工作,除

CSS 计数器

9

CSS计数器CSS计数器通过一个变量来设置,根据规则递增变量。使用计数器自动编号CSS计数器根据规则来递增变量。CSS计数器使用到以下几个属性:counter-reset-创建或者重置计数器counter-increment-递增变量con

CSS 链接(link)

10

CSS链接不同的链接可以有不同的样式。链接样式链接的样式,可以用任何CSS属性(如颜色,字体,背景等)。特别的链接,可以有不同的样式,这取决于他们是什么状态。这四个链接状态是:a:link-正常,未访问过的链接a:visited-用户已访问