当前位置：文江博客话题详情

CSS HTML web-applications templates

适用于 Web 应用程序的 HTML5 / CSS3 模板

发布于 2024-10-14 21:31:22 字数 1459 浏览 2 评论 0原文

收藏 0

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

评论（3）

日记撕了你也走了 2024-10-21 21:31:22

Easy-peasy japanese :) 不管怎样，如果你想要一个完整的 css3 布局，你应该看看此实现

<!DOCTYPE html>

<html>
 <head>
  <meta charset = "utf-8">

  <title></title>

  <style>
   #content {
    float: left;
    height: 70%;
    width: 80%;
   }

   #menu {
    float: left;
    height: 70%;
    width: 20%;
   }

   #footer {
    clear: left;
    height: 15%;
   }

   #header {
    height: 15%;
   }

   body {
    position:absolute;
    bottom: 0;
    left: 0;
    right: 0;
    top: 0;
   }

   body > div {
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -webkit-box-sizing: border-box;

    border: 3px solid red;
    border-radius: 20px;
    box-bozing: border-box;
    padding: 10px;
   }

   input {
    background-color: rgba(255, 255, 255, 1);
    border: 2px solid red;
    border-radius: 15px;
    padding: 7px;
   }

   input:hover {
    background-color: rgba(250, 250, 247, 1);
   }
  </style>
 </head>

 <body>
  <div id = "header">Header</div>
  <div id = "menu">Menu</div>
  <div id = "content">Content</div>
  <div id = "footer">Footer</div>
 </body>
</html>

预览

渲染页面

Easy-peasy japanese :) Anyway if you want a fully css3 layout you should look this implementation

<!DOCTYPE html>

<html>
 <head>
  <meta charset = "utf-8">

  <title></title>

  <style>
   #content {
    float: left;
    height: 70%;
    width: 80%;
   }

   #menu {
    float: left;
    height: 70%;
    width: 20%;
   }

   #footer {
    clear: left;
    height: 15%;
   }

   #header {
    height: 15%;
   }

   body {
    position:absolute;
    bottom: 0;
    left: 0;
    right: 0;
    top: 0;
   }

   body > div {
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -webkit-box-sizing: border-box;

    border: 3px solid red;
    border-radius: 20px;
    box-bozing: border-box;
    padding: 10px;
   }

   input {
    background-color: rgba(255, 255, 255, 1);
    border: 2px solid red;
    border-radius: 15px;
    padding: 7px;
   }

   input:hover {
    background-color: rgba(250, 250, 247, 1);
   }
  </style>
 </head>

 <body>
  <div id = "header">Header</div>
  <div id = "menu">Menu</div>
  <div id = "content">Content</div>
  <div id = "footer">Footer</div>
 </body>
</html>

Preview

Rendered Page

回复收藏 0 原文

失去的东西太少 2024-10-21 21:31:22

现场演示： http://jsfiddle.net/xJE53 /1/

（我使用 min-height 来模拟填充内容的主要区域）

回复收藏 0 原文

夏花。依旧 2024-10-21 21:31:22

52Framework 怎么样？

回复收藏 0 原文

~没有更多了~

关于作者

咿呀咿呀哟

暂无简介

0 文章

0 评论

23 人气

关注发私信

相关话题

热门标签

操作系统程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端

推荐作者

内心激荡

文章 0 评论 0

JSmiles

文章 0 评论 0

赏烟花じ飞满天

文章 0 评论 0

左秋

文章 0 评论 0

迪街小绵羊

文章 0 评论 0

瞳孔里扚悲伤

文章 0 评论 0

友情链接

我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的隐私政策了解更多相关信息。单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。

原文