实例学习之仿点点博客

学习自学校社团教程

html:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Demo</title>
<link rel="stylesheet"  href="style.css">
</head><body><div id="header"><img src="data:images/logo.png" id="logo" /><h2>让博客从此简单</h2><div id="toolbar"><a href="#"><span></span>博客搬家</a><a href="#"><span></span>关于点点</a></div></div><!----><div id="content"><div id="left"><div class="article"><img src="data:images/head.png" class="head_img"/><!--解释下id与class的区别：一个页面中，id是唯一的就比如好像是学号，而class是姓名，根据学号和姓名都可以找到相应的学生，不过学号只能找到一个，相同姓名的学生可以有很多类似，id不能重复，当一个元素id=“one”已经确定，其他元素的id就不能叫one了，class就不一样了，允许无限多的元素命名为class=“one”Css中给id添加样式用#号，class用.；例如：#one{font:12px;}.one{font:12px;}--><span></span><div class="message"><img src="data:images/article.jpg" /><p>梦想中我们的结局，大概就是这样子的吧。<br />只可惜就算大声呼喊你的名字，你也消失了呢。</p></div></div><div class="article"><img src="data:images/head2.png" class="head_img" /><span></span><div class="message"><img src="data:images/article2.jpg" /><p>粉红色的米库酱！意外的还挺好看呢~~</p></div></div><br /></div><div id="right"><div class="main"><b>热门标签</b></div><ul id="label"><li><img src="data:images/love.png" />动漫</li><li><img src="data:images/love.png" />娱乐</li><li><img src="data:images/love.png" />消费</li><li><img src="data:images/love.png" />购物</li><li><img src="data:images/love.png" />科技</li><li><img src="data:images/love.png" />新闻</li><li><img src="data:images/love.png" />轻博客</li></ul><div id="bye2012"><img src="data:images/2013.png" /></div></div></div><br /><div id="footer">版权所有 Copyright.All Rights Reserved <br />技术支持：软件学院 软件工程专业 hf<br />地址：XX省XX市XXXX大学 | 邮政编码：xxxxxxx<br /></div>
</body>
</html>

CSS:

*{margin:0;padding:0;
}
/*这里的*表示通配符，指网页中的所有标签，这里把所有标签的外边距和内边距都设置成0，因为每个标签都有自己的默认的外内边距*/body{background:url(images/bg.jpg) repeat-x #DCDFE4;
}#header{height:75px;background:#144465;
}
/*将header设置成75px，宽度不需要设置，这样就可以兼容不同分辨率*/#header #logo{margin-top:15px;margin-left:250px;
}/*下面解释了margin的属性，margin-top是把margin属性分开来写的*/ #header h2{color:#CCC;font-size:16px;font-family:Verdana, Geneva, sans-serif;margin-top:-20px;margin-left:330px;
}#header #toolbar{width:200px;float:right;margin-right:150px;margin-top:-10px;
}#header #toolbar a{text-decoration:none;color:#76B3A2;font-family:Verdana, Geneva, sans-serif;font-size:14px;
}#header #toolbar a:hover{color:#fff;
}#content{width:1000px;margin:0 auto;
}
/*解释下margin:0 auto;的意思，margin是外边距，有四个参数，分别是上，右，下，左，当只写一个参数，例如;
margin:10px;表示上右下左都是10px;当有两个参数，margin：10px 5px;表示上和下是10px;左和右是5px;
也就是对面是相同的，当有三个参数，margin:5px 10px 15px;上面是5px,右是10px;下是15px；缺省对边
取相等，所以左也是10px;这里写的是margin：0 auto;2个参数，上边距和下边据都是0，左右是auto，auto就是自适应边距，也就是左右平均分配，就起到了居中的效果了
*/#content #left{width:660px;float:left;
}#content #right{width:330px;float:left;/*margin-right:-8px;margin-top:22px;border:1px  green;*/margin-left:5px;
}.article{width:538px;background:#FFF;margin-left:100px;margin-top:20px;position:relative;border-radius:6px;box-shadow:0 0 10px #999;
}.article .head_img{position:absolute;left:-80px;border-radius:4px;box-shadow:0 0 10px #999;
}.article .message{margin-left:20px;margin-right:10px;
}.article .message p{font-size:13px;font-family:"微软雅黑";margin:10 px 0 20px;padding:10px 10px 20px;
}.article span{border-left:15px solid transparent;/*transparent:*/border-top:15px solid #fff;position:absolute;left:-15px;top:24px;
}.article .head_img{position:absolute;left:-80px;border-radius:4px;box-shadow:0 0 10px #999;
}#right{margin-top:20px;
}#right .main{width:250px;height:40px;background:#f7f8f8;border-radius:5px;line-height:40px;text-align:center;
}#right #label{list-style-type:none;/*none,去掉list前面的小圆点*/font:13px "微软雅黑";
}#right #label li{width:230px;height:38px;background:#D4D7D9;border-bottom:1px solid #ccc;/*list之间显示出小划线*/border-right:1px solid #ccc;border-left:1px solid #ccc;box-shadow:2px 2px 4px #ccc;line-height:38px;cursor:pointer;padding-left:18px;
}#right #label li:hover{background:red;  /*当鼠标悬停在上面的时候会有颜色的改变*/
}#right #label li img{height:18px;width:18px;margin-right:10px;position:relative;top:5px;
}#right #bye2012{width:245px;height:323px;border-radius:5px;display:block;margin-left:4px;margin-top:50px;box-shadow:2px 2px 4px #999;
}#footer{width:1000px;height:50px;margin:15px auto;margin-bottom:50px;border-top:6px solid #9C9;text-align:center;font-size:12px;font-family:Verdana, Geneva, sans-serif;padding-top:5px;clear:both;
}

一些知识：

id是元素的名称，可以供js或其它脚本程序来访问该元素对象，而class是该元素的css类名。

id的值在整个当前网页中应该是唯一的，即某一个元素定义了id="aaa"，那么这个网页中其它的元素

的id就不能定义成aaa，而class则可以。
据说W对于ID与CLASS的设定是ID具有唯一性，CLASS 具有普遍性。

大结构一定是用ID。比如标志、导航、主体内容、版权。这些呢接我自己制定的规范命名为#logo ,

#nav , #content , #copyright 这些是雷打不动的命名。

ID需要具有唯一性，并且尽量在外围使用。而CLASS具有可重复性，并且尽量在结构内部使用。这样

做的好处是有利于网站代码的后期维护与修改，这样的做法就会让所有的CLASS都成为ID的子级或是

孙级。你可以有两个儿子但你能有两个爸爸吗，就是这个道理。

在我们写 CSS的时候可以写成这样 #father .child {…} 尽量不要让Class包含ID，.father #child

{…}如果写成这样显得有点可笑。当然这也不是铁定的，特殊情况需要特殊对待嘛。

ID与CLASS使用原则，归总起来一句话：ID是唯一的并是父级的，CLASS是可以重复的并是子级的。

实例学习之仿点点博客相关推荐

template标签_Django实战: 利用自定义模板标签实现仿CSDN博客月度归档
应网友慕之岩的请求,现提供下Django项目中如何使用自定义标签实现仿CSDN博客的月度归档(如下图所示).要求按月统计每个月发表的博文篇数, 跳过空白月份,最后结果按发布时间逆序排列.点击每个月份可 ...
php设计的个人页面成品,PHP仿个人博客（1）数据库与界面设计
自学PHP大半年多了,断断续续地,但是最终还是坚定了我的想法,将PHP继续下去,所以写这个PHP的博客是为了找个稳定的 PHP工作,不求工资多高,但求一收留之地.我能看懂大部分英语文档,人不蠢,爱学习 ...
轻博客只是大众喜新厌旧的产物
大众总是喜新厌旧的,在被文字的千篇一律的轰炸中,轻博客的推出,大大地满足了大众的视觉享受.不过没有商业模式支持的轻博客生存并不容易,大众最终还是要回归到有内容的文字上,也成就了科技博客的崛起. 自点点 ...
JSONObject简介 - 月月鸟0820 - 博客园
月月鸟0820 跟随兴趣的引导,每天学习一点点.... 博客园首页博问闪存新随笔联系订阅管理随笔- 46 文章- 0 评论- 128 JSONObject简介本节摘要:之前对JSO ...
html5互动场景制作系统,春哥技术博客高仿易企秀H5场景应用制作平台源码V1.0正式版发布...
经过一个月的艰苦努力,春哥团队最新作品即将与大家见面了,<2015年6月春哥技术博客高仿易企秀H5场景应用制作平台源码V1.0正式版>即将来临, 现在春哥接受预定啦,春哥技术博客依然走价格 ...
仿站长之家查询源码php,仿站长之家博客织梦IT资讯博客源码 v1.0
有福了,给大伙分享个好源码: 仿站长之家博客织梦IT资讯博客源码,效果相当的炫酷,相当简洁大气高端,模板简单,全部已数据调用,只需后台修改栏目名称即可模板介绍仿站长之家博客织梦IT资讯博客源码 ...
仿DUX大前端博客主题Typecho模板
仿DUX大前端博客主题Typecho模板 ☑️ 编号:ym342 ☑️ 品牌:Typecho ☑️ 语言:php ☑️ 大小: ☑️ 类型:仿DUX大前端博客 ☑️ 支持:pc+wap
WordPress轻语博客QUX8.8免授权模板源码+仿DUX大前端
正文: WordPress轻语博客QUX8.8免授权模板源码+仿DUX大前端. 这个主题是二开的DUX大前端,UI方便基本是一摸一样的,只是有少部分模块是不同的,已经去除授权. 关于模板的功能我就直接 ...
帝国CMS仿猫啃字体下载网整站源码自适应个人博客类模板
帝国CMS仿猫啃字体下载网整站源码自适应个人博客类模板自适应]帝国CMS仿猫啃字体下载网整站源码系统版本:帝国CMS7.5 UTF-8 服务器:win/linux 语言:PHP 数据库:MYSQL ...
MIPCMS-005高仿JustNews自适应博客资讯模版
这个005-MIP模板依旧免费下载,可以用来做MIP博客.MIP自媒体.MIP资讯类的网站,模板做的匆忙,没有来检查. 这次发布的MIP模板,没有添加任何MIP广告组件,当然统计代码还是有的. 模版页 ...

实例学习之仿点点博客

实例学习之仿点点博客相关推荐

最新文章

热门文章