如何用CSS进行网页布局_学习笔记

首页免费课如何用CSS进行网页布局笔记

如何用CSS进行网页布局

最热最新

Kait

浮动（float）和绝对定位（position:abdsolute）：让元素脱离文档流。

查看全部

0 采集收起来源：评测题目
2016-05-08
qq_紫雨轻铃_0 03:05

三列布局，两边固定宽度，中间自适应

查看全部

0 采集收起来源：三列布局
2016-05-08
秋山君

main没有设置高度，而他的里面元素又有浮动，所以main是一直往下拓展，所以footer会在他下面，为了显示出footer的颜色，需要清除他的浮动，cler:both

查看全部

0 采集收起来源：实践题
2016-05-07
映雪蝶儿

清除浮动两种方法：1. clear:both; 2. overflow:hidden.

查看全部

0 采集收起来源：实践题
2016-05-07
爱慕课的jerry 03:59

bjq

查看全部

0 采集收起来源：内容简介
2016-05-06
半夏小狸

三列布局中间自适应左右绝对定位，中间设置左右margin，分别为左右的宽度，则可以自适应

查看全部

0 采集收起来源：编程练习
2016-05-06
龙猫上的橡宝子 03:25

一列布局：设置<div class="main">; body清零｛margin:0;padding:0｝;. main设置宽 ,高,背景色,垂直居中，｛width:800px;height:300px;background:#ccc;margin:0 auto;｝ ➕div class=top/foot, 设置.top{height:100px;background:blue}, 设置.foot{width:800px;height:100px;background:#900;merging:o auto;}

查看全部

0 采集收起来源：一列布局
2018-03-22
爱上月光的鱼

右侧哪两个 css 设置，可以让元素脱离文档流（） A浮动（float）和绝对定位（position：absolute）

查看全部

0 采集收起来源：评测题目
2016-05-04
早饭君

多列布局，如果各有宽度，可以用float属性，footer要clear：both 如果有一边无宽度自适应，float会出错有宽度的要使用position：absolute; 父元素框架使用position: relative; 自适应宽度的要使用margin-left:200px 可以顺利布局

查看全部

0 采集收起来源：编程挑战
2016-05-04
正在登录中

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>混合布局编程挑战</title> <style type="text/css"> body{ margin:0; padding:0; font-size:30px; color:#fff} .top{height:100px;background:#ccc;} .main{position:relative;} .left{position:absolute;left:0;top:0;width:200px;height:500px;background:blue;} .right{margin-left:200px;height:500px;background:#9c9;} .foot{height:50px;background:#F63;} </style> </head> <body> <div class="top">top</div> <div class="main"> <div class="right">right</div> <div class="left">left</div> </div> <div class="foot">foot</div> </body> </html>

查看全部

0 采集收起来源：编程挑战
2018-03-22
Chikako

<html><br> <head><br> <title>布局</title><br> <style type="text/css"><br> body{margin:0; padding: 0}<br> .top{<br> width: 800px;<br> height: 100px;<br> background: #645;<br> margin:0 auto;<br> }<br> <br> <br> .main{<br> width: 800px;<br> height: 300px;<br> background: #ccc;<br> margin: 0 auto;<br> }<br> <br> .bottom{<br> width: 800px;<br> height: 100px;<br> background: #973;<br> margin:0 auto;<br> }<br> <br> <br> </style><br> </head><br> <body><br> <div class="top"> </div><br> <div class="main"> </div><br> <div class="bottom"> </div><br> </body><br> </html>

查看全部

0 采集收起来源：一列布局
2018-03-22
hgliuxiong

<style type="text/css"> body{ margin:0; padding:0; font-size:30px; font-weight:bold} div{ line-height:50px} .left{ width:200px; height:600px; background:#ccc; position:absolute; left:0; top:0} .main{ height:600px; margin:0 10px 0 10px; background:#9CF} .right{ height:600px; width:300px; position:absolute; top:0; right:0; background:#FCC;} </style> /*使用absolute绝对定位*/

查看全部

0 采集收起来源：编程练习
2018-03-22
徐志峰

.清除浮动， clear:both

查看全部

0 采集收起来源：实践题
2016-05-03
吃瓜小夏

position绝对定位三栏布局中间（margin）

查看全部

0 采集收起来源：编程练习
2016-05-03
绝望的战斗鸡 01:44

混合布局

查看全部

0 采集收起来源：混合布局
2016-05-03