makemyownlife
- 浏览: 538363 次
- 性别:
- 来自: 武汉
-
文章分类
最新评论
-
rgqancy：
终于明白为啥XML里要带jdbcType=XXXX了。
mybatis 需要注意的点 MyBatis 插入空值时，需要指定JdbcType (201 -
rzh0001：
Thanks a lot
mybatis 需要注意的点 MyBatis 插入空值时，需要指定JdbcType (201 -
guji528：
学习了，谢谢
mybatis 需要注意的点 MyBatis 插入空值时，需要指定JdbcType (201 -
AKka：
彻底清楚这个错误的原因了。向楼主学习了。
mybatis 需要注意的点 MyBatis 插入空值时，需要指定JdbcType (201 -
远去的渡口：
武汉小吃，我最爱热干面和鸭脖，想念啊~~
过年时候还学习编程， ...
过年的心情
首先需要规划网站，本教程将以下图为例构建网站
其基本布局见下图：
主要由五个部分构成：
Example Source Code
1.Main Navigation 导航条，具有按钮特效。 Width: 760px Height: 50px
2.Header 网站头部图标，包含网站的logo和站名。 Width: 760px Height: 150px
3.Content 网站的主要内容。 Width: 480px Height: Changes depending on content
4.Sidebar 边框，一些附加信息。 Width: 280px Height: Changes depending on
5.Footer 网站底栏，包含版权信息等。 Width: 760px Height: 66px
第二步：创建html模板及文件目录等
1.创建html模板。
代码如下：
Example Source Code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
<title>CompanyName - PageName</title>
<meta http-equiv="Content-Language" content="en-us" />
<meta http-equiv="imagetoolbar" content="no" />
<meta name="MSSmartTagsPreventParsing" content="true" />
<meta name="description" content="Description" />
<meta name="keywords" content="Keywords" />
<meta name="author" content="Enlighten Designs" />
<style type="text/css" media="all">@import "css/master.css";</style>
</head>
<body>
</body>
</html>
将其保存为index.html,并创建文件夹css，images，网站结构如下
2.创建网站的大框：
建立一个宽760px的盒子，它将包含网站的所有元素。
在html文件的<body>和</body>之间写入
Example Source Code
]<div id="page-container">
Hello world.
</div>
创建css文件，命名为master.css,保存在/css/文件夹下。写入：
Example Source Code
#page-container {
width: 760px;
background: red;
}
控制html的id为page-container的盒子的宽为760px，背景为红色。
现在为了让盒子居中，写入margin: auto;，使css文件为：
Example Source Code
]#page-container {
width: 760px;
margin: auto;
background: red;
}
现在你可以看到盒子和浏览器的顶端有8px宽的空隙。这是由于浏览器的默认的填充和边界造成的。消除这个空隙，就需要在css文件中写入：
Example Source Code
html, body {
margin: 0;
padding: 0;
}
第三步：将网站分为五个div，网页基本布局的基础：
1.将“第一步”提到的五个部分都放入盒子中，在html文件中写入：
Example Source Code
<div id="page-container">
<div id="main-nav">Main Nav</div>
<div id="header">Header</div>
<div id="sidebar-a">Sidebar A</div>
<div id="content">Content</div>
<div id="footer">Footer</div>
</div>
2.为了将五个部分区分开来，我们将这五个部分用不同的背景颜色标示出来，在css文件写入：
Example Source Code
#main-nav {
background: red;
height: 50px;
}
#header {
background: blue;
height: 150px;
}
#sidebar-a {
background: darkgreen;
}
#content {
background: green;
}
#footer {
background: orange;
height: 66px;
}
第四步：网页布局与div浮动等
1.浮动：首先让边框浮动到主要内容的右边。用css控制浮动。
Example Source Code
#sidebar-a {
float: right;
width: 280px;
background: darkgreen;
}
2.往主要内容的盒子中写入一些文字。在html文件中写入：
Example Source Code
<div id="content">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam gravida enim ut risus.
Praesent sapien purus, ultrices a, varius ac, suscipit ut, enim. Maecenas in lectus.
Donec in sapien in nibh rutrum gravida. Sed ut mauris. Fusce malesuada enim vitae lacus
euismod vulputate. Nullam rhoncus mauris ac metus. Maecenas vulputate aliquam odio.
Duis scelerisque justo a pede. Nam augue lorem, semper at, porta eget, placerat eget,
purus. Suspendisse mattis nunc vestibulum ligula. In hac habitasse platea dictumst.
</div>
但是你可以看到主要内容的盒子占据了整个page-container的宽度，我们需要将#content的右边界设为280px。以使其不和边框发生冲突。
css代码如下：
Example Source Code
#content {
margin-right: 280px;
background: green;
}
同时往边框里写入一些文字。在html文件中写入：
Example Source Code
<div id="sidebar-a">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam gravida enim ut risus.
Praesent sapien purus, ultrices a, varius ac, suscipit ut, enim. Maecenas in lectus.
Donec in sapien in nibh rutrum gravida. Sed ut mauris. Fusce malesuada enim vitae lacus
euismod vulputate. Nullam rhoncus mauris ac metus. Maecenas vulputate aliquam odio.
Duis scelerisque justo a pede. Nam augue lorem, semper at, porta eget, placerat eget,
purus. Suspendisse mattis nunc vestibulum ligula. In hac habitasse platea dictumst.
</div>
表现如下：
这也不是我们想要的，网站的底框跑到边框的下边去了。这是由于我们将边框向右浮动，由于是浮动，所以可以理解为它位于整个盒子之上的另一层。因此，底框和内容盒子对齐了。
因此我们往css中写入：
Example Source Code
#footer {
clear: both;
background: orange;
height: 66px;
}
表现如下：
第五步：网页主要框架之外的附加结构的布局与表现
除网页主要框架之外的附加结构的表现(Layout),包括以下内容：
1.主导航条；
2.标题(heading),包括网站名和内容标题；
3.内容；
4.页脚信息,包括版权,认证,副导航条(可选)。
加入这些结构时，为了不破坏原有框架，我们需要在css文件"body"标签(TAG)下加入:
CODE:
.hidden {
display: none;
}
".hidden"即我们加入的类(class),这个类可以使页面上任意属于hidden类的元素(element)不显示。这些会在稍后使用，现在请暂时忘记它。
现在我们加入标题(heading)：
先回到HTML的代码，<h1>到<h6>是我们常用的html标题代码。比如我们一般用<h1>网站名</h1>，<h2>网站副标题</h2>,<h3>内容主标题</h3>等。我们往 html文件的Header层(Div)加入:
CODE:
<div id="header">
<h1>Enlighten Designs</h1>
</div>
刷新一下页面，你就可以看到巨大的标题，和标题周围的空白，这是因为<h1>>标签的默认大小和边距(margin)造成的，先要消除这些空白,需要加入：
CODE:
h1 {
margin: 0;
padding: 0;
}
接下来是导航条：
控制导航条表现的css代码相对比较复杂，我们将在第九步或是第十步中详细介绍。现在html文件加入导航代码：
CODE:
<div id="main-nav">
<ul>
<li id="about"><a href="http://css.jorux.com/wp-admin/post.php#" >About</a></li>
<li id="services"><a href="http://css.jorux.com/wp-admin/post.php#" >Services</a></li>
<li id="portfolio"><a href="http://css.jorux.com/wp-admin/post.php#" >Portfolio</a></li>
<li id="contact"><a href="http://css.jorux.com/wp-admin/post.php#" >Contact Us</a></li>
</ul>
</div>
(注：原教程使用了dl和dt，jorux在这使用了更常用的ul和li标签)
目前导航条的表现比较糟糕，但是要在以后的教程中介绍其特殊表现，故需要暂时隐藏导航条,于是加入：
CODE:
<div id="main-nav">
<dl class="hidden">
<dt id="about"><a href="http://css.jorux.com/wp-admin/post.php#" >About</a></dt>
<dt id="services"><a href="http://css.jorux.com/wp-admin/post.php#" >Services</a></dt>
<dt id="portfolio"><a href="http://css.jorux.com/wp-admin/post.php#" >Portfolio</a></dt>
<dt id="contact"><a href="http://css.jorux.com/wp-admin/post.php#" >Contact Us</a></dt>
</dl>
</div>
第六步：页面内的基本文本的样式(css)设置
你是不是厌倦了那些大红大绿的背景，现在是去掉它们的时候了，只保留导航条的红色背景。真是难为您居然能坚持学习本教程到此，很好，再过几步，你就能很好了解css控制整个网页版面(Layout)的能力。
先设置全局的文本样式：
div css xhtml xml Example Source Code Example Source Code [www.136z.com]body {
font-family: Arial, Helvetica, Verdana, Sans-serif;
font-size: 12px;
color: #666666;
background: #ffffff;
}
一般我们把body标签放在css文件的顶端，当然你要是执意要把它放在尾部，浏览器不会和你计较。font-family内的顺序决定字体显示优先级，比方如果所在计算机没有Arial字体，浏览器就会指向Helvetica字体，依次类推；color指字体颜色；background指背景颜色。
如果你都是按本教程的操作，应该能看到下图：
你可以看到内容(content)的各块(block)之间的间隙太小了，而基于最初的设计，内容标题(即<h2>)和正文之间的间隙大概是15px，每个段落的间距也大概是15px，所以在css中写入：
div css xhtml xml Example Source Code Example Source Code [www.136z.com]#content h2 {
margin: 0;
padding: 0;
padding-bottom: 15px;
}
#content p {
margin: 0;
padding: 0;
padding-bottom: 15px;
}
然后需要让content层的四周都空出25px的间隙，这本来是件很简单的事，理论上我们只需在#content的css文件中加入 padding: 25px;就行了，但是IE给我们上了"一课",它的固有BUG根本不能按我们的想象表现。解决这个问题有两种办法。第一种办法是区别浏览器写入两种代码(HACK IE),但因为间隙(padding,在Dreamweaver中又叫填充)使用很频繁，所以我们用另一种办法。
我们往需要填充的层中加入padding层，它的功能仅限于显示间隙：
div css xhtml xml Example Source Code Example Source Code [www.136z.com]<div id="sidebar-a">
<div class="padding">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam gravida enim ut risus.
Praesent sapien purus, ultrices a, varius ac, suscipit ut, enim. Maecenas in lectus.
Donec in sapien in nibh rutrum gravida. Sed ut mauris. Fusce malesuada enim vitae lacus
euismod vulputate. Nullam rhoncus mauris ac metus. Maecenas vulputate aliquam odio.
Duis scelerisque justo a pede. Nam augue lorem, semper at, porta eget, placerat eget,
purus. Suspendisse mattis nunc vestibulum ligula. In hac habitasse platea dictumst.
</div>
</div>
同样的，再往html文件的content层中加入padding层。
由于padding层的功能仅是制造空隙，所以不要设置它的宽度，只需在css中添加:
div css xhtml xml Example Source Code Example Source Code [www.136z.com]#sidebar-a {
float: right;
width: 280px;
}
#sidebar-a .padding {
padding: 25px;
}
#content {
margin-right: 280px;
}
#content .padding {
padding: 25px;
}
就像我们之前用的方法一样，我们只选择了类(class)为padding，且父类(parent)为#content或#sidebar-a的元素(element)。
接下来设置行距，content和sidebar-a的行距需要加宽，但在css中是没有行距(leading)这种属性(attribute)的，但是有行高(line-height)属性，因此往css中写入：
div css xhtml xml Example Source Code Example Source Code [www.136z.com]#sidebar-a {
float: right;
其基本布局见下图：
主要由五个部分构成：
Example Source Code
1.Main Navigation 导航条，具有按钮特效。 Width: 760px Height: 50px
2.Header 网站头部图标，包含网站的logo和站名。 Width: 760px Height: 150px
3.Content 网站的主要内容。 Width: 480px Height: Changes depending on content
4.Sidebar 边框，一些附加信息。 Width: 280px Height: Changes depending on
5.Footer 网站底栏，包含版权信息等。 Width: 760px Height: 66px
第二步：创建html模板及文件目录等
1.创建html模板。
代码如下：
Example Source Code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
<title>CompanyName - PageName</title>
<meta http-equiv="Content-Language" content="en-us" />
<meta http-equiv="imagetoolbar" content="no" />
<meta name="MSSmartTagsPreventParsing" content="true" />
<meta name="description" content="Description" />
<meta name="keywords" content="Keywords" />
<meta name="author" content="Enlighten Designs" />
<style type="text/css" media="all">@import "css/master.css";</style>
</head>
<body>
</body>
</html>
将其保存为index.html,并创建文件夹css，images，网站结构如下
2.创建网站的大框：
建立一个宽760px的盒子，它将包含网站的所有元素。
在html文件的<body>和</body>之间写入
Example Source Code
]<div id="page-container">
Hello world.
</div>
创建css文件，命名为master.css,保存在/css/文件夹下。写入：
Example Source Code
#page-container {
width: 760px;
background: red;
}
控制html的id为page-container的盒子的宽为760px，背景为红色。
现在为了让盒子居中，写入margin: auto;，使css文件为：
Example Source Code
]#page-container {
width: 760px;
margin: auto;
background: red;
}
现在你可以看到盒子和浏览器的顶端有8px宽的空隙。这是由于浏览器的默认的填充和边界造成的。消除这个空隙，就需要在css文件中写入：
Example Source Code
html, body {
margin: 0;
padding: 0;
}
第三步：将网站分为五个div，网页基本布局的基础：
1.将“第一步”提到的五个部分都放入盒子中，在html文件中写入：
Example Source Code
<div id="page-container">
<div id="main-nav">Main Nav</div>
<div id="header">Header</div>
<div id="sidebar-a">Sidebar A</div>
<div id="content">Content</div>
<div id="footer">Footer</div>
</div>
2.为了将五个部分区分开来，我们将这五个部分用不同的背景颜色标示出来，在css文件写入：
Example Source Code
#main-nav {
background: red;
height: 50px;
}
#header {
background: blue;
height: 150px;
}
#sidebar-a {
background: darkgreen;
}
#content {
background: green;
}
#footer {
background: orange;
height: 66px;
}
第四步：网页布局与div浮动等
1.浮动：首先让边框浮动到主要内容的右边。用css控制浮动。
Example Source Code
#sidebar-a {
float: right;
width: 280px;
background: darkgreen;
}
2.往主要内容的盒子中写入一些文字。在html文件中写入：
Example Source Code
<div id="content">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam gravida enim ut risus.
Praesent sapien purus, ultrices a, varius ac, suscipit ut, enim. Maecenas in lectus.
Donec in sapien in nibh rutrum gravida. Sed ut mauris. Fusce malesuada enim vitae lacus
euismod vulputate. Nullam rhoncus mauris ac metus. Maecenas vulputate aliquam odio.
Duis scelerisque justo a pede. Nam augue lorem, semper at, porta eget, placerat eget,
purus. Suspendisse mattis nunc vestibulum ligula. In hac habitasse platea dictumst.
</div>
但是你可以看到主要内容的盒子占据了整个page-container的宽度，我们需要将#content的右边界设为280px。以使其不和边框发生冲突。
css代码如下：
Example Source Code
#content {
margin-right: 280px;
background: green;
}
同时往边框里写入一些文字。在html文件中写入：
Example Source Code
<div id="sidebar-a">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam gravida enim ut risus.
Praesent sapien purus, ultrices a, varius ac, suscipit ut, enim. Maecenas in lectus.
Donec in sapien in nibh rutrum gravida. Sed ut mauris. Fusce malesuada enim vitae lacus
euismod vulputate. Nullam rhoncus mauris ac metus. Maecenas vulputate aliquam odio.
Duis scelerisque justo a pede. Nam augue lorem, semper at, porta eget, placerat eget,
purus. Suspendisse mattis nunc vestibulum ligula. In hac habitasse platea dictumst.
</div>
表现如下：
这也不是我们想要的，网站的底框跑到边框的下边去了。这是由于我们将边框向右浮动，由于是浮动，所以可以理解为它位于整个盒子之上的另一层。因此，底框和内容盒子对齐了。
因此我们往css中写入：
Example Source Code
#footer {
clear: both;
background: orange;
height: 66px;
}
表现如下：
第五步：网页主要框架之外的附加结构的布局与表现
除网页主要框架之外的附加结构的表现(Layout),包括以下内容：
1.主导航条；
2.标题(heading),包括网站名和内容标题；
3.内容；
4.页脚信息,包括版权,认证,副导航条(可选)。
加入这些结构时，为了不破坏原有框架，我们需要在css文件"body"标签(TAG)下加入:
CODE:
.hidden {
display: none;
}
".hidden"即我们加入的类(class),这个类可以使页面上任意属于hidden类的元素(element)不显示。这些会在稍后使用，现在请暂时忘记它。
现在我们加入标题(heading)：
先回到HTML的代码，<h1>到<h6>是我们常用的html标题代码。比如我们一般用<h1>网站名</h1>，<h2>网站副标题</h2>,<h3>内容主标题</h3>等。我们往 html文件的Header层(Div)加入:
CODE:
<div id="header">
<h1>Enlighten Designs</h1>
</div>
刷新一下页面，你就可以看到巨大的标题，和标题周围的空白，这是因为<h1>>标签的默认大小和边距(margin)造成的，先要消除这些空白,需要加入：
CODE:
h1 {
margin: 0;
padding: 0;
}
接下来是导航条：
控制导航条表现的css代码相对比较复杂，我们将在第九步或是第十步中详细介绍。现在html文件加入导航代码：
CODE:
<div id="main-nav">
<ul>
<li id="about"><a href="http://css.jorux.com/wp-admin/post.php#" >About</a></li>
<li id="services"><a href="http://css.jorux.com/wp-admin/post.php#" >Services</a></li>
<li id="portfolio"><a href="http://css.jorux.com/wp-admin/post.php#" >Portfolio</a></li>
<li id="contact"><a href="http://css.jorux.com/wp-admin/post.php#" >Contact Us</a></li>
</ul>
</div>
(注：原教程使用了dl和dt，jorux在这使用了更常用的ul和li标签)
目前导航条的表现比较糟糕，但是要在以后的教程中介绍其特殊表现，故需要暂时隐藏导航条,于是加入：
CODE:
<div id="main-nav">
<dl class="hidden">
<dt id="about"><a href="http://css.jorux.com/wp-admin/post.php#" >About</a></dt>
<dt id="services"><a href="http://css.jorux.com/wp-admin/post.php#" >Services</a></dt>
<dt id="portfolio"><a href="http://css.jorux.com/wp-admin/post.php#" >Portfolio</a></dt>
<dt id="contact"><a href="http://css.jorux.com/wp-admin/post.php#" >Contact Us</a></dt>
</dl>
</div>
第六步：页面内的基本文本的样式(css)设置
你是不是厌倦了那些大红大绿的背景，现在是去掉它们的时候了，只保留导航条的红色背景。真是难为您居然能坚持学习本教程到此，很好，再过几步，你就能很好了解css控制整个网页版面(Layout)的能力。
先设置全局的文本样式：
div css xhtml xml Example Source Code Example Source Code [www.136z.com]body {
font-family: Arial, Helvetica, Verdana, Sans-serif;
font-size: 12px;
color: #666666;
background: #ffffff;
}
一般我们把body标签放在css文件的顶端，当然你要是执意要把它放在尾部，浏览器不会和你计较。font-family内的顺序决定字体显示优先级，比方如果所在计算机没有Arial字体，浏览器就会指向Helvetica字体，依次类推；color指字体颜色；background指背景颜色。
如果你都是按本教程的操作，应该能看到下图：
你可以看到内容(content)的各块(block)之间的间隙太小了，而基于最初的设计，内容标题(即<h2>)和正文之间的间隙大概是15px，每个段落的间距也大概是15px，所以在css中写入：
div css xhtml xml Example Source Code Example Source Code [www.136z.com]#content h2 {
margin: 0;
padding: 0;
padding-bottom: 15px;
}
#content p {
margin: 0;
padding: 0;
padding-bottom: 15px;
}
然后需要让content层的四周都空出25px的间隙，这本来是件很简单的事，理论上我们只需在#content的css文件中加入 padding: 25px;就行了，但是IE给我们上了"一课",它的固有BUG根本不能按我们的想象表现。解决这个问题有两种办法。第一种办法是区别浏览器写入两种代码(HACK IE),但因为间隙(padding,在Dreamweaver中又叫填充)使用很频繁，所以我们用另一种办法。
我们往需要填充的层中加入padding层，它的功能仅限于显示间隙：
div css xhtml xml Example Source Code Example Source Code [www.136z.com]<div id="sidebar-a">
<div class="padding">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam gravida enim ut risus.
Praesent sapien purus, ultrices a, varius ac, suscipit ut, enim. Maecenas in lectus.
Donec in sapien in nibh rutrum gravida. Sed ut mauris. Fusce malesuada enim vitae lacus
euismod vulputate. Nullam rhoncus mauris ac metus. Maecenas vulputate aliquam odio.
Duis scelerisque justo a pede. Nam augue lorem, semper at, porta eget, placerat eget,
purus. Suspendisse mattis nunc vestibulum ligula. In hac habitasse platea dictumst.
</div>
</div>
同样的，再往html文件的content层中加入padding层。
由于padding层的功能仅是制造空隙，所以不要设置它的宽度，只需在css中添加:
div css xhtml xml Example Source Code Example Source Code [www.136z.com]#sidebar-a {
float: right;
width: 280px;
}
#sidebar-a .padding {
padding: 25px;
}
#content {
margin-right: 280px;
}
#content .padding {
padding: 25px;
}
就像我们之前用的方法一样，我们只选择了类(class)为padding，且父类(parent)为#content或#sidebar-a的元素(element)。
接下来设置行距，content和sidebar-a的行距需要加宽，但在css中是没有行距(leading)这种属性(attribute)的，但是有行高(line-height)属性，因此往css中写入：
div css xhtml xml Example Source Code Example Source Code [www.136z.com]#sidebar-a {
float: right;
- 大小: 34.8 KB
- 大小: 21.6 KB
- 大小: 2.6 KB
- 大小: 5.9 KB
- 大小: 5.7 KB
- 大小: 13.9 KB
- 大小: 20.2 KB
- 大小: 20.7 KB
- 大小: 21.5 KB
分享到：
发表评论
-
html focus 引入 类似微博的效果
2012-09-18 18:01 1412<!DOCTYPE html PUBLIC &q ... -
javascript 类编程(未完)
2010-07-20 18:03 1529最近想总结一下JavaScript类编程，有时间写一点。 J ... -
正则表达式
2010-01-20 14:48 1045正则表达式用于字符串 ... -
insertAdjacentHTML 用法
2010-01-09 21:13 1943insertAdjacentHTML方法示例 添加HTML内 ... -
float margin padding
2009-12-23 16:46 2524今天做网站的时候发 ... -
WEB2.0标准教程：第二天 什么是名字空间
2009-12-14 10:28 1109DOCTYPE声明好以后，接下来的代码是： <html ... -
CSS兼容：如何解决IE7和IE8的BUG
2009-12-14 10:04 2342CSS兼容问题已经是CSS网页布局技术中的重要组成部分，也让 ... -
悟道web标准:前端性能优化
2009-12-14 09:40 1630悟道web标准:前端性能优化 前端性能优化完全是一个技术话题 ... -
JavaScript对象探讨
2009-12-13 11:39 1103由于JavaScript的灵活性,可以让每个人按照自己的习惯进 ... -
WEB标准最佳实践：五个需要注意的地方
2009-12-09 21:32 1005一、永远使用小写字母 不好的做法： <DI ... -
不要内置JavaScript脚本 并将它置于HTML文档底部
2009-12-09 21:27 1555不要内置JavaScript脚本,这不是1996年了! ... -
javascript uri 编码
2009-10-19 10:53 1978对比 javascript url编码 javascript ... -
javascript 购物车
2009-10-17 13:13 3388购物车相当于现实中超 ... -
doument.execomand 用法
2009-07-11 15:54 14402D-Position 允许通过拖曳移动绝对定位的对象。 ... -
clientX pageX
2009-06-26 15:21 2165screenX:鼠标在显示屏幕上的坐标。 clientX ... -
hasOwnProperty
2009-06-26 11:19 1681JavaScript中hasOwnProperty函数方 ... -
getBoundingClientRect()
2009-06-25 15:16 1321getBoundingClientRect() 来获取页面 ... -
jquery 选择器 使用
2009-06-15 17:01 1508[翻译]jQuery 选择器的使用 ... -
Ext 3.0 core 简要pdf 下载
2009-06-07 11:02 1284今天早上 无意中看到Ext中文 网站有Ext3.0 core ... -
settimeout 返回值
2009-06-07 10:32 2599setTimeout() 方法的返回值是一个唯一的数值，这个数 ...
相关推荐
"用CSS网站布局之十步实录" 提供了一套详细的指南，帮助初学者和有经验的开发者更好地掌握CSS布局技巧。以下是对这个主题的详细解析： 1. **理解CSS基础**：首先，你需要了解CSS的基本语法，包括选择器（如类选择器...
本文档“用css网站布局之十步实录.doc”提供了一个逐步指南，教初学者如何使用CSS来构建一个标准的网站布局。以下是该教程的关键知识点： 1. **网站规划**： 在开始布局之前，首先需要规划网站的结构。教程以一个...
根据提供的文件内容，可以看出这是一份关于使用CSS进行网站布局的指南，教程分为十个步骤详细介绍了从网站规划到解决浏览器兼容问题的整个过程。下面将详细解释每个步骤所包含的知识点： 第一步：规划网站 在开始...
内容概要：本文详细介绍了使用C#实现欧姆龙NX1P系列PLC的CIP通讯的具体步骤和技术要点。首先，通过引入第三方库CIPster.Kernel简化了底层协议的处理，展示了如何建立连接、读取和写入PLC标签以及处理常见的字节序问题。接着，深入探讨了CIP协议的报文结构，包括构建CIP报文头、处理不同类型的数据转换（如整型、浮点型）、以及读写特定内存区域的操作。此外，还分享了一些实战经验和常见问题的解决方案，如超时设置、路径配置、心跳机制等。最后，提供了完整的DEMO代码示例，涵盖了连接建立、数据读写、异常处理等方面的内容。 适合人群：具备一定C#编程基础并希望深入了解工业自动化领域PLC通讯的技术人员。 使用场景及目标：适用于需要与欧姆龙NX1P系列PLC进行通讯的应用开发，帮助开发者快速掌握CIP协议的基本原理和具体实现方法，提高开发效率和系统稳定性。 其他说明：文中提到的代码片段可以直接用于实际项目中，建议在使用前仔细阅读相关注释和注意事项，确保正确配置网络环境和PLC设置。同时，推荐结合Wireshark等工具进行抓包分析，以便更好地理解和调试通讯过程。
内容概要：本文详细介绍了如何使用ABAQUS软件模拟大折展比折展结构，特别是类似于钢丝灯罩的结构。首先探讨了这种结构与钢丝灯罩的相似性及其在机械臂和机器人领域的应用价值。接着，文章逐步讲解了在ABAQUS中进行模拟的具体步骤，包括材料属性定义、几何建模、网格划分、单元选择、接触设置、加载方式以及后处理等方面的内容。文中还分享了一些实用的小技巧，如选择合适的单元类型、优化接触对定义、合理设置加载条件等。最后，强调了这种模拟方法在航天器太阳能帆板、救援机器人折叠臂等领域的重要意义。 适合人群：从事机械工程、航空航天、机器人技术等相关领域的研究人员和技术人员。 使用场景及目标：适用于希望深入了解大折展比折展结构的设计和性能的研究人员，帮助他们优化结构设计，提高机械臂和机器人的稳定性和可靠性。 其他说明：文章不仅提供了具体的ABAQUS操作指南，还分享了许多实践经验，有助于读者更好地理解和应用这些技术。同时，文中提到的一些挑战和解决方案也为进一步的研究提供了有价值的参考。
内容概要：本文详细介绍了利用COMSOL软件对人体皮肤温度场进行数值模拟的方法和技术细节。首先解释了COMSOL作为多物理场仿真的工具及其在生物医学工程领域的应用价值，然后逐步讲解了如何建立皮肤的几何模型，包括表皮层和真皮层的具体参数设置。接着探讨了物理场的选择与配置，如热传导方程、材料属性（导热系数）以及边界条件（对流换热系数、环境温度）。此外，还讨论了热源的引入方式，即通过代谢产热和血液灌注来模拟体内热量生成。最后，阐述了求解过程中的技巧，如网格划分、求解器设置，并展示了最终获得的人体皮肤温度分布云图及其实际意义。 适用人群：从事生物医学工程、热物理学等相关领域的科研工作者，尤其是那些希望深入了解人体皮肤温度场特性的研究人员。 使用场景及目标：适用于需要精确掌握人体皮肤温度分布的研究项目，例如皮肤生理功能探究、疾病诊断、药物递送系统设计等。通过对该模型的学习和应用，能够更好地理解皮肤细胞在正常运作代谢下的热环境，从而为相关研究提供理论依据和技术支持。 其他说明：文中不仅提供了详细的建模步骤指导，还包括了一些实用的小技巧，如参数化扫描、自适应网格划分等，有助于提高建模效率和准确性。同时，作者还分享了将模型应用于实际问题的经验，如降温面膜的设计、烧伤评估等，体现了该模型的广泛适用性和实用性。
内容概要：本文详细探讨了利用MATLAB构建含N-K安全约束的光热电站电力系统优化调度模型。首先介绍了N-K安全约束的概念及其重要性，即确保系统在多个元件故障情况下仍能稳定运行。接着深入解析了光热电站的储热系统建模，包括储热罐的充放电逻辑以及相关效率参数设置。随后讨论了目标函数的设计，将火电成本、风光弃电惩罚和光热运行成本综合考虑，以达到经济性的最优平衡。最后通过具体案例展示了光热电站在提高系统灵活性和降低弃风弃光率方面的显著效果。 适合人群：从事电力系统优化、智能电网研究的专业人士和技术爱好者。 使用场景及目标：适用于需要解决大规模风电光伏接入带来的调度难题，特别是在保障电网安全性的同时最大化新能源利用率的应用场景。目标是为研究人员提供一种有效的数学建模方法论，帮助他们更好地理解和应用光热电站在现代电力系统中的优势。 其他说明：文中提供了详细的MATLAB代码片段用于解释各个模块的具体实现方式，并强调了模型参数选择的重要性。此外还提到了一些实用的调度策略，如优先调整光热电站储热状态应对突发故障等。
内容概要：该论文研究了一维反稳定波动方程在谐波干扰下的误差反馈调节问题，提出了一种自适应控制方法，通过可逆变换将各通道的干扰集中到一个通道，并基于单点非同位测量误差设计自适应观测器。该方法构建了基于观测器的误差反馈控制器，证明了跟踪误差渐近收敛于零且所有内部信号有界。代码实现了波动方程的空间离散化、自适应控制输入和更新律，并通过数值模拟验证了方法的有效性，展示了跟踪误差的渐近收敛性和未知参数的估计能力。 适合人群：具备一定控制理论基础和编程能力的研究人员、工程师，特别是从事振动控制、电力系统和机械臂控制等领域的人士。 使用场景及目标：①研究反稳定系统在谐波干扰下的控制问题；②设计针对单测量信号的自适应观测器；③实现对全通道分布干扰的集中处理；④验证控制系统的稳定性和参数估计精度。 其他说明：该实现不仅提供了详细的理论推导和算法实现，还进行了与传统方法的性能对比，展示了本文方法在收敛时间、稳态误差和计算复杂度上的优势。此外，还提出了硬件部署优化策略和参数整定规则，确保了方法的工程可行性。
内容概要：本文详细介绍了基于三菱PLC和MCGS组态软件的污水处理PH调节电气控制系统的设计与优化。系统架构主要包括传感器、三菱PLC、执行机构和MCGS组态软件。三菱PLC负责数据采集、逻辑控制和数据存储，MCGS组态软件提供人机交互界面。文章深入探讨了PLC程序设计中的数据采集、控制逻辑、PID控制参数整定、异常处理机制等方面的技术细节，并分享了现场调试的经验教训，如电磁干扰处理、通讯参数优化等。此外，还介绍了MCGS组态设计中的实时数据显示、历史数据曲线、报警功能等实用功能。 适合人群：从事工业自动化、污水处理行业的工程师和技术人员。 使用场景及目标：适用于污水处理厂或其他需要精确PH调节的场合，旨在提高PH调节的精度和稳定性，确保污水处理达到排放标准，减少设备维护成本。 其他说明：文中提供了大量实际案例和代码片段，有助于读者理解和应用相关技术和方法。
内容概要：本文详细探讨了利用Maxwell软件进行外转子电机设计与电磁仿真的方法和技术要点。首先介绍了外转子电机的独特结构及其优点，如更大的转动惯量，适用于无人机、风扇等设备。接着阐述了电机设计的基础步骤，包括确定基本参数（功率、转速、电压）、计算转矩等。然后深入讲解了Maxwell软件在电磁仿真中的具体应用，涵盖建模、材料设置、边界条件与激励设置、仿真计算与结果分析等方面。文中还提供了多个Python和Matlab代码片段作为示例，展示了如何通过编程辅助设计和优化过程。此外，强调了仿真过程中常见的陷阱和注意事项，如正确设置运动边界、合理划分网格、关注散热问题等。 适合人群：从事电机设计与制造的技术人员、研究人员以及相关专业的学生。 使用场景及目标：①掌握外转子电机的设计原理和方法；②学会使用Maxwell软件进行电磁仿真；③避免常见设计误区，提高仿真精度和可靠性。 其他说明：文章不仅提供了理论指导，还结合实际案例分享了许多实用经验和技巧，有助于读者更好地理解和应用所学知识。
内容概要：本文详细探讨了寒冷地区边坡在冻融循环下的水热力三场耦合现象及其对边坡稳定性的影 响。首先介绍了边坡冻融循环的现象，即水分冻结和融化对岩土体产生的压力和孔隙结构变化，从而导致 强度降低和变形增大的风险。接着阐述了水、热、力三场之间的复杂相互作用原理，以及如何利用Comsol 软件进行有限元数值仿真。具体步骤包括模型建立、材料属性设置、物理场选择与耦合设置、网格划分和 结果分析。通过仿真，可以深入了解冻融循环对边坡的影响，为稳定性评估和防护措施提供理论依据和技术 支持。 适合人群：从事岩土工程、地质工程及相关领域的研究人员和工程师。 使用场景及目标：适用于寒冷地区边坡工程的设计、施工和维护，旨在提高边坡稳定性，预防潜在的 工程灾害。通过对边坡冻融循环的仿真研究，可以优化设计方案，采取有效的防护措施，确保边坡的安全 和可靠。 其他说明：文中还提到了一些具体的仿真技巧，如等效热容法处理相变、动态热边界设置、位移场矢 量切片分析等，有助于提升仿真的准确性和实用性。同时强调了参数敏感性分析的重要性，指出不同的初 始条件可能会显著影响仿真结果。
内容概要：本文探讨了非线性多智能体有向网络一致性问题，特别是最小领导者数分配这一关键议题。文中首先介绍了多智能体系统的背景和应用场景，如无人机编队飞行等。随后详细讲解了如何通过Python代码模拟一个简化的多智能体有向网络，展示了领导者在其中发挥的重要作用。代码部分不仅涵盖了有向图的创建、智能体状态更新机制的设计，还涉及到了如何通过最小根集寻找关键节点的方法。此外，文章还讨论了不同网络拓扑结构（如环状、树状、星型）下最小领导者数的选择策略，并指出领导节点的位置对系统收敛速度的影响。最后强调了在实际工程应用中，除了追求最小领导者数外，还需考虑系统的鲁棒性和动态性能。 适合人群：对多智能体系统、分布式控制系统感兴趣的科研工作者和技术爱好者。 使用场景及目标：帮助读者理解非线性多智能体有向网络一致性的基本概念和最小领导者数分配的原则，掌握相关Python编程技能，能够应用于实际项目中，如无人机编队控制、机器人协同作业等领域。 其他说明：文章提供了丰富的实例和代码片段，便于读者理解和实践。同时提醒读者注意实际应用中的复杂性和挑战，鼓励进一步深入研究。
DP-Modeler V2.0图像快速建模系统使用手册
VisualSVN_Server_Enterprise，版本4.1.4，Server 2022下测试可用。
内容概要：本文详细介绍了基于FPGA的10G UDP协议栈的纯逻辑实现方案，涵盖动态ARP、ICMP协议栈和UDP数据流水线的设计与实现。作者通过Xilinx Ultrascale+的GTY收发器，绕过了昂贵的10G PHY芯片，利用BRAM构建带超时机制的ARP缓存表，采用三级流水架构进行数据包解析，并通过查表法优化CRC校验。此外，解决了跨时钟域处理导致的丢包问题，最终实现了稳定的10Gbps线速传输。文中还讨论了资源消耗情况以及在实际应用中的表现。 适合人群：从事FPGA开发、高速网络通信、嵌入式系统的工程师和技术爱好者。 使用场景及目标：适用于需要自定义协议栈或超低延迟的应用场景，如高速数据采集、实时视频传输等。目标是提供一种高效的纯逻辑实现方案，替代传统依赖PHY芯片的方式，降低成本并提高灵活性。 其他说明：文中提供了多个代码片段，展示了具体的技术实现细节，如ARP缓存管理、CRC校验优化、跨时钟域处理等。同时，强调了时序收敛和资源优化的重要性，并分享了一些调试经验和性能测试结果。
可以作为平时打代码时的消遣品
内容概要：本文详细介绍了电动汽车三相车载充电机（OBC）的仿真过程及其关键技术细节。首先，文章展示了OBC的整体拓扑结构，包括三相电压型PWM整流器和移相全桥DC-DC变换器。接着，深入探讨了电流跟踪控制、母线电压过冲控制、功率因数校正（PFC）、电池动态内阻模型以及改进型二阶广义积分器（SOGI）锁相等核心技术。此外，文章还讨论了仿真过程中遇到的实际问题及解决方案，如电流环PI参数选择、预充电逻辑、锁相环参数调整、温度影响等。通过这些技术手段，确保了仿真结果与实车数据误差控制在5%以内。 适合人群：从事电动汽车充电系统研究的技术人员、电力电子工程师、控制系统设计师。 使用场景及目标：适用于需要深入了解电动汽车车载充电机工作原理和技术实现的研究人员和工程师。主要目标是掌握OBC的关键技术和仿真技巧，提高实际项目的成功率。 其他说明：文中提供了大量MATLAB/Simulink/C/Python代码片段，帮助读者更好地理解和实现相关技术。同时，强调了实际硬件实现时需要注意的非理想特性，如开关损耗、米勒平台效应等。
内容概要：本文深入探讨了利用模型预测控制(MPC)对三相T型三电平逆变器进行并网控制的仿真研究。文章首先介绍了系统的拓扑结构及其面临的挑战，如中性点电压波动和共模电压问题。接着详细解释了MPC的核心思想，即通过构建代价函数来综合处理多个控制目标，包括电网电流跟踪、中性点电压平衡和漏电流抑制。文中提供了具体的代价函数和SVPWM实现方法，并通过仿真波形展示了不同阶段的控制效果。此外，作者分享了一些调试经验和常见错误避免技巧，强调了参数调整的重要性以及各控制目标之间的权衡关系。 适合人群：从事电力电子控制系统设计的研究人员和技术人员，尤其是对MPC感兴趣或希望深入了解三电平逆变器控制机制的专业人士。 使用场景及目标：适用于需要提高逆变器并网性能的应用场合，旨在帮助读者掌握MPC的基本原理及其在实际工程项目中的应用方法，从而实现更高效的多目标控制。 其他说明：文章不仅提供了理论分析，还包括了大量的代码片段和实践经验，有助于读者更好地理解和实施相关技术。同时，针对特定版本软件（如MATLAB 2018b）可能出现的问题给出了改进建议。
内容概要：本文详细介绍了2RC等效电路模型参数的离线辨识方法，涵盖数据预处理、微分方程建模、状态空间离散化以及参数辨识的具体步骤。首先，通过对实测电压电流数据进行时间戳对齐和滑动窗口去噪等预处理手段，确保输入数据的质量。接着，基于2RC模型的状态方程，采用离散化方法避免数值不稳定问题。参数辨识部分提供了两种主要方法：分段线性回归适用于高质量数据，而全局优化法则利用遗传算法和最小二乘法结合，能够处理复杂的非线性关系并防止过拟合。文中还强调了OCV-SOC曲线的准确性对R0估计的影响，并给出了具体的代码实现和优化技巧。 适用人群：从事电池管理系统(BMS)开发、电池建模研究的技术人员，尤其是有一定编程基础并对电池特性有一定了解的研发人员。 使用场景及目标：帮助工程师从实验室采集的充放电数据中提取有效的2RC等效电路模型参数，提高电池性能预测的准确性。具体应用场景包括但不限于电动汽车、储能系统等领域。 其他说明：附带完整的实验数据包、参数辨识工具箱及操作手册，提供了一键生成拟合对比图的验证脚本，便于用户快速上手实践。