- 博客(19)
- 收藏
- 关注
RSS订阅原创 CSS往九宫格中填写9个数字，鼠标悬浮到某一个数字时，数字变色
table{ width: 150px; height: 150px; } td{ width: 50px; height: 50px; background: #555555; mso-cellspacing: 2px;
2017-05-27 22:13:33
1484
原创 CSS中怎样制作盒子阴影 box-shadow
div{ width: 200px; height: 200px; background-color: orange; /* box-shadow: 10px 20px red;*//*X方向的偏移 Y方向的偏移 阴影颜色*/ box-shadow: 10px 20px 5px
2017-05-26 22:23:01
2099
原创 CSS中的盒子弧度 border-radius
#div1{ width: 300px; height: 300px; background-color: red; overflow: hidden;/*为了不让图片整体下移，添加overflow*/ border-radius: 150px; }
2017-05-26 22:18:24
2394
原创 某标签在访问前后和鼠标悬浮时变色
/*伪类选择器：必须按顺序写（lvha）*/ a:link{ /*1、默认连接状态（未访问）*/ color: pink; } a:visited{ /*2、已访问状态*/ color: #000000; } a:hover{ /*3、鼠标悬浮状态*/
2017-05-26 22:11:30
2460
原创 CSS制作商品列表 欢迎来到贵美商城
代码： p{ text-decoration: underline; letter-spacing: 10px;/*每一个字体的左边距*/ } div{ width: 199px; background-image: url("
2017-05-26 22:03:10
4358
原创 CSS 用浮动制作一个导航栏
ul{ list-style: none; } li{ float: left;/*浮动:文本悬浮。脱离了文档流，悬浮在文档上方*/ width: 150px; color: red; font-size: 30px; te
2017-05-26 21:54:40
7764
原创 CSS制作一个商品分类列表，边框是圆角弧度
ul{ list-style: none; width: 200px; height: 300px; border: 1px solid orange;/*边框颜色*/ padding: 0; margin: 0; text-ali
2017-05-26 21:47:30
2018
原创 HTML、CSS中雪碧图的使用
雪碧图：多个图片集成在一个图片中的图使用雪碧图可以减少网络请求的次数，加快运行的速度。例如要使用下面的雪碧图：需要用到background-position属性代码示例： #container div{ /* 空格 后代选择器：选中下面的所有的div*/ height: 25px;
2017-05-26 21:27:01
12548
原创 CSS中背景图片的属性：background-repeat、background-position、background-size
背景图片的各种属性：1、background-repeat：设置图片平铺方式。有三个属性：no-repeat（图片保留自身大小不平铺）、repeat-x（图片在水平方向上平铺）、repeat-y（图片在垂直方向上平铺）2、background-position：确定图片显示的位置。background-position: 30px 50px; 图片在水平方向上向右偏移30px，在垂
2017-05-26 21:18:33
20037
原创 关于字体行高、下划线、滚动条、文本阴影的设置
p{ color: red; font-size: 30px; line-height: 50px;/*行高：单行字体占用的高度*/ text-align: left;/*字体的对齐方式: 1、justify两端对齐，
2017-05-26 20:52:10
1045
原创 CSS中关于字体样式p标签的属性
CSS中关于P标签中的样式：1、font-family：浏览器在显示字体的时候，依次判断是否支持当前的字体，直到最后的字体系列。font-family："宋体","仿宋",sans-serif; 浏览器若不支持宋体，则用仿宋；若不支持仿宋，则在sans-serif中找。2、font-weight：确定字体的粗细font-weight: bold; bold：加粗；b
2017-05-26 20:11:28
34197
原创 CSS3中display的用法
display属性：将元素从一个类型转化成另一个元素display属性的取值： inline：行内元素 block：块元素 inline-block：行内块元素 table：以表格的形式显示，类似于table元素 table-row：以表格的形式显示，类似于tr元素 table-cell：以表格的形式显示，类似
2017-05-13 22:04:23
569
原创 CSS3的动画效果@keyframes
定义动画的格式：@keyframes 动画名称{ 阶段1{css样式} 阶段2{css样式} 阶段3{css样式}}每个阶段用百分比表示，即从0%到100%起止必须设置即0%和100%，或者from和to 下列代码中的图片plane在屏幕中，呈W型运动 i
2017-05-13 21:56:17
738
原创 CSS3变形效果transform
transform各属性的定义：translate/translateX/translateY：在水平、垂直或者两个方向上平移元素。scale/scaleX/scaleY：在水平、垂直或者两个方向上缩放元素。 div{ border: 1px solid red; width: 160px;
2017-05-13 21:46:26
423
原创 CSS3中的长度单位（em、rem）
长度单位 我是第一层 <!--em:每一层的字体是前一层字体的2倍，以此累加 rem:每一层的字体是第一层字体的2倍--> 我是第二层 我是第三层 我是第四层
2017-05-13 21:37:26
334
原创 CSS3在各浏览器上的属性前缀
div{ width: 100px; height: 100px; background-color: red; -webkit-border-radius: 50px;/*针对谷歌和苹果浏览器*/ -o-border-radius: 20px;/*针对欧朋浏览器*/
2017-05-13 21:35:34
940
原创 相邻选择器、兄弟选择器
/* #li3 + li{ !*相邻选择器（渲染后面的相邻元素）：渲染列表项4*! color: red; }*/ #li3 ~ li{ /*兄弟选择器：渲染li3后面的所有元素*/ color: red; } 其他选择器 列表项1 列表项2
2017-05-13 21:30:59
589
原创 CSS3属性选择器
/* img[alt="234"]{ margin: 20px; }*/ /*!*img[alt^="2"]{ 以2开头的img margin: 20px; }*/ /*img[alt$="4"]{!*以4结尾的img*! margin: 20px; }*/
2017-05-13 21:23:21
238
原创 html中的绝对定位和相对定位
#container{ width: 1100px; height: 700px; background-color: #EFEFF1; position: relative; margin: 0 auto; } #line {
2017-05-06 20:49:12
924
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人