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


    1.界面背景颜色

    方法一:使用bgcolor属性

    <body bgcolor="#434343">
    
    • 1

    方法二:

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

    2.界面字体

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

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

    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>
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6

    4.margin-top失效

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

    <div> 
          <div  class="box1"> float: left div> 
          <div  class="box2"> clear:both; margin-top:20px; div> 
    div> 
    
    • 1
    • 2
    • 3
    • 4

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

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

    <div style="clear:both;">div>
    
    • 1

    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> 
    
    • 1
    • 2
    • 3

    当给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;"> div>
    
    • 1
    • 2

    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>
    
    • 1
    • 2
    • 3
    • 4

    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>
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
  • 相关阅读:
    编译执行JAVA含中文字符串文件,终端输出乱码问题处理
    Spring Boot Admin2 自定义JVM监控通知
    Alkyne-PEG-Amine,Alkyne-PEG-NH2 炔基PEG氨基
    OSPFv2特殊区域---Stub区域
    《计算机网络》:考研 2024/3/5 2.1.1-物理层基本概念引入
    Xcode Cloud
    中南林业科技大学Java实验报告十:常用实用类
    mapbox鼠标滑过高亮要素
    昇腾CANN 7.0 黑科技:大模型推理部署技术解密
    C# 第三章:类、接口与结构 学习笔记
  • 原文地址:https://blog.csdn.net/m0_67316550/article/details/126297540