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网页开发布局中,需要对浮动和定位有深刻的理解才能在开发中游刃有余. 基于此,在博客园中做了本篇总结,这些总结来自实践经验和阅读一些书籍后的理解总结,主要内容为浮动,清除浮动,定位. (可点击屏 ...
随机推荐
- GHOST CMS - Ghost Handlebars主题 Ghost Handlebars Themes
Ghost Handlebars主题 Ghost Handlebars Themes Ghost主题层被设计为让开发人员和设计人员能够灵活地构建由Ghost平台支持的自定义发布 The Ghost t ...
- 基于vue+leaflet+echart的足迹分享评论平台
(其实题目是随便取的,目的只是用来证明Vue+leaflet+springboot技术栈的可行性) 效果 小专栏不支持上传视频?想看的话可以去我的知乎看最新的文章,那个应该可以.在这里 主要功能描述 ...
- Linux重要的服务讲述（1）
NFS 概述 NFS(Network File System)即网络文件系统,它允许网络中的计算机之间通过TCP/IP网络共享资源.在NFS的应用中,本地NFS的客户端应用可以透明地读写位于远端NFS ...
- CSDN屏蔽广告
CSDN俨然是一家广告网站了,各种广告层出不穷,且毫无底线.经常性的展示一些植发.防脱的广告,实在影响心情.另外,在复制内容的时候,会通过js给你带上一段来源,对于版权保护这是好事儿,但是对于直接复制 ...
- 群晖NAS再再折腾
问题 最近电信把我的公网地址收回去了,之前做好的网络端口映射失效了,在公司已经不能愉快地访问家里的网络.原先网络结构示意图如下: (直接访问方案网络结构图) 只需要对电信光猫(也是个路由器)和家用 ...
- Python定做一个计算器，小而美哒~
使用qt designer ,按装anaconda后,在如下路径找到: conda3.05\Library\bin designer.exe文件,双击启动: 创建窗体,命名为XiaoDing,整个 ...
- shiro实战（1）--web
目录结构: 数据库结构: 一·web.xml <?xml version="1.0" encoding="UTF-8"?> <web-app ...
- RESTful 架构风格
在移动互联网的大潮下,『微服务』的概念也越来越被大家接受并应用于实践,日益增多的web service逐渐统一于RESTful 架构风格,如果开发者对RESTful 架构风格不甚了解,则开发出的所谓R ...
- Hyper-V “SP2019SER”无法更改状态。操作失败，错误代码为“32788”。
卸载Hyper-V,然后重装,再重启已有的Hyper-V服务器,报错如下: 尝试启动选定的虚拟机时出错.“SP2019SER”无法更改状态. 原因:卸载后导致虚拟网卡出现问题导致的. 解决办法: 右击 ...
- 设置UICollectionViewCell圆角和阴影
设置cell圆角: cell.contentView.layer.cornerRadius =2.0f; cell.contentView.layer.borderWidth =1.0f; cell. ...