当前位置: 代码迷 >> 综合 >> HTML基础知识(三)
  详细解决方案

HTML基础知识(三)

热度:50   发布时间:2024-01-29 02:45:33.0

Float有4个值:

       left :元素向左浮动。

  right :元素向右浮动。

  none :默认值。

  inherit :从父元素继承float属性。

浮动后的div宽度会变成0,但是其内边框可能撑起它的宽和高。

* 通配符选择器

  • 选择所有的标签

*{margin:0px;padding:0px;
}

以上的代码就是去掉所有标签的内边距padding和外边距margin

标签选择器

  • 以标签名作为选择器的名字

div{css样式...属性:属性值;...
}

去掉小圆点

ul{list-style:none;
}

阴影

  • 盒子阴影 box-shadow

box-shadow:x y blur spread color [inset];

示例

 .box{width:200px;height: 200px;border: solid 1px #ccc;margin: 100px auto;box-shadow: 0px 0px 0px 0px red;
}
  • box-shadow的值可以有多个,且每个值之间用逗号隔开

box-shadow:x y blur spread color [inset],x y blur spread color [inset]; (blur模糊程度,spread范围)

示例:

.box{width:200px;height: 200px;border: solid 1px #ccc;margin: 100px auto;box-shadow: 0px 0px 0px 0px red,0px 0px 0px 0px blue,0px 0px 0px 0px green,0px 0px 0px 0px yellow;
}
  • 文字阴影 text-shadow

text-shadow:x y blur color;  (blur模糊程度)

示例

.box{...text-shadow: 0px 0px 0px green;...
}
  • text-shadow的值可以有多个,且每个值之间用逗号隔开

.box{text-shadow: 1px 0px 0px #000, -1px 0px 0px #fff;
}

透明

  • opacity 背景透明内容也透明

      0 全透明 1不透明   透明背景颜色和内容   

      opacity: 0.1

  • rgba() 背景透明,内容不透明

        r:  red       0-255     
g:  green     0-255
b:  blue      0-255
a:  透明度     0-1  

  background: rgba(0,0,0,.1);

  相关解决方案