我的定位：中高级人才（框架熟练、Java语法精通、数据库会用、Linux会用、中间件会用、有大数据经验！）
开始，我以为自己什么都知道。后来发现，其实我什么都不知道。

css08盒子模型 

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>外边距和内边距</title>
    <style type="text/css">
        div{
            border: dashed 2px red;  /*边框的样式*/
            width: 500px;  /*宽度*/
           /* margin-left: 100px; /!*左外边距*!/
            margin-top: 100px; /!*上外边距*!/*/
            margin:30px;    /*上 右  下  左  顺时针顺序*/
            margin:30px  50px;  /*上下 30PX   左右 50PX*/

            padding: 30px; /*上 右  下  左  顺时针顺序 内边距*/
        }
    </style>
</head>
<body>
<div><img src="image/cat.jpg"  height="200"></div>
<div><img src="image/cat.jpg"  height="200"></div>
</body>
</html>

 实现会员登陆的效果   创建一个html页面

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>登录界面</title>
    <style type="text/css">
        *{  /*整个网页中的所有元素 去掉内边距和外边距*/
            padding: 0px;
            margin: 0px;
        }
        div{
            width: 300px;
            border: solid 1px  #3a6587;  /*盒子的边框样式*/
            margin: auto;   /*水平居中*/
        }
        h2{
            padding-left: 20px;  /*左内边距*/
            line-height: 50px;   /*行高*/
            height: 50px;        /*高度*/
            color: white;        /*字体颜色*/
            background-color:cornflowerblue ; /*背景颜色*/
        }
        form{
            padding: 30px 20px; /*上下边距30px  左右边距20px*/
        }
        td{
            text-align: right; /*文本对齐方式*/
        }
    </style>
</head>
<body>
<div>
   <h2>会员登录</h2>
  <form action="" method="post">
       <table>
             <tr>
                 <td>姓名:</td>
                 <td><input type="text"></td>
             </tr>
             <tr>
                 <td>邮箱:</td>
                 <td><input type="text"></td>
             </tr>
             <tr>
                 <td>联系电话:</td>
                 <td><input type="text"></td>
             </tr>
             <tr>
                 <td></td>
                 <td style="text-align: left"><input type="submit" value="登录"></td>
             </tr>
       </table>
  </form>
</div>


</body>
</html>

效果图

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>盒子模型</title>
    <style type="text/css">
        /*
          border-style: 边框类型
          border-color: 边框颜色
          border-width: 边框粗细
        设置的时候：都是按照 上右下左的顺序依次赋值！
        */
        *{  /*给页面中所有的元素清空内外边距*/
            margin: 0px;
            padding: 0px;
        }
        #box{
            width: 300px;  /*整个盒子的宽度*/
            border: 1px solid red; /*盒子的边框*/
            margin: 0px auto; /*盒子相对于浏览器 水平居中*/
            /*网页中水平居中的必要条件
            01.是块元素
            02.固定的宽度？？？？ span是根据内容来自动调整宽度！！*/
        }



     div:nth-of-type(1) input{
         border: 1px  solid red;   /*1px红色的实线*/
     }
     div:nth-of-type(2) input{
         border: 1px  dashed blue;  /*1px蓝色的虚线*/
     }
     div:nth-of-type(3) input{
         border: 1px  dotted deeppink;  /*1px深粉色的点实线*/
     }

        h2{
            height: 35px;  /*h2的高度*/
            line-height: 35px;  /*行高*/
            background: #3A6587;
            color: #F8F8F3;
            padding-left:20px ;
        }

        form{
            background: #C8ECE3;
        }

    </style>
</head>
<body>
 <div id="box">
      <h2>会员登录</h2>
     <form action="#" method="post">
         <div>
             姓名：<input type="text">
         </div>
         <div>
             邮箱：<input type="text">
         </div>
         <div>
             电话：<input type="text">
         </div>
     </form>
 </div>

</body>
</html>
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>盒子模型</title>
    <style type="text/css">
          #box{
              width: 120px;
              height:120px;
              padding: 5px;
              margin: 10px;
              border: 1px solid red;
              box-sizing: border-box;
          }
        #f{
            width: 50px;
            height:50px;
            border: 1px solid blue;
            /*box-sizing: border-box;盒子的高度和宽度就是内容元素的高度和宽度*/
            /*box-sizing: content-box;默认值，盒子的总尺寸*/
            box-sizing: inherit;/* 继承父类的盒子尺寸类型*/
        }

    </style>
</head>
<body>
 <div id="box">
       <div id="f"></div>
 </div>
</body>
</html>
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>圆角属性</title>
    <style type="text/css">
         div{
             width: 100px;
             height: 100px;
             border: 1px  solid red;
             /* border-radius:5px;四个角都是相同的弧度*/
             /* border-radius:5px  10px 15px 20px;   左上 --》左下  顺时针顺序*/
              border-radius:5px   20px;   /*左上和右下 都是5px  右上和左下都是20px*/
         }
    </style>
</head>
<body>
 <div></div></body>
</html>
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>设置半圆</title>
    <style type="text/css">
         div{
             background: orange;
             margin: 20px;
         }
        div:nth-of-type(1){
             width: 100px;
             height: 50px;
            border-radius: 50px 50px 0 0; /*左上和右上*/
        }

        div:nth-of-type(2){
             width: 100px;
             height: 50px;
            border-radius: 0 0 50px 50px;/*左下和右下*/
        }


        div:nth-of-type(3){
             width: 50px;
             height: 100px;
            border-radius:  50px 0 0 50px;/*左上和左下*/
        }
        div:nth-of-type(4){
             width: 50px;
             height: 100px;
            border-radius: 0 50px 50px 0;/*右上和右下*/
        }

    </style>
</head>
<body>
 <div></div>
 <div></div>
 <div></div>
 <div></div>
</body>
</html>
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>设置扇形和圆形</title>
    <style type="text/css">
         div{
             background: orange;
             margin: 20px;
         }
        div:nth-of-type(1){
             width: 50px;
             height: 50px;
            border-radius: 50px 0 0 0; /*左上*/
        }

        div:nth-of-type(2){
             width: 50px;
             height: 50px;
            border-radius:  0  50px 0 0; /*右上*/
        }

        div:nth-of-type(3){
             width: 50px;
             height: 50px;
            border-radius:  0 0 50px 0; /*右下*/
        }

        div:nth-of-type(4){
             width: 50px;
             height: 50px;
            border-radius:  0 0 0 50px; /*左下*/
        }

        div:nth-of-type(4){
             width: 50px;
             height: 50px;
            border-radius:50px; /*设置所有   圆形*/
        }

    </style>
</head>
<body>
 <div></div>
 <div></div>
 <div></div>
 <div></div>
 <div></div>
</body>
</html>
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>盒子阴影</title>
    <style type="text/css">
         div{
             height: 100px;
             width: 100px;
             border: 1px solid red;
             border-radius: 10px;
             box-shadow:10px 10px 10px orange;/*外阴影*/
             /* box-shadow:inset 10px 10px 10px orange;内阴影*/
         }
    </style>
</head>
<body>
 <div></div>
</body>
</html>

 

posted @ 2017-06-29 14:08  想太多先森  阅读(117)  评论(0)  编辑  收藏  举报