input的placeholder 的默认样式

  1. ::-webkit-input-placeholder {
  2.             /* Chrome/Opera/Safari */
  3.             color: #9B9B9B;
  4.         }
  6. ::-moz-placeholder {
  7.   /* Firefox 19+ */
  8.   color: #9B9B9B;
  9. }
  11. :-ms-input-placeholder {
  12.   /* IE 10+ */
  13.   color: #9B9B9B;
  14. }
  16. :-moz-placeholder {
  17.   /* Firefox 18- */
  18.   color: #9B9B9B;
  20. }

background 几个常用的值

值 说明 CSS
background-color 指定要使用的背景颜色 1
background-position 指定背景图像的位置 1
background-size 指定背景图片的大小 3
background-repeat 指定如何重复背景图像 1
background-origin 指定背景图像的定位区域 3
background-clip 指定背景图像的绘画区域 3
background-attachment 设置背景图像是否固定或者随着页面的其余部分滚动。 1
background-image 指定要使用的一个或多个背景图像 1

image.png
image.png
image.png

image.png
image.png

语法

  • background-color 背景颜色
  • background-image:url(“图片的路径”)
  • background-position：水平 垂直;(背景图片的位置)
    • 英文：水平方向：left、center、right；垂直方向：top、center、bottom
    • 具体的像素值例如：background-position:50px 50px;
    • 还可以是百分比
  • background-repeat:(控制图片是否平铺，以及平铺的方向)

    • no-repeat：不平铺
    • repeat-x ：水平方向平铺
    • repeat-y:垂直方向平铺

  • background-attachment:设置背景图像是否固定或者随着页面的其余部分滚动。

    • fixed
    • scroll （默认）

  • background-size:x y；（控制背景图片的大小，x代表的背景图片的宽，y代表的是背景图片高）

    • 可以是具体的像素值，例如：background-size:100px 100px;
    • 还可以是百分比，例如：background-size:100% 100%;
    • cover：把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。有可能造成背景图像的某些部分也许无法显示在背景定位区域中。
    • contain：把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。（背景图片放大的时候，只要宽度或者高度，一边铺满了容器，就停止放大。）

练习

image.png

小米导航模块和电视模块的练习

作业

image.png