We read every piece of feedback, and take your input very seriously.
To see all available qualifiers, see our documentation.
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
新建html,添加头部meta标签,定义viewport
meta
viewport
<meta name="viewport" content="width=device-width, initial-scale=1.0">
定义页面的样式
* { margin: 0; padding: 0; } html, body { height: 100%; } #content { height: 100%; overflow: auto; } //这一个是定义刘海的关键样式 #liuhai { width: 30px; height: 320px; clip-path: polygon(0 0, 30px 30px, 30px 200px, 0 230px); background-color: #A4F4B0; shape-outside: polygon(0 0, 30px 30px, 30px 200px, 0 230px); float: left; }
页面拥有一个刘海,和一个滚动列表
<div id="content"> <!--刘海--> <div id="liuhai"></div> <!--列表--> <ul> <li>wscats</li> <!--这里省略多个li-> <li>wscats</li> </ul> </div>
clip-path绘制图形
clip-path: polygon(0 0, 30px 30px, 30px 200px, 0 230px);
polygon接受四个坐标点(八个参数),定义了每一个点的坐标,从上图也能看出,起点是从左上角开始计算的,可以用百分比,也可以用px等单位
上面设置的第一个点位置为x:0,y:0,第二个点的位置为x:30px,y:30px,第三个点的位置为x:30px,y:200px,最后一个点位置为x:0,y:230px,最后自动闭合成一个类似iPhoneX刘海的矩形。
x:0,y:0
x:30px,y:30px
x:30px,y:200px
x:0,y:230px
让clip-path所绘制图形占用空间,会挤开其他元素
一切无误后,得到视图如下
这里要讲将刘海位置从屏幕左上方移动到屏幕中间,实现原理是用JS计算刘海居中时候距离屏幕两侧的距离然后重新进行定位
The text was updated successfully, but these errors were encountered:
No branches or pull requests
模拟iPhone的刘海界面
新建html,添加头部
meta
标签,定义viewport
定义页面的样式
页面拥有一个刘海,和一个滚动列表
clip-path
clip-path绘制图形
polygon接受四个坐标点(八个参数),定义了每一个点的坐标,从上图也能看出,起点是从左上角开始计算的,可以用百分比,也可以用px等单位
上面设置的第一个点位置为
x:0,y:0
,第二个点的位置为x:30px,y:30px
,第三个点的位置为x:30px,y:200px
,最后一个点位置为x:0,y:230px
,最后自动闭合成一个类似iPhoneX刘海的矩形。shape-outside
让clip-path所绘制图形占用空间,会挤开其他元素
一切无误后,得到视图如下
控制刘海的位置
这里要讲将刘海位置从屏幕左上方移动到屏幕中间,实现原理是用JS计算刘海居中时候距离屏幕两侧的距离然后重新进行定位
The text was updated successfully, but these errors were encountered: