<!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. 人员简历管理系统-毕业设计(包括文档+源代码+答辩PPT)

    1.开发环境 开发工具:Microsoft Visual Studio 2010操作系统:Windows7(推荐)或更高版本 数据库:sql server 2000 或者更高版本Web服务器:IIS ...

  2. 基于Vue的前后端分离项目实践

    一.为什么需要前后端分离 1.1什么是前后端分离  前后端分离这个词刚在毕业(15年)那会就听说过,但是直到17年前都没有接触过前后端分离的项目.怎么理解前后端分离?直观的感觉就是前后端分开去做,即功 ...

  3. JS---案例：图标跟着鼠标飞(有bug)

    案例:图标跟着鼠标飞(有bug) <!DOCTYPE html> <html lang="en"> <head> <meta charse ...

  4. iOS编译自动升级版本号脚本

    版权申明: 本文原创首发于以下网站,您可以自由转载,但必须加入完整的版权声明 博客园:https://www.cnblogs.com/MogooStudio/ csdn博客:https://blog. ...

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

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

  6. Hive時間函數-年份相加減

    Hive時間函數-年份相加減 目前為止搜了很多资料,都没有找到Hive关于时间 年份,月份的处理信息,所以就自己想办法截取啦 本来是用了概数,一年365天去取几年前的日期,后来测试的发现不够精准,然后 ...

  7. HttpRunner学习2--用例格式和简单使用

    前言 HttpRunner中,测试用例支持两种文件格式:YAML 和 JSON.两种格式的用例是完全等价的,对于相同的信息内容,使用 YAML /JSON 得到的测试结果和报告也是一致的. 本人环境: ...

  8. 【HNOI 2019】JOJO

    Problem Description JOJO 的奇幻冒险是一部非常火的漫画.漫画中的男主角经常喜欢连续喊很多的「欧拉」或者「木大」. 为了防止字太多挡住漫画内容,现在打算在新的漫画中用 \(x\) ...

  9. Spring cloud Feign 深度学习与应用

    简介 Spring Cloud Feign是一个声明式的Web Service客户端,它的目的就是让Web Service调用更加简单.Feign提供了HTTP请求的模板,通过编写简单的接口和插入注解 ...

  10. Centos 下安装 Nginx（新）

    今天重新实践了下 CentOS 7.6 下安装 Nginx,总结了一条更直接并简单的方式 从官方获取写入 nginx.repo 的方式 从官网查看文档,获取 nginx.repo 的文档内容,将其内容 ...