<!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-width: 800px) {

            .leftcolumn, .rightcolumn {

                width: 100%;

                padding: 0;

            }

        }

        /* 响应式布局 -屏幕尺寸小于 400px 时，导航等布局改为上下布局 */

        @media screen and (max-width: 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日
图片

一些文本...

菜鸟教程 - 学的不仅是技术，更是梦想！菜鸟教程 - 学的不仅是技术，更是梦想！菜鸟教程 - 学的不仅是技术，更是梦想！菜鸟教程 - 学的不仅是技术，更是梦想！

关于我

图片

关于我的一些信息..

热门文章

图片

图片

图片

关注我

一些文本...

底部区域

css网页布局模板的更多相关文章

  1. 项目实践2:项目中的CSS网页布局(常用)

    好家伙, 整个网页做下来,最主要的,自然是css的网页布局(菜鸟好用啊) 我需要一个大概这样的布局: 然后上代码: <!DOCTYPE html> <html> <hea ...

  2. CSS网页布局全精通

    在本文中将使用四种常见的做法,结合CSS于结构化标记语法制作两栏布局.很快地就会发现,不用嵌套表格,间隔用的GIF也能做出分栏版面布局. 相关文章:CSS网页布局开发小技巧24则 稍后在"技 ...

  3. CSS网页布局错位:CSS宽度计算

    为什么计算宽度计算网页像素宽度是为了CSS网页布局整齐与兼容.常见的我们布局左右结构网页或使用padding.margin布局的时候将计算整页宽度,如果不计算无论是宽度过大过小就会出现错位问题. 怎么 ...

  4. 总结与学习DIV+CSS网页布局技巧

    以前用表格布局时设置网页居中非常方便,把表格对齐方式设置为居中就行了,就这么简单,现在呢,用DIV+CSS样式表控制,好像不是那么容易了,其实也很简单,只不过方式不同而已. <style> ...

  5. 简单实用的CSS网页布局中文排版技巧

    由于汉字的特殊性,在css网页布局中,中文排版有别于英文排版.排版是一个麻烦的问题,小编认为,作为一个优秀的网页设计师和网页制作人员,掌握一些简单的中文排版技巧是不可或缺的,所以今天特意总结了几个简单 ...

  6. CSS网页布局中易犯的30个小错误

    即使是CSS高手,也难免在书写CSS代码的时候出一些小错误,或者说,任何一种代码都是如此.小错误却往往造成大问题,浪费很多无辜的时间来调试和排错.查看下面这份CSS网页布局中易犯的10个小错误,努力的 ...

  7. 前端学习笔记之CSS网页布局

    CSS网页布局   阅读目录 一 网页布局方式 二 标准流 三 浮动流 四 定位流 一 网页布局方式 #1.什么是网页布局方式 布局可以理解为排版,我们所熟知的文本编辑类工具都有自己的排版方式,比如w ...

  8. 《精通CSS网页布局》读书报告 ----2016-12-5补充

    第一章:CSS布局基础 1.CSS的精髓是布局,而不是样式哦!  (定要好好的研究布局哦,尤其配合html5) 2. html标签的语义性,要好好的看看哦! 3.DTD:文档类型定义. 4.内联--& ...

  9. 深入理解CSS网页布局-理论篇

    在CSS网页开发布局中,需要对浮动和定位有深刻的理解才能在开发中游刃有余. 基于此,在博客园中做了本篇总结,这些总结来自实践经验和阅读一些书籍后的理解总结,主要内容为浮动,清除浮动,定位. (可点击屏 ...

随机推荐

  1. Wonder发布v1.1正式版本，新增资产预览、脚本、AssetBundle等

    更新说明 本次版本重点增加了脚本组件,并且实现了类似于unity的AssetBundle,支持动态加载场景和资源. 相关链接 官网 Wonder官方QQ群: 106047770 相关资料 Wonder ...

  2. C#获取字符串的拼音和首字母

    在C#中我们想要获取字符串的拼音并不是那么困难的,在网上看到很多都是特别笨的方式来实现,其实各有各的好处吧,如果使用了下方法方式,它不知道多音字,这就是一个问题. /// <summary> ...

  3. 高精度模板 val.1

    目录 高精构造 结构体 char数组转高精: 高精加高精 高精乘单精 高精除单精 同样搬以前初三写的... 其实还有个val.2,搬到文章里去了 @ 在做一道斯特林数的时候被卡高精...于是滚来写一些 ...

  4. 如何正确使用 Spring Cloud？【中】

    3. Spring 集成了哪些常用组件? 从 2004 年发布 1.0 版本开始,Spring 目前已经演进至 5.x 版本了,为不同时期的应用开发提供了强有力的支撑.现在我们正面对微服务.DevOp ...

  5. 如何利用PS将照片背景替换为白色

    需求:将照片中的蓝底换成白底: 操作步骤: 1.打开图片,点击背景图层: 2.利用套索,选中除背景外的区域: 3.右键,反选: 4.填充为“白色”,确定,保存:

  6. Mac 安装nginx之后重启、停止、开启等操作

    操作系统:macOs High Sierra 10.13.6 1.我用的homebrew安装的nignx1.15.9,安装完成之后会有下面的提示: 网站根目录在:/usr/local/var/www ...

  7. distcc 的使用

    在项目的开发过程中,经常出现多个开发人员集中在某个 linux 内网开发机上统一开发的情况,随着开发人员越来越多.项目编译得越来越频繁,开发机的压力越来越大,所以考虑用代码交叉编译的方式来缓解开发机的 ...

  8. C#开发微信小程序（五）

    导航:C#开发微信小程序系列 关于小程序项目结构,框架介绍,组件说明等,请查看微信小程序官方文档,关于以下贴出来的代码部分我只是截取了一些片段,方便说明问题,如果需要查看完整源代码,可以在我的项目库中 ...

  9. VS2019 开发Django（五）------createsuperuser

    导航:VS2019开发Django系列 上篇我们已经把LazyOrders中用到的C#的实体转成了Django中的Entity,并且已经迁移数据库成功,那么,今天继续介绍Django中内置的数据库操作 ...

  10. spring security 原理+实战

    疯狂创客圈 Java 高并发[ 亿级流量聊天室实战]实战系列 [博客园总入口 ] 架构师成长+面试必备之 高并发基础书籍 [Netty Zookeeper Redis 高并发实战 ] 前言 Crazy ...