pc端常见布局样式总结（针对常见的）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/* 宽度适配 */
html,
body {
width: 100%;
overflow-x: hidden;/* 外层盒子设置最小宽度的话看不到横向滚动条 */
} /*1. pc端适配的需求：目前我们pc项目的设计稿尺寸是宽度1920，高度最小是1080。
2.放大或者缩小屏幕，网页可以正常显示 */
/* 一、两列布局 */
/* 1.左定宽 右边自适应 或者 右边定宽左边自适应 */
.content{
width: 1200px; /* 主容器 */
min-width: 960px;
margin: 0 auto;
background: #fff;
}
.left {
float: left;
width: 200px;/* 定宽 */
background: #ccc;
height: 800px;/* 测试设了一个高度和背景（为了更好看效果） */
} .right {
margin-left: 100px;
background: #999;
height: 800px;/* 测试设了一个高度和背景（为了更好看效果） */
}
</style>
</head>
<body>
<div class="content">
<div class="left">左边</div>
<div class="right">右边</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/* 宽度适配 */
html,
body {
width: 100%;
overflow-x: hidden;
/* 外层盒子设置最小宽度的话看不到横向滚动条 */
}
/* 一、三列布局 */
/* 1.左右定宽中间自适应 */
.content {
width: 1200px;
/* 主容器 */
min-width: 960px;
margin: 0 auto;
background: firebrick;/* 测试设了一个背景（为了更好看效果） */
display: table;
} .left {
width: 100px;
/* 定宽 */
background: #ccc;
height: 800px;
/* 测试设了一个高度和背景（为了更好看效果） */
}
.right {
width: 100px;
/* 定宽 */
background: fuchsia;
height: 800px;
/* 测试设了一个高度和背景（为了更好看效果） */
} .left,
.right,
.center {
display: table-cell;
}
</style>
</head>
<body>
<div class="content">
<div class="left">左边</div>
<div class="center">中间</div>
<div class="right">右边</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>实现三栏水平布局之双飞翼布局</title>
<style type="text/css">
.container {
width: 1200px;
/* 主容器 */
min-width: 960px;
margin: 0 auto;
background: #ccc;
/* 测试设了一个背景（为了更好看效果） */
} .left,
.center,
.right {
float: left;
min-height: 400px;
/* 测试更好观看效果 统一高度*/
text-align: center;
} .left {
margin-left: -100%;
background: #0000FF;
width: 200px;
/* 定宽 */
} .right {
margin-left: -300px;
background-color: #FF0000;
width: 300px;
/* 定宽 */
} .center {
background-color: #f2f1f1;
width: 100%;
} .content {
margin: 0 300px 0 200px;
}
</style>
</head>
<body>
<div class="container">
<div class="center">
<div class="content">中间自适应</div>
</div>
<div class="left">左边</div>
<div class="right">右边</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>实现三栏水平布局之圣杯布局</title>
<style type="text/css">
.container {
width: 1200px;
/* 主容器 */
min-width: 960px;
margin: 0 auto;
background: #ccc;/* 测试设了一个背景（为了更好看效果） */
padding: 0 300px 0 200px;
} .left,
.center,
.right {
position: relative;
min-height: 200px;
float: left;
} .left {
left: -200px;
margin-left: -100%;
background: green;/* 测试设了一个背景（为了更好看效果） */
width: 200px;
} .right {
right: -300px;
margin-left: -300px;
background: red;/* 测试设了一个背景（为了更好看效果） */
width: 300px;
} .center {
background: blue;/* 测试设了一个背景（为了更好看效果） */
width: 100%;
}
</style>
</head>
<body>
<div class="container">
<div class="center">center</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
<div class="tip_expand">双飞翼布局比圣杯布局多创建了一个div，但不用相对布局了</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>实现三栏水平布局-Flex布局</title>
<style type="text/css">
.container {
display: flex;
width: 1200px;
/* 主容器 */
min-width: 960px;
margin: 0 auto;
background: #ccc;
/* 测试设了一个背景（为了更好看效果） */
min-height: 800px;
font-size: 0; /* 间隙处理 */
} .main {
flex-grow: 1;
background-color: blue;
font-size: 24px;
} .left {
order: -1;/* 对于order属性：定义项目的排列顺序，越小越靠前，默认为0。 */
flex-basis: 200px;/* 通过项目属性flex-basis 设置left和right的固定宽度 */
background-color: green;
font-size: 24px;
} .right {
flex-basis: 300px;/* 通过项目属性flex-basis 设置left和right的固定宽度 */
background-color: red;
font-size: 24px;
}
</style>
</head>
<body>
<div class="container">
<div class="main">main</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
</body>
</html>
pc端常见布局样式总结（针对常见的）的更多相关文章
- PC端自适应布局
截止目前,国内绝大多数内容为主的网站(知乎,果壳,V2EX,网易新闻等)均使用内容区定宽布局,大多数电商网站(网易考拉,京东,聚美优品)也使用了内容区定宽的布局,也有些网站使用了自适应布局: 天猫 内 ...
- 第 31 章 项目实战-PC 端固定布局[3]
学习要点: 1.搜索区 2.插入大图 3.搜索框 主讲教师:李炎恢 本章主要开始使用学习用 HTML5 和 CSS3 来构建 Web 页面,第一个项目采用 PC 端固定布局来实现. 一．搜索区 本节课 ...
- 第 31 章 项目实战-PC端固定布局[2]
学习要点: 1.大纲算法 2.section和div 3.结构分析 主讲教师:李炎恢 本章主要开始使用学习用HTML5和CSS3来构建Web页面,第一个项目采用PC端 固定布局来实现. 一．大纲算法 ...
- 第 31 章 项目实战-PC端固定布局[1]
学习要点: 1.准备工作 2.创建项目 3.网站结构 4.CSS选择器 5.完成导航 主讲教师:李炎恢 本章主要开始使用学习用HTML5和CSS3来构建Web页面,第一个项目采用PC端 固定布局来实现 ...
- 第 31 章 项目实战-PC 端固定布局[5]
学习要点: 1.底部区域 2.说明区域 3.版权及证件区 主讲教师:李炎恢 本章主要开始使用学习用 HTML5 和 CSS3 来构建 Web 页面,第一个项目采用 PC 端固定布局来实现. 一．底部区 ...
- 第 31 章 项目实战-PC 端固定布局[4]
学习要点: 1.热门旅游区 2.标题介绍区 3.旅游项目区 主讲教师:李炎恢 本章主要开始使用学习用 HTML5 和 CSS3 来构建 Web 页面,第一个项目采用 PC 端固定布局来实现. 一．热门 ...
- 电脑分辨率与pc端页面布局
在电脑设置中选择:控制面板->外观和个性化->显示 可以设置页面的显示比例,原因是在1920*1080的分辨率下页面的图标就会变得比较小,方便用户看,这个功能就是把页面内容变大(默认是中等 ...
- 在前端眼中pc端和移动的开发区别
按照昨天所说,本包子今天将总结在前端开发中,pc端和移动端的区别,整理完这些区别,本包子将开始整理pc端的布局,会写实际的代码了,还是那句话,希望文章中有什么不足的地方,大家能多多指正,大家一起进步, ...
- js常见的判断移动端或者pc端或者安卓和苹果浏览器的方法总结
1.js常见的判断移动端或者pc端或者安卓和苹果浏览器的方法总结 : http://www.haorooms.com/post/js_pc_iosandmobile 2.Js判断客户端是否为PC还是手 ...
随机推荐
- RequestsLibrary库入门介绍
Robot framework也可以进行接口测试,只需要导入相应的RequestsLibrary库即可. 一.准备工作: 首先需要安装好Robot framework基础环境,前面已做说明,本文就不做 ...
- Struts2返回JSON数据的具体应用范…
Struts2返回JSON数据的具体应用范例 博客分类: Struts2 Struts2JSON 早在我刚学Struts2之初的时候,就想写一篇文章来阐述Struts2如何返回JSON数据的原理和具 ...
- SharePoint 2010 将带有工作流的模板移动到另一个站点集
HOWTO Move or Migrate SharePoint 2010 List-based Workflows between Sites and Site Collections I’ve e ...
- java多线程系列：Executors框架
目录 Executor接口介绍 ExecutorService常用接口介绍 创建线程池的一些方法介绍 3.1 newFixedThreadPool方法 3.2 newCachedThreadPool方 ...
- HDU - 1150 POJ - 1325 Machine Schedule 匈牙利算法（最小点覆盖）
Machine Schedule As we all know, machine scheduling is a very classical problem in computer science ...
- java数据结构和算法08（B树的简单原理）
这一篇首先会说说前面剩余的一点知识2-3树,然后简单说说B树,不写代码,只是简单看看原理吧! 为什么要说一下2-3树呢?了解2-3树之后能更快的了解B树: 1.简单看看2-3树 其实我们学过了前面的2 ...
- 【转】insert忽略重复、mysql插入操作跳过、插入覆盖覆盖、mysql更新重复
需求背景:一般情况,插入数据的时候,有脏数据的情况,主键重复的话,直接insert into 会报错的,然后下面的sql都不再执行了,如果可以确定后面的数据可以覆盖前面的数据,直接用replace i ...
- AGC001 C - Shorten Diameter【枚举】
一开始没看到要保证最后是树--所以一定要从叶子开始删 枚举重心,如果k是偶数,那么按当前重心提起来deep大于k/2的全都要切掉,这样枚举重心然后取min即可 奇数的话就是枚举直径中间的边,然后从两边 ...
- mysql导入文件
手里有一个web源码工程文件夹 mysql导入文件: 新建连接,名称随意,用修改设置的用户密码登录,我的连接名称是eee 右击information_schema,建立数据库,数据库名称源码文件名,字 ...
- VxWorks实验八 信号
实验八信号1 实验目的1．学习使用信号2 实验内容在实验一建立的 project 中,编写一段信号处理程序,将其与SIGINT 相关连,使用kill()发送SIGINT 信号并调用信号处理程序.观察运 ...