实例学习之仿点点博客_仿点点轻博客-CSDN博客

本文链接：https://blog.csdn.net/u010028980/article/details/8762248

学习自学校社团教程

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="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="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="images/article.jpg" />
                    <p>梦想中我们的结局，大概就是这样子的吧。<br />
                    只可惜就算大声呼喊你的名字，你也消失了呢。</p>
                </div>
            </div>
            
            <div class="article">
            	<img src="images/head2.png" class="head_img" />
                <span></span>
            	<div class="message">
                	<img src="images/article2.jpg" />
                    <p>粉红色的米库酱！意外的还挺好看呢~~</p>
                </div>
            </div>
            <br />
        </div>
        
        <div id="right">
        	<div class="main"><b>热门标签</b></div>
        	<ul id="label">
            	<li><img src="images/love.png" />动漫</li>
                <li><img src="images/love.png" />娱乐</li>
                <li><img src="images/love.png" />消费</li>
                <li><img src="images/love.png" />购物</li>
                <li><img src="images/love.png" />科技</li>
                <li><img src="images/love.png" />新闻</li>
                <li><img src="images/love.png" />轻博客</li>
            </ul>
            <div id="bye2012"><img src="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是可以重复的并是子级的。