来讲讲：CSS技能:段正淳的css条记

业界越来越关注DIV+CSS的标准化设计，大到各大门户网站，小到不计其数的个人网站，在Div+CSS标准化的影响下，网页设计人员已经把这一要求作为行业标准。
淘宝首页上的一个小技能。
类目之间的反正线

登录/注册后可看大图

从好久好久之前入手下手，类目间的竖线不过都只要三种。

• 背景图
  在a标签设置一个padding用宽1px高不等的背景图来position到右边。
  弱点：最初一个仍是要用class来埋没失落背景。
  
• 标记
  在每一个a标签之间用”|”标记来添补。
  弱点：html文件变年夜，文件保护变得很贫苦，并且在html中毫偶然义。
  
• a标签右边的boder。
  同背景图一样，只不外利用border-right来取代。弱点也同上。
  

看到这里，大概已有人翻开淘宝首页用firebug检察源码来看是怎样做了。
实在现有是使用ul的overflow:hidden再将li的margin-left:-1px的做法做出来的。如许的做法就能够同时制止以上的弱点了。
为何之前都没有那末做的，寡人也不晓得了。岂非寡人是第一个发明如许的做法？
不论是谁先此之前使用了如许的办法完成类目间竖线。
不外在淘宝首页上线后不久就有偕行的网站在首页改版中也用了如许的办法。
谁人网站不看也罢。class其实是写的有点多。加载html会变很多很多。
归正一个首页必要加载1.17m的网页我的年夜脑会主动屏障。
圆角的做法.
为了这个圆角,前段开辟们支付的勉力是在是太多了.又要思索http毗连数,又要思索css与html的代码量与语义.
贴出的是比来思索交换现有圆角做法的计划,大概另有很多未思索的情况.可是大致的编写体例即是以下.
优点是便于保护,只要一个图片.还能够某种水平上的恣意缩放.弱点是多了偶然义的html代码.
css：
.c,.ci,.cii,.cb,.cbb,.cp{
background-image:url(/jc/UploadFiles/200710/20071025021934233.png);/*背景图片*/
background-repeat:no-repeat;
}
.c{
width:200px;/*一时定的宽度*/
background-position:0-4px;
}
.ci{
display:block;
height:4px;
}
.cii{
margin:0004px;
background-position:right0;
}
.cb{
display:block;
height:4px;
background-position:0bottom;
}
.cbb{
margin:0004px;
background-position:rightbottom;
}
.cp{
margin:0004px;
padding:04px00;
background-position:right-4px;
}
html：
<divclass="c">
<i><i></i></i>
<p>
按钮按钮按钮按钮按钮按钮
按按按按按钮按钮按钮按钮按钮按钮按钮按钮按钮按钮按钮按钮
</p>
<b><b></b></b>
</div>
table的全局界说
caption这个标签在firefox下会有右边有1px清闲的bug,很厌恶.能想到的复杂的办法只要-1px的margin了.
css：
table{
border-collapse:collapse;
}
tablecaption,tabletd,tableth{
border:1pxsolid#a2bbdd;/*边框色彩*/
background:#c3d9ff;/*背景色彩*/
}
tablecaption{
text-align:left;
border-bottom:none;
margin-left:-1px;
}
html：
<table>
<caption>表格题目</caption>
<tr>
<th>题目</th>
<th>题目</th>
<th>题目</th>
<th>题目</th>
</tr>
<tr>
<td>内容</td>
<td>内容</td>
<td>内容</td>
<td>内容</td>
</tr>
</table>
必要无视的二个标签

• acronym这个标签用来注释名词很爽,可是用得太少.(我也一向想用来着,以是记下了.)
  css：
  acronym{cursor:help}
  html：
  <acronymtitle="段正淳又是金庸笔下一个非常奇异的人物。他奇异在各处包涵，恋人极多，见一个爱一个，而又毫不是枉然风骚薄幸，当他是独自对着一个恋人的时分，他真是至心真意爱这个恋人的，只好说这团体的情感出格丰厚，别无其他注释。">笔墨</acronym>
  
• ins这个标签健忘是在哪一个网站上看到过用来在h2里显现更多的链接,厥后查了书,人人都以为有点不当,有点争议.
  css：
  还未写进css组件…欠送上了
  html：
  <h2>题目<ins><axhref="http://ued.taobao.com/blog/#"mce_href="http://ued.taobao.com/blog/#">更多>></a></ins></h2>
  

题目右边“更多”的完成

登录/注册后可看大图

已经做上图所示的效果,会利用到position来绝对定位到h2标签的右边.如许的做法,代码的确会多好几行.实在能够用个笨一点的举措来完成的：

比如html代码以下：
<h2><ahref="#">题目</a><span>更多…</span></h2>
利用potsition的css差未几以下：
h2{
position:relative;
height:20px;
}
span{
position:absolute;
right:0;
top:0;
display:block;
height:20px;
}
如许才干完成更多在右边.实在真的还能够更复杂:
h2{
height:20px;
}
span{
float:right;
display:block;
margin:-10px000;
height:20px;
}
实在只是使用了margin-top的正数来完成,由于默许的float会换行到h2标签上面往，以是让它自个跳上往。大抵代码就是云云了,是否是很复杂?我说很复杂嘛！因为很复杂,以是就不放出独自的测试页面了.
ps:我说我们啥时分也得弄个和蓝色幻想一样的编纂器吧…
淘宝的css属性按次誊写标准
之前部门的同事们，每一个人都有一套誊写的标准，招致看对方的css代码十分费劲，以是就奉行了一套誊写尺度，也许对您也有匡助。

*{
/*显现属性*/
display
position
float
clear
cursor
…
/*盒模子*/
margin
padding
width
height
/*排版*/
vertical-align
white-space
text-decoration
text-align
…
/*笔墨*/
color
font
content
/*边框背景为何要把boder和background放在最初的缘故原由是修正的频次会较之前的频仍，放在最初检察起来便利，哈哈。*/
border
background
}
说究竟实在属性的誊写按次标准就是：仙人?魔鬼?-身体怎样！-打扮范例(比基尼?棉袄?)-打扮名目(玄色?红色?钮扣?拉链?)-用了啥化装品和发型.
这个誊写尺度小部分并非扫瞄器厂商奉行的誊写标准，以是大概被宽大尺度推行者所不认同。但这些个都是弟兄几个理论出来以为最切合现有淘宝情况的。
css代码的简写
css缩写的语法，对老手有必定匡助,老鸟就不必看了.

• 0px不必要单元，间接:margin:0
  
• 盒模子的缩写，语法是margin:上右下左;.乃至能够简写成margin:上(右左)下,固然右左的值应当是一样的
  
• css属性的最初一项”;”号省略。（不倡议^_^）
  
• 字体宽度normal用400取代,bold用700取代。
  
• 16进制的色采值，假如每两位的值不异，能够缩写一半，比方：#000000能够缩写为#000;#0044DD能够缩写为#04D;
  
• border边框的缩写，语法是border:widthstylecolor,相似boder:1pxsolidred;
  
• 背景background的缩写,语法是colorimagerepeatattachmentposition.相似:background:#f00url(background.gif)no-repeatfixed00(为何我从不写fixed呢?)
  
• 字体的缩写,相似font:italicsmall-capsbold1em/140%“SimSun”,sans-serif,能够省略到最复杂font:12px“SimSun”.
  
• list的属性缩写,语法list-style:squareinsideurl(image.gif),不外一样平常我们都不必.
  
• 想凑10条,还真难.就把删除无用换行符和空格算一个吧
  

如果单独使用DIV而不加任何CSS,那么它在网页中的效果和使用是一样的。

Dreamweaver由MX版本开始使用Opera软件公司的排版引擎“Presto”作为网页预览。

时间轴)窗口--时间轴--选中图层并拖图层到时间轴,将其放在指定帧上

所见则所得网页编辑器的优点就是直观性，使用方便，容易上手.

直接用代码建立链接，如：可以直接输入 <a herf = \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\"red.html\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\">红色的网页 12、插入标签法建立链接，可以再选中文字后在代码中插入html标签，页元素<a>.也可以按ctrl+t进入html标签插入方法之后输入代码即可。

足见市场的反响和MACROMEDIA公司对它们的自信。说到Dreamweaver8我们应该了解一下网页编辑器的发展过程，随着互联网(Internet) 的家喻户晓。

我深感到交流的重要。善于交流的人才是善于学习的人。在整个技术的学习过程中，我总结了四大定律：兴趣、恒心、虚心、时间。

难以逾越的障碍会大大打击你的学习积极性。这就需要你的恒心，坚持不懈的决心。在自己无法解决某些问题时，就需要虚心请教别人.

Dreamweaver8中文版(dw)是由Macromedia公司开发的一款所见即所得的网页编辑器。和二维动画设计软件FLASH，专业网页图像设计软件FIREWORKS，并称为“网页三剑客”。