css 高手进,运行代码后右边空白填写相应人的信息。

yuanxu_zhao 发布于 2012/03/23 16:44
阅读 520
收藏 0
CSS

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style>
body {
 margin: 0;
 padding: 0;
 font-family: Arial, Helvetica, sans-serif;
 font-size: 12px;
 color: #4D4D4D;
}

h1, h2, h3 {
 margin: 0;
 padding: 0;
 font-weight: normal;
 color: #3E3530;
}

h1 {
 font-size: 2em;
}

h2 {
 font-size: 2.8em;
}

h3 {
 font-size: 1.6em;
}

p, ul, ol {
 margin-top: 0;
 line-height: 180%;
}

ul, ol {
}

a {
 text-decoration: none;
 color: #3E3530;
}

a:hover {
}

#wrapper {
 margin: 0 auto;
 padding: 0;
}

/* Header */

#header {
 height: 20px;
 margin: 0 auto;
 padding: 0px 0px 0px 0px;
 /*background: url(images/img02.jpg) no-repeat left top;*/
}

 

/* Page */

#page {
 width: 838px;
 margin: 0 auto;
 background: url(images/img04.jpg) repeat-y right top;
 padding: 0px;
}

#page-bgtop {

 background: url(images/img03.jpg) no-repeat right top;
}

#page-bgbtm {
 background: url(images/img05.jpg) no-repeat right bottom;
}
/* Sidebar */

#sidebar {
 float: left;
 width: 370px;
 margin: 0px;
 padding: 0px 0px 0px 0px;
 color: #787878;
}

#sidebar ul {
 margin: 0;
 padding: 0;
 list-style: none;
}

#sidebar li {
 margin: 0;
 padding: 0;
}

#sidebar li ul {
 margin: 0px 0px;
 padding-left: 25px;
 padding-bottom: 30px;
}

#sidebar li li {
 line-height: 30px;
 margin: 0px 0px;
 padding: 0px 0px 0px 15px;
 border-left: none;
 background: url(images2/img07.jpg) no-repeat left 12px;
}

#sidebar li li span {
 display: block;
 margin-top: -20px;
 padding: 0;
 font-size: 11px;
 font-style: italic;
}

#sidebar h2 {
 height: 46px;
 padding-top: 13px;
 padding-left: 50px;
 width:266px;
 margin-bottom: 10px;
 background: url(images/img06.jpg) no-repeat left 4px;
 letter-spacing: -.5px;
 font-size: 1.8em;
 color: #696969;
}

#sidebar p {
 margin: 0 0px;
 padding: 0px 10px 5px 20px;
 text-align: justify;
 width:180px;
}

#sidebar a {
 border: none;
 color: #4D4D4D;
}

#sidebar a:hover {
 text-decoration: underline;
 color: #8A8A8A;
}


#xxx {
 background-color:#fff;
 position:absolute;
 left:366px;
 width: 590px;
 border-bottom: 1px dotted #E7E2DC;
}
</style>
</head>
<body>
<div id="wrapper" >
 <div id="header">
  
 </div>
 <!-- end #header -->
 <div id="page">
 <div id="page-bgtop">
 <div id="page-bgbtm">
 
 <div id="sidebar">
          <ul class="ul">
    <li class="li">
     <h2 class="h2">张三</h2>
     <div  >
     &nbsp;
     </div>
     <div style="clear: both;">&nbsp;</div>
     
    </li>
    
    <li class="li">
     <h2 class="h2">张三</h2>
     <p class="p">Mauris vitae nisl nec metus placerat perdiet est. Phasellus dapibus semper consectetuer hendrerit.</p>
     
    </li>
    <li  class="li">
     <h2 class="h2">李四</h2>
     <ul class='liul'>
      <li class="lili"><a href="#" class="a">Aliquam libero</a></li>
      <li class="lili"><a href="#" class="a">Consectetuer adipiscing elit</a></li>
      <li class="lili"><a href="#" class="a">Metus aliquam pellentesque</a></li>
      <li class="lili"><a href="#" class="a">Suspendisse iaculis mauris</a></li>
      <li class="lili"><a href="#" class="a">Urnanet non molestie semper</a></li>
      <li class="lili"><a href="#" class="a">Proin gravida orci porttitor</a></li>
     </ul>
    </li>
    
   </ul>
    </div>

       <!-- end #sidebar -->
  <div style="clear: both;">&nbsp;</div>
 </div>
 </div>
 </div>
 <!-- end #page -->
</div>

</body>
</html>

------------------------ 上面是代码----------------------下面是图片素材------

css 高手进,运行代码后右边空白填写相应人的信息。

img04.jpgimg05.jpgimg06.jpgimg07.jpgimg03.jpg

以下是问题补充:

@yuanxu_zhao:上面图片:名称为img03.jpg、img04.jpg、img05.jpg、img06.jpg、img07.jpg,鼠标放上去可以看到。 (2012/03/23 16:46)
@yuanxu_zhao:右边放入信息后用border-bottom: 1px dotted #E7E2DC;将其分开。 (2012/03/23 16:47)
加载中
0
北落
北落
jpg的还想透明?  做成gif的或者png的
返回顶部
顶部