css网页布局模板
<!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开发检测用户是否使用了虚拟定位
在应用开发中,如果有签到打卡之类的功能,你是否会遇到检测用户是否使用了虚拟定位软件来进行打卡?如果有,那么请仔细阅读这篇文章.该文章会带你认识什么是虚拟定位.什么是应用分身,以及如何通过代码来检测用户 ...
- golang中copy文件时，buffer设多大值合适，性能对比
在go语言中,copy文件时,大文件使用buffer缓冲,可以明显加快时间, 但这个值多大合适呢? 除了考虑计算机的硬件资源,还要考虑CP文件的大小. 如果都是100m之内的小文件,一次CP完就可以. ...
- VS2019 开发Django（七）------VS2019不能格式化html代码
如题,在VS2019中不能使用快捷键Ctrl+K,+D格式化html代码,印象中之前的版本是可以的吧!不太确定,这给我带来了很大的麻烦,在编写Django项目的时候,标准的模板是新建的html文件,不 ...
- C#线程学习笔记三：线程池中的I/O线程
本笔记摘抄自:https://www.cnblogs.com/zhili/archive/2012/07/20/MultiThreads.html,记录一下学习过程以备后续查用. 一.I/O线 ...
- 单片机内核Cortex-M3八大知识点
单片机内核Cortex-M3的八个知识点 1.指令集 32位ARM指令集:对应ARM状态 16位Thumb指令集:对应Thumb状态(是ARM指令集的一个子集) 指令集演进图 2.BKP备份寄存 ...
- EtreCheck是否修复恶意软件和广告软件？为什么EtreCheck无法制作截图？
EtreCheck for Mac是一款Mac上的软件,有很对人对这款软件并不熟系,今天小编就来给大家介绍一下这款软件最常出现的问题—EtreCheck是否修复恶意软件和广告软件?为什么EtreChe ...
- Orcle如何获取当前时间
Oracle获取当月所有日期: SELECT TRUNC(SYSDATE, 'MM') + ROWNUM - 1 FROM DUAL CONNECT BYROWNUM <= TO_NUMBER( ...
- RabbitMQ 备份交换机（alternate-exchange）介绍
RabbitMQ之备份交换机(alternate-exchange) 1.备份交换器,AlternateExchange(AE) 备份交换器是为了实现没有路由到队列的消息,声明交换机的时候添加属性al ...
- xms新版发布
基于.net core 3.0.101 github地址: https://github.com/migomiddle/xms 码云地址: https://gitee.com/migomiddle/x ...
- python3读取图像并可视化的方法（PIL/Pillow、opencv/cv2）
原图: 使用TensorFlow做图像处理的时候,会对图像进行一些可视化的操作.下面,就来列举一些我知道的图像读取并可视化的方法. 1. Pillow模块 1.1 Pillow模块的前生 Pillow ...