css中 的浮动

原创 2019-02-24 00:44:18 248
摘要:<!doctype html><html> <head>  <meta charset="UTF-8">  <meta name="Generator" content="EditPlus®">  <meta name="A

<!doctype html>

<html>

 <head>

  <meta charset="UTF-8">

  <meta name="Generator" content="EditPlus®">

  <meta name="Author" content="">

  <meta name="Keywords" content="">

  <meta name="Description" content="">

  <title>CSS中的浮动</title>

  <style type="text/css">

 ul li{list-style:none;width:100px;height:40px;line-height:40px;text-align:center;background-color:#ccc;margin:0px 1px;float:left;}

      ol{color:#cc0033}

  .box1{width:200px;height:200px;background-color:pink;float:right;}

  .clear{clear:both;}

  </style>

 </head>

 <body>

<ul>

<li>HTML</li>

<li>css</li>

<li>javaScript</li>

<li>JQuery</li>

<li>php</li>

<li>c++</li>

</ul>

<div></div>

<div>1</div>

<div>2</div>

<div>3</div>




<br>

<br>

<br>

<br>

<br>

<font size="20" color="#c0c0c0">注释:</font>

<ol>

<li>list-style:none;去掉ul前面的圆点</li>

<li>line-height:40px行高40个像素</li>

<li>text-align:center;文本居中 center居中的意思</li>

<li>margin:5px 0px;5px是上下 0px是左右;把li标签区分开,分成一个一个的li。</li>

<li>浮动属性:float(方向的意思,有2个属性。向左或向右)一般都是向左浮动。</li>

<li>clear:both清除浮动,3个属性both两边都清,left,right</li>

</ol>

 </body>

</html>


批改老师:西门大官人批改时间:2019-02-24 09:44:02
老师总结:css中定义了.box1的class,但是代码中貌似没有用到啊

发布手记

热门词条