<!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. 浅析堆栈段，BBS段，数据段，代码段

    文章目录 1. 进程,线程 2. 堆栈段 3. BBS段 4. 代码段 5. 数据段 6. 例子 7. 总结 1. 进程,线程 所谓进程是指在系统中能独立运行并作为资源分配的基本单位,程序段,数据段和 ...

  2. git常用操作合集

    基本操作git status 查看文件处于什么状态 git status -s 带上-s参数,可以以更紧凑的格式输出文件状态信息 git add 开始追踪该文件或者暂存已修改的文件. .gitigno ...

  3. .net(C#数据库访问) Mysql,Sql server,Sqlite,Access四种数据库的连接方式

    便签记录Mysql,Sql server,Sqlite,Access四种数据库的简单连接方式 //using MySql.Data.MySqlClient; #region 执行简单SQL语句,使用M ...

  4. 百度大脑UNIT3.0详解之知识图谱与对话

    如今,越来越多的企业想要在电商客服.法律顾问等领域做一套包含行业知识的智能对话系统,而行业或领域知识的积累.构建.抽取等工作对于企业来说是个不小的难题,百度大脑UNIT3.0推出「我的知识」版块专门为 ...

  5. CentOS 磁盘在线扩容

    场景介绍: 操作系统Centos7.x 系统有一块vdisk,容量为20G,共分为3个区(swap和boot分区为标准分区xfs文件系统,根分区为LVM分区,xfs文件系统) 业务需求:在VM系统不关 ...

  6. React路由的使用 Redirect默认展示某一个页面 Switch找到停止 BrowserRouter和HashRouter 的区别

    引入 Redirect 默认展示某一个页面 Switch 一旦找到 路由 就停止 不会在往下找了 App.js import {Link,Route,NavLink,Redirect,Switch} ...

  7. C# 32位程序 申请大内存

    后期生成事件命令行代码: cd /d $(DevEnvDir)cd..cd..cd VC\bineditbin /largeaddressaware $(TargetPath)

  8. ES-索引管理

    参考: https://es.xiaoleilu.com/070_Index_Mgmt/00_Intro.html 创建索引 PUT /new_index 创建更多详细设置的索引: 删除索引 DELT ...

  9. 在Electron中最快速预加载脚本

    背景 在Electron打开新窗口的时候,提前加载一段JavaScript脚本,以此内置一些属性或接口给被打开的页面.之所以要以注入方式,而不是页面自己引用,原因是不想麻烦页面自行引用,不想修改旧有的 ...

  10. js-02-循环语句

    循环语句分类{ for while do ( ) while } 一.for循环语句和for循环的嵌套 for循环格式eg: <script> var sim = 0; for(var i ...