手机搞笑网站模板下载安装,广告营销文案,手机网站设计字体多大,wordpress无法安装导入器版心和布局流程 一、版心二、布局流程三、一列固定宽度且居中四、两列左窄右宽五、通栏平均分布型 一、版心
版心#xff1a;是指网页主题内容所在的区域。一般在浏览器窗口水平居中位置#xff0c;常见的宽度值为960px、980px、1000px、1200px等。
二、布局流程
为了提高… 版心和布局流程 一、版心二、布局流程三、一列固定宽度且居中四、两列左窄右宽五、通栏平均分布型 一、版心
版心是指网页主题内容所在的区域。一般在浏览器窗口水平居中位置常见的宽度值为960px、980px、1000px、1200px等。
二、布局流程
为了提高网页制作的效率布局时需要遵守一定的布局流程具体如下
确定页面版心分析页面中的行模块以及每个行模块中的列模块制作HTML结构CSS初始化然后开始运用盒子模型的原理通过CIDCSS布局来控制网页的各个模块
三、一列固定宽度且居中
htmlheadstyle* {padding: 0;margin: 0;}.top,.banner,.main,.footer {width: 960px;margin: 10px auto;text-align: center;}.top {height: 100px;background-color: pink;}.banner {height: 120px;background-color: skyblue;}.main {height: 500px;background-color: red;}.footer {height: 150px;background-color: #ccc;}/style/headbodydiv classtoptop/divdiv classbannerbanner/divdiv classmainmain/divdiv classfooterfooter/div/body
/html四、两列左窄右宽
htmlheadstyle* {padding: 0;margin: 0;}.top,.banner,.main,.footer {width: 960px;margin: 10px auto;text-align: center;}.top {height: 100px;background-color: pink;}.banner {height: 120px;background-color: skyblue;}.main {height: 500px;background-color: red;}.footer {height: 150px;background-color: #ccc;}.main .left {width: 360px;height: 500px;float: left;background-color: white;}.main .right {width: 590px;height: 500px;margin-left: 10px;float: left;background-color: white;}/style/headbodydiv classtoptop/divdiv classbannerbanner/divdiv classmaindiv classleftleft/divdiv classrightright/div/divdiv classfooterfooter/div/body
/html五、通栏平均分布型
htmlheadstyle* {padding: 0;margin: 0;}ul {list-style: none;}.top,.banner,.main,.footer {width: 960px;margin: 10px auto;text-align: center;}.top {height: 100px;background-color: pink;}.banner {height: 120px;background-color: skyblue;}.main {height: 500px;background-color: red;}.footer {height: 150px;background-color: #ccc;}.main ul li:nth-child(odd) {width: 240px;height: 240px;background-color: deeppink;float: left;}.main ul li:nth-child(even) {width: 240px;height: 240px;background-color: hotpink;float: left;}/style/headbodydiv classtoptop/divdiv classbannerbanner/divdiv classmainulli1/lili2/lili3/lili4/li/ul/divdiv classfooterfooter/div/body
/html
