CSS 实例
CSS背景
设置ä¸�å�Œå…ƒç´ 的背景颜色
设置一个图�作为页�的背景
如何在水平方���背景图�
一个固定的背景图片(这个图片�会�页�的其余部分滚动)
CSS文本
设置ä¸�å�Œå…ƒç´ 的文本颜色
指定了å—符之间的空间
指定了行与行之间的空间
åœ¨ä¸€ä¸ªå…ƒç´ å†…ç¦�ç”¨æ–‡å—æ�¢è¡Œ
内部文å—图åƒ�的垂直对é½�
CSSçš„å—体
用百分比和em设置å—体的大å°�
在一个声明的所有å—体属性
CSS链接
为访问/æœªè®¿é—®é“¾æŽ¥æ·»åŠ ä¸�å�Œçš„颜色
在链接上使用文本装饰
CSS列表
åˆ—è¡¨ä¸æ‰€æœ‰ä¸�å�Œçš„åˆ—è¡¨é¡¹æ ‡è®°
è®¾ç½®ä½œä¸ºåˆ—è¡¨é¡¹æ ‡è®°çš„å›¾åƒ�
使用跨æµ�è§ˆå™¨è§£å†³æ–¹æ¡ˆè®¾ç½®ä¸€ä¸ªåˆ—è¡¨é¡¹æ ‡è®°çš„å›¾åƒ�
在一个声明ä¸çš„æ‰€æœ‰åˆ—表属性
css 移除列表项 li é»˜è®¤æ ·å¼�
CSSè¡¨æ ¼
指定一个表的Th,TDå…ƒç´ å’Œé»‘è‰²è¾¹æ¡†
æŒ‡å®šè¡¨æ ¼çš„å®½åº¦å’Œé«˜åº¦
设置内容的水平对�方�(文本对�)
设置内容的垂直对�(垂直对�)
CSS盒模型
æŒ‡å®šå…ƒç´ çš„æ€»å®½åº¦ä¸º250åƒ�ç´
使用跨æµ�è§ˆå™¨çš„è§£å†³æ–¹æ¡ˆæŒ‡å®šå…ƒç´ çš„æ€»å®½åº¦ä¸º250åƒ�ç´ çš„
CSS边框
在一个声明ä¸çš„æ‰€æœ‰è¾¹æ¡†å±žæ€§
在一个声明ä¸çš„æ‰€æœ‰é¡¶éƒ¨è¾¹æ¡†å±žæ€§
在一个声明ä¸çš„æ‰€æœ‰ä¸‹è¾¹æ¡†å±žæ€§
在一个声明ä¸çš„æ‰€æœ‰å·¦è¾¹æ¡†å±žæ€§
在一个声明ä¸çš„æ‰€æœ‰å�³è¾¹æ¡†å±žæ€§
CSS轮廓
å›´ç»•ä¸€ä¸ªå…ƒç´ ï¼ˆoutline),绘制一æ�¡çº¿
CSS边�
文本顶部边�设置的值使用厘米
使用百分比值设置文本的底部边缘
使用厘米值设置文本的左边�
CSSå¡«å……
在一个声明ä¸çš„æ‰€æœ‰å¡«å……属性
CSS分组和嵌套
CSS尺寸
使用åƒ�ç´ å€¼è®¾ç½®å›¾åƒ�的高度
使用百分比设置图�的高度
使用åƒ�ç´ å€¼æ�¥è®¾ç½®å…ƒç´ 的宽度
使用百分比æ�¥è®¾ç½®å…ƒç´ 的宽度
使用åƒ�ç´ å€¼è®¾ç½®å…ƒç´ çš„æœ€å¤§å®½åº¦
使用百分比æ�¥è®¾ç½®å…ƒç´ 的最大宽度
使用åƒ�ç´ å€¼æ�¥è®¾ç½®å…ƒç´ 的最å°�宽度
使用百分比æ�¥è®¾ç½®å…ƒç´ 的最å°�宽度
CSS显示
如何éš�è—�ä¸€ä¸ªå…ƒç´ (visibility:hidden)
如何ä¸�æ˜¾ç¤ºå…ƒç´ (display:none)
å¦‚ä½•æ˜¾ç¤ºä¸€ä¸ªå…ƒç´ çš„å†…è�”å…ƒç´
å¦‚ä½•æ˜¾ç¤ºä¸€ä¸ªå…ƒç´ çš„å�—å…ƒç´
å¦‚ä½•ä½¿ç”¨è¡¨æ ¼çš„collapse属性
CSS定�
å…ƒç´ ç›¸å¯¹æµ�览器窗å�£çš„ä½�ç½®
如何使用滚动æ�¡æ�¥æ˜¾ç¤ºå…ƒç´ 内溢出的内容
如何设置�览器自动溢出处�
使用åƒ�ç´ å€¼è®¾ç½®å›¾åƒ�的顶部
使用åƒ�ç´ å€¼è®¾ç½®å›¾åƒ�的底部
使用åƒ�ç´ å€¼è®¾ç½®å›¾åƒ�的左边
使用åƒ�ç´ å€¼è®¾ç½®å›¾åƒ�çš„å�³è¾¹
CSS浮动
为图åƒ�æ·»åŠ è¾¹æ¡†å’Œè¾¹è·�并浮动到段è�½çš„左侧
æ ‡é¢˜å’Œå›¾ç‰‡å�‘å�³ä¾§æµ®åЍ
让段è�½çš„ç¬¬ä¸€ä¸ªå—æ¯�浮动到左侧
使用float属性创建一个图片廊
åˆ›å»ºä¸€ä¸ªæ²¡æœ‰è¡¨æ ¼çš„ç½‘é¡µ
CSS对é½�å…ƒç´
使用跨�览器解决方案,设置左/��置对�
使用跨�览器解决方案,设置左/��置对�,浮动
CSS生�的内容
把括�内的URL用content属性�入到�个链接��
ç« èŠ‚å’Œåˆ†èŠ‚çš„ç¼–å�·æ˜¯"第1节","1.1","1.2"ç‰
CSS伪类
æ·»åŠ ä¸�å�Œé¢œè‰²çš„超链接
ç»™è¶…é“¾æŽ¥æ·»åŠ å…¶ä»–æ ·å¼�
:first-child - 匹é…�了第一个 p å…ƒç´
:first-child - 匹é…�了 p å…ƒç´ ä¸çš„第一个 i å…ƒç´
:first-child - 匹é…�了第一个på…ƒç´ ä¸çš„æ‰€æœ‰Iå…ƒç´
CSS伪元ç´
æŠŠæ–‡æœ¬çš„ç¬¬ä¸€ä¸ªå—æ¯�è®¾ä¸ºç‰¹æ®Šçš„å—æ¯�
把第一行文å—设置为特殊
把第一行文å—çš„ç¬¬ä¸€ä¸ªå—æ¯�设置为特殊
ä½¿ç”¨ï¼šåœ¨ä¸€ä¸ªå…ƒç´ ä¹‹å‰�æ�’入一些内容
ä½¿ç”¨ï¼šåœ¨ä¸€ä¸ªå…ƒç´ ä¹‹å�Žæ�’入一些内容
CSS导航æ �
CSS图片廊
CSS图�的��明度
创建é€�明图åƒ� - é¼ æ ‡æ‚¬å�œæ•ˆæžœ
创建一个背景图�与文本的�明框
CSS图�拼�
CSS属性选择器
选择具有title属性的元ç´
é€‰æ‹©æ ‡é¢˜=一个特定值的元ç´
é€‰æ‹©æ ‡é¢˜=ä¸€ä¸ªç‰¹å®šå€¼çš„å…ƒç´ (使用(~)分隔属性和值)
é€‰æ‹©æ ‡é¢˜=ä¸€ä¸ªç‰¹å®šå€¼çš„å…ƒç´ (使用(|)分隔属性和值)
CSS 应用实例
- CSS åŠ è½½è¿›åº¦æ�¡
- CSS åˆ†é¡µæ ·å¼�
- CSS 进度�
- CSS �示信�实例
- CSS æ–‡å—覆盖图åƒ�悬å�œæ•ˆæžœ
- CSS æ–‡å—覆盖图åƒ�悬å�œæ•ˆæžœ - 从上至下
- CSS æ–‡å—覆盖图åƒ�悬å�œæ•ˆæžœ – 从下至上
- CSS æ–‡å—覆盖图åƒ�悬å�œæ•ˆæžœ – 从å�³è‡³å·¦
- CSS æ–‡å—覆盖图åƒ�悬å�œæ•ˆæžœ – 从左至å�³
- CSS æ–‡å—覆盖图åƒ�悬å�œæ•ˆæžœ – æ·¡å…¥é€�明
- CSS 垂直按钮组
- CSS 按钮组
- CSS Loading(åŠ è½½) 动画效果
- CSS Loading(åŠ è½½) 动画效果2
- CSS Loading(åŠ è½½) 动画效果3
- CSS Loading(åŠ è½½) 动画效果4
- CSS 动��索框
- CSS 用户信��片
- CSS å�¡ç‰‡æ ·å¼�
- CSS 上一页ã€�ä¸‹ä¸€é¡µæ ·å¼�
- CSS ���示信�框
- CSS 三ç§�ä»·æ ¼è¡¨æ ·å¼�
- CSS å¼€å…³æ ·å¼�
- CSS 让 DIV æ°´å¹³å±…ä¸æ˜¾ç¤º
- CSS 上下左å�³å››ä¸ªæ–¹å�‘ç®å¤´
- CSS �馈信�表�
- CSS font-awesome å›¾æ ‡è�œå�•æ �
- CSS é¡¶éƒ¨å¯¼èˆªæ ·å¼�实例
- CSS ä¾¿ç¾æ ·å¼�效果
- CSS 水平滚动��
- CSS 垂直��
- CSS 垂直滚动��
- CSS 固定è�œå�•æ �
- CSS �应�登陆表�
- CSS 固定底部è�œå�•æ �
- CSS 下拉��
- CSS 下拉内容的对�方�
- CSS 导航�下拉��
- CSS 带æ�œç´¢æ¡†çš„导航æ �
- CSS 带æ�œç´¢å¯¼èˆªæ � - 带æ��交按钮
- CSS 带æ�œç´¢å¯¼èˆªæ � - 带æ��æ�œç´¢å›¾æ ‡
- CSS 固定左侧导航æ �
- CSS 固定左侧导航æ � – 高度自适应
- HTML/CSS/JS �系我们表�模�(带百度地图)
- CSS 设计一个网页
更多实例:https://c.runoob.com/examples/
点我分享笔记