html-css练习题（系统提示）

最新推荐文章于 2022-07-12 22:33:22 发布

幸福清风

最新推荐文章于 2022-07-12 22:33:22 发布

阅读量5.3k

点赞数 2

分类专栏： html-css练习题 html-css教程

本文链接：https://blog.csdn.net/xun527/article/details/77784878

版权

html-css教程同时被 2 个专栏收录

26 篇文章 12 订阅

订阅专栏

html-css练习题

6 篇文章 8 订阅

订阅专栏

 
  代码赏析： 
 
  <!DOCTYPE html 
  > 
 
  <html 
   lang= 
  "en" 
  > 
 
  <head> 
 
  <meta 
   charset= 
  "UTF-8" 
  > 
 
  <meta 
   name= 
  "viewport" 
   content= 
  "width=device-width, initial-scale=1.0" 
  > 
 
  <meta 
   http-equiv= 
  "X-UA-Compatible" 
   content= 
  "ie=edge" 
  > 
 
  <title>Document 
  </title> 
 
  <style> 
 
  /* 背景颜色设置 */ 
 
  body{ 
 
  background: 
  lavenderblush; 
 
   } 
 
  /* 1.盒子设置 宽500 高300 背景颜色 固定位置 调节位置 */ 
 
  .box{ 
 
  width: 
  500px; 
 
  height: 
  300px; 
 
  background: 
   white; 
 
  border-radius: 
   4px; 
 
  position: 
   relative; 
 
  left: 
  50%; 
 
  top: 
  50%; 
 
  margin-left: 
  -250px; 
 
  margin-top: 
   150px; 
 
  /* 设定塌陷 */ 
 
  overflow: 
  hidden; 
 
   } 
 
  /* 2.系统盒子设定 宽490 高40 背景颜色 位置 */ 
 
  .con{ 
 
  width: 
  490px; 
 
  height: 
  40px; 
 
  background: 
   blue; 
 
  margin: 
   15px 
  auto 
  0px; 
 
  border-radius: 
   6px; 
 
   } 
 
  /* 2.1设定系统提示文本 左悬浮 字体18 去粗 颜色 行高 */ 
 
  .con h3{ 
 
  float: 
  left; 
 
  margin: 
  0px; 
 
  margin-left: 
  10px; 
 
  line-height: 
   40px; 
 
  color: 
  #fff; 
 
  font-size: 
  18px; 
 
  font-weight: 
   normal; 
 
   } 
 
  /* 2.2 设定右边边框 右悬浮 字大小 下划线 位置 */ 
 
  .con a{ 
 
  float: 
  right; 
 
  width: 
  20px; 
 
  height: 
  20px; 
 
  background: 
   #fff; 
 
  margin: 
  10px 
  10px 
  0 
   0 ; 
 
  text-decoration: 
   none; 
 
  line-height: 
   20px; 
 
  text-align: 
   center; 
 
  font-size: 
  20px; 
 
  border-radius: 
   4px; 
 
   } 
 
  /* 3.中间文字 行高 字20 位置 */ 
 
  .span{ 
 
  height: 
   200px; 
 
  text-align: 
   center; 
 
  line-height: 
   200px; 
 
  font-size: 
  20px; 
 
   } 
 
  /* 4.底部设置 行高54 宽500 位置 上边框 */ 
 
  .regist{ 
 
  width: 
  500px; 
 
  height: 
   54px; 
 
  padding-top: 
  5px; 
 
  border-top: 
   1px 
  solid 
  red; 
 
   } 
 
  /* 4.1 输入盒子设置 宽100 高36 右浮动 字16 位置 */ 
 
  .regist input{ 
 
  width: 
  100px; 
 
  height: 
  36px; 
 
  float: 
  right; 
 
  border-radius: 
  4px; 
 
  font-size: 
  16px; 
 
  margin: 
  0 
  10px 
  0 
   0 ; 
 
   } 
 
  < 
  /style> 
 
  </head> 
 
  <body> 
 
  <!-- 1.搭建盒子 --> 
 
  <div 
   class= 
  "box" 
  > 
 
  <!-- 2.系统提示盒子 --> 
 
  <div 
   class= 
  "con" 
  > 
 
  <h3>系统提示 
  </h3> 
 
  <a 
   href= 
  "#" 
  >× 
  </a> 
 
  </div> 
 
  <!-- 3.中间文字 --> 
 
  <div 
   class= 
  "span" 
  >亲，确定这么做吗？ 
  </div> 
 
  <!-- 4.底部盒子 --> 
 
  <div 
   class= 
  "regist" 
  > 
 
  <input 
   type= 
  "button" 
   value= 
  "取消" 
  > 
 
  <input 
   type= 
  "button" 
   value= 
  "确定" 
  > 
 
  </div> 
 
  </div> 
 
  </body> 
 
  </html>