前端开发DIV+CSS布局集合

前端自己开发插件 idea前端开发插件 web前端开发谷歌插件

写css的时候，经常为一些名字而发愁，比如说菜单后面的背景要用什么词来表示呢？大家都知道，菜单一般用menu来表示，那么菜单后面的背景我会用menubg，css里就写#menubg {…}。

还有一些其他的比如搜索框之类的应该怎么命名呢？下面有一些可以算得上是标准的命名吧。如果有错误或者遗漏请朋友们帮忙补上，谢谢！

页头：header

登录条：loginbar

标志：logo

侧栏：sidebar

广告：banner

导航：nav

子导航：subnav

菜单：menu

子菜单：submenu

搜索：search

滚动：scroll

页面主体：main

内容：content

标签页：tab

文章列表：list

提示信息：msg

小技巧：tips

栏目标题：title

加入：joinus

指南：guild

服务：service

热点：hot

新闻：news

下载：download

注册：regsiter

状态：status

按钮：btn

投票：vote

合作伙伴：partner

友情链接：friendlink

页脚：footer

版权：copyright

提交：submit

文本框：textbox

统计：count

以上结构可以组合使用，例如：左列标题lefttitle；底部导航footernav 书写原则是： 1.一律小写； 2.尽量用英文； 3.不加中杠和下划线； 4.尽量不缩写，除非一看就明白的单词。

网易的CSS写法

/ 全局CSS定义 /

body { text-align: center; font-family:”宋体”, arial;margin:0; padding:0; background: #FFF; font-size:12px; color:#000;}

div,form,img,ul,ol,li,dl,dt,dd {margin: 0; padding: 0; border: 0;}

h1,h2,h3,h4,h5,h6 { margin:0; padding:0;}

table,td,tr,th{font-size:12px;}

/ 链接颜色 /

a:link {color: #1f3a87; text-decoration:none;}

a:visited {color: #83006f;text-decoration:none;}

a:hover {color: #bc2931; text-decoration:underline;}

a:active {color: #bc2931;}

/ 颜色属性 [定义规则，小写c加颜色名称] /

.cRed,a.cRed:link,a.cRed:visited{ color:Red; }

.cBlue,a.cBlue:link,a.cBlue:visited{color:#1f3a87;}

.cDRed,a.cDRed:link,a.cDRed:visited{ color:#bc2931;}

.cGray,a.cGray:link,a.cGray:visited{ color: #4F544D;}

.cDGray,a.cDGray:link,a.cDGray:visited{ color: #666;}

.cWhite,a.cWhite:link,a.cWhite:visited{ color:#fff;}

.cBlack,a.cBlack:link,a.cBlack:visited{color:#000;}

a.cBlack:hover{color:#bc2931;}

.cYellow,a.cYellow:link,a.cYellow:visited{color:#ff0;}

.cGreen,a.cGreen:link,a.cGreen:visited{color:#008000;}

/ 字体属性 [定义规则，小写f加属性名称] /

.fB {font-weight: bold;}

.fI {font-style: italic;}

/ 字体大小/

.f12px{ font-size:12px;}

.f14px{ font-size:14px;}

/ 其他属性 /

.left{ float: left;}

.right{ float: right;}

.clear{ clear: both; font-size:1px; width:1px; visibility: hidden; }

.hidden {display: none;}

.unLine ,.unLine a{text-decoration: none;}

.noBorder{border:none; }

页面上所有图片自动缩放的代码

<script language=”JavaScript”>

var imgObj;

for(i = 0; i < document.all.length; i++)

{

if(document.all(i).tagName.toLowerCase()==”img”)

{

imgObj = document.all(i) //建议只判断高度或者宽度其中一个，那样可以自动按比例缩放

if (imgObj.height>500) //判断图片的高度，如果大于500，则设置为500，值可以自己修改

{

imgObj.height=500

}

if (imgObj.width>700) //判断图片的宽度，如果大于700，则设置为700，值可以自己修改

{

imgObj.width=700

}

}

}

</script>

滚动条的颜色定义

scrollbar-face-color: #E0D5BE;<!–//滚动条页面颜色设定–>

scrollbar-track-color: #EBE4D3;<!–//滚动条底版颜色设定–>

scrollbar-highlight-color: #ffffff;<!–//滚动条斜面和左面颜色设定–>

scrollbar-shadow-color: #ffffff;<!–//滚动条下斜面和右面颜色设定–>

scrollbar-3dlight-color: #ffffff;<!–//滚动条上边和左边的边沿颜色设定–>

scrollbar-dark-shadow-color: #ffffff;<!–//滚动条下边和右边的边沿颜色设定–>

scrollbar-arrow-color: #978C71;<!–//滚动条两端箭头颜色设定–>

给图片加边框

在CSS文件中对img定义边界（border），例如我在CSS中定义了：

img.framed {

padding: 6px;

border: 1px solid #CCC;

background-color: #FFF; }

那么在html文件中，针对嵌入的图片定义class=”framed”就会有相应的边框效果。

<img src=”……” class=”framed” >

在FF下一个自适应高度的简单做法加上

height: 100%;

overflow: auto;

自动换行的简单做法

table-layout: fixed;

WORD-brEAK: break-all;

WORD-WRAp: break-word;

怎样用CSS把层做成半透明？

用下面的样式表定义你的层

.alpha { filter: Alpha(Opacity=50, FinishOpacity=50, Style=0, StartX=0, StartY=0, FinishX=100, FinishY=100｝

解释：

Opacity=开始的不透明度(100的话就不透明了)

FinishOpacity=结束的不透明度(100的话就不透明了)

Style=样式，从0开始，1.2.3….有均匀透明啊，放射形状透明啊…

StartX=开始透明的X坐标，基本上为图片、层的左上角（0）

StartY= 开始透明的Y坐标，基本上也为图片、层的左上角（0）

FinishX=结束透明的X坐标，基本上也图片、层的右下（图片、层的宽度）

FinishY=结束透明的Y坐标，基本上也为图片、层的右下角（图片、层的高度）

再谈一下关于清除浮动(闭合浮动元素)最简单的方法
最简单的清除浮动(闭合浮动元素的方法是在父级容器内,浮动对象下面再插入一个额外的div标签，来清除浮动（clear）,浏览器兼容性好，没有HACKS，缺点是要增加一个无语义的标签,但在有的布局下,可使这个只起到清除作用的div,具有语义化.
先看代码 复制内容到剪贴板

<div class=”wrap”>
<div id=”sideright”>
<p>……</p>
</div>
<div id=”sideleft”>
<p>……</p>
</div>
<div id=”foot”>
<address>
[url]http://www.forest53.com[/url]
</address>
</div>
</div>
其中WRAp是父级容器,sideright和sideleft是左、右部分的内容，foot里放了内容，在左、右内容的下面，并在父级容器里面，起到了清除浮动div的作用。

有什么能控制滚动条大小的吗？

<div style=”overflow:auto;width:200px; height:150px; zoom:0.5;”>
<div style=”width:2000px; height:1500px; zoom:2;”>
有什么能控制滚动条大小的吗
</div>
</div>

同时调用几个地方的外部CSS

main.css

@import url(font.css);
@import url(nav.css);
@import url(form.css);
@import url(footer.css);
@import url(ad.css);
各浏览器padding、margin的差异
margin和padding总是有可能要用到，而产生的问题如何解决呢？由于浏览器解释容器宽度的方法不同：
IE 6.0 Firefox Opera等是
真实宽度=width+padding+border+margin
IE5.X
真实宽度=width-padding-border-margin

解决的方法是: 复制内容到剪贴板 代码:div.content {
width:400px; //这个是错误的width，所有浏览器都读到了
voice-family: “\”}\””; //IE5.X/win忽略了”\”}\””后的内容
voice-family:inherit;
width:300px; //包括IE6/win在内的部分浏览器读到这句，新的数值(300px)覆盖掉了旧的
}
html>body .content { //html>body是CSS2的写法
width:300px; //支持CSS2该写法的浏览器(非IE5)有幸读到了这一句
}

div.content {
width:300px !important; //这个是正确的width，大部分支持!important标记的浏览器使用这里的数值
width(空格)/**/:400px; //IE6/win不解析这句，所以IE6/win仍然认为width的值是300px；而IE5.X/win读到这句，新的数值(400px)覆盖掉了旧的，因为!important标记对他们不起作用
}
html>body .content { //html>body是CSS2的写法
width:300px; //支持CSS2该写法的浏览器有幸读到了这一句
}

关于W3C检验时候的div元素封闭
所有的标记都必须要有一个相应的结束标记
以前在HTML中，你可以打开许多标签，例如<p>和<li>而不一定写对应的</p>和</li>来关闭它们。但在XHTML中这是不合法的。XHTML要求有严谨的结构，所有标签必须关闭。如果是单独不成对的标签，在标签最后加一个”/”来关闭它。例如: <img height=”80″ alt=”网页设计师” src=”../images/logo_w3cn_200x80.gif” width=”200″ />
成对的标签应有打开标签和关闭标签,例如： <table><tr><td> </td></tr></table>
没有成对关闭标签的元素 都要加 / 复制内容到剪贴板 如：
<base>
<br>
<hr>
<img>
<input>
<link>
<meta>
<nobr>

请问如何设置img标签图片自动适应高度？
想请教一下，倘若我设定了img的宽度一定值，我想保持纵横比不变，高度自动适应，该如何设置CSS，能否实现？

<style type=”text/css”>
img {
max-width: 200px;
width:expression(this.width > 200 ? “200px” : (this.width+”px”));
}
</style>
<img src=”http://gg.blueidea.com/2006/gongyi/banner.jpg”/>

idea 开发前端的插件 atom前端开发常用插件 前端开发vscode插件