浏览效果

前

后

代码如下：
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>基本布局</title>
  8.     <style>
  9.         .main{
  10.             width: 400px;
  11.             height: 800px;
  12.             background: #6ff;
  13.             position: absolute;
  14.             top: 40px;
  15.             left: 400px;
  16.             display: inline;
  17.         }
  18.         .top{
  19.             width: 380px;
  20.             height: 190px;
  21.             position: relative;
  22.             background: coral;
  23.             margin-top: 10px;
  24.             margin-left: 10px;
  25.         }
  26.         .line{
  27.             width: 130px;
  28.             height: 400px;
  29.             position: relative;
  30.             background: royalblue;
  31.             float: left;
  32.             margin-top: 10px;
  33.             margin-left: 10px;
  34.         }
  35.         .line2{
  36.             width: 130px;
  37.             height: 400px;
  38.             position: relative;
  39.             background: #432;
  40.             float: right;
  41.             margin-top: 10px;
  42.             margin-right: 10px;
  44.         }
  45.         .foot{
  46.             width: 380px;
  47.             height: 150px;
  48.             position: relative;
  49.             background: seashell;
  50.             margin-left: 10px;
  51.             margin-top: 430px;
  52.         }
  53.          /* 隐藏与显示 */
  54.         .st{
  55.             display: none;
  56.         }
  57.         .main:hover .st{
  58.             display: block;
  59.         }
  60.     </style>
  61. </head>
  62. <body>
  63.     <div class="main">
  64.         <div class="top"></div>
  65.         <div class="st">
  66.         <div class="line"></div>
  67.         <div class="line2"></div>
  68.         </div>
  69.         <div class="foot"></div>
  70.     </div>
  71. </body>
  72. </html>

更多相关文章

  1. 学习PHP中好玩的Gmagick图像操作扩展的使用
  2. 招聘h5页面是什么？意派Epub360老司机带你制作招聘h5页面
  3. 数组遍历代码
  4. fetch应用——访问JSON数据
  5. PHP保姆级API制作教程，不会剁手
  6. 意派Epub360丨国庆节品牌推广H5案例，有趣的作品才更吸引人
  7. 模态框 flex grid
  8. PHP生成RSS文件类实例
  9. 初识html标签

随机推荐

  1. c#用什么软件编程？
  2. c语言需要什么基础
  3. c语言 三种求回文数的算法
  4. asp文件用什么打开
  5. c语言怎么编译（详细示例）
  6. Unity 3D 浅谈Shader 运行时状态及渲染模
  7. c语言工程师的工作是什么
  8. c语言怎么定义宏定义
  9. c语言之后学什么？
  10. c语言自学难度高么？