小白教程
所有教程
关于
Search
172.69.59.79
172.69.59.79
参数设置
贡献
退出
操作
编辑
移动
保护
信息
历史
删除
查看“CSS 实例”的源代码
本页内容
上一节:
CSS_总结
下一节:
CSS3_教程
因为以下原因,您没有权限编辑本页:
您请求的操作仅限属于该用户组的用户执行:
用户
您可以查看和复制此页面的源代码。
{{DISPLAYTITLE:CSS 实例}}[[Category:CSS 教程|40]] = CSS 实例 = == CSS背景 == [[try.php?filename=trycss_background color_body|设置页面的背景颜色]] [[try.php?filename=trycss_background color_elements|设置不同元素的背景颜色]] [[try.php?filename=trycss_background image|设置一个图像作为页面的背景]] [[try.php?filename=trycss_background image_bad|错误的背景图片]] [[try.php?filename=trycss_background image_gradient2|如何在水平方向重复背景图像]] [[try.php?filename=trycss_background image_position|如何定位背景图像]] [[try.php?filename=trycss_background attachment|一个固定的背景图片(这个图片不会随页面的其余部分滚动)]] [[try.php?filename=trycss_background_shorthand|声明背景属性]] [[try.php?filename=trycss_background_shorthand2|高级的背景例子]] [[css background|'''背景属性的解释''']] == CSS文本 == [[try.php?filename=trycss_color|设置不同元素的文本颜色]] [[try.php?filename=trycss_text align_all|文本对齐]] [[try.php?filename=trycss_text decoration_link|移除链接下划线]] [[try.php?filename=trycss_text decoration|装饰文字]] [[try.php?filename=trycss_text transform|控制文本中的字母]] [[try.php?filename=trycss_text indent|缩进文本]] [[try.php?filename=trycss_letter spacing|指定了字符之间的空间]] [[try.php?filename=trycss_line height|指定了行与行之间的空间]] [[try.php?filename=trycss_text direction|设置元素的文本方向]] [[try.php?filename=trycss_text word spacing|增加单词之间的空格]] [[try.php?filename=trycss_text white space|在一个元素内禁用文字换行]] [[try.php?filename=trycss_vertical align|内部文字图像的垂直对齐]] [[css text|'''Text属性的解释''']] == CSS的字体 == [[try.php?filename=trycss_font family|设置文本的字体]] [[try.php?filename=trycss_font size|设置字体大小]] [[try.php?filename=trycss_font size_px|用px设置的字体的大小]] [[try.php?filename=trycss_font size_em|用em设置的字体的大小]] [[try.php?filename=trycss_font size_percent_em|用百分比和em设置字体的大小]] [[try.php?filename=trycss_font style|设置字体样式]] [[try.php?filename=trycss_font variant|设置字体的异体]] [[try.php?filename=trycss_font weight|设置字体的粗细]] [[try.php?filename=trycss_font|在一个声明的所有字体属性]] [[css font|'''Font属性的解释''']] == CSS链接 == [[try.php?filename=trycss_link|为访问/未访问链接添加不同的颜色]] [[try.php?filename=trycss_link_decoration|在链接上使用文本装饰]] [[try.php?filename=trycss_link_background|指定链接的背景颜色]] [[try.php?filename=trycss_link2|超链接添加其他样式]] [[try.php?filename=trycss_link_advanced|高级 - 创建链接框]] [[css link|'''链接属性的解释''']] == CSS列表 == [[try.php?filename=trycss_list style type_all|列表中所有不同的列表项标记]] [[try.php?filename=trycss_list style image|设置作为列表项标记的图像]] [[try.php?filename=trycss_list style image_crossbrow|使用跨浏览器解决方案设置一个列表项标记的图像]] [[try.php?filename=trycss_list style|在一个声明中的所有列表属性]] [https://c.xiaobai.wang/codedemo/5390 css 移除列表项 li 默认样式] [[css list|'''列表属性的解释''']] == CSS表格 == [[try.php?filename=trycss_table_border|指定一个表的Th,TD元素和黑色边框]] [[try.php?filename=trycss_table_border collapse|使用border-collapse]] [[try.php?filename=trycss_table_width|指定表格的宽度和高度]] [[try.php?filename=trycss_table_align|设置内容的水平对齐方式(文本对齐)]] [[try.php?filename=trycss_table_vertical align|设置内容的垂直对齐(垂直对齐)]] [[try.php?filename=trycss_table_padding|指定TH和TD元素的填充]] [[try.php?filename=trycss_table_color|指定表格边框的颜色]] [[try.php?filename=trycss_table_caption side|设置表格标题的位置]] [[try.php?filename=trycss_table_fancy|创建一个奇特的表]] [[css table|'''表格属性的解释''']] == CSS盒模型 == [[try.php?filename=trycss_boxmodel_width|指定元素的总宽度为250像素]] [[try.php?filename=trycss_boxmodel_width_doctype|使用跨浏览器的解决方案指定元素的总宽度为250像素的]] [[css boxmodel|'''盒模型的解释''']] == CSS边框 == [[try.php?filename=trycss_border width|设置四个边框的宽度]] [[try.php?filename=trycss_border top width|设置上边框的宽度]] [[try.php?filename=trycss_border bottom width|设置底部边框的宽度]] [[try.php?filename=trycss_border left width|设置左边框的宽度]] [[try.php?filename=trycss_border right width|设置右边框的宽度]] [[try.php?filename=trycss_border style|设置四个边框的样式]] [[try.php?filename=trycss_border top style|设置上边框的样式]] [[try.php?filename=trycss_border bottom style|设置下边框的样式]] [[try.php?filename=trycss_border left style|设置左边框的样式]] [[try.php?filename=trycss_border right style|设置右边框的样式]] [[try.php?filename=trycss_border color|设置四个边框的颜色]] [[try.php?filename=trycss_border top color|设置上边框的颜色]] [[try.php?filename=trycss_border bottom color|设置下边框的颜色]] [[try.php?filename=trycss_border left color|设置左边框的颜色]] [[try.php?filename=trycss_border right color|设置右边框的颜色]] [[try.php?filename=trycss_border|在一个声明中的所有边框属性]] [[try.php?filename=trycss_border style2|每边设置不同的边框]] [[try.php?filename=trycss_border top|在一个声明中的所有顶部边框属性]] [[try.php?filename=trycss_border bottom|在一个声明中的所有下边框属性]] [[try.php?filename=trycss_border left|在一个声明中的所有左边框属性]] [[try.php?filename=trycss_border right|在一个声明中的所有右边框属性]] [[css border|'''边框属性的解释''']] == CSS轮廓 == [[try.php?filename=trycss_outline|围绕一个元素(outline),绘制一条线]] [[try.php?filename=trycss_outline style|设置轮廓的样式]] [[try.php?filename=trycss_outline color|设置轮廓颜色]] [[try.php?filename=trycss_outline width|设置轮廓的宽度]] [[css outline|'''轮廓属性的解释''']] == CSS边距 == [[try.php?filename=trycss_margin_sides|指定一个元素的边距]] [[try.php?filename=trycss_margin_shorthand|边距缩写属性]] [[try.php?filename=trycss_margin top|文本顶部边距设置的值使用厘米]] [[try.php?filename=trycss_margin bottom_percent|使用百分比值设置文本的底部边缘]] [[try.php?filename=trycss_margin left|使用厘米值设置文本的左边距]] [[css margin|'''Margin属性的解释''']] == CSS填充 == [[try.php?filename=trycss_padding left|设置元素的左部填充]] [[try.php?filename=trycss_padding right|设置元素的右部填充]] [[try.php?filename=trycss_padding top|设置元素的顶部填充]] [[try.php?filename=trycss_padding bottom|设置元素的底部填充]] [[try.php?filename=trycss_padding|在一个声明中的所有填充属性]] [[css padding|'''padding属性的解释''']] == CSS分组和嵌套 == [[try.php?filename=trycss_grouping|组选择器]] [[try.php?filename=trycss_nesting|嵌套选择器]] [[css grouping nesting|'''分组和嵌套解释''']] == CSS尺寸 == [[try.php?filename=trycss_dim_height|使用像素值设置图像的高度]] [[try.php?filename=trycss_dim_height_percent|使用百分比设置图像的高度]] [[try.php?filename=trycss_dim_width|使用像素值来设置元素的宽度]] [[try.php?filename=trycss_dim_width_percent|使用百分比来设置元素的宽度]] [[try.php?filename=trycss_dim_max height|设置元素的最大高度]] [[try.php?filename=trycss_dim_max width|使用像素值设置元素的最大宽度]] [[try.php?filename=trycss_dim_max width_percent|使用百分比来设置元素的最大宽度]] [[try.php?filename=trycss_dim_min height|设置元素的最低高度]] [[try.php?filename=trycss_dim_min width|使用像素值来设置元素的最小宽度]] [[try.php?filename=trycss_dim_min width_percent|使用百分比来设置元素的最小宽度]] [[css dimension|'''尺寸属性的解释''']] == CSS显示 == [[try.php?filename=trycss_visibility_hidden|如何隐藏一个元素(visibility:hidden)]] [[try.php?filename=trycss_display_none|如何不显示元素(display:none)]] [[try.php?filename=trycss_display|如何显示一个元素的内联元素]] [[try.php?filename=trycss_display_block|如何显示一个元素的块元素]] [[try.php?filename=trycss_visibility_collapse|如何使用表格的collapse属性]] [[css display visibility|'''Display属性的解释''']] == CSS定位 == [[try.php?filename=trycss_position_fixed|元素相对浏览器窗口的位置]] [[try.php?filename=trycss_position_relative|元素的相对定位]] [[try.php?filename=trycss_position_absolute|元素的绝对定位]] [[try.php?filename=trycss_zindex|重叠的元素]] [[try.php?filename=trycss_clip|设置元素的形状]] [[try.php?filename=trycss_overflow|如何使用滚动条来显示元素内溢出的内容]] [[try.php?filename=trycss_pos_overflow_auto|如何设置浏览器自动溢出处理]] [[try.php?filename=trycss_position_top|使用像素值设置图像的顶部]] [[try.php?filename=trycss_position_bottom|使用像素值设置图像的底部]] [[try.php?filename=trycss_position_left|使用像素值设置图像的左边]] [[try.php?filename=trycss_position_right|使用像素值设置图像的右边]] [[try.php?filename=trycss_cursor|更改光标]] [[css positioning|'''定位属性的解释''']] == CSS浮动 == [[try.php?filename=trycss_float|简单的使用float属性]] [[try.php?filename=trycss_float2|为图像添加边框和边距并浮动到段落的左侧]] [[try.php?filename=trycss_float3|标题和图片向右侧浮动]] [[try.php?filename=trycss_float4|让段落的第一个字母浮动到左侧]] [[try.php?filename=trycss_float_elements|使用float属性创建一个图片廊]] [[try.php?filename=trycss_float_clear|开启float - clear属性]] [[try.php?filename=trycss_float5|创建一个水平菜单]] [[try.php?filename=trycss_float6|创建一个没有表格的网页]] [[css float|'''Float属性的解释''']] == CSS对齐元素 == [[try.php?filename=trycss_align_container|使用margin的中间调整]] [[try.php?filename=trycss_align_pos|左/右位置对齐]] [[try.php?filename=trycss_align_pos_crossbrowser|使用跨浏览器解决方案,设置左/右位置对齐]] [[try.php?filename=trycss_align_float|左/右对齐,浮动]] [[try.php?filename=trycss_align_float_crossbrowser|使用跨浏览器解决方案,设置左/右位置对齐,浮动]] [[css align|'''对齐属性解释''']] == CSS生成的内容 == [[try.php?filename=trycss_gen_content|把括号内的URL用content属性插入到每个链接后面]] [[try.php?filename=trycss_gen_counter reset|章节和分节的编号是"第1节","1.1","1.2"等]] [[try.php?filename=trycss_gen_quotes|quotes 属性指定了引号]] == CSS伪类 == [[try.php?filename=trycss_link|添加不同颜色的超链接]] [[try.php?filename=trycss_link2|给超链接添加其他样式]] [[try.php?filename=trycss_link_focus|使用:焦点]] [[try.php?filename=trycss_first child1|:first-child - 匹配了第一个 p 元素]] [[try.php?filename=trycss_first child2|:first-child - 匹配了 p 元素中的第一个 i 元素]] [[try.php?filename=trycss_first child3|:first-child - 匹配了第一个p元素中的所有I元素]] [[try.php?filename=trycss_lang|使用:lang]] [[css pseudo classes|'''伪类的解释''']] == CSS伪元素 == [[try.php?filename=trycss_firstletter|把文本的第一个字母设为特殊的字母]] [[try.php?filename=trycss_firstline|把第一行文字设置为特殊]] [[try.php?filename=trycss_firstline_letter|把第一行文字的第一个字母设置为特殊]] [[try.php?filename=trycss_before|使用:在一个元素之前插入一些内容]] [[try.php?filename=trycss_after|使用:在一个元素之后插入一些内容]] [[css pseudo elements|'''伪元素的解释''']] == CSS导航栏 == [[try.php?filename=trycss_navbar_vertical_advanced|垂直导航栏的全样式]] [[try.php?filename=trycss_navbar_horizontal_float_advanced|水平导航栏的全样式]] [[css navbar|'''导航栏的解释''']] == CSS图片廊 == [[try.php?filename=trycss_image_gallery|图片廊]] [[css image gallery|'''图片廊解释''']] == CSS图像的不透明度 == [[try.php?filename=trycss_image_transparency|创建透明图像 - 鼠标悬停效果]] [[try.php?filename=trycss_transparency|创建一个背景图像与文本的透明框]] [[css image transparency|'''图像的不透明度解释''']] == CSS图像拼合 == [[try.php?filename=trycss_sprites_img|图像拼合]] [[try.php?filename=trycss_sprites_nav|图像拼合-导航列表]] [[try.php?filename=trycss_sprites_hover_nav|悬停效果与图像拼合]] [[css image sprites|'''图像拼合解释''']] == CSS属性选择器 == [[try.php?filename=trycss_attselector_att|选择具有title属性的元素]] [[try.php?filename=trycss_attselector_value|选择标题=一个特定值的元素]] [[try.php?filename=trycss_attselector_valuelist_space|选择标题=一个特定值的元素(使用(~)分隔属性和值)]] [[try.php?filename=trycss_attselector_valuelist_hyphen|选择标题=一个特定值的元素(使用(|)分隔属性和值)]] [[css attribute selectors|'''属性选择器解释''']] == CSS 应用实例 == * [https://c.xiaobai.wang/codedemo/3095 CSS 加载进度条] * [https://c.xiaobai.wang/codedemo/3098 CSS 分页样式] * [https://c.xiaobai.wang/codedemo/3105 CSS 进度条] * [https://c.xiaobai.wang/codedemo/3106 CSS 提示信息实例] * [https://c.xiaobai.wang/codedemo/3110 CSS 文字覆盖图像悬停效果] * [https://c.xiaobai.wang/codedemo/3111 CSS 文字覆盖图像悬停效果 - 从上至下] * [https://c.xiaobai.wang/codedemo/3112 CSS 文字覆盖图像悬停效果 – 从下至上] * [https://c.xiaobai.wang/codedemo/3113 CSS 文字覆盖图像悬停效果 – 从右至左] * [https://c.xiaobai.wang/codedemo/3114 CSS 文字覆盖图像悬停效果 – 从左至右] * [https://c.xiaobai.wang/codedemo/3115 CSS 文字覆盖图像悬停效果 – 淡入透明] * [https://c.xiaobai.wang/codedemo/3117 CSS 垂直按钮组] * [https://c.xiaobai.wang/codedemo/3118 CSS 按钮组] * [https://c.xiaobai.wang/codedemo/3134 CSS Loading(加载) 动画效果] * [https://c.xiaobai.wang/codedemo/3135 CSS Loading(加载) 动画效果2] * [https://c.xiaobai.wang/codedemo/3136 CSS Loading(加载) 动画效果3] * [https://c.xiaobai.wang/codedemo/3137 CSS Loading(加载) 动画效果4] * [https://c.xiaobai.wang/codedemo/3140 CSS 动态搜索框] * [https://c.xiaobai.wang/codedemo/3139 CSS 用户信息卡片] * [https://c.xiaobai.wang/codedemo/3138 CSS 卡片样式] * [https://c.xiaobai.wang/codedemo/3143 CSS 上一页、下一页样式] * [https://c.xiaobai.wang/codedemo/3142 CSS 各种提示信息框] * [https://c.xiaobai.wang/codedemo/3147 CSS 三种价格表样式] * [https://c.xiaobai.wang/codedemo/3146 CSS 开关样式] * [https://c.xiaobai.wang/codedemo/5378 CSS 让 DIV 水平居中显示] * [https://c.xiaobai.wang/codedemo/3151 CSS 上下左右四个方向箭头] * [https://c.xiaobai.wang/codedemo/3150 CSS 反馈信息表单] * [https://c.xiaobai.wang/codedemo/3155 CSS font-awesome 图标菜单栏] * [https://c.xiaobai.wang/codedemo/3165 CSS 顶部导航样式实例] * [https://c.xiaobai.wang/codedemo/3174 CSS 便签样式效果] * [https://c.xiaobai.wang/codedemo/3175 CSS 水平滚动菜单] * [https://c.xiaobai.wang/codedemo/3176 CSS 垂直菜单] * [https://c.xiaobai.wang/codedemo/3177 CSS 垂直滚动菜单] * [https://c.xiaobai.wang/codedemo/3178 CSS 固定菜单栏] * [https://c.xiaobai.wang/codedemo/5380 CSS 响应式登陆表单] * [https://c.xiaobai.wang/codedemo/3179 CSS 固定底部菜单栏] * [https://c.xiaobai.wang/codedemo/161 CSS 下拉菜单] * [https://c.xiaobai.wang/codedemo/450 CSS 下拉内容的对齐方式] * [https://c.xiaobai.wang/codedemo/162 CSS 导航条下拉菜单] * [https://c.xiaobai.wang/codedemo/5410 CSS 带搜索框的导航栏] * [[try.php?filename=css_searchbar2|CSS 带搜索导航栏 - 带提交按钮]] * [[try.php?filename=css_searchbar3|CSS 带搜索导航栏 - 带提搜索图标]] * [https://c.xiaobai.wang/codedemo/5411 CSS 固定左侧导航栏] * [https://c.xiaobai.wang/codedemo/5412 CSS 固定左侧导航栏 – 高度自适应] * [https://c.xiaobai.wang/codedemo/5379 HTML/CSS/JS 联系我们表单模板(带百度地图)] * [[htmlcss make a website|CSS 设计一个网页]] <blockquote>更多实例:https://c.xiaobai.wang/examples/ </blockquote>
返回至“
CSS 实例
”。
上一节:
CSS_总结
下一节:
CSS3_教程