HTML与CSS技巧-优快云博客

div img 下面留

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0px;
        }
        .c1{
            width: 100%;
            background-color: darkgrey;
        }
    </style>
</head>
<body>
<div class="c1"><img src="mll_logo.gif"></div>
</body>
</html>

div 不设置height，图片下面会留白？

原因：img 元素是inline-block，图片的vertical-align是baseline。如下图：

解决方法1：

　　<img style="vertical-align: middle" src="mll_logo.gif"></div>

解决方法2：

解决方法3：　　

　　将div的line-height设置得足够小，也可以去掉空白，例如div{line-height:5px;} 或者也可以将font-size设为0，实际上也是改变了line-height

=虚线分割线========================================


<div class="inner02"></div>

.inner02{
    width:1px;   宽度设置为1 
    height:350px;   
    border-left:1px  边框为1
    dashed gainsboro;   dashed 虚线；gainsboro  亮灰。
    float: right;        
    margin-top: -350px;  定位
    margin-right: 320px;  定位
}

=背景属性===========================================================

背景颜色

background-color: green;

背景图片

background-image: url("egon.jpg");
background-repeat: no-repeat;
background-position: center center;

背景图片简写

background: url("egon.jpg") no-repeat -254px -97px;

input的背景图片

Html

<p>
    <label for="male">Male</label><input type="text" name="sex" id="male" />    /*lable 的for 要等于 input的id*/
</p>




CSS
 
p{
            font-size: 20px;        /*字号大写*/
            font-weight: bold;     /* font粗细*/
            font-family: 'Lucida Bright';  /* 字体*/
            font-style: oblique;        /*斜体*/
}

 p input{
            width: 200px;
            height: 40px;
            border: 1px solid black;
            background-image: url("2.png");
            background-size: 40px 40px ;
            background-repeat: no-repeat;
           /* background-position:left;*/
            background-position:right;
        }

  <p class="uertit" style="background: url(autocode.png) no-repeat 250px">
　　
　　　　验证码:<input class="i1" style="width: 140px;" type="text" name="authcode">
  </p>



         p.uertit{
             color: #999999;
            font-size: 17px;
            font-weight: bold;
            font-family: Microsoft YaHei;
         }
   
         input.i1{
            color:gray;
            height: 28px;
            width: 240px;
           
　　　　　　  border-style: solid;
            border-width: 2px;
            border-color: gainsboro;
            margin-left: 10px;
        }

<p style='background: url(code.png) no-repeat 180px'><input type="text"></p>  或者

<input type="text"><img style="vertical-align: middle   " src="code.png">    /*图片模式和基线对齐，所以需要设置为垂直对齐为middle-line*/

=div 圆形 =======================================================================

鼠标悬浮，背景验收改变。

    <head>
    <style>
        .c1{
          border-radius: 50%;
            border: 1px solid red;
            width: 40px;
            height: 40px;
            text-align: center;
            line-height: 40px ;
            background-color: darkgrey;
            color: black;
            font-weight: bold;
        }
        .c1:hover{
            background-color: goldenrod;

        }
    </style>


    </head>

    <body>
    <div class="c1"> sddd</div>

    </body>

=无序列表========================================

        ul{
            list-style: none;  /*取消样式，横过来显示*/
            padding: 0;  /*去除li前面的padding*/
        }

=继承=========================================

父标签的属性，如颜色，后代标签没有此属性可以继承。后代标签有此属性覆盖父标签。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        .c1{
            color: red;
        }

        p{
            color: green;
        }

        ul li a{
            color: RGB(200,122,111);
        }
    </style>

<body>



<div class="c1">
    DIV1
    <div class="c2">DIV2</div>
    <p>PPP</p>
    <a href="">click</a>
</div>

<ul>
    <li><a href="">11</a></li>
    <li><a href="">22</a></li>
    <li><a href="">2222</a></li>
    <li><a href="">222</a></li>
</ul>
</body>
</html>

=position fixed ===================================================

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        .c1{

            width: 100%;
            height: 2000px;
            background-color: wheat;
        }
        .returnTop{
            width: 120px;
            height: 40px;
            background-color: red;
            color: white;
            text-align: center;
            line-height: 40px;
            position: fixed;   /*锁定窗口的位置*/

            right: 20px;
            bottom: 20px ;
        }
    </style>

</head>
<body>

<div class="c1"></div>  <!--设置一个大于窗口的div，产生滚动条。-->

<div class="returnTop">返回顶部</div>

</body>
</html>

=后台管理布局=================================================

知识点：

　　fixed 定位：

　　内容溢出后产生滚动条：

分析;

　　1 一个header，一个左边目录，一个右边的内容区域。

　　2（左边目录）和（右边内容区域）需要（fixed定位）和（内容溢出后生成滚动条）。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0px;
        }
        .header{
            width: 100%;
            height: 80px;
            background-color: #53868B;
        }

        .leftmenu{
            background-color: yellow;
            position: fixed;
            top: 80px;
            left: 0px;
            bottom: 0px;
            width: 200px;
            overflow: auto;  /* 内容溢出后显示滚动条。*/
        }
        .content{
            background-color: darkgrey;
            position: fixed;
            top: 80px;
            left: 200px;
            bottom: 0px;
            right: 0px;
            overflow: auto;/* 内容溢出后显示滚动条。*/

        }
    </style>
</head>
<body>
<div class="header"></div>
<div class="c">
    <div class="leftmenu">

    </div>
    <div class="content">
        <p>11111</p>
        <p>11111</p>
        <p>11111</p>
        <p>11111</p>
        <p>11111</p>
        <p>11111</p>
        <p>11111</p>
        <p>11111</p>
        <p>11111</p>
    </div>
</div>
</body>
</html>