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>

转载于:https://www.cnblogs.com/lhl66/p/10370024.html

pc端常见布局样式总结（针对常见的）相关推荐

项目实战-PC端固定布局【2】认识网页大纲算法（HTML5 Outliner）
注: body,nav,section需要标题 head,div不需要标题链接: https://gsnedders.html5.org/outliner/ 步骤:选择文件--->Outlin ...
移动端与PC端页面布局区别
视口视口是移动设备上用来显示网页的区域,一般会比移动设备可视区域大,宽度可能是980px或者1024px,目的是为了显示下整个为PC端设计的网页,这样带来的后果是移动端会出现横向滚动条,为了避免这种 ...
PC端网页布局——世纪佳缘（二）页面初搭建
咱们首先来搭建一下整体的大结构: 效果如下: 每一块呢,都是使用div块做的,并不难理解除了头部之外,每一块都是外面一个大的div,里面再包一个小的div,也就是所谓的通栏和版心(由于个人问题,版心 ...
[09]项目实战-PC 端固定布局(9)
一．资讯内容和首页一样,只不过这里,布局方式有所不同,具体如下: 二．代码详解 //全部代码 <figure class="tour"><img src=&qu ...
PC端网页布局——世纪佳缘（三）头部
来看头部,做好的效果图如下: 接下来就进入主题吧~~ 先来分析一下: 有两张图片,一个填写账号密码和登录按钮的登录框,其他登录方式,(因为海外登录方式与前面纯图标的不太一样,这里又是只做了个大致的样式 ...
[11]项目实战-PC 端固定布局(11)
一．风景欣赏预览图和首页差不多.具体代码如下: //风景欣赏 HTML 部分<div class="list scenery"><section>< ...
移动端有哪些常见布局方式？
大家好,我是IT修真院深圳分院第九期的学员徐炜,一枚正直.纯洁.善良的前端程序员. 今天给大家分享一下,修真院官网css任务13,深度思考中的知识点--移动端有哪些常见布局方式? 1.背景介绍随着智 ...
PC端、移动端响应式布局的常用解决方案对比(媒体查询、百分比、rem和vw/vh）
PC端.移动端响应式布局的常用解决方案对比简要介绍: 一.px 和视口 1. 像素 2. 视口 (1) 布局视口(layout viewport) (2) 视觉视口(visual viewport ...
PC端移动端兼容响应式布局页面的制作
之前已经制作了PC端固定布局和移动端流体布局的页面,这次的任务就是将一个页面制作成PC端移动端兼容响应式布局页面,是页面能在不同屏幕大小下呈现处不同最佳显示状态. 主要的过程就是对: 1.将width ...

pc端常见布局样式总结（针对常见的）

pc端常见布局样式总结（针对常见的）相关推荐

最新文章

热门文章