html
懒惰的睿智
一个懒散的程序猿
展开
-
HTMl弹性布局
开发工具与关键技术:弹性布局作者:li弹性布局一直以来,我们前端开发的布局方案是基于盒模型,但现在移动端的网页如果按pc端的来写,pc端的布局就不适应了,Flex布局意思是弹性布局,它可以让我们更灵活。需要注意的是设为Flex后,子元素的float,clear和vertical-align属性会失败。采用flex布局的元素,称为Flex容器。容器默认存在两根轴:水平的主轴(main ax...原创 2019-03-12 20:40:32 · 3838 阅读 · 0 评论 -
浮动与定位
在盒模型的时候,时常需要使用3大属性可以用来控制页面排版。三大属性:position属性,display属性,float属性。①position 属性控制页面上元素间的位置关系。②display 属性控制页面元素是否显示或者是堆叠还是并排显示。③float 属性提供控制方法。通过float这种控制方法,可以实现多栏布局,导航菜单等position属性position属性控制页面上...原创 2019-03-27 09:51:21 · 150 阅读 · 0 评论 -
手风琴导航
开发工具与关键技术:手风琴导航作者:李波手风琴式导航适合应用诸多场景,其隐藏式的风琴导航,体积小,不常用的时候可以隐藏起来,既不影响网页布局,可以起到很好的导航作用。下面我们来试着制作它,首先为了能点击跳转选择a标签,em标签把文本定义为强调的内容,so我在em标签内嵌入文字,突出显示。Css部分设置如下,给风琴导航部分设置其样式,用position:fixed固定其位置,cursor:p...原创 2019-03-27 10:47:12 · 572 阅读 · 0 评论 -
骰子
开发工具与关键技术:骰子作者:李波一起来做一个骰子吧,下面是html部分,做法:就是用一个盒子装着span标签,然后调整span标签的每个点的位置。首先,我们先给span标签设置样式、大小、以及背景颜色。display 属性规定元素应该生成的框的类型。.row1{ justify-content: center; align-items: center;}justify-co...原创 2019-03-27 11:23:33 · 178 阅读 · 0 评论