1. 首页
  2. 编程教程
  3. css教程

布局 - CSS 挑战

10 阅读 0 评论

您可以在 github 仓库中找到这篇文章中的所有代码。

您可以在这里查看视觉效果：

  • 固定导航 - 布局 - codesandbox
  • 两列 - 布局 - codesandbox
  • 三列 - 布局 - codesandbox
  • 圣杯 - 布局 - codesandbox

通过 css 实现通用布局

固定导航布局 

<!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>fixed navigation</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    
    
test

    
test

    
test

    
test

    
test

    
test

    
test

    
test

    
test

    
test

    
test

    
test

    
test

    
test

    
test

    
test

    
test

  </body>
</html>
登录后复制 
nav {
  position: fixed;
  top: 0;
  z-index: 1000;
  width: 100%;
}
登录后复制

两列布局 

<!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>two columns layout</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <!--
    

      

        
left side

      

      

        
right side

      

    

    -->

    <!--
    

      

        
left side

      

      

        
right side

      

    

    -->

    <!--
    

      

        
left side

      

      

        
right side

      

    

    -->

    <!--
    

      

        
left side

      

      

        
right side

      

    

    -->

    <!--
    

      

        
left side

      

      

        
right side

      

    

    -->

    

      

        
left side

      

      

        
right side

      

    

  </body>
</html>
登录后复制 
.float-container .left {
  width: 200px;
  float: left;
  background-color: tomato;
}

.float-container .right {
  margin-left: 200px;
  background-color: aqua;
}

.absolute-container {
  position: relative;
}

.absolute-container .left {
  width: 200px;
  position: absolute;
  top: 0;
  left: 0;
  background-color: tomato;
}

.absolute-container .right {
  margin-left: 200px;
  background-color: aqua;
}

.bfc-container .left {
  width: 200px;
  float: left;
  background-color: tomato;
}

.bfc-container .right {
  overflow: hidden;
  background-color: aqua;
}

.flex-container {
  display: flex;
}

.flex-container .left {
  width: 200px;
  background-color: tomato;
}

.flex-container .right {
  flex: 1;
  background-color: aqua;
}

.grid-container {
  display: grid;
  grid-template-columns: 200px 1fr;
}

.grid-container .left {
  background-color: tomato;
}

.grid-container .right {
  background-color: aqua;
}

.table-container {
  display: table;
}

.table-container .left {
  display: table-cell;
  background-color: tomato;
}

.table-container .right {
  display: table-cell;
  background-color: aqua;
}
登录后复制

三列布局 

<!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>three columns layout</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    

      
left

      
middle

      
right

    


    

      
left

      
middle

      
right

    


    

      
left

      
middle

      
right

    


    

      
left

      
middle

      
right

    

  </body>
</html>
登录后复制 
.flex-container {
  display: flex;
}

.flex-container .left {
  width: 200px;
  background-color: tomato;
}

.flex-container .middle {
  flex: 1;
  background-color: blanchedalmond;
}

.flex-container .right {
  width: 200px;
  background-color: aqua;
}

.grid-container {
  display: grid;
  grid-template-columns: 200px 1fr 200px;
}

.grid-container .left {
  background-color: tomato;
}

.grid-container .middle {
  background-color: blanchedalmond;
}

.grid-container .right {
  background-color: aqua;
}

.absolute-container {
  position: relative;
}

.absolute-container .left,
.absolute-container .right {
  position: absolute;
  width: 200px;
  top: 0;
}

.absolute-container .left {
  left: 0;
  background-color: tomato;
}

.absolute-container .right {
  right: 0;
  background-color: aqua;
}

.absolute-container .middle {
  margin-left: 200px;
  margin-right: 200px;
  background-color: blanchedalmond;
}

.float-container .left {
  width: 200px;
  float: left;
  background-color: tomato;
}

.float-container .right {
  width: 200px;
  float: right;
  background-color: aqua;
}

.float-container .middle {
  margin-left: 200px;
  margin-right: 200px;
  background-color: blanchedalmond;
}
登录后复制

圣杯 

<!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>holy grail</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    
header

    

      
      
main

      
    

    
footer

  </body>
</html>
登录后复制 
body {
  min-height: 100vh;
}

#root {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

header,
nav,
main,
aside,
footer {
  text-align: center;
  padding: 12px;
}

header {
  height: 60px;
  background-color: tomato;
}

.columns {
  display: flex;
  flex-grow: 1;
}

nav {
  flex-shrink: 0;
  width: 100px;
  background-color: coral;
}

main {
  flex-grow: 1;
  background-color: moccasin;
}

aside {
  flex-shrink: 0;
  width: 100px;
  background-color: sandybrown;
}

footer {
  height: 100px;
  background-color: slategray;
}
登录后复制

参考

  • 圣杯（网页设计）- wikipedia.org
  • 圣杯布局 - web.dev

以上就是布局 - CSS 挑战的详细内容，更多请关注慧达安全导航其它相关文章！

免责 声明
1、本网站名称：慧达安全导航
2、本站永久网址：https//www.huida178.com/
3、本站所有资源来源于网友投稿和高价购买，所有资源仅对编程人员及源代码爱好者开放下载做参考和研究及学习，本站不提供任何技术服务!
4、本站所有资源的属示图片和信息不代表本站的立场!本站只是储蓄平台及搬运
5、下载者禁止在服务器和虚拟机下进行搭建运营，本站所有资源不支持联网运行!只允许调试，参考和研究!!!!
6、未经原版权作者许可禁止用于任何商业环境，任何人不得擅作它用，下载者不得用于违反国家法律，否则发生的一切法律后果自行承担!
7、为尊重作者版权，请在下载24小时内删除!请购买原版授权作品，支持你喜欢的作者，谢谢!
8.若资源侵犯了您的合法权益，请持 您的版权证书和相关原作品信息来信通知我们！QQ：1247526623我们会及时删除，给您带来的不便，我们深表歉意!
9、如下载链接失效、广告或者压缩包问题请联系站长处理
10、如果你也有好源码或者教程，可以发布到网站，分享有金币奖励和额外收入!
11、本站资源售价只是赞助，收取费用仅维持本站的日常运营所需
12、因源码具有可复制性，一经赞助，不得以任何形式退款。
13、本文内容由网友自发贡献和站长收集，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系1247526623@qq.com

转载请注明出处： 慧达安全导航 » 布局 - CSS 挑战

点赞(0)
掌握 CSS：现代网站样式完整指南
掌握 CSS：现代网站样式完整指南
冬至
冬至
你应该知道的 Vanilla CSS 基础知识
你应该知道的 Vanilla CSS 基础知识
新的 CSS 可以让您的生活更轻松
新的 CSS 可以让您的生活更轻松

评论列表 共有 0 条评论

暂无评论
立即
投稿
发表
评论 返回
顶部