30分钟学会网站布局

admin 2023-01-01 15:49:29 267浏览

基本思路: 左右2列采用绝对定位来布局 中间内容部分采用margin挤压出来 HTML结构 <div class="container"> <div class="left">左侧<...

admin 2023-01-01 15:46:26 204浏览

基本思路: 和2列布局很相似 左右2列采用浮动+宽度 中间区域实际是用margin挤压出来的 DOM顺序不能写乱，必须先写左右再写中间 HTML结构 <div class="left">左侧</div> &...

admin 2023-01-01 15:43:28 260浏览

基本思路: 给2列添加一个定位的父集区块，并设置定位属性，一般设置为相对定位 给左右2个区块分别使用绝对定位 父集区块/定位父集必须设置宽度width HTML结构 <div class="container clear"&...

admin 2023-01-01 15:39:22 239浏览

基本思路: 要给左右2列添加一个父集区块 要给左右2个区块设置一个浮动:left/right 给父区块添加一个after伪类让子块撑开父集 HTML结构 <div class="container clear"> &l...

admin 2023-01-01 15:21:23 240浏览

基本思路: 左侧固定,并设置为左浮动 右侧主体部分设置一个左边距,它的宽度只要大于等于左侧的宽度就可以 HTML结构 <div class="right">右侧</div> <div class=&q...

admin 2023-01-01 15:17:48 291浏览

基本思路: 右侧固定,并设置为右浮动 左侧主体部分设置一个右边距,它的宽度只要大于等于左侧的宽度就可以 HTML结构 <div class="left">左侧</div> <div class=&qu...

admin 2023-01-01 15:11:11 270浏览

基本思路: 头部,尾部单独放在一个独立的容器中，仅设置高度即可 头部,底部的内容区仍然和主体等宽 主体仍放在一个单独的容器中,并设置水平居中 CSS样式不用修改,只需要调整一个DOM结构 HTML结构 <div class="head...

admin 2023-01-01 14:58:44 210浏览

基本思路: 页面的头部，主体,底部全部放在一个容器中统一设置 容器中的子块只需要设置一下高度即可 HTML结构 <div class="container"> <div class="header">头部</div>...