zoukankan      html  css  js  c++  java
  • css网页布局模板

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>菜鸟教程(runoob.com)</title>
        <style>
            * {
                box-sizing: border-box;
            }
    
            body {
                font-family: Arial;
                padding: 10px;
                background: #f1f1f1;
            }
    
            /* 头部标题 */
            .header {
                padding: 30px;
                text-align: center;
                background: white;
            }
    
            .header h1 {
                font-size: 50px;
            }
    
            /* 导航条 */
            .topnav {
                overflow: hidden;
                background-color: #333;
            }
    
            /* 导航条链接 */
            .topnav a {
                float: left;
                display: block;
                color: #f2f2f2;
                text-align: center;
                padding: 14px 16px;
                text-decoration: none;
            }
    
            /* 链接颜色修改 */
            .topnav a:hover {
                background-color: #ddd;
                color: black;
            }
    
            /* 创建两列 */
            /* Left column */
            .leftcolumn {
                float: left;
                width: 75%;
            }
    
            /* 右侧栏 */
            .rightcolumn {
                float: left;
                width: 25%;
                background-color: #f1f1f1;
                padding-left: 20px;
            }
    
            /* 图像部分 */
            .fakeimg {
                background-color: #aaa;
                width: 100%;
                padding: 20px;
            }
    
            /* 文章卡片效果 */
            .card {
                background-color: white;
                padding: 20px;
                margin-top: 20px;
            }
    
            /* 列后面清除浮动 */
            .row:after {
                content: "";
                display: table;
                clear: both;
            }
    
            /* 底部 */
            .footer {
                padding: 20px;
                text-align: center;
                background: #ddd;
                margin-top: 20px;
            }
    
            /* 响应式布局 - 屏幕尺寸小于 800px 时,两列布局改为上下布局 */
            @media screen and (max- 800px) {
                .leftcolumn, .rightcolumn {
                    width: 100%;
                    padding: 0;
                }
            }
    
            /* 响应式布局 -屏幕尺寸小于 400px 时,导航等布局改为上下布局 */
            @media screen and (max- 400px) {
                .topnav a {
                    float: none;
                    width: 100%;
                }
            }
        </style>
    </head>
    <body>
    
    <div class="header">
        <h1>我的网页</h1>
        <p>重置浏览器大小查看效果。</p>
    </div>
    
    <div class="topnav">
        <a href="#">链接</a>
        <a href="#">链接</a>
        <a href="#">链接</a>
        <a href="#" style="float:right">链接</a>
    </div>
    
    <div class="row">
        <div class="leftcolumn">
            <div class="card">
                <h2>文章标题</h2>
                <h5>2019 年 4 月 17日</h5>
                <div class="fakeimg" style="height:200px;">图片</div>
                <p>一些文本...</p>
                <p>菜鸟教程 - 学的不仅是技术,更是梦想!菜鸟教程 - 学的不仅是技术,更是梦想!菜鸟教程 - 学的不仅是技术,更是梦想!菜鸟教程 - 学的不仅是技术,更是梦想!</p>
            </div>
            <div class="card">
                <h2>文章标题</h2>
                <h5>2019 年 4 月 17日</h5>
                <div class="fakeimg" style="height:200px;">图片</div>
                <p>一些文本...</p>
                <p>菜鸟教程 - 学的不仅是技术,更是梦想!菜鸟教程 - 学的不仅是技术,更是梦想!菜鸟教程 - 学的不仅是技术,更是梦想!菜鸟教程 - 学的不仅是技术,更是梦想!</p>
            </div>
        </div>
        <div class="rightcolumn">
            <div class="card">
                <h2>关于我</h2>
                <div class="fakeimg" style="height:100px;">图片</div>
                <p>关于我的一些信息..</p>
            </div>
            <div class="card">
                <h3>热门文章</h3>
                <div class="fakeimg"><p>图片</p></div>
                <div class="fakeimg"><p>图片</p></div>
                <div class="fakeimg"><p>图片</p></div>
            </div>
            <div class="card">
                <h3>关注我</h3>
                <p>一些文本...</p>
            </div>
        </div>
    </div>
    
    <div class="footer">
        <h2>底部区域</h2>
    </div>
    
    
    
    </body>
    </html>

    效果如图:

    菜鸟教程(runoob.com)

    我的网页

    重置浏览器大小查看效果。

    文章标题

    2019 年 4 月 17日
    图片

    一些文本...

    菜鸟教程 - 学的不仅是技术,更是梦想!菜鸟教程 - 学的不仅是技术,更是梦想!菜鸟教程 - 学的不仅是技术,更是梦想!菜鸟教程 - 学的不仅是技术,更是梦想!

    文章标题

    2019 年 4 月 17日
    图片

    一些文本...

    菜鸟教程 - 学的不仅是技术,更是梦想!菜鸟教程 - 学的不仅是技术,更是梦想!菜鸟教程 - 学的不仅是技术,更是梦想!菜鸟教程 - 学的不仅是技术,更是梦想!

    关于我

    图片

    关于我的一些信息..

    热门文章

    图片

    图片

    图片

    关注我

    一些文本...

  • 相关阅读:
    Win8系统 Python安装
    一些安卓开源框架整理
    Android 媒体键监听以及模拟媒体键盘的实现 demo
    android View 自动 GONE 问题
    Android 定时器TimerTask 简单使用
    关于Android studio 相对 eclipse 优点
    Java序列化与反序列化
    android shape的使用 边框
    Android Studio 修改 包名 package name
    Android WebView Long Press长按保存图片到手机
  • 原文地址:https://www.cnblogs.com/mzzone/p/11064178.html
Copyright © 2011-2022 走看看