lazy_
- 浏览: 147389 次
-
文章分类
最新评论
-
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
分享到：
发表评论
相关推荐
3. **布局模式**：学习流式布局（流动布局）、网格布局（grid system）、Flex布局（Flexible Box）和CSS Grid布局，它们分别适用于不同场景，提供更高效、灵活的布局解决方案。 4. **响应式设计**：了解媒体查询...
1. 浮动布局（Float Layout）：早期的CSS布局方式，通过设置元素的`float`属性（如`float:left`或`float:right`），使其在容器内浮动，从而实现多列布局。但这种方法存在一些局限，如无法自适应屏幕大小和容易引发父...
- CSS+Div布局利用了CSS的盒模型（Box Model），包括内容区域、内边距、边框和外边距，使得可以精确控制<div>元素的尺寸和位置。 - 布局通常分为流式布局、网格布局、响应式布局等，CSS+Div可以灵活地实现这些布局...
此外，了解浮动（`float`）、清除（`clear`）和定位（`position`）的原理和用法，以及盒模型（Box Model）的概念，将有助于进一步提升布局能力。 总之，CSS + Div 的网页布局提供了一种强大的工具，能够实现灵活...
**CSS+DIV网页样式与布局实例课件** 在网页设计领域，CSS（Cascading Style Sheets）和HTML的DIV元素是构建美观、响应式布局的关键技术。本课件旨在深入探讨如何利用CSS和DIV实现高效的网页样式控制和布局设计。 *...
Div的灵活性使其成为网页布局的首选工具，尤其是配合CSS的浮动（float）、定位（position）和盒模型（box model）属性时，能实现灵活多样的布局效果。 在《CSS+Div完美布局》中，你将学习到以下关键知识点： 1. ...
此外，你还将接触到常用的CSS属性，如`display`（决定元素如何显示）、`position`（控制元素的位置）、`float`（浮动元素）和`flex-direction`（定义Flexbox容器中子元素的排列方向）等，这些都是实现布局的关键。...
在网页设计领域，CSS（Cascading Style Sheets）和DIV元素是构建现代网页布局不可或缺的工具。本篇文章将深入探讨CSS的使用以及如何利用DIV进行布局。 首先，CSS是一种样式表语言，用于描述HTML或XML（包括如SVG、...
1. **基础结构**：创建一个包含所有导航链接的`<div>`，并为其分配一个类名，例如`.navbar`，以便在CSS中引用。接下来，为每个一级导航项创建单独的`<div>`，并设置适当的类名，如`.nav-item`。 ```html <div class...
2. **定位布局**：CSS的`position`属性包括静态（static）、相对（relative）、绝对（absolute）和固定（fixed）四种模式，其中，相对定位允许元素相对于其原始位置进行偏移，而绝对定位则会将元素相对于最近的非...
1. **布局模式**：使用CSS的盒模型（Box Model），包括内边距、边框和外边距，可以调整元素的大小和位置，创建各种布局模式，如流式布局、网格布局、响应式布局等。 2. **定位**：通过position属性（如static、...
1. **定位（Positioning）**：CSS2.0引入了`position`属性，包括`static`、`relative`、`absolute`和`fixed`，让开发者可以精确控制元素在页面上的位置。`relative`使元素相对于其正常位置移动，`absolute`则根据...
在本主题“CSS+div分类”中，我们将深入探讨如何利用CSS和div来实现灵活多样的分类布局，特别是左右两侧的分类展示。 首先，让我们了解`div`元素。`div`是HTML中的一个块级元素，它允许我们将页面内容进行分组，并...
tent">Content</div> <div id="sidebar-b">Sidebar B</div> <div id="footer">Footer</div></div> 接下来，我们为每个 div 分别设置样式。在 master.css 文件中，添加以下代码： ```css #main-nav { width: 760px...
【标题】：“经典的div+css布局” 在网页设计领域，Div+CSS布局是一种常见的网页结构化和样式控制方法。Div（Division）是HTML中的一个标签，用于定义文档中的区域或分区，而CSS（Cascading Style Sheets）则是一种...
1. 浮动布局：通过设置`float:left`或`float:right`，可以让div元素在一行内水平排列。 2. 定位布局：利用`position`属性（如`relative`、`absolute`、`fixed`），可以精确控制元素的位置。 3. Flex布局：现代...
1. **CSS布局**: CSS提供了盒模型（Box Model），包括内容、内边距（padding）、边框（border）和外边距（margin），使我们可以精确控制元素的尺寸和位置。在这个二级导航菜单中，我们可能会利用浮动（float）或者...
- 布局工具：div常用于创建布局结构，通过CSS设置宽度、高度、内边距、外边距等属性，可以实现多列布局、响应式布局等。 - 分割内容：div可以将页面内容划分为多个区域，便于管理和样式化。 3. CSS布局技术： - ...
通过设置CSS属性，如`display`, `width`, `height`, `margin`, `padding`, `float`, `position`等，我们可以用DIV构建复杂的网页布局，如网格系统、响应式设计等。 **源码**在这里指的是编写和组织这些CSS和HTML...
1. 浮动布局（Float）：通过设置float属性，可以让元素浮动到左侧或右侧，常用于创建多列布局。 2. 盒模型（Box Model）：理解盒模型对于布局至关重要，它包括content、padding、border和margin，影响元素的实际尺寸...