您的位置：首页 > Web前端 > CSS

css 仿csdn（main右浮动，side左浮动）

2012-07-23 18:15 295 查看

test.css

@CHARSET "UTF-8";

body{
background:url(/zzx/images/body_bg.jpg) repeat-x top;
color:#333; text-align:center;
font-size:12px;
font-family:Arial,Console,Verdana,Courier New;
}

a{
color:#369;
text-decoration:none;
}

a:hover{
text-decoration:none;
color:#200;
}

#container {
background: url("/zzx/images/head_bg.jpg") no-repeat scroll center top transparent;
}

#header {
width: 980px;
height: 30px;
margin: 0px auto;
padding: 50px 0px 0px;
text-align: left;
}

.header{}

#navigator{
display:block;
clear:both;
width:980px;
height:42px;
margin:0 auto;
padding:22px 0 0 0;
text-align:left;
}

.navigator{
text-align:right;
}

#body {
display: block;
width: 960px;
margin: 0px auto;
padding: 9px;
border: 1px solid rgb(221, 221, 221);
background: none repeat scroll 0% 0% rgb(255, 255, 255);
border-radius: 8px 8px 8px 8px;
text-align: left;
}

#body:after{
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}

#main {
float: right;
width: 734px;
overflow: hidden;
padding: 7px;
border: 1px solid rgb(221, 221, 221);
border-radius: 4px 4px 4px 4px;
}

#side {
float: left;
width: 200px;
overflow: hidden;
line-height: 120%;
}

.side {
line-height: 120%;
}

.panel {
margin: 0px 0px 10px;
padding: 7px;
border: 1px solid rgb(221, 221, 221);
border-radius: 5px 5px 5px 5px;
}

#panel_Profile {
}

.panel_head {
clear: both;
height: 30px;
padding: 0px 10px;
border-radius: 4px 4px 4px 4px;
background: url("/zzx/images/panel_head_bg.jpg") repeat-x scroll center top transparent;
color: rgb(51, 51, 51);
font: bold 12px/30px Arial;
text-indent: 5px;
}

.side ul {
margin: 0px;
padding: 0px;
}

.side .panel_body {
padding: 4px 5px;
}

test.jsp

<%@ page language="java" contentType="text/html; utf-8"
pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<link href="/zzx/jsp/blogjsp/test.css" type="text/css" rel="stylesheet">
</head>
<body>
<div id="container">
<div id="header">
<div class="header">
header
</div>
</div><!-- id="header" -->

<div id="navigator">
<div class="navigator_bg"></div>
<div class="navigator">
navigator
</div>
</div><!-- id="navigator" -->

<div id="body">
<div id="main">
<div class="main">
main
</div>
</div><!-- class="main" -->
<div id="side">
<div class="side">
<div id="panel_Profile" class="panel">
<ul class="panel_head"><span>个人资料</span></ul>
<ul class="panel_body profile"></ul>
</div>
</div><!-- class="side" -->
</div>
</div><!-- id="body" -->

</div>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航