【前端】CSS3学习笔记(三)

  • A+
所属分类:Web前端
摘要

【狂神说Java】CSS3最新教程快速入门通俗易懂_哔哩哔哩_bilibili本文作者:双份浓缩馥芮白


✨课程链接

【狂神说Java】CSS3最新教程快速入门通俗易懂_哔哩哔哩_bilibili

✨学习笔记

盒子模型

<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <title>Title</title>      <style>         /* body 总有一个默认的外边距 */         /* 常见操作 */         body{             margin: 0;             padding: 0;             text-decoration: none;         }         /* border 粗细 样式 颜色 */         #box{             width: 300px;             border: 1px solid red;             padding: 0 0 0 0;         }          h2{             /* 去外边距 */             margin: 0;             font-size: 16px;             background-color: gold;             line-height: 30px;             color: white;         }          form{             background: gold;         }         div:nth-of-type(1) input{             border: 3px solid black;         }         div:nth-of-type(2) input{             border: 3px dashed purple;         }         div:nth-of-type(3) input{             border: 2px dashed red;         }     </style>  </head> <body>     <div id="box">         <h2>会员登录</h2>         <form action="#">             <div>                 <span>账户:</span>                 <input type="text">             </div>             <div>                 <span>密码:</span>                 <input type="text">             </div>             <div>                 <span>邮箱:</span>                 <input type="text">             </div>         </form>     </div> </body> </html> 

外边距

<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <title>Title</title>      <!-- 盒子计算方法     margin + border + padding + 内容宽度 -->      <!-- 外边距妙用:居中元素 -->     <style>         /* 顺时针旋转 上右下左 */         /* margin:0 全0 */         /* margin:0 1px 上下0 左右1 */         /* margin:0 1px 2px 3px 上右下左*/          #box{             width: 300px;             border: 1px solid red;             /* 上下为0 左右居中 */             margin: 0 auto;         }          h2{             margin: 0;             font-size: 16px;             background-color: gold;             line-height: 30px;             color: white;         }          form{             background: gold;         }         input{             border: 1px solid black;         }         div:nth-of-type(1){             padding: 10px;         }     </style>  </head> <body>     <div id="box">         <h2>会员登录</h2>         <form action="#">             <div>                 <span>账户:</span>                 <input type="text">             </div>             <div>                 <span>密码:</span>                 <input type="text">             </div>             <div>                 <span>邮箱:</span>                 <input type="text">             </div>         </form>     </div> </body> </html> 

圆角边框

边框圆角

<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <title>Title</title>      <!-- 左上 右上 右下 左下 顺时针 -->     <!-- 圆 圆角 = 半径 + 边框 -->      <style>         div{             width: 100px;             height: 100px;             border: 10px solid red;             border-radius: 10px;         }      </style>  </head> <body>          <div></div>  </body> </html> 

圆形

<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <title>Title</title>      <style>         div{             width: 100px;             height: 50px;             background: red;             border-radius: 50px 50px 0 0;         }          img{             border-radius: 37px;         }     </style>  </head> <body>     <div></div>     <img src="images/demo.png" alt="【前端】CSS3学习笔记(三)" alt=""> </body> </html> 

阴影

<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <title>Title</title>  <!--    margin: auto; 居中         要求 块元素 块元素有固定的宽度-->       <style>         img{             margin: auto;             border-radius: 37px;             box-shadow: 10px 10px 50px yellow;         }     </style>  </head> <body>     <div style="width: 1000px; height: 500px; display: block; text-align: center">         <img src="images/demo.png" alt="【前端】CSS3学习笔记(三)" alt="">     </div> </body> </html> 

⭐转载请注明出处

本文作者:双份浓缩馥芮白

原文链接:https://www.cnblogs.com/Flat-White/p/14980267.html

版权所有,如需转载请注明出处。