css (第一个较为成功的css)

最新推荐文章于 2021-08-03 18:42:18 发布

longyuan20102011

最新推荐文章于 2021-08-03 18:42:18 发布

阅读量1.1k

点赞数

分类专栏： css 文章标签： css class border scroll float table

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

版权

css 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

@CHARSET "UTF-8";


div, p, li, em {
    font-family: Verdana,宋体;
    font-size: 12px;
    font-style: normal;
}

ul, li {
    list-style-type: none;
}


body {
    padding: 0px;
    margin: 0px auto;
    height: 100%;
    background: url("/test2/body_bg.jpg") repeat-x scroll 0% 0% rgb(171, 221, 247);
}


#header {
    position: relative;
    margin: 0px auto;
    width: 1022px;
    height: 279px;
}

.logo {
    position: absolute;
    z-index: 1;
    left: 50px;
    top: 15px;
    width: 128px;
    height: 152px;
}


.menu {
    float: right;
    margin-right: 22px;
    width: 790px;
    height: 85px;
}

#content {
    margin: auto;
    width: 1024px;
    height: auto;
}

.left {
    float: left;
    width: 129px;
    height: 491px;
    background: url("/test2/left.jpg") repeat scroll 0% 0% transparent;
}

.middle{ 
	float:left;
	width:363px; 
	height:auto;
}

.middle-tzgg {
    float: left;
    width: 363px;
    height: 196px;
}

.middle-news{ 
	float:left; 
	width:363px; 
	height:170px;
}

.right {
    float: left;
    width: 80px;
    height: 491px;
    background: url("/test2/right.jpg") repeat scroll 0% 0% transparent;
}


.tzgg-text li,.news-text li{
	float:left; 
	margin-left:0px;
	padding-left:28px; 
	width:272px; 
	line-height:24px; 
	font-size:13px;
    background:url(/test2/li.jpg) no-repeat ;
}
 
.tzgg-text li a,.news-text li a{ 
	color:#955418; 
	text-decoration:none;
}

.tzgg-text li a:hover,.news-text li a:hover{ 
	color:#ff6600; 
	text-decoration:none;
}


.middle-one {
    float: left;
    width: 452px;
    height: 491px;
}

.link {
    height: 124px;
    background: url("/test2/link.jpg") no-repeat scroll 0% 0% transparent;
}

.link p select {
    margin: 20px 0px 0px 150px;
    width: 142px;
    height: 21px;
}

.work {
    float: left;
    width: 452px;
    height: 220px;
}

.pic-text {
    width: 452px;
    height: 32px;
    background: url("/test2/hlsg3.jpg") no-repeat scroll 0% 0% transparent;
    color: rgb(204, 153, 255);
    font-size: 12px;
}


.conttent-bottom {
    float: left;
    width: 1024px;
    height: 201px;
}

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>

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

<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; utf-8" />

    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
    <title>My JSP 'test.jsp' starting page</title>
	<link rel="stylesheet" type="text/css" href="test.css"/>
  </head>
  
  <body>
   <div id="header">
    <div class="logo"> 
     <a><img src="/test2/logo.jpg"></img></a>
    </div><!-- logo -->
    <div class="menu">    
     <table width="100%" border="0" cellspacing="0" cellpadding="0">
	  <tr>
	   <a><img src="/test2/menu1.jpg"></img></a>
	   <a><img src="/test2/menu2.jpg"></img></a>
	   <a><img src="/test2/menu3.jpg"></img></a>
	   <a><img src="/test2/menu4.jpg"></img></a>
	   <a><img src="/test2/menu5.jpg"></img></a>
	   <a><img src="/test2/menu6.jpg"></img></a>
	  </tr>
	 </table>
	</div>
	<div class="flash">
	 <img src="/test2/1.jpg" alt="" width="1024" height="194"/>
	</div>
   </div><!-- header -->
   <div id="content">
	<div class="left"></div>
	<div class="middle">
	 <div class="middle-tzgg">
	  <table width="363" border="0" cellspacing="0" cellpadding="0">
        <tr>
         <td><img src="/test2/gg1.jpg" width="363" height="51" /></td>
        </tr>
        <tr>
    	 <td class="tzgg-text" height="106" valign="top" background="/test2/gg2.jpg">	                
          <ul>  
           <li><a title="关于开展家长育儿心得征文活动的通知" href="180926.html" target="_blank" style="" >关于开展家长育儿心得征文...</a></li>
           <li><a title="大级幼儿通知"                      href="176598.html" target="_blank" style="" >大级幼儿通知</a></li>
	       <li><a title="招生报名取号补充通知"              href="176446.html" target="_blank" style="" >招生报名取号补充通知</a></li>
          </ul>
		 </td>
  		</tr>
  		<tr>
    	 <td><img src="/test2/gg3.jpg" width="363" height="39" border="0" usemap="#Map2" /></td>
  		</tr>
	  </table>
	 </div><!-- middle-tzgg -->
	 
	 <div class="middle-news">
	  <table width="363" border="0" cellspacing="0" cellpadding="0">
  		<tr>
    	 <td><img src="/test2/news1.jpg" width="363" height="52" /></td>
  		</tr>
 		<tr>
   		 <td class="news-text" height="82" valign="top" background="/test2/news2.jpg">
		  <ul>
           <li><a title="大班幼儿参加“奇思妙想”少年儿童科幻绘画大赛" href="184257.html" target="_blank" style="" >大班幼儿参加“奇思妙想”...</a></li>
           <li><a title="喜讯：科幻绘画获市奖项" href="184218.html" target="_blank" style="" >喜讯：科幻绘画获市奖项</a></li>
	       <li><a title="光荣榜：越秀区幼儿棋类比赛个人赛获奖名单" href="184215.html" target="_blank" style="" >光荣榜：越秀区幼儿棋类比...</a></li>
	      </ul>
		 </td>
		</tr>
  	    <tr>
    	 <td><img src="/test2/news3.jpg" width="363" height="37" border="0" usemap="#Map3" /></td>
 		</tr>
	  </table>
	 </div><!-- middle-news  -->
	 
	 <table width="363" border="0" align="left" cellpadding="0" cellspacing="0">
  	  <tr>
       <td  height="125" valign="middle" class="link" >
		<p><!--友情链接--> <span id="region___ctl00_mcr_friendHref___lblFriendHref"><select onChange="window.open(this.options[this.selectedIndex].value);" name="select" >
          <option selected>请选择..</option>
          <option value="http://www.zgyey.com">中国幼儿园门户</option></select></span>
        </p>
	   </td>
      </tr>
	 </table>
	</div><!-- middle -->
	
	<div class="middle-one">
	  <div class="photo">
	   <table width="451" border="0" cellspacing="0" cellpadding="0">
  		<tr>
    	 <td><img src="/test2/hlsg1.jpg" width="451" height="61" /></td>
  		</tr>
 		<tr>
   		 <td class="photo-content" height="178" valign="top" background="/test2/hlsg2.jpg">
		 </td>
		</tr>
  	    <tr>
    	 <td class="pic-text"></td>
 		</tr>
	   </table>
	  </div><!-- photo -->
	  <div class="work">
	   <table width="451" border="0" cellspacing="0" cellpadding="0">
  		<tr>
    	 <td><img src="/test2/work1.jpg" width="451" height="61" /></td>
  		</tr>
 		<tr>
   		 <td class="work-pic">
   		  <img src="/test2/work2.jpg" width="451" height="131" />
		 </td>
		</tr>
  	    <tr>
    	 <td><img src="/test2/work3.jpg" width="451" height="26" border="0" usemap="#Map3" /></td>
 		</tr>
	   </table>
	  </div><!-- work  -->
	</div><!-- middle-one  -->
	<div class="right"></div>
	<div class="conttent-bottom">
     <table width="1024" height="201" border="0" cellpadding="0" cellspacing="0">
        <tr>
          <td><img src="/test2/bottom1.jpg" width="266" height="201" /></td>       
          <td><img src="/test2/bottom2.jpg"  /></td> 
          <td><img src="/test2/bottom3.jpg"  /></td>       
          <td><img src="/test2/bottom4.jpg"  /></td> 
          <td><img src="/test2/bottom5.jpg" width="" height="" /></td>            
        </tr>
     </table>
    </div><!-- content-bottom -->
   </div><!-- content -->
  </body>
</html>

longyuan20102011

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css (第一个较为成功的css)

@CHARSET "UTF-8";div, p, li, em { font-family: Verdana,宋体; font-size: 12px; font-style: normal;}ul, li { list-style-type: none;}body { padding: 0px; margin: 0px auto;
复制链接

扫一扫

专栏目录