界面初建

来源：互联网发布：淘宝买电玩人马皮肤编辑：程序博客网时间：2024/06/11 03:24

@CHARSET"UTF-8";
#list{
width:600px;
height:514px;
boeder:2px solid #ccc;
float:right;
}
#user{
width:340px;
height:250px;
boeder:2px solid #ccc;
float:left;
margin:0 0 10px 0;
}
#pics{
width:340px;
height:250px;
boeder:2px solid #ccc;
float:left;

}

@CHARSET"UTF-8";
*{
padding:0;
margin:0
}
body{
width:960px;
margin:0 auto;
background:#fff;
font-size:14px;
}
ul{
list-style-type:none;
}
h2
{
font-size:14px;
background:
height:25px;
line-height:25px;
text-indent:10px;
}

#header{
width:auto;
height:150px;
border:2px solid #ccc:
margin:10px 0;
}

#header h1{
font-size:12px;
width:210px;
height:39px;
background:url(../../images/logo1.jpg)no-repeat;
margin:40px 0 0 50px;
}
#header h1 a{
width:210px;
height:39px;
display:block;
text-indent:-9999px:
}
#header ul{
background:red;
text-align:right;
padding:0 50px 0 0;
}
#header ul li{
display:inline;

}

#footer{
width:auto;
height:60px;
text-align:center;
padding:10px 0 0 0;
}
#footer p{
font-size:12px;
letter-spacing:1px;
padding:5px 0 0 0;
}

<head>
<meta http-equiv="Content-Type"content="text/html;charset=utf-8"l>
<title>Your Title</title>
<link rel="stylesheet"type="text/css"href="style/1/basic.css"l>
<link rel="stylesheet"type="text/css"href="style/1/index.css"l>
</head>
<body>

<div id="header">
<h1><a href="index.php">多用户留言系统</a></h1>
<ul>
<li>登录</li>
<li>个人中心</li>
<li>风格</li>
<li>管理</li>
<li>退出</li>
</ul>
</div>

<div id="list">
<h2>帖子列表</h2>
</div>

<div id="user">
<h2>新进会员</h2>
</div>

<div id="user">
<h2>最新图片</h2>
</div>

<div id="footer">
<p>版权所有翻版必究</p>
</div>

阅读全文

0 0