HTML5
Jishenshen97
这个作者很懒,什么都没留下…
展开
-
CSS-Flex布局方法
在做js30天挑战的时候,遇到了这样一个页面效果demo页面点击前截屏如下点击后:我的代码如下:<div class="panels"> <div class="panel panel1"> <p>Hey</p> <p>Let's</p> <p>Dance</p> </div> <div class="pane原创 2020-05-30 20:06:46 · 261 阅读 · 0 评论 -
CSS-元素页面水平垂直居中显示
网页元素页面水平垂直居中显示的设置问题描述代码展示解决方案问题描述目标页面效果如下:目前页面效果如下:为什么呢?让我们来看下源代码代码展示问题代码:body { font-family: Arial, Helvetica, sans-serif; font-size: 2rem; background: #018ded; display: flex; align-items: center; flex: 1;} .clock { margin: 50px auto;原创 2020-05-23 02:00:47 · 352 阅读 · 0 评论 -
CSS界面布局篇—关于display的使用
在做界面布局的时候遇到了这样几个问题:1. display的使用:** 目标完成界面**:实操过程中的结果却如下:在用flex:1定义了right bar充满剩下的屏幕后,输入任何内容都居中,而我想要让内容从左到右来布局,在尝试了几个方法后发现自己漏了这么一步:.right1 span{ display: flex;}写入这个css语句后,排版回复正常2. fle...原创 2020-05-01 15:59:49 · 330 阅读 · 0 评论 -
CSS-关于CSS的一些小技巧(页面元素居中,弹性布局,分割线)
今天试着模拟还原Twitter界面,在页面布局时收到大佬指点,学了一些实用的布局技巧,来此记录一下。1. 页面元素居中思路:给container一个宽度,再把她的左右margin设置成auto,container就自动居中了.container{ width: 500; margin: 0 auto;}2. css初始化考虑到不同浏览器兼容性的问题,在写css文件时初...原创 2020-04-16 19:28:23 · 474 阅读 · 1 评论