HTML-界面设计字体背景颜色-下拉列表框-margin-top失效-Div换行-EW帮帮网

文章目录

1.界面背景颜色

方法一：使用bgcolor属性

<body bgcolor="#434343">

方法二:

<body style="background-color:#434343;">

2.界面字体

使用style属性中的font-size确定字体大小，font-family确定字体名称，color确定字体颜色。如下所示：

<body style="font-size: 12pt;font-family:'宋体';color: #cdcdcd;background-color:#434343;">

3.下拉列表框

使用style属性中的background-color确定背景颜色，color确定字体颜色。如下所示：

<select id="DanWei" name="DanWei" style="background-color:#242424;color:#bebebe">
    <option value="">厘米</option>
    <option value="">毫米</option>
    <option value="">百分比</option>
    <option value="">像素</option>
</select>

4.margin-top失效

4.1.兄弟元素之间margin-top失效

<div> 
      <div  class="box1"> float: left </div> 
      <div  class="box2"> clear:both; margin-top:20px; </div> 
</div>

两个层box1和box2，box1具有浮动属性，box2没有，这时候设置box2的上边距margin-top没有效果。
解决办法：要浮动一起浮动，要不就都不浮动。

1.box2增加float属性
2.box1与box2之间增加一层

<div style="clear:both;"></div>

4.2.子元素设置margin-top作用于父容器

<div class="box" style="height:100px;background:red;"> 
      <div class="box2" style="clear:both; margin-top:20px; height:50px; width:500px;  background:#000;"></div> 
</div>

当给box2设置margin-top时，仅作用于父容器。

◆解决办法：
1.给父容器box加overflow:hidden;属性
2.父容器box加border除none以外的属性
3.用父容器box的padding-top代替margin-top

5.分割线

5.1.采用div标签

<div style="clear: both;"></div>
<div style="clear: both;margin-top:3px;padding-top: 0px;background-color:black;width: 100%;height: 1px;">&nbsp;</div>

div标签可以非常方便的控制高度和背景颜色。

5.2.采用hr标签

<div style="clear: both;"></div>
<div style="clear: both;margin-top:3px;padding-top: 0px;width: 100%;">
    <hr color="black" style="height:1px;border: none;width: 100%;"/>
</div>

hr标签是html提供的分割线。

6.Div换行

换行需要结合div的clear和float属性，如下所示：

<div style="float: left;margin-left: 2px;margin-top: 1px;"><!--左对齐-->
  <div style="float: left;margin-left: 0px;margin-top: 0px;">
    <div style="float: left;margin-left: 0px;margin-top: 1px;"><img src="../Img/%C2%B5%C3%97%C2%BE%C3%A0.jpg" /></div>
    <div style="float: left;margin-left: 2px;margin-top: 0px;">
      <input type="text" class="input_text_common" style="width: 27px;" />
    </div>
  </div>
  <div style="clear: both;margin-left: 0px;margin-top: 0px;"><!--换行-->
    <div style="float: left;margin-left: 0px;margin-top: 1px;"><img src="../Img/%C2%B5%C3%97%C2%BE%C3%A0.jpg" /></div>
    <div style="float: left;margin-left: 2px;margin-top: 0px;">
      <input type="text" class="input_text_common" style="width: 27px;" />
    </div>
  </div>
</div>

本文含有隐藏内容，请开通VIP 后查看

HTML-界面设计字体背景颜色-下拉列表框-margin-top失效-Div换行