样板设计
码农不在敲代码
秃头是我的追求
展开
-
双飞翼布局与圣杯布局(详细)
双飞翼布局与圣杯布局(详细)双飞翼布局双飞翼布局的特点:三列布局,左右固定,中间自适应。实现双飞翼布局的方法有很多:BFC,定位,flex(弹性),浮动。这里我们重点讲浮动实现的双飞翼布局双飞翼布局采用margin-left负值,以及浮动来实现。先写布局:<body> <div id="head"></div> <div id="main"> <div class="center"> <!-- 先原创 2020-09-27 20:32:54 · 338 阅读 · 0 评论 -
等高布局margin-bottom与padding-bottom
等高布局margin-bottom与padding-bottommargin-bottom取负值padding-bottom取正直保证绝对值相等,起到两者相互抵消的作用等高布局实例:*{padding:0;margin:0}#main{width:100%;border:5px solid black;overflow:hidden;}#main .div1{width:200px;float:left;background:yellow;margin-bottom:-2000px;paddi原创 2020-09-27 12:25:02 · 388 阅读 · 0 评论 -
管理后台样板设计
管理后台样板设计管理后台采用的是左侧固定,右侧自适应的样板。因此在编写这个网页之前要进行以下准备工作:初始:html,body{font-family:Arial;height:100%;overflow-y:hidden;}将右边自适应的内容块不加宽;height:calc(100% - 上px - 下px);overflow:hidden;它的子元素上还要加:overflow:auto;height:100%;左侧是固定定侧边栏,需要加左浮动。自适应内容块不需要加浮动。底部的公司说明不原创 2020-09-24 17:22:53 · 70 阅读 · 0 评论