CSS <hr>标记 画出的线 居左 怎么实现?

html-css011

CSS <hr>标记 画出的线 居左 怎么实现?,第1张

<hr>在chrome中默认是左对齐。在IE中默认是居中对齐,要想左对齐css中用text-align:left。

<hr style="text-align:left">或 <hr align="left">

<hr>的颜色设置

<hr style="border:0background-color:#ff0000height:1px">

如果不加border:0的话,虽然颜色改变了,但是会显示一条黑色的边框。如果不加height:1px的话,在chrome会显示不出来。

#welcome ul li em { display:blockfloat:leftheight:7pxmargin:6px 0border-right:1px solid #bcbcbcoverflow:hidden}

#welcome ul li em [选择ID为welcom的容器下ul li 里的em元素为样式试用对象]

display:block[做为块元素显示]

float:left[靠左浮动,默认li元素是列显示,用了float可以让容器在一行内显示]

height:7px[高7像素]

margin:6px 0[子容器距父容器上下边框的距离分别为6像素,等同于margin:6px 0 6px 0]

border-right:1px solid #bcbcbc[容器右边框显示为1像素,实线,颜色为#bcbcbc]

overflow:hidden[超出容易可见面积部分内容不显示]

<pre t="code" l="html"><!DOCTYPE html>

<html>

<head>

<style>

div

{

width:100px

height:100px

background:red

position:absolute

animation:myfirst 5s

-webkit-animation:myfirst 5s

animation-fill-mode: forwards

}

@-webkit-keyframes myfirst /* Safari and Chrome */

{

0% {background:redleft:500pxbottom:50px}

25% {background:redleft:500pxheight:130pxbottom:50px}

50% {background:redleft:500pxheight:160pxbottom:50px}

75% {background:redleft:500pxheight:190pxbottom:50px}

100% {background:redleft:500pxheight:210pxbottom:50px}

}

</style>

</head>

<body>

<div></div>

</body>

</html>这只是个演示的demo,方法就是这样,animation-fill-mode: forwards这一句给你解释下,这句就是当动画完成时,动画会停留在最后一帧。其他代码都比较简单,不懂随时问我。

希望能够帮助到你,!