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还是手 ...
随机推荐
- Elasticsearch学习概念之curl
curl,简单认为是可以在命令行下访问url的一个工具.即增删改查. curl是利用URL语法在命令行方式下工作的开源文件传输工具,使用curl可以简单实现常见的get/post请求. 查看curl的 ...
- CF-816A
A. Karen and Morning time limit per test 2 seconds memory limit per test 512 megabytes input standar ...
- ACM-ICPC2018焦作网络赛 Participate in E-sports（大数开方）
Participate in E-sports 11.44% 1000ms 65536K Jessie and Justin want to participate in e-sports. E- ...
- python3登陆接口测试
Python3和Python2有很大的语法区别,在实际的项目中,要注意格式.今天用Python3做一个接口测试,由于没有经验,用Python2的语法,调了半天没有搞定,后来一个大神指点了一下,终于拨开 ...
- 原生js实现一个侧滑删除取消组件（item slide）
组件,本质上是解决某个问题封装的类,在此记录原生js实现侧滑删除 先上效果图 实现思路 1. 确定渲染的数据结构 2. 思考划分布局,总的有两个主要的模块:内容区域和按钮区域 2.1 内容区域保持宽度 ...
- ue4 retarge记录
动画重定位(相同骨骼) https://docs.unrealengine.com/latest/CHN/Engine/Animation/AnimationRetargeting/index.htm ...
- ue4 1官网编程指南总结
https://docs.unrealengine.com/latest/CHN/index.html 中编程指南 快速入门 actor生命周期 FloatingActor.h #pragma onc ...
- Litjson
http://www.cnblogs.com/peiandsky/archive/2012/04/20/2459219.html JSON(JavaScript Object Notation) 是一 ...
- 今天是 Java 诞生日，Java 24 岁了！
今天是 Java 诞生日,Java 今年 24 岁了,比栈长还年轻..还有得搞,别慌!作为一名Java语言的学习者,对Java的起源和发展有个大概的了解应是必要的. 1991年,Sun公司成立Gree ...
- [软件工程基础]Alpha 软件测试报告
PhyLab Alpha 测试报告 测试中发现的bug Alpha版本限制与问题 由于接手时数据库已经丢失,这一版本主要修复了大部分数据库,使得网站得以运行. 相比接手时网站的状况,有以下改进: 恢复 ...