编写CSS+DIV代码完成三列固定宽度的网页结构布局
编写CSS+DIV代码完成三列固定宽度的网页结构布局，效果图及属性参数如下。（1）效果图如下（2）左列背景色为#ffc33c，边框属性为2px、solid、#333；（3...
编写CSS+DIV代码完成三列固定宽度的网页结构布局，效果图及属性参数如下。（1）效果图如下（2）左列背景色为#ffc33c，边框属性为2px、solid、#333；（3）右列1背景色为#ff33cc，边框属性为2px、solid、#333；（4）右列2背景色为#ff33cc，边框属性为2px、solid、#333；（5）第二个盒子和第三个盒子的距离是50px；第三个盒子页面左边距是700px；（4）三个盒子的宽度和高度都是300px。【特别是第五点不太理解，第三个盒子页面左边距是700px？？？？？？
展开
展开全部
给右列一设置margin：auto 50px; 上下外边距不管，左右个50px
margin 意思是 简写属性在一个声明中设置所有外边距属性。
这个简写属性设置一个元素所有外边距的宽度，或者设置各边上外边距的宽度。
块级元素的垂直相邻外边距会合并，而行内元素实际上不占上下外边距。行内元素的的左右外边距不会合并。同样地，浮动元素的外边距也不会合并。允许指定负的外边距值，不过使用时要小心。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{margin: 0;padding: 0;}
body{width:1012px;}
div{
width: 300px;
height: 300px;
border: 2px solid #333;
border-sizing:border-box;/*将边框设置为内边框 这样就不影响元素的宽度和高度,这样正好右列二到页面左边距正好是700px ,没有这个属性的话是708px*/
float: left;
}
#a{
background: #ffc33c;
border: 2px solid #333;
}
#b{
background:#ff33cc ;
margin: auto 50px;
}
#c{
background:#ff33cc ;
}
</style>
</head>
<body>
<div id="a">
左列
</div>
<div id="b">
右列1
</div>
<div id="c">
右列2
</div>
</body>
</html>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
