注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

火力光波的博客

火一般的热情 光一样的速度

 
 
 

日志

 
 

曹鹏CSS教程学习笔记⑵  

2010-03-13 17:40:02|  分类: CSS代码 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

曹鹏CSS视频教程学习笔记⑵

(点击橙红色文字可打开视频连接)

第三章 CSS 演示站 2

文档2的使用
1、如何下载演示文档
演示文档的下载地址:
http://www.caopeng.org/t/css/cssfiles.rar
解压后cssfiles文件夹中有5个文件夹如下:
CSS、CSS2、Conflicts、CSS2_ex、 Conflicts_ex
2、如何将CSS2、Conflicts两个文件夹复制粘贴到Dreamweaver
粘贴的路径 :C:\Program Files\Macromedia\Dreamweaver MX\Configuration\Snippets
3、如何使用演示文档
①用Dreamweaver打开CSS2_ex文件夹中的CSS2_NO_CSS.html文件;
②在Dreamweaver中,拖动已粘贴的CSS2文件夹中的文件。

⑴ 顶部
// 加在整个网页上
body {
        margin: 0; //去掉外边距
        padding: 0; //去掉内边距
        color: #333333; //字体颜色
        background-color: #F1D3A7; //背景色
        font-family: Verdana, Arial, Helvetica, sans-serif; //字体
        font-size: small; //字体大小
}
// 加在连接上
a {
        text-decoration: none; //去掉下划线 
}

a img {
        border: 0; //去掉图片边框
}
// 加在段落上
p {
        margin: 0 0 1em; //段落外边距
}

⑵顶部
// 加在顶部上
#head {
        margin-bottom: 21px; 
        padding-top: 1px;
        background-color: #99CC33; //顶栏背景色
}
// 加在顶部的图片上
#homelink {
        display: block;   //显示为块级元素
        margin-top: 12px;
        margin-right: 24px;
        margin-bottom: 12px;
        margin-left: 24px;
        padding-top: 24px;
        padding-right: 0;
        padding-bottom: 6px;
        padding-left: 12px;
        background-image: url(images/rili.gif);
        background-repeat: no-repeat;
        background-position: 100% 100%;
}
// 加在顶部导航的6个连接上
#navlinks {
        margin: 0;
        color: #FFF;
        padding-top: 6px;
        padding-right: 36px;
        padding-bottom: 6px;
        padding-left: 36px;
        background-color: #CC9900;//6个连接背景色
}

⑶顶部
//设置导航中的6个连接排版
#navlinks li {
        display: inline; //显示横排6个连接
        margin-right: 6px;
        padding-right: 9px;
        border-right: 1px solid #99C;
        font-weight: bold; //字体加粗
}
//改变6个连接的颜色
#navlinks li.last {
        border-right: 0; //去掉右边框
}

#navlinks a {
        color: #D4EC84; //改变连接的颜色
}
//设置日期位置等
#today {
        margin-top: 0px;
        padding: 0 24px 0 0;
        color: #FFF;
        font-weight: bold; //字体加粗
        text-align: right; //右对齐
        line-height: 1;  //行间的距离
}

⑷正文
//设置正文的图片与文字的位置、大小
#content {
        float: left; //向左浮动
        padding: 0 240px 48px 36px;
}
//设置(××公司:发展史)标题
#content h1 {
        margin: 0 33% 15px -24px;
        padding: 6px 24px;
        background: #FFF;
        color: #686397;
        font-size: 18px;
}
//设置上面标题中的(××公司)颜色下面的
#content h1 b {
        color: #B0D742;
}

⑸正文
// 设置下面的(××公司)标题
#content h2 {
        margin: 6px 0;
        padding-bottom: 3px;
        border-bottom: 1px solid #B0D742;
        font-size: 18px;
}
//设置图片位置、外边距
#content img.deng {
        float: left; //向左浮动
        margin: 12px 12px 12px 0;
}

⑹右栏
//设置右栏位置、大小
#sidebar {
        float: left;
        width: 204px;
        margin: 0 0 48px -216px;//-216是自己微调的
}
//设置搜索栏与两个小标题的背景色
#sidebar form, #sidebar div h3 {
        background: #9B96CA; //背景色
}
//调整搜索栏背景的位置
#sidebar form {
        margin: 0;
        padding: 9.6px;
}
//调整搜索栏按钮的位置
#sidebar form .text {
        width: 108px;//通过调整宽度来设置按钮位置
}

⑺右栏
//调整右栏背景色、字体色等
#sidebar div {
        background: #3A3C2D; color: #FFF;
        padding: 0 12px 12px;
        margin-top: 9px;
        }
//调整右栏两个小标题字体大小等
#sidebar div h3 {
        font-size: 15px;
        margin: 0 -12px; padding: 5px 12px;
}

⑻右栏
//调整右栏上半部分(现代照明技术)的下边框、字体等
#zhaoming h4 {
        margin: 0 0 6px;
        padding: 6px 0;
        border-bottom: 1px solid #FFF;
        font-weight: normal;
}
//将下面文字段落第一行改为斜体
#zhaoming p:first-line {
        font-style: italic;
}
//调整右栏图片
#zhaoming img {
        display: block; //显示为块级元素
        margin: 12px auto 0;
}

⑼右栏
//修改调整右栏下半部分(存档)字体等
#post-archive table {
        margin: 0 auto;
        font-size: small;
}
//控制2008年3月字体等
#post-archive caption {
        margin: 12px auto 0;
        font-size: larger;
        font-weight: bold;
}
//修改日历的单元格边框、风格、颜色等
#post-archive td {
        padding: 0;
        border: 1px solid #787A6B;
        background: #5B5D4E; color: #222;
        text-align: center;
}
//修改日历的连接的字体、颜色、背景等
#post-archive table a {
        display: block; //显示为块级元素
        font-weight: bold;
        color: #FFF;
}
#post-archive table a:hover {
        background: #ABD240;
}

⑩底部
//修改底部背景色等
#footer {
        clear: both;//在左右两侧均不允许浮动元素
        padding: 30px 36px;
        background: #A0C63A;
}
//修改底部外边距
#footer p {
        margin: 0;
}
//修改眉脚连接、下划线
#footer a {
        color: #333;
        text-decoration: underline;
}

 

 曹鹏CSS教程学习笔记     ⑵      内容摘要

 

曹鹏CSS教程学习笔记⑵ - 火力光波 - 火力光波的博客

  评论这张
 
阅读(1594)| 评论(9)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017