css学习
#right h2 { http://www.xyforever.org/ash/style/coffee/q1.jpg
color: orange;
font-size: 12px;
font-weight: bold;
border-top: 1px solid #eeeeee;
border-bottom: 1px solid #eeeeee;
padding: 8px 0 8px 10px;
background: url("
}
木一:
学长，banner是什么意思？
meiking :
应该是标幅之类的东西吧，在计算机中一般用这个的少，一般喜欢用 header
木一:
header 翻译过来是？
meiking
标题，首领的意思吧 在计算机这块就是表示最上头的东西
meiking:
<div class="sidebar">***</div>
class 为 sidebar 的标签内容
就和我们上午的 <div id="right">**</div> 用#right {
margin-left: 10px;
font-size: 12px;
}
木一 :
id 和 class 是平行的么？
meiking :
不是，要不放先那儿吧，一会儿需要用到的时候我们再说，上午说到要给 <h2>加上几条线对吧
不是，你别去想了，别越想越远了。
meiking :
<div id="nav">
<h2>导航</h2>
<ul> http://www.zhuoda.org/pear/dir_66516.html
<li> <a href="
<a href="
< >
<li> <a href="http://www.zhuoda.org/pear/
<a href="
< >
<li> <a href="
<a href="
<a href="
< >
</ul>
</div>
找到这些内容，我们现在要改这里面的样式了
加边框需要用到 border 属性，上边框是 border-top ，左边是 border-left，下面是 border-bottom
上面的 border-top: 1px solid #eeeeee;
对应的意思是
border-top : border-width || border-style || border-color
就是 线条粗线， 类型 ，颜色
下面的也按这样加上去
完后看效果
木一:
都能在哪看效果
meiking:
你上午保存的那个 html记得吧，打开他
看导航的效果，是什么样的
木一 :
好像错了
meiking:
厄。。 啥情况?
木一:
字体颜色老是不换
meiking:
font-color直接写成 color
是不是编辑错文件了，你看 htm的源文
效果有变化了就发给我看下
别死撑啊
木一 :
那你告诉我好了
本来准备自己研究呢
结果 你不给机会
meiking :
哦。。 我把上午代码发给你吧，你把你现在的 css代码全清空掉
body {
margin: 0 0 20px 0px;
background-color: #FFFFFF;
}
a { text-decoration: underline;font-style:normal;}
a:link { color: #003366;}
a:visited { color: #003366;}
a:active { color: #003366;}
a:hover { color: #003366;}
h1, h2, h3 {
margin: 0px;
padding: 0px;
font-weight: normal;
}
#right {
margin-left: 10px;
font-size: 12px;
}
#right h2 { http://www.xyforever.org/ash/style/coffee/q1.jpg
color: orange;
font-size: 12px;
font-weight: bold
木一 :
我把你发过来的代码放在源代码里边了
meiking :
哦。。 怎么没上午聪明了呢
木一:
老了~！
不是能在源文件里改么？
meiking:
源文件里的时候不能直接放，需要加上标签来表示这是一个段CSS代码，放单独的文件里的话则需要引用进来
放源文件里的时候需要用 <style> </style> 把css文件括在里面
放单独文件里的话，需要存为 .css 文件，在源文件里用
<link href="path***/***.css" type="text/css" rel="stylesheet" /> 这种方式引用
我以为这个你早知道了呢，源来是这样啊
木一 :
恩，是这样的
meiking :
恩，没事，我心里素质好
木一:
没事，我脸皮厚
meiking 16:39:31
怎么没有上面的那条线呢？
你好像只加了个 bottom 对吧
再加个 top
上面一个，下面一个
木一 :
出来了
meiking 16:44:29
这需要用到内边距了，还记得吗？
margin 是外边距 ，内边距是 padding
margin一样，可以用这种写法 padding: 8px 0 8px 0;
是上下的距离，左边我看了下，不是线，而是个背景图片，一会儿教你怎么加
背景图片的加法有两种
一种是昨天我们用的那种，但那种不好用
第二种就是 background: url("");
background:url"
no-repeat 是表示不重复只显示一次的意思
重合了对吧
我们可以通过 padding 来控制下，知道怎么做吗？
木一:
调padding左边
meiking:
恩，聪明，我就喜欢聪明的学生
大概往右移 10px 就行了
我们现在的内容跑到下面去了，得想办法把它弄上来
这就是排版了
咱们博客是分成了四个部份的应该
分别是 头，左，右和脚
我们现在一直调的就是菜单，可以把他控制在左边也可以控制在右边，暂且我们把菜单这个宽度控制下
菜单内容现在全是放在 id为 right的div里，然后要改他的宽度给 #right 里添加一个属性就行了 width: 200px;
meiking :
body { * body标签的内容 */
margin: 0 0 20px 0px;
background-color: #FFFFFF;
}
a { text-decoration: underline;font-style:normal;}
a:link { color: #003366;}
a:visited { color: #003366;}
a:active { color: #003366;}
a:hover { color: #003366;}
h1, h2, h3 { /* 全局的 h1,h2,h3 */
margin: 0px;
padding: 0px;
font-weight: normal;
}
#container { /* 菜单和内容的大框 */
width: 814px;
}
#right { /* 菜单栏的框 */
margin-left: 10px;
font-size: 12px;
width: 200px;
float: left;
}
#right h2 { /* 菜单栏里的h2标签 */ http://www.xyforever.org/ash/style/coffee/q1.jpg
color: orange;
font-size: 12px;
font-weight: bold;
border-top: 1px solid #eeeeee;
border-bottom: 1px solid #eeeeee;
padding: 8px 0 8px 10px;
background: url("
}
#center { /* 内容框 */
width: 600px;
float: right;
}
meiking 17:12:43
还没完呢，别丢了啊
木一 17:12:53
丢不了了，这次
pear
2008-05-04 19:22:10
评论:0
阅读:26
引用:0