css:浮动的理解。
css默认的布局是将元素一个一个地往下排列下来,如果不采取浮动,将导致页面非常长。
下面我们通过做一个常见的网站布局,来说明浮动是怎么一回事。
希望的效果是:
步骤一、先把代码写一下,
例:
html内容:
<body >
<div id="head">
head
</div>
<div id="content">
content
</div>
<div id="sidebar">
sidebar
</div>
<div id="footer">
footer
</div>
<p>要多写几行字</p>
</body >
css内容:
body
{
margin:0;
border:0;
}
#head
{
width: 300px;
height:50px;
margin:10;
border:1px solid #000;
background: #0aa;
}
#content
{
width: 200px;
height:80px;
margin:10;
border:1px solid #000;
background: #aa0;
}
#sidebar
{
width: 100px;
height:80px;
margin:10;
border:1px solid #000;
background: #afa;
}
#footer
{
width: 300px;
height:50px;
margin:10;
border:1px solid #000;
background: #0aa;
}
效果如下:
步骤二、
这不是我们想要的效果,我们想把siderbar块移到content块的右边。sidebar改成如下内容:
#sidebar
{
float: right;
width: 100px;
height:80px;
margin:10;
border:1px solid #000;
background: #afa;
}
得到的效果是:
或者是(改变浏览器的大小,sidebar位置会有变化):
为什么sidebar设了浮动,但没有放在content的旁边?
讲解:
1、因为元素是按线性排列的,sidebar在我们的html文件中是第三个元素,把它设成浮动后,他也只在第三个元素原来应该在的位置处左右浮动,而不会跑到其他元素的位置浮动。
2、浮动元素后的元素(footer和<p>),如果浮动元素按线性排列所在的位置,能容下footer和<p>,则这些元素跟上来,
3、否则,就不跟上来,也就是找个能容的下他们的空地,也就是还在默认的自然流中的位置。
书上讲,浮动是元素从元素自然流中抽离出来,浮动元素之后的元素,环绕在浮动元素的周围,这句话的含义如上
相关文档:
使用asp.net 开发wap 网站,在ishtml32下,如果手机浏览器支持ishtml32,但是 SupportsCss=False 时,想加载css文件时,采用重写mobile:form的方法来实现
using System;
using System.Configuration;
using System.Web.UI.MobileControls;
using System.Web.UI.MobileControls.Adapters;
public class MyForm : Form
{ ......
这里提供css滤镜代码,
html { filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); }
使用方法:这段代码可以变网页为黑白,将代码加到网站页面CSS最顶端就可以实现素装。
如果网站没有使用CSS,可以在网页/模板的HTML代码<head>和</head> 之间插入:
<style>
html{filter:progid: ......
/* reset */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,p,blockquote,th,td{margin:0;padding:0;font-family:'宋体';}
div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,a,span {overflow:hidden;}
table{border-collapse:collapse;border-spacing:0; font-size:12px;}
td { line-height:18px ......
css是什么?这是初学网页设计的同学们遇到的第一个问题,在学习网页制作之前,你一定要了解网页制作的大局,有了全局的了解,才知道怎么去学习。
网页设计分为:前台页面设计,后台程序设计。
前台页面设计分为:html,css,javasript,ps,flash(这几个都要了解哦,熟练掌握css)
后台程序设计分为:asp,php,asp.net(只要 ......
人一旦习惯了某些东西就很难去改,以及各种各样的原因,新的浏览器越来越多,而老的总淘汰不了。增长总是快于消亡导致了浏览器兼容是成了谈不完的话题。说到浏览器兼容,CSS HACK自然而然地被我们想起。今天,我们通常都有一个团队或者将有一个团队的人在一个公司里面做相同的事,需要我们有统一的规范来进行Coding,以方 ......