-
<!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{width:800px;height:600px;background:red;margin:0 auto;}
.left{ width:200px;height:600px;background:blue;float:left;}
.right{width:80%;height:600px;background:green;position:absolute;margin:0 0 0 210px;}
.foot{height:90px;background:#f60;}
</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>查看全部 -
绝对定位： position:absolute;
查看全部 -
板式布局：是网页UI设计师将有限的视觉元素进行有机的排列组合。
页面上的元素，就是块与块之间的关系（块挨着块、块嵌套块、块叠压块）。
查看全部 -
拉进来查看全部
-
用clear:both;清除浮动
查看全部 -
.left{width:200px;height:300px;background:pink;float:left;position:absolute;top:50px;left:0px;}.right{width:auto;margin-left:210px;height:300px;background:gray;}left必须要绝对位置之后，right才要设置左间距
查看全部 -
<!DOCTYPE html>
<html>
<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{width:100%;background:#ccc;height:90px;}
.main{width:100%;height:300px;background-color:red}
.left{width:29%;background-color:blue;float:left;height:300px;}
.right{width:70%;background-color:green;float:right;height:300px;}
.foot{width: 100%;background-color:orange;clear:both;}
</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>
查看全部 -
<!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{text-align:center;height:150px;background:#ccc;}
.main{height:600px;background:red;}
.left{text-align:center; width:20%;height:600px;background:blue;float:left;}
.right{text-align:center;width:78%;height:600px;background:yellow;float:right;}
.foot{text-align:center;height:100px;background:#0bf;}
</style>
</head>
<body>
<div class="top">百度一下</div>
<div class="main">
<div class="right">网页</div>
<div class="left">图片</div>
</div>
<div class="foot">备注</div>
</body>
</html>
查看全部 -
清除浮动：clear:both
查看全部 -
三列布局,通常左右侧都是固定宽度,采用position:absolute;left:0;top:0,右侧position:absolute;right:0;top:0,这样的方式来左右定位两侧的列.
中间列采用margin:0 300px 0 200px;这样的方式来自适应布局
查看全部 -
网页设计的特点:作为前端工程师在页面布局上的作用,利用浮动,定位对页面进行布局
1)网页可以自适应宽度:网页的宽度可以根据不同的显示器分辨率设计成按照%比自适应宽度.
2)网页的长度理论上没有限制.
常见的网页布局分为:
1)头部
2)内容主题部分:根据需要进行分栏,常见的分为2-3栏.分栏又叫分列,常见的布局分为:1列布局,2列布局,3列布局,混合布局(最为常用)
3)底部
查看全部 -
浮动 和绝对定位可脱离文档流
查看全部 -
position:absolute 绝对定位 margin: 0 300px 0 200px (上 右 下 左) margin：0 auto（上下 左右自动）
查看全部 -
左侧定位：position:absolute;left:0;top:0
右侧定位：position:absolute; right:0; top:0
左右增加：margin:0 300px 0 200px
查看全部 -
margin:0 300px 0 200px
查看全部
举报