前端300代码css,前端开发DIV+CSS布局集合

前端自己开发插件 idea前端开发插件

写

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

页头：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.尽量不缩写，除非一看就明白的单词。

网易的

/ 全局

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; }

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

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

}

}

}

滚动条的颜色定义

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;

给图片加边框

在

img.framed {

padding: 6px;

border: 1px solid #CCC;

background-color: #FFF; }

那么在

在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,具有语义化.

先看代码 复制内容到剪贴板

……

……

[url]http://www.forest53.com[/url]

其中WRAp是父级容器,sideright和sideleft是左、右部分的内容，foot里放了内容，在左、右内容的下面，并在父级容器里面，起到了清除浮动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)覆盖掉了旧的

}

div.content {

width:300px !important; //这个是正确的width，大部分支持!important标记的浏览器使用这里的数值

width(空格)/**/:400px; //IE6/win不解析这句，所以IE6/win仍然认为width的值是300px；而IE5.X/win读到这句，新的数值(400px)覆盖掉了旧的，因为!important标记对他们不起作用

}

关于W3C检验时候的div元素封闭

所有的标记都必须要有一个相应的结束标记

以前在

请问如何设置img标签图片自动适应高度？

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

img {

max-width: 200px;

width:expression(this.width > 200 ? “200px” : (this.width+”px”));

}

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