lazy_
- 浏览: 145333 次
-
文章分类
最新评论
-
sadamu900912：
long t1 = System.currentTimeMil ...
ArrayBlockingQueue V.S. LinkedBlockingQueue -
ygmyth：
jag522 写道ArrayBlockingQueue和Lin ...
ArrayBlockingQueue V.S. LinkedBlockingQueue -
iSmile：
虽然一口气没有看完，但是我觉得还是要给楼主一个大大的赞！
深刻理解JavaScript基于原型的面向对象 -
470275283：
var Coder = function (name, lan ...
深刻理解JavaScript基于原型的面向对象 -
470275283：
var Coder = function (name, lan ...
深刻理解JavaScript基于原型的面向对象
先上效果图。（山寨的对象忘了网址，大家搜索相关文字应该可以找到）
网站布局来来去去不过如此。总结起来两种
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" onclick="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" onclick="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>
- 大小: 6 KB
- 大小: 7.7 KB
- 大小: 6.7 KB
- 大小: 1.2 KB
- 大小: 1.4 KB
- 大小: 187.5 KB
- 大小: 142.4 KB
- 大小: 7.2 KB
- 大小: 5.4 KB
分享到：
发表评论
相关推荐
month = nowdate.getMonth()+1, day = nowdate.getDay(), hours = nowdate.getHours(), minutes = nowdate.getMinutes(), seconds = nowdate.getSeconds(), date = nowdate.getDate(); var weekday =["星期日...
<div id="box1"><!--参照定位的元素--> <div id="box2">相对参照元素进行定位</div><!--相对定位元素--> </div> 从上面代码可以看出box1是box2的父元素（父元素当然也是前辈元素了）。 2、参照定位的元素必须加入...
对于定宽的非浮动元素我们可以在CSS中用 margin:0 auto 进行水平居中，对于不定宽的浮动元素我们也有一个常用的技巧解决它的水平居中问题。解决水平居中问题有很多种方法，下面先给大家分享一下三种方法，希望能帮助...
在布局的传统解决方案中，都是基于盒状模型，依赖display属性、position属性、float属性，这种方式比较传统，对于那些特殊布局来说非常不方便，比如，垂直居中就不容易实现。 尤其是现在移动设备如此多的今天，...
<div class="box_main" id="boxhandler"> <div class="box_head"> 网站管理员请求和您通话-<a href="http://www.vihchina.net" target="_blank">VIHCHINA.NET</a></h1><span id="doclose"></span> </div> <div ...
.s_box{position:absolute;z-index:9999px; width:38px;height:38px;border:1px #000 solid;-moz-opacity:0.6;opacity:0.6;filter:alpha(opacity=60);} .s_box span{display:block;width:36px;height:36px;margin:1...
1.css的概述 1.问题 HTML属性修饰有一定局限，是不太便捷 2.css的语法规范 1.使用css样式方式 1.内联样式 行内样式 特点：将css样式定义在HTML标记中 语法： 样式声明：用样式属性和值组成（属性:值;） ...
复制代码代码如下: <div id=”search-box”> <asp ID=”txtSearch” runat=”server” class=”searchTextBox”> <asp ID=”btnSubmit” runat=”server” class=”submitButton” Text=”Search”> </div> 四、CSS...
.box{float:left; width:198px; height:320px; margin-left:5px; border:1px solid #e0e0e0; text-align:center} .box p{line-height:20px; padding:4px 4px 10px 4px; text-align:left} .box:hover{border:1px ...
<!DOCTYPE ...div.box div.item{ float:left; width:90px; height:90px; background-color:#ccc; margin:5px; position:relative; cursor:pointer; }
.box{float: left;padding: 5px;} .imgbox{border: black solid 1px;padding: 5px;border-radius: 5px;} .imgbox img{width: 200px;display: block;} </style> HTML结构: <div class=cont> <div class=...
$(".btn_box li").eq(0).css('backgroundColor','#FF0000'); //获取图片总数 var len = $(".btn_box li").size(); //设置默认显示图片 var index = 1; $(".btn_box li").click(function(){ index = $(".btn_...
.box{float: left;padding: 4px;} .imgbox{ padding: 4px;} .imgbox img{width: 200px;display: block;border-radius: 4px;} </style> HTML部分（图片可自行添加）： <div class=cont> <div class=box> ...
.menu ul li {float:left; margin-right:1px; position:relative;} .menu ul li ul {display: none;} /* specific to non IE browsers */ .menu ul li:hover a {color:#fff; background:#36f;} .menu ul li:hover ul...
二：如何实现这个功能 亲，采用JS+CSS就可以实现这个功能了 三：实现侧边栏跟随特效的方法 复制代码代码如下: CSS： /*侧栏跟随*/ #box{float:left; position:relative;width:250px;}.div1{width:250px;}.div2{...
box-shadow:1px 1px 1px #ccc}.s_btn_h{background:#3075dc;box-shadow:inset 1px 1px 5px #2964bb;-webkit-box-shadow:inset 1px 1px 5px #2964bb;-moz-box-shadow:inset 1px 1px 5px #2964bb;-o-box-shadow:inset ...
if (code=="top210x90_1"){ document.write('<script type="text/javascript" >BAIDU_CLB_SLOT_ID = "288992";</script>'); document.write(ojs);} if (code=="top210x90_2"){ document.write('<script type="text/...
css标签，网页模板/* Author: W3layout Author URL: http://w3layouts.com License: Creative Commons Attribution 3.0 Unported License URL: http://creativecommons.org/licenses/by/3.0/ */ /* reset */ html,...
-Button控件将不再自动拥有display:inline属性，如果希望两个按钮在一行显示，请为第一个按钮设置CssStyle="float:left;"属性。 -修正了弹出菜单的位置在Firefox下不正确的BUG(feedback:eroach)。 -为TriggerBox...