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

最新推荐文章于 2022-01-05 21:56:30 发布

longyuan20102011

最新推荐文章于 2022-01-05 21:56:30 发布

阅读量2.6k

点赞数

分类专栏： css 文章标签： css class div scroll header border

本文链接：https://blog.csdn.net/longyuan20102011/article/details/7776500

版权

css 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

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>

longyuan20102011

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css 仿csdn（main右浮动，side左浮动）

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:
复制链接

扫一扫

专栏目录