前端开发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插件

» 本文来自:前端开发者 » 《前端开发DIV+CSS布局集合》
» 本文链接地址:https://www.rokub.com/6074.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!