先上效果图。（山寨的对象忘了网址，大家搜索相关文字应该可以找到）
网站布局来来去去不过如此。总结起来两种
1 左边的树DIV，float/position脱离文档流元素，然后右边的主内容，主内容的margin-left足够大，“覆盖”住左边的树DIV。
例子 http://www.blogjava.net/sealyu/archive/2010/01/08/308640.html
JAVA TUTORIAL
2 一个wrapper包围住float:left和float:right两个块，固定宽度，以及最后在后面加个footer清除，让wrapper包围浮动块。
例子 36kr,JAVAEYE BLOG,以及本实例。
麻烦的应该是HACK,色彩，细致的局部控件/按钮/...，和网站整体感觉还有美工。
个人比较喜欢36kr和JE BLOG的WIDGET视觉。
杂记：
1 FLOAT和普通DIV的碰撞研究。
研究结果：
a. 不要使用FLOAT和非FLOAT碰撞，IE和CHROME的效果完全不一样。只使用FLOAT和FLOAT碰撞。
例如
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<HTML> <HEAD> </HEAD> <BODY> <div style="float:left;border: 1px solid gray;width:200px;height:200px;"></div> <div style="border: 1px solid red;width:100px;height:100px;">文字</div> </BODY> </HTML>
IE7、8的效果是
CHROME的效果是
同样是文字环绕，但是非浮动的红色框架的位置却不同。所以建议大家不要用FLOAT靠近非FLOAT。除非在非FLOAT元素加上足够的MARGIN-LEFT或者MARGIN-RIGHT。
b. FLOAT元素会不顾一切地向左右漂浮，直至碰撞到父元素或者另外的浮动元素。
c. <div>
<div float>
</div>
尽管外层DIV不是浮动元素，但是仍会受到父元素宽度的限制,浮动元素浮不出这个框
2 POSITION和普通DIV的碰撞。
未指定LEFT RIGHT TOP BOTTOM的POSITION元素的位置和STATIC无异.如果后面出现一个static的<DIV></DIV>，则会发生覆盖。
3 为什么使用非normal flow的元素作为左边呢？
因为脱离文档流，下一个DIV可以不换行了
4 其他。（ 可能自己才能看得明白的）。。。
总结:
布局:
整体上用float布局左右两栏
局部用relative和postive
使用padding和background可以马上让页面好看(form)
widget的实现思想(border-radius,box-shadow)
background+padding可以用定位图片(广告)
ul ol 以为列表 ，可以嵌套，块元素(ol style-list:none)
整体上用左右内容区分，WIDDGET区分
细处可以有ul li h3 来来去就是那些CSS属性
颜色和字体大小需要经验和直觉啊
li 变成 inline之后CHROME能分开，但是IE不分开（后面得研究下头部的menu）
-webkit-gradient(linear,left top,left bottom,from(rgba(0, 0, 0, .55)),to(rgba(0, 0, 0, .55)))
rgba?
w3school布局和此网站类似
有空山寨
margin-right auto是否在IE可用？可用，切记要使用
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
貌似许多网站都是用这个DOCTYPE。STRICT应该很少吧。
EM PX PT EX？
固定宽度的都是FLOAT
然后不固定的都是需要把右栏目的margin-left调成左栏的宽度
下面是山寨的成果。
图片在附件中
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!--
=========
FLOAT、POSITION和普通DIV的碰撞研究。
研究结果：
1
a. 不要使用FLOAT和非FLOAT碰撞，IE和CHROME的效果完全不一样。只使用FLOAT和FLOAT碰撞。
b. FLOAT元素会不顾一切地向左右漂浮，直至碰撞到父元素或者另外的浮动元素。即使代码中该浮动元素在正常DIV之后，正常DIV也会被挤开，例如float:left。
c. <div>
<div float>
</div>
尽管外层DIV不是浮动元素，但是仍会受到父元素宽度的限制,浮动元素浮不出这个框
2 未指定LEFT RIGHT TOP BOTTOM的POSITION元素的位置和STATIC无异.如果后面出现一个static的<DIV></DIV>，则会发生覆盖。
网站布局来来去去不过如此。总结起来两种
1 左边的树，float/position脱离文档流元素，然后右边的主内容，主内容的margin-left足够大，“覆盖”住左边的树。
例子 http://www.blogjava.net/sealyu/archive/2010/01/08/308640.html
JAVA TUTORIAL
2 一个wrapper包围住float:left和float:right两个块，固定宽度，以及最后在后面加个footer清除，让wrapper包围浮动块。
例子 36kr,JAVAEYE BLOG,以及本实例。
麻烦的应该是HACK和色彩，控件的细致，和网站整体感觉，美工。
个人比较喜欢36kr和JE BLOG的WIDGET视觉。
杂记：
1 为什么使用非normal flow的元素作为左边呢？
因为脱离文档流，下一个DIV可以不换行了
2 可能自己才能看得明白的
总结:
布局:
整体上用float布局左右两栏
局部用relative和postive
使用padding和background可以马上让页面好看(form)
widget的实现思想(border-radius,box-shadow)
background+padding可以用定位图片(广告)
ul ol 以为列表 ，可以嵌套，块元素(ol style-list:none)
整体上用左右内容区分，WIDDGET区分
细处可以有ul li h3 来来去就是那些CSS属性
颜色和字体大小需要经验和直觉啊
li 变成 inline之后CHROME能分开，但是IE不分开（后面得研究下头部的menu）
-webkit-gradient(linear,left top,left bottom,from(rgba(0, 0, 0, .55)),to(rgba(0, 0, 0, .55)))
rgba?
w3school布局和此网站类似
有空山寨
margin-right auto是否在IE可用？可用，切记要使用
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
貌似许多网站都是用这个DOCTYPE。STRICT应该很少吧。
EM PX PT EX？
固定宽度的都是FLOAT
然后不固定的都是需要把右栏目的margin-left调成左栏的宽度
固定宽度的是ABSOLUTE
还有一种可以拉伸左边的树的，需要再去研究下
-->
<HTML>
<HEAD>
<style type="text/css">
*{
margin:0;
padding:0;
}
body{
background: #ECE5D9 url(../images/body-bg.png) repeat-x top;
padding: 0;
margin: 0;
}
a, a:link{
text-decoration: none;
outline: none;
color: #1760A4;
}
a:hover, a:active{
text-decoration: underline;
}
body{
font-size: 90%;
font-family: Arial, sans-serif;
color: #333;
}
pre{
font-size: 90%;
font-family: "courier new";
color: #620;
}
h1{
color: #333;
font-size: 2.2em;
font-weight : bold;
margin : 0.3em 0 0.5em;
padding : 0;
line-height : 1.2em;
font-family: Arial
}
h2,h3,h4{
font-family: arial,sans-serif;
font-size: 1.4em;
font-weight: bold;
color: #383838;
margin: 2ex,0,0.5ex;
}
p{
line-height : 2.5ex;
margin: 1.4ex 0;
}
.post, .page{
position: relative;
}
.post div.comment{
clear: left;
padding-top: 1px;
}
.post dl dt{
font-weight : bold;
}
.post dl dd{
padding: 0.5ex 0 1.5ex 1.5em;
border-bottom: 1px solid #eee;
margin: 0 0 1ex;
}
.code{
font-family: "courier new";
color: #620;
}
.snippet{
background-color: #DAE6EF;
}
.normal-ul{
margin:2.5ex 1.5em;
}
.menu-ul{
padding:0 10px;
margin:0 10px;
}
.menu-ul li{
display:inline;
background-color:#EEE;
border: 1px solid;
border-color: #f3f3f3 #bbb #bbb #f3f3f3;
padding:1ex;
}
.post-nav{
text-align: center;
}
.post-nav .left , .post-nav .right{
float:left;
width: 49%;
display:block;
padding:0.5em 0;
color: #666;
background: #F3F3F3;
border: 1px solid #DADADA;
border-radius: 8px;
}
.post-nav a, .post-nav a:visited{
}
.commentList{
list-style: none;
padding: 0;
margin: 0;
}
ol.commentList li{
background-color: #F6F6F6;
padding: 20px 30px;
margin: 7px 0;
}
.comment{
position: relative;
}
.comment img.avatar{
float:left;
margin: 0 10px 0 0;
border: 1px solid #CCC;
background: white;
padding: 2px;
}
.comment .reply{
position:absolute;
right: 30px;
top:20px;
}
.comment .reply a{
color: black;
border-radius: 10px;
background-color:white;
border: 1px solid #bbb;
padding: 3px 15px;
}
ol.commentlist, ol.commentlist ul{
list-style: none;
}
ol.commentlist li.odd{
background-color: #E9E9E9;
}
ol.commentlist li.byuser{
background-color: #D3E1ED;
}
#respond{
background-color: #E9E9E9;
padding: 20px 30px;
}
#respond textarea{
width: 450px;
}
.main-content{
padding: 2ex 30px 30px;
background: #fff;
width: 590px;
border-radius: 15px;
box-shadow: 0px 1px 3px rgba(0,0,0,0.3);
float: left;
position: relative;
}
.wrapper{
width: 1000px;
margin: 0px auto;
background: none transparent scroll repeat 0% 0%;
}
.sub-content{
float:right;
width:330px;
}
.catagories{
margin: 10px 0;
padding: 2ex 30px 30px;
border-radius: 15px;
box-shadow: 0px 1px 3px rgba(0,0,0,0.3);
background: white;
}
.catagories p {
color: #999;
}
.catagories p a{
color: blue;
}
.sub-content h3{
font-size: 1.8em;
padding-right: 40px;
background: url("img/sharp.jpg") right bottom no-repeat
}
div.div-catagories{
background-color: white;
border-radius: 15px;
box-shadow: 0px 1px 3px rgba(0,0,0,0.3);
padding: 2ex 30px 30px;
margin: 10px 0;
}
.sub-content h5{
font-weight: normal;
color: #999;
font-style: italic;
font-size: 1.2em;
}
div.div-catagories ul{
list-style: none;
}
div.div-catagories ul li{
padding-left: 2px;
margin: 1.5ex 0;
color: #999;
}
div.div-catagories ul li a {
color: #1760A4;
font-size: 1.1em;
}
div ul{
}
div.ad ul{
list-style:none;
padding:0;
margin:0;
}
div.ad ul li{
background: url("img/line.jpg") 50% bottom no-repeat;
padding-bottom: 20px;
}
div.ad1{
background: url("img/ad1.jpg") left top no-repeat;
padding-left:160px;
}
div.ad2{
background: url("img/ad2.jpg") left top no-repeat;
padding-left:160px;
}
div.ad3{
background: url("img/ad3.jpg") left top no-repeat;
padding-left:160px;
}
div.recent-post{
background-color:white;
border-radius: 15px;
box-shadow: 0 1px 3px rgba(0,0,0,0.3);
padding: 1em 30px 30px;
margin: 10px 0;
}
div.recent-post ul{
list-style: disc;
padding-left: 15px;
color: #C6B9A5;
padding-bottom: 1ex;
}
div.recent-post li{
padding: 2px;
margin: 1em;
}
</style>
</HEAD>
<BODY>
<div class="wrapper">
<div class="main-content">
<h2>CSS Block vs Inline CSS Display Styles</h2>
<div class="post page">
<p>
HTML elements can be displayed either in <strong>block</strong> or <strong>inline</strong> style.
</p>
<p>
The difference between these is one of the most basic things you need to know in order to use CSS effectively.
</p>
<h3>The 3 ways that HTML elements can be displayed</h3>
<p>
All HTML elements are naturally displayed in one of the following ways:
</p>
<div class="comment indent">
<dl>
<dt>Block</dt>
<dd>Takes up the full width available, with a new line before and after (<span class="code">display:block;</span>)</dd>
<dt>Inline</dt>
<dd>Takes up only as much width as it needs, and does not force new lines <span class="code">(display:inline;)</span></dd>
<dt>Not displayed</dt>
<dd>Some tags, like <span class="code"><meta /></span> and <span class="code"><style></span> are not visible (<span class="code">display:none;</span>)</dd>
</dl>
</div>
<h3>Block Example</h3>
<p> tags and <div> tags are naturally displayed block-style.
</p>
<p>
(I say “naturally” because you can override the display style by setting the CSS display property e.g. display:inline;.)
</p>
<p>
A block-display element will span the full width of the space available to it, and so will start on a new line in the flow of HTML. The flow will continue on a new line after the block-display element.
</p>
<p>
Here I’ve started a paragraph and now I’m going to insert a <div>
</p>
<div style="border: 1px solid gray; background-color:#ffff99;padding:1em;margin:0;">new div inside my paragraph</div>
<p>
and then continue the text here…
</p>
<p>
See how the <div> jumped in and took over the full width of the space?
</p>
<p>
Common HTML elements that are naturally block-display include:
</p>
<dl class="comment indent">
<dt><span class="term"><div></span></dt>
<dd>Your general-purpose box</dd>
<dt><span class="term"><h1> … <h6></span></dt>
<dd>All headings</dd>
<dt><span class="term"><p></span></dt>
<dd>Paragraph</dd>
<dt><span class="term"><ul>, <ol>, <dl></span></dt>
<dd>Lists (unordered, ordered and definition)</dd>
<dt><span class="term"><li>, <dt>, <dd></span></dt>
<dd>List items, definition list terms, and definition list definitions</dd>
<dt><span class="term"><table></span></dt>
<dd>Tables</dd>
<dt><span class="term"><blockquote></span></dt>
<dd>Like an indented paragraph, meant for quoting passages of text</dd>
<dt><span class="term"><pre></span></dt>
<dd>Indicates a block of preformatted code</dd>
<dt><span class="term"><form></span></dt>
<dd>An input form</dd>
</dl>
<h3>Inline example</h3>
<p>Inline-display elements don’t break the flow. They just fit in with the flow of the document.</p>
<p>So here I’ve got a paragraph going on, and I’m going to add a <span> tag that
<span style="background-color:yellow;font-style:italic">has a yellow background and italic text</span>. See how it just fits right in with the flow of the text?</p>
<p>More elements are naturally inline-style, including:</p>
<dl class="comment indent">
<dt><span class="term"><span></span></dt>
<dd>Your all-purpose inline element</dd>
<dt><span class="term"><a></span></dt>
<dd>Anchor, used for links (and also to mark specific targets on a page for direct linking)</dd>
<dt><span class="term"><strong></span></dt>
<dd>Used to make your content strong, displayed as bold in most browsers, replaces the narrower <span class="term"><b></span> (bold) tag</dd>
<dt><span class="term"><em></span></dt>
<dd>Adds emphasis, but less strong than <strong>. Usually displayed as italic text, and replaces the old <span class="term"><i></span> (italic) tag</dd>
<dt><span class="term"><img /></span></dt>
<dd>Image</dd>
<dt><span class="term"><br></span></dt>
<dd>The line-break is an odd case, as it’s an inline element that forces a new line. However, as the text carries on on the next line, it’s not a block-level element.</dd>
<dt><span class="term"><input></span></dt>
<dd>Form input fields like<p></p>
<input type="text" value="Text fields"> and<p></p>
<input type="button" value=" Buttons "></dd>
<dt><span class="term"><abbr></span></dt>
<dd>Indicates an <abbr title="Abbreviation">abbr.</abbr> (hover to see how it works)</dd>
<dt><span class="term"><acronym></span></dt>
<dd>Working much like the abbreviation, but used for things like this <acronym title="Three-Letter Acronym">TLA</acronym>.</dd>
</dl>
<h3>You change the display property of any elements</h3>
<p>Although each HTML element has its natural display style, you can over-ride these in CSS.</p>
<p>This can be very useful when you want your page to look a particular way while using semantically-correct HTML.</p>
<h3>Examples</h3>
<p>Say you want to provide a list of items, but you don’t want a big bulleted list. You just want to say that you’re going to the store to buy:</p>
<p>some fizzy drinks, a chainsaw, and some nylon stockings.</p>
<p>Or maybe you want a nice toolbar, which is stricly a list (of links) and so should be marked up as a <ul>.</p>
<p style="font-weight:bold;">Here’s the code</p>
<div class="snippet code">
<div class="indent">
<p><ul></p>
<div class="snippet indent">
</div>
<p></ul></p>
</div>
</div>
<h4>Here’s how it looks as a normal list</h4>
<ul class="normal-ul">
<li><a href=”#”>Home</a></li>
<li><a href=”#”>About us</a></li>
<li><a href=”#”>Products</a></li>
<li><a href=”#”>FAQs</a></li>
<li><a href=”#”>Contact us</a></li>
</ul>
<h4>Just adding the class “toolbar”…</h4>
<div class="snippet code">
<div class="indent">
<p><style type=”text/css”></p>
<div class="indent">
<p>.toolbar li {</p>
<div class="indent">display:inline;<br>
background-color:#eee;<br>
border:1px solid;<br>
border-color:#f3f3f3 #bbb #bbb #f3f3f3;<br>
margin:0;<br>
padding:.5em;<br>
zoom: 1;</div>
<p>}</p>
</div>
<p></style></p>
</div>
<p><ul class=”toolbar”></p>
<div class="indent"><li><a href=”#”>Home</a></li><br>
<li><a href=”#”>About us</a></li><br>
<li><a href=”#”>Products</a></li><br>
<li><a href=”#”>FAQs</a></li><br>
<li><a href=”#”>Contact us</a></li></div>
<p></ul></p>
</div>
<ul class="menu-ul">
<li><a href=”#”>Home</a></li>
<li><a href=”#”>About us</a></li>
<li><a href=”#”>Products</a></li>
<li><a href=”#”>FAQs</a></li>
<li><a href=”#”>Contact us</a></li>
</ul>
</div>
<p/>
<p/>
<div class="post-nav">
<div class="left">
<a href="#">Previous Aritical</a>
</div>
<div class="right">
<a href="#">Next Aritical</a>
</div>
</div>
<h3 id="comments">38 Comments <a href="#respond">Leave a comment</a></h3>
<ol class="commentList">
<li class="comment">
<div class="comment-body">
<img alt="" src="http://0.gravatar.com/avatar/e11954b4bfeb1ff7816d3e620d4a7486?s=40&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D40&r=G" class="avatar avatar-40 photo" height="40" width="40">
<div class="comment-author">
<cite class="fn">Renyo Borges</cite>
<span class="says">says</span>
</div>
<div class="comment-meta commentmetadata">May 14, 2010</div>
<p></p>
<p></p>
<p style="clear:left">actually there are more ways to display some elements, </p>
<p></p>
<div class="reply">
<a class="comment-reply-link" href="###">Reply</a>
</div>
</div>
</li>
<li class="comment odd alt thread-odd thread-alt depth-1" id="comment-11988">
<div id="div-comment-11988" class="comment-body">
<img alt="" src="http://0.gravatar.com/avatar/82984dc8def0dbed53dca82e89e5c5f0?s=40&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D40&r=G" class="avatar avatar-40 photo" height="40" width="40"> <div class="comment-author">
<cite class="fn">juanma</cite>
<span class="says">says:</span>
</div>
<div class="comment-meta commentmetadata"><a class="comment-permalink" href="http://www.webdesignfromscratch.com/html-css/css-block-and-inline/#comment-11988">August 30, 2011</a></div>
<p></p><p>I think you can use float:left or float:right in the li to determinate the inline properties.</p>
<p>But thank for your tip <img src="http://www.webdesignfromscratch.com/wp-includes/images/smilies/icon_smile.gif" alt=":)" class="wp-smiley"> </p>
<p></p>
<div class="reply"><a class="comment-reply-link" href="/html-css/css-block-and-inline/?replytocom=11988#respond" οnclick="return addComment.moveForm("comment-11988", "11988", "respond", "1159")">Reply</a></div>
</div>
<ul class="children">
<li class="comment even depth-2" id="comment-23159">
<div id="div-comment-23159" class="comment-body">
<img alt="" src="http://0.gravatar.com/avatar/c8338a75914971cef5add9cc6cec0314?s=40&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D40&r=G" class="avatar avatar-40 photo" height="40" width="40"> <div class="comment-author">
<cite class="fn">I?code</cite>
<span class="says">says:</span>
</div>
<div class="comment-meta commentmetadata"><a class="comment-permalink" href="http://www.webdesignfromscratch.com/html-css/css-block-and-inline/#comment-23159">February 14, 2012</a></div>
<p></p><p>Actually, floats will just shift the vertical column left or right, not put the individual elements inline.</p>
<p></p>
<div class="reply"><a class="comment-reply-link" href="/html-css/css-block-and-inline/?replytocom=23159#respond" οnclick="return addComment.moveForm("comment-23159", "23159", "respond", "1159")">Reply</a></div>
</div>
<ul class="children">
<li class="comment byuser comment-author-ben bypostauthor odd alt depth-3" id="comment-23211">
<div id="div-comment-23211" class="comment-body">
<img alt="" src="http://0.gravatar.com/avatar/8d939b4feb411b224a863058fd87359e?s=40&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D40&r=G" class="avatar avatar-40 photo" height="40" width="40"> <div class="comment-author">
<cite class="fn">Ben Hunt</cite>
<span class="says">says:</span>
</div>
<div class="comment-meta commentmetadata"><a class="comment-permalink" href="http://www.webdesignfromscratch.com/html-css/css-block-and-inline/#comment-23211">February 15, 2012</a></div>
<p></p><p>Correct.</p>
<p></p>
<div class="reply"></div>
</div>
</li>
</ul>
</li>
</ul>
</li>
</ol>
<div id="respond">
<h3>Leave a comment</h3>
<p class="cancel-comment-reply"><a rel="nofollow" id="cancel-comment-reply-link" href="/html-css/css-block-and-inline/#respond" style="display:none;">Click here to cancel reply.</a></p>
<form action="http://www.webdesignfromscratch.com/wp-comments-post.php" method="post" id="commentform">
<p><input type="text" name="author" id="author" value="" size="22" tabindex="1" aria-required="true">
<label for="author"><small>Name (required)</small></label></p>
<p><input type="text" name="email" id="email" value="" size="22" tabindex="2" aria-required="true">
<label for="email"><small>Mail (will not be published) (required)</small></label></p>
<p><input type="text" name="url" id="url" value="" size="22" tabindex="3">
<label for="url"><small>Website</small></label></p>
<!--<p><strong>XHTML:</strong> You can use these tags: <code><a href="" title="" rel=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped=""> </code></p>-->
<textarea name="comment" id="comment" cols="85" rows="10" tabindex="4"></textarea>
<input name="submit" type="submit" id="submit" tabindex="5" value="Leave your Comment">
<input type="hidden" name="comment_post_ID" value="1159" id="comment_post_ID">
<input type="hidden" name="comment_parent" id="comment_parent" value="0">
<p style="display: none;"><input type="hidden" id="akismet_comment_nonce" name="akismet_comment_nonce" value="39607181be"></p><!-- BEGIN: subscribe to comments reloaded --><p><input style="width:30px" type="checkbox" name="subscribe-reloaded" id="subscribe-reloaded" value="yes"> Notify me of followup comments via e-mail. You can also <a href="http://www.webdesignfromscratch.com/comment-subscriptions?srp=1159&sra=s">subscribe</a> without commenting.</p><!-- END: subscribe to comments reloaded -->
</form>
</div>
</div>
</div><!--maincontent-->
<div class="sub-content">
<h3>Web Design Articles<br>and Tutorials</h3>
<div class="div-catagories">
<h5>Categories</h5>
<ul>
<li><a href="###">Basics</a> (40)</li>
<li><a href="###">Blog</a> (230)</li>
<li><a href="###">Business of Web Design</a> (30)</li>
<li><a href="###">Conversion Rate Optimisation</a> (9)</li>
<li><a href="###">Copy Writing </a> (3)</li>
<li><a href="###">Design Process </a> (85)</li>
<li><a href="###">Graphic Design for the Web</a> (23)</li>
<li><a href="###">HTML / CSS</a> (32)</li>
<li><a href="###">JavaScript</a> (57)</li>
<li><a href="###">Resources </a> (31)</li>
<li><a href="###">Search Engine Optimisation</a> (23)</li>
<li><a href="###">Usability </a> (69)</li>
<li><a href="###">Web Design Course</a> (1)</li>
<li><a href="###">Website Architecture</a> (23)</li>
</ul>
</div>
<h3>Get All the Web Design<br>Skills You'll Ever Need</h3>
<div class="ad">
<ul>
<li>
<div class="ad1">
<p>Learn ALL the web design skills you need to craft excellent sites - and earn a living as a pro designer.<p>
<p>The Pro Web Design Course is the complete package, giving you access to ALL Ben's products.</p>
</div>
</li>
<li>
<div class="ad2">
<p>For the first time, Ben Hunt reveals the complete SEO process he uses to top the search rankings.<p>
<p>“SEO from Scratch” gives you a complete 3-hour video training program, plus Ben's own unique “SEO Master” tool.</p>
</div>
</li>
<li>
<div class="ad3">
<p>“Save the Pixel” makes all the essentials of visual design for the web simple!<p>
<p>Discover how to use layout, copywriting, color, graphics, navigation, space to make your websites work better!</p>
</div>
</li>
</ul>
</div>
<div class="recent-post">
<h5>Recent Posts</h5>
<ul>
<li><a href="#">Web Designers, Quit Reinventing the Wheel – Today!</a></li>
<li><a href="#">Website SEO Video Review – Orlando Vacation Home Rental</a></li>
</ul>
</div>
<div class="catagories">
<p>Categories</p>
<p><a href="###">Basics</a> (40)</p>
<p><a href="###">Blog</a> (117)</p>
</div>
</div>
</div><!--wrapper-->
</BODY>
</HTML>
5033
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
