<!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网页布局模板的更多相关文章

项目实践2:项目中的CSS网页布局(常用)
好家伙, 整个网页做下来,最主要的,自然是css的网页布局(菜鸟好用啊) 我需要一个大概这样的布局: 然后上代码: <!DOCTYPE html> <html> <hea ...
CSS网页布局全精通
在本文中将使用四种常见的做法,结合CSS于结构化标记语法制作两栏布局.很快地就会发现,不用嵌套表格,间隔用的GIF也能做出分栏版面布局. 相关文章:CSS网页布局开发小技巧24则稍后在"技 ...
CSS网页布局错位:CSS宽度计算
为什么计算宽度计算网页像素宽度是为了CSS网页布局整齐与兼容.常见的我们布局左右结构网页或使用padding.margin布局的时候将计算整页宽度,如果不计算无论是宽度过大过小就会出现错位问题. 怎么 ...
总结与学习DIV+CSS网页布局技巧
以前用表格布局时设置网页居中非常方便,把表格对齐方式设置为居中就行了,就这么简单,现在呢,用DIV+CSS样式表控制,好像不是那么容易了,其实也很简单,只不过方式不同而已. <style> ...
简单实用的CSS网页布局中文排版技巧
由于汉字的特殊性,在css网页布局中,中文排版有别于英文排版.排版是一个麻烦的问题,小编认为,作为一个优秀的网页设计师和网页制作人员,掌握一些简单的中文排版技巧是不可或缺的,所以今天特意总结了几个简单 ...
CSS网页布局中易犯的30个小错误
即使是CSS高手,也难免在书写CSS代码的时候出一些小错误,或者说,任何一种代码都是如此.小错误却往往造成大问题,浪费很多无辜的时间来调试和排错.查看下面这份CSS网页布局中易犯的10个小错误,努力的 ...
前端学习笔记之CSS网页布局
CSS网页布局阅读目录一网页布局方式二标准流三浮动流四定位流一网页布局方式 #1.什么是网页布局方式布局可以理解为排版,我们所熟知的文本编辑类工具都有自己的排版方式,比如w ...
《精通CSS网页布局》读书报告 ----2016-12-5补充
第一章:CSS布局基础 1.CSS的精髓是布局,而不是样式哦! (定要好好的研究布局哦,尤其配合html5) 2. html标签的语义性,要好好的看看哦! 3.DTD:文档类型定义. 4.内联--& ...
深入理解CSS网页布局-理论篇
在CSS网页开发布局中,需要对浮动和定位有深刻的理解才能在开发中游刃有余. 基于此,在博客园中做了本篇总结,这些总结来自实践经验和阅读一些书籍后的理解总结,主要内容为浮动,清除浮动,定位. (可点击屏 ...

随机推荐

Android获取ROOT权限的通用方法
背景自从Android问世以后,给手机获取ROOT权限变成了玩机爱好者老生常谈的话题.拥有手机,却不能拥有操作手机的最高权限,这对于手机爱好者而言,这怎么可以忍?所以无论Android升到什么什么版 ...
C# 控制台输入和输出
目录从控制台获取输入将输出写入控制台 Console.Write() Console.WriteLine() 格式字符串多重标记和值格式化字符串索引对齐说明符格式字段标准数字格式说明符 ...
SpringCloud-使用路由网关的服务过滤功能-拦截登录前是否有token为例
场景 SpringCloud-使用路由网关统一访问接口(附代码下载): https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/102733 ...
linux 系统账户和普通账户的区别
最近使用 useradd -r 选项进行创建账户,用于测试,对-r 选项不是很明白,下面记录一些调研的过程: -r, --system Create a system account. System ...
网页解析库-Xpath语法
网页解析库简介除了正则表达式外,还有其他方便快捷的页面解析工具如:lxml (xpath语法) bs4 pyquery等 Xpath 全称XML Path Language, 即XML路径语言, ...
SpringCloud微服务实现生产者消费者+ribbon负载均衡
一.生产者springcloud_eureka_provider (1)目录展示 (2)导入依赖 <dependency> <groupId>org.springframewo ...
EggJS接口开发
需求随着Nodejs的普及,前端开发的开发场景基本可以贯穿界面交互到数据存储,无缝实现全栈开发.最近在实现一个内部项目管理工具的时候,就尝试了一把接口和数据库开发. 什么是Egg.js Egg.js ...
解决Entity 实体类中加了@Id 注解后仍然出现org.hibernate.AnnotationException: No identifier specified for entity 错误
启动报错如下图所示: 解决方案: 查看网上的资料,大部分都说在实体类中没有添加加主键的注解@Id,这个是必须的.但是我的实体类中明明已经添加了@Id,为什么还会报这个错误呢? 后来检查了很久,发现是我 ...
Java基础语法02-流程控制-if-switch-for-while
流程控制语句顺序结构任何编程语言中最常见的程序结构就是顺序结构.顺序结构就是程序从上到下逐行地执行,中间没有任何判断和跳转. 分支结构 if(条件表达式){ 语句体;} 执行流程首先判断条件表达 ...
sqlserver 标准系统数据库
SQL server系统数据库很重要,大部分时候都不应该修改他们.唯一例外的是model数据库和tempdb数据库.model数据库允许部署更改到任何新创建的数据库(如存储过程),而更改tempdb数 ...

css网页布局模板

效果如图：

我的网页

文章标题

2019 年 4 月 17日

文章标题

2019 年 4 月 17日

关于我

热门文章

关注我

底部区域

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

随机推荐

热门专题