第一个网页
<!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>
扫一扫
2416
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
