正文
css样式预览,css实时预览
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
css代码写好后怎么预览
CSS本身并不能直接预览的，必须把它跟实际的网页结合才能呈现效果。
就好像装修房屋，CSS就像是装修的计划书和设计图纸，比如它可能记载了：客厅的天花板用什么样的颜色、卧室的床用多大的、卫生间的洗浴设备用什么牌子的……等等诸如这些，但是，光有这些并不能说就装修完了是吧？你必须按照计划书逐步把它付诸实施，最后才能看到实际的装修效果。当然，你也可以利用一些装修方面的CAD软件在电脑上预览装修效果（尽管效果与实际结果不一定完全一致）。同样，要想看到CSS的效果，最好就是把它应用到实际的网页中，也可以做一个简单的网页来预览一下效果。
[img]相关问答
Q1: dreamware如何可以时时预览CSS3样式？
不能实时预览，智能保存后在浏览器预览，如果你是微调样式，可以在浏览器的控制台中修改CSS，这个是实时的， 改后某一段后复制替换掉你的.css文件
Q2: 为什么套用css样式后预览图片大小不变?我是菜鸟，请不要用代码说明。
3个原因：
1.样式有冲突；
2.图片可能作为背景了；
3.用img标签时，宽高属性设置的不对。
如果图片是abc.png且大小为50x50的话，改变大小应该这样写，先别用外部样式控制，测试有效了，在用外部样式：
img src="abc.png" width="100" height="100" /
Q3: 求助关于CSS样式在IE7中预览大相迳庭
有个经验是：能用padding的就不要用margin。
还有就是多用下absolute.
以前觉得absolute没什么用，以为只能绝对于body定位，没什么用
自从知道只要"父div"的position是有值，absolute就是绝对于"父div"后，发现这个东西很好用，而且跨浏览器性很好！
!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
""
html
head
meta http-equiv="Content-Type" content="text/html; charset=gb2312"
title无标题文档/title
style type="text/css"
!--
body {
margin-left: 50px;
margin-top: 30px;
}
#dvi {
border: 1px solid #00CACA;
height: 250px;
width: 180px;
}
#dvi2 {
background-color: #C4FFFF;
height: 20px;
text-align: left;
text-indent: 10px;
color: #00CACA;
padding-top: 8px;
}
#dvi1 {
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #00CACA;
height: 25px;
width: 180px;
position: relative;
}
#dvi3 {
background-color: #C4FFFF;
border-top-width: 1px;
border-right-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-left-style: solid;
border-top-color: #00CACA;
border-right-color: #00CACA;
border-left-color: #00CACA;
width: 50px;
position: absolute;
height: 20px;
top: 5px;
left: 4px;
}
#dvi4 {
background-color: #C4FFFF;
border-top-width: 1px;
border-right-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-left-style: solid;
border-top-color: #00CACA;
border-right-color: #00CACA;
border-left-color: #00CACA;
width: 50px;
overflow: hidden;
position: absolute;
height: 20px;
left: 65px;
top: 5px;
}
#dvi5 {
background-color: #C4FFFF;
height: 20px;
width: 50px;
border-top-width: 1px;
border-right-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-left-style: solid;
border-top-color: #00CACA;
border-right-color: #00CACA;
border-left-color: #00CACA;
position: absolute;
left: 125px;
top: 5px;
}
--
/style
/head
body
div id="dvi"
div id="dvi2"周热门产品排行榜/div
div id="dvi1"
div id="dvi3"DC/div
div id="dvi4"MP3/div
div id="dvi5"MP4/div
/div
此处显示 id "dvi" 的内容
/div
/body
/html
