HTML 项目小练习

最新推荐文章于 2024-04-30 23:20:03 发布

星空椰

最新推荐文章于 2024-04-30 23:20:03 发布

阅读量1.1k

点赞数 5

分类专栏： HTML+CSS 文章标签： html webview 前端

本文链接：https://blog.csdn.net/ymxk2876721452/article/details/104046472

版权

HTML+CSS 专栏收录该内容

9 篇文章 8 订阅

订阅专栏

之前写过的一个小练习，可以拿来练练手

HTML部分

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<link href="Untitled-2.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div class="ms">
<div class="mi">
 <div><img  src="img/banner.gif"/></div>
 <div class="ue"><a href="#">首页</a>  
  <a href="#" class=" uq">关于正云</a> 
    <a href="#">行业动态</a> 
      <a href="#">设备展示</a>
         <a href="#">工程案例</a>
            <a href="#">人力资源</a> 
              <a href="#">邀请加盟</a>  
               <a href="#">在线留言</a>  
                <a href="#">联系我们</a>
                <br/> 
                </div>
                
<div class="ur"><a href="#">首页</a>&gt;&gt;关于正云<a href="#"></a></div>
   
   </div>
   
   
   
<div class="mp"><img  src="img/20097311723193.jpg" width="720" height="576"/>


   <p>重庆正云环保工程有限公司   位于重庆市渝北区新牌坊转盘，地处龙湖核心商圈，公司自2000年创立以来，经过近十年的艰辛创业和发展，已为近千家各类污染企业治理废水、废气，现已成长为一家对各类城市污水、生活污水、工业废水、中水回用水专业设计、安装、调试工程建设总承包和工程咨询的专业环保技术工程企业。尤其对房地产开发的生活污水、城镇污水、医院废水、化工废水、电镀废水、造纸废水、屠宰养殖废水、印染废水、含油废水、矿井废水等各种工业废水有着极其丰富的实践治理经验和熟练的操作能力。</p>
    <p>        公司现拥有30多人的环保专业设计团队，其中高级工程师12人，工程师18人，以及一批高素质、重质量的专业安装、调试、工程施工队伍。并和国内多家环境专业学院的博导、教授有着良好的合作关系。</p>
    <p>        公司秉承“人无信则不立，商无信则不达”的服务宗旨，把“认真做事，为客户着想”作为公司的经营理念。公司把“没有完美的个人，只有完美的团队，经过磨合的学习型团队才是企业的核心竞争力”作为公司的企业文化，并已经融入到每个员工的心灵深处，成为了正云文化的特质。独特的企业文化为公司营造了高效的工作效率与广泛的社会认同。<br />
    </p>
</div> 
  
  <div class="mk"><br />
  版权所有◎重庆正云环保工程有限公司 地址：重庆市渝北区新牌坊佳乐紫光18楼</div>
   
     </div>
     
</body>
</html>

CSS部分

@charset "utf-8";
/* CSS Document */

body,p{
	margin: 0px;
	padding: 0px;
	font-size:12px;
}

.ms {
	width:960px;
	margin:0 auto;
}
#banner {
	background-image: url(images/banner.gif);
	background-repeat: no-repeat;
	height: 255px;
}
.ue {
	background-image:url(img/navbg.gif);
	border-right-width:1px;
	border-left-width:1px;
	border-right-style:solid;
	border-left-style:solid;
	border-left-color:#0A7CC0;
	border-left-color: #0A7CC0;
	}
	
.ue a {
	font-family:"宋体";
	font-size:14px;
	color: #000;
	line-height:39px;
	font-weight:bold;
	margin-left:20px;
	text-decoration:none;
	display:inline-block;
}
.ue a:hover, .ue a.uq{
	color:#FFF;
	background-image:url(img/navbghover.gif);
	background-repeat:repeat-x;
}

.ur{
	font-size:12px;
	text-align:left;
	background-color:#E3E9EC;
	line-height:25px;
	border-right-width:1px;
	border-left-width:1px;
	border-left-style:solid;
	border-right-style:solid;
	border-right-color:#0A7CC0;
	border-left-color:#0A7CC0;
}

.ur a {
	color:#000;
	text-decoration:none;
	margin:0 5px;
}

.mp {
	border-right-width:1px;
	border-left-width:1px;
	border-right-style:solid;
	border-left-style:solid;
	border-left-color:#0A7CC0;
	border-right-color:#0A7CC0;
	padding:20px 30px;
}
.mp img {
	height:310px;
	width:410px;
	float:left;
	}
	
 .mp p {
	 font-size:12px;
	 text-indent:3em;
	 line-height:25px;
	 margin-top:10px;
 }
 
 .mk{
	 background-image:url(img/footbg.gif);
	 background-repeat:repeat-x;
	 text-align:center;
	 height:39px;
	 display:block;
	 color:#ffffff;
	 font-size:12px;
	 
	 
 }

项目显示效果图

暂时显示不了见谅