-
absolute：绝对布局，脱离文档流，不设置宽度（width）情况下根据内容自动调整宽度，类似于浮动（float）布局。查看全部
-
块的三种关系： 1、块挨着块 2、块嵌套着块 3、块叠着块查看全部
-
三列自适应的中间也需要浮动到左边查看全部
-
清除浮动：clear:both 居中显示:margin:0 auto 向左浮动：float:left 向右浮动：float:right查看全部
-
添加position:absolute;left:0;top:0;显示使left绝对定位向左。 添加margin:0 310px 0 210px;不添加width，使宽度自适应。左右宽度添加10px使与左右间隔10px空位。 添加position:absolute;right:0;top:0;显示使right绝对定位向右. [ 查看全文 ]查看全部
-
哪两个 css 设置，可以让元素脱离文档流？ 浮动（float）和 绝对定位（position：absolute）查看全部
-
一个为固定宽度，另一个为宽度自适应，用法固定宽度用position，自适应用margin，这个自适应的值（就相当于在自适应这行DIV中固定宽度的DIV是脱离了标准文档流，所以值是多少，就相当于这一行中只有这个自适应DIV了（固定宽带那个就相当浮起来了），）查看全部
-
在布局中一行中有2个DIV，其中一个宽带固定，另一个宽带自适应，用float不行，应该用position。查看全部
-
CSS +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{height: 100px;background: #cccccc;} .main{height: 800px;background: red;} .left{width:40%;height: 800px;background: blue;float:left;} .right{width:55%;height: 800px;background: cadetblue;float: right;} .foot{height: 50px;background: orange;} </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>查看全部
-
Div{width:800px; height:500px; margin:0 auto}，上面这段样式，可以让 div 在页面的：居中对齐查看全部
-
<!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;text-align: center;} .top{ height:80px;background:gray;margin:0 auto; } .main{width:800px;height:900px;background:red;margin:0 auto;position:relative;} .left{width:23%;height:900px;background:blue;float:left;position:absolute;left:0;top:0;} .right{width:75%;height:900px;background:green;float:right;position:absolute;right:0;top:0;} .foot{height:40px;background:orange;margin:0 auto;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>查看全部
-
<style> body{ margin:0; padding:0; font-size:30px; font-weight:bold} div{ text-align:center; line-height:50px} .top{ height:100px;background:#9CF} .head,.main{ width:960px; margin:0 auto;} .head{ height:100px; background:#F90} .left{ width:220px; height:600px; background:#ccc;float:left;} .right{ width:740px; height:600px;background:#FCC; float:right} .r_sub_left{ width:540px; height:600px; background:#9C3; float:left;} .r_sub_right{ width:200px; height:600px; background:#9FC;float:right;} .footer{height:50px; background:red;clear:both;margin:0 auto;} </style>查看全部
-
三列布局 一、自适应宽度（注意：一定是三列都用%的情况下） 三个盒子不需要设置position，只要设置float就可以并排排列 二、设定宽度为像素（其中有一列没有用写width代码而自适应。另外两列为width:%或者px） 需要设置有width值的那两列的position:absolute。 设置position的同时，要设置上方和某边方向，相对于父级。 以及float方式。 对于没有width的自适应盒子：不需要设置position属性，但要设置margin（px或%），在页面中的显示位置。 <style type="text/css"> body{ margin:0; padding:0; font-size:30px; font-weight:bold } div{ text-align:center;line-height:50px} .left{ width:30%; height:600px; position:absolute;background:red;float:left;left:0;top:0;}/*左浮动样式*/ .mid{ height:600px; background:green;float:left;margin:0 31% 0 31%;}/*他不是absolute，故而还是文本流。想要控制他的大小，同时自适应，就得强调他的外边距（margin）*/ .right{ width:30%; height:600px; background:pink;position:absolute;float:right;right:0;top:0;}/*右浮动样式*/ </style> </head> <body> <div class="main"> <div class="left">left</div> <div class="mid">简介：本课程从最基本的概念开始讲起，步步深入，带领大家学习HTML、CSS样式基础知识，了解各种常用标签的意义以及基本用法，后半部分教程主要讲解CSS样式代码添加，为后面的案例课程打下基础。简介：本课程从最基本的概念开始讲起，步步深入，带领大家学习HTML。</div> <div class="right">right</div> </div> </body>查看全部
-
二列布局，position代码 *{ margin:0; padding:0; font-size:30px; font-weight:bold} div{ text-align:center; line-height:50px} .main{ width:960px; height:600px; margin:0 auto;} .left{ width:290px; height:600px; background:#ccc;float:left;}/*左浮动样式*/ .right{ width:650px; height:600px; background:pink;position:absolute;float:left;margin-left:310px;}/*右浮动样式*/查看全部
举报
0/150
提交
取消