寒假已过去半个月,自己还是太懒,做的事情太少,很对东西都丢了,像css的很多属性和用法，一部分都忘记，果然还是经常用，才能更熟练。前些天在 学Photoshop，曾经以为很简单，没想到，往深了学，东西太多，收获还是有不少，更加觉得充分利用网络资源是进步的工具，以后再也不用担心图的问题 了，切图，修图，作图，基本都差不多。寒假在家任务还是很重的，不能被泡沫剧给淹没了。今天做了个论坛的头.界面如下：
其实很简单，但我花的时间却比较长，差不多做了3个多小时才弄好，原因还是CSS部分，属性方法忘记很多，东西还是需要经常用才能熟。
代码如下：
<html >
<head>
<meta charset=‘utf-8‘>
<title>论坛的表头</title>
<style type="text/css">
#div1
{
width: 150px;
height: 400px;
margin-left: 300px;
background-color: #E5EDF2;
border: 1px solid #CDCDCD;
}
h2
{
font-size: 13px;
font-weight: lighter;
padding-top: opx;
line-height: 25px;
margin-left: 10px;
margin-top: 5px;
border-bottom: 1px dotted #CDCDCD;
}
img
{
margin-left: 14px;
}
h3{
font-size: 13px;
font-weight: lighter;
padding-top: opx;
line-height: 25px;
margin-left: 12px;
margin-top: 5px;
margin-bottom: 0px;
}
#sun
{
margin-top: 0px;
padding-left:12px;
margin-bottom: 0px;
}
#sun img
{
padding-left: 0px;
margin: 0px;
}
#content
{
margin-top: 0px;
margin-left: 12px;
}
#content p{
margin-top: 6px;
line-height: 5px;
font-size: 13px;
}
#content p span{
padding-left: 38px;
}
#right{
padding-top: 0px;
width:500px;
height: 210px;
line-height: 10px;
background-color: white;
border: 1px solid #CDCDCD;
position: absolute;top: 37px;left: 308px;
display: none;
}
#pic2{
margin-top:13px;
}
#right h2{
position: absolute;top: 0px;left: 135px;
}
#right #content2
{
width: 500px;
height;150px;
position: absolute;top: 25px;left: 135px;
}
#content2 p{
font-size: 13px;
margin-top: 25px;
margin: 10px;
}
#content2 p span{
padding-left: 60px;
}
#right #pic3{
position: absolute;top: 140px;left: 135px;
}
#pic3{padding-left: 10px;}
#pic3 img{
margin: 0px;
padding: 0px;
}
#mes{
font-size: 12px;
color:red;
}
#mes p {
margin: 0px;
line-height: 3px;
}
#mes a{
text-decoration: none;
color: black;
}
#mes img{
margin-top: 2px;
}
#mes a:hover{
text-decoration: underline;
color: red;
}
#mes #span1{
position: absolute;top:168px;left: 30px;
}
#mes #span2{
position: absolute;top:187px;left: 30px;
}
</style>
</head>
<body>
<script >
function setDisplay(){
var xx=document.getElementById(‘right‘);
xx.style.display=‘block‘;
}
function setHide(){
var xx=document.getElementById(‘right‘);
xx.style.display=‘none‘;
}
</script>
<div id=‘div1‘>
<h2>miaov.com</h2>
<div id=‘pic‘>
<div id=‘total‘>
<div id=‘pic1‘ onmouseover=‘setDisplay();‘>
<img src=‘images/1.jpg‘ >
</div>
<h3 >miaov.com</h3>
<div id=‘sun‘>
<img src=‘images/star_level3.gif‘>
<img src=‘images/star_level3.gif‘>
<img src=‘images/star_level3.gif‘>
</div>
</div>
<div id=‘right‘ onmouseover="setDisplay();" onmouseout="setHide();" onm>
<div id=‘pic2‘>
<img src=‘images/1.jpg‘ >
</div>
<h2>forever当前在线</h2>
<div id=‘content2‘>
<p>积分<span>3850</span><span>阅读权限<
/span>
80</p>
<p>最后登录
2016-1-20
精
华<span>2</span></p>
<p>帖子<span>1643</span><span>威望</span><span>1</span></p>
<p>金币<span>23个</span><span>体力</span><span>2380</span></p>
<p>激情<span>1650</span><span>注册时间<
/span>
2016-1-20</p>
</div>
<div id=‘pic3‘>
<img src=‘images/qq.gif‘>
<img src=‘images/userinfo.gif‘>
<img src=‘images/forumlink.gif‘>
</div>
<div id=‘mes‘>
<p><img src=‘images/pmto.gif‘><span id=‘span1‘><a href="#" >发短信息</a></span></p>
<p><img src=‘images/addbuddy.gif‘><span id=‘span2‘><a href="#">加为好友</a></span></p>
</div>
</div>
</div>
<div id=‘content‘>
<p>积分<span>3850</span></p>
<p>uid <span>100152</span></p>
<p>帖子<span>3502</span></p>
<p>威望<span>4</span></p>
<p>金币<span>672个</span></p>
<p>体力<span>756</span></p>
<p>激情<span>3568</span></p>
<p>注册时间 2016-1-20</p>
</div>
</div>
</div>
</body>
</html>，
像这种响应式的页面，基本思路都是建一个div层，然后设置display的属性即可。用到js里面的mouseover()和mouseout（）事件。