test

最新推荐文章于 2025-02-23 00:37:56 发布

原创最新推荐文章于 2025-02-23 00:37:56 发布 · 1.5k 阅读

CC 4.0 BY-SA版权

第一个网页

<!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; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
body,div,span,ul,li,p,h1,h2,h3,h4,h5,h6,img{ margin:0; padding:0; border:0} /*实现段落间距没有太大*/
h1{ line-height:40px; text-align:center; font-size:18px;}
h2{ line-height:26px; font-size:16px;}
body
{
background:url(images/beijing.jpg) repeat ;
font-size:14px; 
color:#FFFFFF; 
font-family:宋体,Arial, Helvetica,sans-serif;
}
.clr
{
clear:both;
}



#top{
width:100%;
background-color:#0E1215;
height:72px;
margin:0 auto; /*居中*/
}
#topin
{
width:892px;
height:72px;
margin:0 auto; /*居中*/
}
#nav
{
width:400px;
height:40px;
margin-top:30px;
float:right;
display:inline;
line-height:38px;/*不加就会出错*/
}
#nav li
{
width:80px;
height:40px;
float:left; /*左浮动；项目符号一行展示，很重要*/
display:inline;  /*取消上下的换行*/
list-style-type:none;/*每个列表前没有符号*/
text-align:center;
}
#nav a{ width:80px; height:40px; display:block; text-align:center; color:#FFF; text-decoration:none}
#nav a:hover{ background: #999; color:#000;}





#container
{
width:892px;
height:571px;
margin:0 auto;/*居中*/
margin-top:5px; /*重新设置上边距10px*/
/*border:1px solid #999999;*/
}
#header
{
width:892px;
height:298px;
margin:0 auto;/*居中*/
background-image:url(images/head_pic.jpg); /*图片宽度和高度设置和外围div设置一致就可以省去很多麻烦。如果不一致就要加入display:block;还要调整图片宽度高度*/
background-repeat:no-repeat;
}

#page
{
	width:892px;
	height:217px;/*居中*/
	margin:5px auto 0 auto ;/*重新设置上边距10px*/
	background:#efefef;
}
#left
{
width:284px;
height:217px;
float:left;
background: transparent  url(images/page_in_bg.jpg) repeat-y scroll right top; 
}
#left_top
{
height:20px; width:283px;
background:#DFDFDF url(images/page_bottom_bg.jpg) repeat-x scroll bottom;
padding-top:5px;
}
#left_bottom
{ height:177px; width:243px; /*以图片宽度设定width，以便div居中*/
margin:10px auto 10px auto;
}
#left_bottom img{
border:1px solid #ADADAD;
}
#left_bottom p{
color:#696969;
line-height:1.5em;
font-size:12px;
text-indent:2em;/*缩进2字*/
}


#mid
{
	width:350px;
	height:217px;
	float:left;
	background:transparent url(images/page_in_bg.jpg)  repeat-y top right;
}
#mid_top{
height:20px; width:349px;
background:#DFDFDF url(images/page_bottom_bg.jpg) repeat-x scroll bottom;
padding-top:5px;
}
#mid_bottom{
height:172px;
width:330px;
margin:10px;
}
#mid_bottom_1{
float:left;
width:120px;
height:60px;
color:#696969;
}
#mid_bottom_1 h2{ color:#702D60; font-size:15px; line-height:25px;}

.mid_bottom_r{
float:right;/*向右浮动*/
display:inline;
width:210px;
height:84px;
}
.mid_bottom_r li{
width:60px;
height:84px;
margin-right:10px;
display:inline;
list-style:none;
float:left;/*不加的话列表就会纵向展示*/
}
.mid_bottom_r li p{ font-size:12px; color:#0000FF; }
.mid_bottom_b
{
width:330px;
height:72px;
padding-top:15px; 
margin-top:15px; 
border-top:1px dashed #999;
float:left;
margin:0 auto;
list-style:none;
}
.mid_bottom_b li{
width:330px;
height:25px; 
/*display:block;*/
list-style:none;
line-height:25px;/*  让内容垂直居中  */
padding-left:10px;
background:transparent url(images/list_style.jpg) 0 10px no-repeat; /*不能加fixed*/
font-size:12px;
color:#717171;
}



#right
{
	width:258px;
	height:217px;
	float:left;
/*	background-color: transparent;
	background-repeat: repeat-y;
	background-position: left top;*/
}
#right_top{
height:20px; width:258px; /*258=892-284-350*/
background:#DFDFDF url(images/page_bottom_bg.jpg) repeat-x scroll bottom;
padding-top:5px;
}
#right_bottom
{width:238px; /*238=258-10-10*/
height:172px;/*172=217-25-10-10*/
padding:10px;
}
#right_bottom img{ margin-left:27px;margin-right:27px;}
#right_bottom p{font-size:12px; color:#717171; line-height:20px;}

#foot
{
	width:892px;
	height:40px;/*居中*/
	margin:5px auto 0 auto;/*设置上边距10px,水平居中*/
	text-align:center;/*文本水平居中*/
	line-height:40px;/*单行文本垂直居中*/
}
#foot p
{ vertical-align:bottom;
text-align:center;
font-size:12px;
color:#696969;
}
/*.STYLE2 {font-size: 10px}*/
</style>
</head>

<body >
<div id="top">
	<div id="topin">
    	<div id="logo" style="float:left;"> <img src="images/logo.jpg" alt=""    /></div>
        <ul id="nav"   >
        <!--采用项目符号列表展示导航 -->
            
                <li><a >首页</a></li>
                <li><a href="index4.html" target="_blank">关于我们</a></li>
                <li><a href="index.html" target="_blank">我们的技术</a></li>
                <li><a href="index.html" target="_blank">案例展示</a></li>
                <li><a href="index.html" target="_blank">联系我们</a></li>
                   
        </ul>
         <div class="clr"></div>     <!--清除浮动，否则会出错-->       
    </div>
</div>

<div id="container">
	<div id="header"> </div>
  	<div id="page">
      	<div id="left">
			<div id="left_top" >   关于我们 </div> <!--单行文本的垂直居中是个难点-->
            <div id="left_bottom">
            	<img src="images/aboutus.jpg"  />
              <p>
                兰芝 夜间修护锁水滋养睡眠面膜80ml 补水保湿免洗;兰芝 夜间修护锁水滋养睡眠面膜80ml 补水保湿免洗兰芝 夜间修护锁水滋养睡眠面膜80ml 补水保湿免洗兰芝 夜间修护锁水滋养睡眠面膜80ml 补水保湿免洗。#717171
              </p>
            </div>
      	</div>
                
      	<div id="mid">
        	<div id="mid_top" >  案例展示        </div>
            <div id="mid_bottom">
            	<div id="mid_bottom_1">
                    <h2>临时会员卡专区</h2>
                    <p>临时会员卡免费活动曼约纪一次</p>          
            	</div>
                <!--ul可以作为容器，像div一样定义边距-->
           	  <ul class="mid_bottom_r">
               	  <li> 
                   	  <img src="images/1.jpg" width="60px" height="60px" />
                      <p class="STYLE2">第一次试镜</p>
               	  </li>
                        <li> 
                        	<img src="images/2.jpg" width="60px" height="60px" />
                            <p class="STYLE2" >生命的礼赞</p>
                        </li>
                         <li> 
                        	<img src="images/3.jpg" width="60px" height="60px" />
                            <p class="STYLE2">阳光沐浴下</p>
                        </li>
           	  </ul>
                <ul class="mid_bottom_b">
                	<li>项目申报模块将发布政府部门相关的项 </li>
                    <li>品立项、专利申报等提供快捷的信</li>                                    	
                    <li>为科技型中小企业技术创新、产学研活动技</li>
                </ul>
            </div>  
          	
     	</div>  
     
     
                  
    	<div id="right">
        	<div id="right_top">  联系我们</div>
            <div id="right_bottom">
              <img src="images/lianxiwomen.jpg" />
              <p> 地址：图片如何在div中水平居中</p>  	
                <p >邮编：xxxxxx</p>		
                <p >邮箱：xxxxxx</p>		
                <p >电话：xxxxxx </p>  
          </div>
          
    	</div>
    
        <div class="clr"></div>
 
        <div id="foot">
           All right Reserve @ 2011 版权所有： 五迪创意  
  		</div>    
	</div>
</div>
</body>
</html>

第二个网页

<!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; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
body,div,span,ul,li,p,h1,h2,h3,h4,h5,h6,img{ margin:0; padding:0; border:0} /*实现段落间距没有太大*/
h1{ line-height:40px; text-align:center; font-size:18px;}
h2{ line-height:26px; font-size:16px;}
body
{
background:url(images/beijing.jpg) repeat ;
font-size:14px; 
color:#FFFFFF; 
font-family:宋体,Arial, Helvetica,sans-serif;
}


#top{
width:100%;
background-color:#0E1215;
height:72px;
margin:0 auto; /*居中*/
}
#topin
{
width:892px;
height:72px;
margin:0 auto; /*居中*/
}
#nav
{
width:400px;
height:40px;
margin-top:30px;
float:right;
display:inline;
line-height:38px;/*不加就会出错*/
}
#nav li
{
width:80px;
height:40px;
float:left; /*左浮动；项目符号一行展示，很重要*/
display:inline;  /*取消上下的换行*/
list-style-type:none;/*每个列表前没有符号*/
text-align:center;
}
#nav a{ width:80px; height:40px; display:block; text-align:center; color:#FFF; text-decoration:none}
#nav a:hover{ background: #999; color:#000;}


#divouter
{
	width: 872px;
	/*height:高度可以设定，也可以不定义，不定义的时候高度会随着内容的高度而变化;*/
	margin:0 auto;/*水平居中*/
	margin-top:10px;
	background-color:#EDEDED;
	/*border:1px solid red;调试用*/
	padding-left:10px;
	padding-top:10px;
	padding-right:10px;
	padding-bottom:10px;

}
#divinner
{
	width: 872px;/*height:高度可以设定，也可以不定义，不定义的时候高度会随着内容的高度而变化;*/
	background-color: #FFFFFF;
	/*border:1px solid gray; 调试用*/
	color:#000000; /*一定要加上，不然显示不出来文字。*/
}
.img_intro{
border:1px solid #999;
float:right;
margin:10px;/*图片上下左右各留出距离*/
display:block;
 /*没有设置宽度和高度，默认情况下div宽度和高度和图片实际尺寸一样*/
}


#divouter p
{
font-size:12px;
color:#666;
line-height:15px;
text-indent:2em;/* 首行缩进2字符*/
}
</style>
</head>

<body>
	<div id="top">
        <div id="topin">
            <div  style="float:left;"> <img src="images/logo.jpg" alt=""    /></div>
			<!-- 采用项目符号列表展示导航。ul列表标记也是盒装模型，可以直接设置浮动定位等属性。-->
            <ul id="nav"   >             
                    <li><a >首页</a></li>
                    <li><a href="index4.html" target="_blank">关于我们</a></li>
                    <li><a href="index.html" target="_blank">我们的技术</a></li>
                    <li><a href="index.html" target="_blank">案例展示</a></li>
                    <li><a href="index.html" target="_blank">联系我们</a></li>
                       
            </ul>
             <div class="clr"></div>     <!--清除浮动，否则会出错-->       
        </div>
    </div>

    	<div id="divouter">
        	<div id="divinner">            
           <h1> 杭州五迪科技有限公司简介</h1>

			<h2>五迪（wdi）下属杭州五迪科技有限公司（简称五迪科技）和五迪商务（香港）有限公司（简称五迪商务）。</h2>
            
            
            <div class="img_intro"><img src="images/intro.jpg" /></div>
            <p>
            
            杭州五迪科技有限公司成立于2004年4月，公司现在有员工130人，其中技术部人员30人，客服人员10人，给客户提供强有力的技术支持和服务保障。公司以技术研发与技术创新为战略出发点，其核心技术人员以美院及计算机专业相关名校毕业。公司的战略发展致力于中国互联网产业信息化建设，帮助企业实现电子商务、协助政府实现电子政务。五迪科技的业务涵盖：域名、主机、邮局的申请，网站建设，搜索引擎优化，平台运营等服务。五迪科技服务客户有：浙江物联购物网、东部软件园、浙江美浓集团、杭州北大青鸟、杭州植物园、浙江国际对外交流协会等。</p> 

<p>五迪商务（香港）有限公司是离岸业务专业注册代理服务商，总部位于亚太金融中心香港，专注于海外离岸公司注册及组建、海外税务策划、商标注册、知识产权专项服务、上市安排等咨询服务。历年来，为众多中国中小型企业提供专业的商务服务，并协助企业进驻国际市场、开拓全新领域。凭借全球业务关系网和多年专业服务经验，为客户提供高效而优质的服务。我们遵循对客户信息绝对保密的原则，深得客户的信赖并倍受推崇。 </p> 

<p>五迪的文化核心为：“信任、共进、卓越”　“客户成功、我们成功”作为我们的服务理念。以诚信为准则，朝着既定的目标不断前进；以卓越为导向，逐步升华成一家杰出的企业。</p>


            </div>
        
        </div>
    	<div id="foot" style="margin:0 auto; line-height:30px; font-size:14px; color:#000000; text-align:center;">
            <p>All right Reserve @ 2011 版权所有： 五迪创意 </p>    
  		</div> 
    </div>
</body>
</html>