css实现梯形(各种形状)的网页布局——transform的妙用
在各式各样的网页中,经常会看到形状特别的布局,比如说下面的这种排版方式:
这种视觉上的效果,体验十分好。那么他是如何来实现的呢,博主在这里整理了如下2种实现的方式。
1.通过给 div 加border的方式实现各种图形。你可以点击 “点我啊” 查看博主的博客,了解这种方式。
2.通过 transform 修改盒子样式,相互覆盖达到效果
以上的两种方式都可以实现,但是博主认为第二种复杂一些,但是实现的效果更好一些。接下来,我们就具体讲解
一下transform实现网页多图形布局的要点。
按照惯例,先看一段代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.parent{
width: 800px;
height: 500px;
margin: 400px auto;
background-color: fuchsia;
/*overflow: hidden;*/
}
.left{
width: 800px;
height: 500px;
background-color: yellow;
transform: skewY(-45deg);
} </style>
</head>
<body>
<div class="parent">
<div class="left"></div>
<!--<div class="right"></div>-->
</div>
</body>
</html>
接下来,打开浏览器,看看他是个什么样子。
以下就是隐藏多余部分的效果
如何?效果还不错吧,这是最简单的多图形布局方式,但这种无法实现复杂的效果,而且只有2个div,具体效果显示,还得
通过定位实现,那接下来,我们再做一个复杂点的。注意,稍微复杂之后,出现了许多需要注意的地方,朋友们要仔细看了。同样
我们先看一段代码。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.parent{
width: 800px;
height: 500px;
margin: 600px auto;
background-color: fuchsia;
/*overflow: hidden;*/
}
.left{
width: 600px;
height: 500px;
background-color: yellow;
transform: skewY(-45deg) translate(0px,-400px);
}
.right{
width: 600px;
height: 500px;
background-color: #00FFFF;
transform: skewY(-45deg) translate(200px,120px);
} </style>
</head>
<body>
<div class="parent">
<div class="left"></div>
<div class="right"></div>
</div> </body>
</html>
再看下效果图:
代码很简单,但是有几点要注意的地方:
1. 首先,内层的2个div,因为旋转的原因,所占的空间已经不在是 四四方方的规矩形状了,所以调节位置的时候需要注意
特别是div再增加的时候,会因为多个div所占区域冲突,而覆盖挤压。所以,调节位置时需要有耐心。
2.要避免其他元素浮动和定位对我们布局造成的影响,用此方法尽量在同一层中不要让元素浮动、定位等操作。
3.skewY(-45deg);正数为逆时针转,反之,顺时针转。除了deg还有其他单位,做别的旋转,这里博主就不一一赘述了。
看到这里,相信朋友们已经了解了多形状布局了。但这仅仅是开始,接下来还要在布局当中添加内容。那么我们继续看下面代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.parent{
width: 800px;
height: 500px;
margin: 600px auto;
background-color: fuchsia;
/*overflow: hidden;*/
}
.left{
width: 600px;
height: 500px;
background-color: yellow;
transform: skewY(-45deg) translate(0px,-400px);
}
.left img{
width: 100%;
}
.right{
width: 600px;
height: 500px;
background-color: #00FFFF;
transform: skewY(-45deg) translate(200px,120px);
} </style>
</head>
<body>
<div class="parent">
<div class="left">
<img src="img/QQ图片20170223091455.jpg"/>
</div>
<div class="right">
<p>看看我变成什么德行了</p>
</div>
</div> </body>
</html>
然后看看效果:
我的天呐,怎么是酱紫的呢!好吧,在css中,父元素如果添加了transform属性,子元素会继承这些属性,做相同的变化,
那我们该如何去消除它,得到我们想要的效果呢。很简单,只要在 对应的子元素添加与父元素相反的transform样式,就可以了。
那我们实验一下。看如下代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.parent{
width: 800px;
height: 500px;
margin: 600px auto;
background-color: fuchsia;
overflow: hidden;
}
.left{
width: 600px;
height: 500px;
background-color: yellow;
transform: skewY(-45deg) translate(0px,-400px);
overflow: hidden;
}
.left img{
width: 100%;
transform: skewY(45deg) translate(0px,400px);
}
p{
transform: skewY(45deg) translate(310px,0px);
}
.right{
width: 600px;
height: 500px;
background-color: #00FFFF;
transform: skewY(-45deg) translate(200px,120px);
overflow: hidden;
} </style>
</head>
<body>
<div class="parent">
<div class="left">
<img src="img/QQ图片20170223091455.jpg"/>
</div>
<div class="right">
<p>看看我变成什么德行了</p>
</div>
</div> </body>
</html>
效果图如下:
看到这,我们想要的效果就已经出来,但是有几点还是得说明一下的:
1.我们通过覆盖(也就是再写了一遍css样式)的方法更改了子元素继承的属性,简单但是有些特殊情况还是修改继承属性比较正统。
2.我们需要修改的属性大多是旋转,可以直接反过来。位置平移之类的,还是要具体调节,不是说只哟反过来就可以实现一切
3.建议朋友们,调试的时候不要加hidden样式,避免自己都找不到元素的位置
然后聊聊这个方法的一些不足之处:
1.通过transform属性修改的,会受到动画设置效果的影响。
2.不太适合实现子模块动态移动的动画效果,毕竟一移动,隐藏的部分会显露出来。
3.响应式比较麻烦,因为transform只能调像素,无法自适应各种分辨率,建议朋友们在不同设备上定死宽度,同时设置用户无法缩放
当然,像我们IE老大哥这种无法设置的就算了,
文章若有疏忽之处,还请大家指出,在这里也诚心邀请大家共同学习,广泛的提意见。如果朋友们有更好的实现多形状布局的方法,请消息我,
让我们共同学习。
css实现梯形(各种形状)的网页布局——transform的妙用的更多相关文章
- CSS网页布局全精通
在本文中将使用四种常见的做法,结合CSS于结构化标记语法制作两栏布局.很快地就会发现,不用嵌套表格,间隔用的GIF也能做出分栏版面布局. 相关文章:CSS网页布局开发小技巧24则 稍后在"技 ...
- 《精通CSS网页布局》读书报告 ----2016-12-5补充
第一章:CSS布局基础 1.CSS的精髓是布局,而不是样式哦! (定要好好的研究布局哦,尤其配合html5) 2. html标签的语义性,要好好的看看哦! 3.DTD:文档类型定义. 4.内联--& ...
- DIV+CSS常用网页布局技巧!
以下是我整理的DIV+CSS常用网页布局技巧,仅供学习与参考! 第一种布局:左边固定宽度,右边自适应宽度 HTML Markup <div id="left">Left ...
- 一、HTML和CSS基础--网页布局--网页布局基础
W3C标准: 由万维网联盟制定的一系列标准,包括: 结构化标准语言(HTML和XML) 表现标准语言(CSS) 行为标准语言(DOM和ECMAScript) 倡导结构.样式.行为分离. CSS 规定的 ...
- CSS网页布局错位:CSS宽度计算
为什么计算宽度计算网页像素宽度是为了CSS网页布局整齐与兼容.常见的我们布局左右结构网页或使用padding.margin布局的时候将计算整页宽度,如果不计算无论是宽度过大过小就会出现错位问题. 怎么 ...
- PHP.4-DIV+CSS标准网页布局准备工作(下)
DIV+CSS标准网页布局准备工作 区块属性(区块模型) 属 性 描 述 Margin(注) 是定义区块外边界与上级元素距离的属性,用1到4个值来设置元素的边界,每个值都是长度.百分比或者auto,百 ...
- PHP.3-DIV+CSS标准网页布局准备工作(上)
DIV+CSS标准网页布局准备工作(上) 概述 使用"DIV+CSS"对网站进行布局符合W3C标准,采用这种方式布局通常是为了说明与HTML表格定位方式的区别.因为现在的网站设计标 ...
- 总结与学习DIV+CSS网页布局技巧
以前用表格布局时设置网页居中非常方便,把表格对齐方式设置为居中就行了,就这么简单,现在呢,用DIV+CSS样式表控制,好像不是那么容易了,其实也很简单,只不过方式不同而已. <style> ...
- DIV+CSS 网页布局之:混合布局
1.混合布局 在了解了一列.两列和三列布局之后,混合布局也就不难理解了,混合布局也可以叫综合型布局,那么混合布局就可以在一列布局的基础之上,分为两列布局,三列布局,网页布局的结构普遍都是三列布局,但是 ...
随机推荐
- java 基础知识五 数组
java 基础知识五 数组 数组保存的是一组有顺序的.具有相同类型的数据. 同一个数组中所有数据元素的数据类型都是相同的. 可以通过数组下标来访问数组,数据元素根据下标的顺序,在内存中按顺序存放 ...
- python的MySQLdb模块在linux环境下的安装
开始学习python数据库编程后,在了解了基本概念,打算上手试验一下时,卡在了MYSQLdb包的安装上,折腾了半天才解决.记录一下我在linux中安装此包遇到的问题.系统是ubuntn15.04. 1 ...
- Java线程池ThreadPoolExecutor使用和分析(三) - 终止线程池原理
相关文章目录: Java线程池ThreadPoolExecutor使用和分析(一) Java线程池ThreadPoolExecutor使用和分析(二) - execute()原理 Java线程池Thr ...
- 卷积神经网络CNN与深度学习常用框架的介绍与使用
一.神经网络为什么比传统的分类器好 1.传统的分类器有 LR(逻辑斯特回归) 或者 linear SVM ,多用来做线性分割,假如所有的样本可以看做一个个点,如下图,有蓝色的点和绿色的点,传统的分类器 ...
- 简单介绍关于IOS的生命周期过程
初步了解一下生命周期的过程: 1.通过alloc init 分配内存,初始化controller. 2.loadViewloadView方法默认实现[super loadView]如果在初始化cont ...
- Layoutparams理解
一. layoutparams是什么LayoutParams继承于Android.View.ViewGroup.LayoutParamsLayoutParams只是ViewGroup的一个内部类 vi ...
- 《C++之那些年踩过的坑(附录一)》
C++之那些年踩过的坑(附录一) 作者:刘俊延(Alinshans) 本系列文章针对我在写C++代码的过程中,尤其是做自己的项目时,踩过的各种坑.以此作为给自己的警惕. [版权声明]转载请注明原文来自 ...
- centos7 下nfs的配置
td p { margin-bottom: 0cm } p { margin-bottom: 0.25cm; line-height: 120% } a:link { } 补充知识: RPC 主程序: ...
- java类集框架(ArrayList,LinkedList,Vector区别)
主要分两个接口:collection和Map 主要分三类:集合(set).列表(List).映射(Map)1.集合:没有重复对象,没有特定排序方式2.列表:对象按索引位置排序,可以有重复对象3.映射: ...
- eclipse code style template
<?xml version="1.0" encoding="UTF-8" standalone="no"?><templa ...