<!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. 使用python实现哈希表、字典、集合

    哈希表 哈希表(Hash Table, 又称为散列表),是一种线性表的存储结构.哈希表由一个直接寻址表和一个哈希函数组成.哈希函数h(k)将元素关键字k作为自变量,返回元素的存储下标. 简单哈希函数: ...

  2. Caffe源码-SyncedMemory类

    SyncedMemory类简介 最近在阅读caffe源码,代码来自BVLC/caffe,基本是参照网络上比较推荐的 Blob-->Layer-->Net-->Solver 的顺序来分 ...

  3. oracle数据库执行sql文件

    使用oracle客户端连接数据库,从oracle官网下载客户端instantclient_18_3工具,到目录下打开cmd命令窗口: 个人网盘客户端工具:https://pan.baidu.com/s ...

  4. 关于svn外网访问的问题-搭建成功

    昨天聊到了svn外网问题.今天,无限查资料,虽然眼累了一些,不过最终实现.还是开心了一下! 背景:本机设置svn服务器,搭建代码库并开设外网 供不再同一地点的他人来访问 上图: 1.svn服务器端 搭 ...

  5. jar包要读取的资源文件路径问题

    本地调试读取文件没有问题 获取 Thread.currentThread().getContextClassLoader().getPath() 读取文件 打jar包之后 获取的路径出错 不能读取文件 ...

  6. jimdb压测踩坑记

    本文记录在jimdb压测过程中遇到的各种小坑,望能够抛砖引玉. 1.压测流量起来后,过了5分钟左右,发现ops突降,大概降了三分之一,然后稳定了下来 大概原因:此种情况,jimdb极有可能某个分片的连 ...

  7. C# 面向切面编程 AOP

    AOP(Aspect Oriented Programming) 面向切面编程 起源 引言  http://wayfarer.cnblogs.com/articles/241012.html AOP技 ...

  8. 字段明明存在，用Web API使用该字段进行查询报错？

    我是微软Dynamics 365 & Power Platform方面的工程师罗勇,也是2015年7月到2018年6月连续三年Dynamics CRM/Business Solutions方面 ...

  9. Android 程序分析环境搭建-动态分析环境搭建

    静态查看过app 的代码,但是有些app 非常复杂,页面好多,你根本找不到从何处下手.还有app 通过静态分析,发现有被加固(后续会讲如何砸壳),根本找不到,还有即便你搜索app界面上的文字,你也搜索 ...

  10. Android 程序分析环境搭建-静态分析环境搭建

    1.2 静态分析环境搭建 这里主要讲一些用的比较顺手的工具,一并列出来,Uaa,等环境配置, 2,notepad++ ,everything , Jdgui ,idea, ida ,Fiddler , ...