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