企业网站集成

Posted 月疯

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了企业网站集成相关的知识,希望对你有一定的参考价值。

css代码:

@charset "utf-8";
/*重置样式 css reset*/
*{
	margin: 0;
	padding: 0;
}
ul,ol,li{
	list-style: none;
}
b,strong{
	font-weight: normal;
}
i,em{
	font-style: normal;
}
a,u{
	text-decoration: none;
}
h1,h2,h3,h4,h5,h6{
	font-size: 16px;
	font-weight: normal;
}
#logo,#nav,#banner,.im,#news,#picture,#tb,#next,#loss{
	width: 1000px;
	margin: 0 auto;
}
/* logo */
#logo{
	height: 100px;
	background: #ccc;
}
#logo h1{
	width: 227px;
	height: 100px;
	background:  url(../img/tube.png) no-repeat center;
	margin: 0 auto;
	float: left;
}
#logo form{
	width: 247px;
	height: 61px;
	float: right;
	padding-top: 39px;
}

.txt{
	width: 179px;
	height: 26px;
	border: 1px solid #f00;
	background: #f1f1f1f1;
	color: #858585;
	padding-left: 14px;
	float: left;
}
.btn{
	width: 30px;
	height: 28px;
	border: 1px solid #f00;
	background: #f1f1f1f1 url(../img/fdj.png) no-repeat center;
	float: left;
	border-left:none;
	
}
/* nav */
#nav{
	height: 58px;
	background:#000;

}
#nav li{
	float: left;
	width: 122px;
	height: 58px;
	border-right: 1px solid white;
	line-height: 58px;
	font-size: 12px;
	text-align: center;
	color:wheat
	
}
/* 
1、导航必须使用无序列表去做 
2、导航项嵌套:
<li>
<a href=""></a>
</li>
3、给li添加浮动
4、给li添加大小
5、调整文本
*/
#nav #first{
	margin-left: 8px;
}
#nav #border0{
	border: 0;
}
/* banner */
#banner{
	height: 490px;
	background: #ccc;
}
.im{
	height: 490px;
}
/* news */
#news{
	background: pink;
}
.news_l{
	width: 500px;
	height: 269px;
	background: white;
	float: left;
}
.news_l h2{
font-size: 18px;
line-height: 18px;
padding: 36px 0 0 22px;
}
/*
新闻列表
1、如果有时间html结构必须:
<li>
<a  href="#">新闻内容展示</a>
<span>2021-7-21</span>
<li>
2、给li添加宽高(量行高)
3、调整文本样式(文本大小,颜色)
4、给span和a添加左右浮动
5、背景图的形式给li添加列表符号(调整背景图)
设置line-height文字上下居中
*/
.news_list{
	padding-left: 21px;
}
.news_list li{
	width: 451px;
	height: 24px;
	background: url(../img/dian.png) no-repeat left center;
	margin-top: 10px;
	margin-bottom: 10px;
	line-height: 24px;
}
.news_list li a{
	color:#585858;
	float: left;
	margin-left: 18px;
	}
.news_list li span{
	float: right;
}
.news_c{
	width: 240px;
	height: 240px;
	float: left;
}
.news_c h2{
	margin-top: 36px;
	margin-left: 25px;
	font-size: 18px;
}
.news_r{
	width: 260px;
	height: 240px;
	float: left;
}
.news_r h2{
	font-size: 18px;
	line-height: 18px;
	margin-top: 36px;
	margin-left: 25px;
}
.small{
	width: 200px;
	margin-left: 25px;
	margin-top: 11px;
}
.sma{
	margin-left: 25px;
	margin-top: 5px;
}
/* picture */
#picture{
	height: 500px;
}
#tb td img{
	width: 241px;
	height: 200px;
}
#tb td p{
	text-align: center;
	margin-top: 10px;
}
/* next */
#next{
	background: #ccc;
	margin-top:18px;
	height: 300px;
}
#loss{
	height: 100px;
	background: #F5DEB3;
}
#m1{
	margin-top: 50px;
	float: left;
	margin-left: 200px;
	font-size: 20px;
}
#m2{
	margin-top: 50px;
	margin-right: 200px;
	float: right;
	font-size: 15px;
}

html5:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="css/qiye.css">
	</head>
	<body>
		<!-- logo -->
		<div id="logo">
			<h1></h1>
			<form action="" method="">
				<input class="txt" type="text" value="SEARCH..." />
				<input class="btn" type="button"  />
			</form>
		</div>
		<!-- nav -->
		<ul id="nav">
			<li id=first><a href="#">旅游介绍</a></li>
			<li><a href="#">旅游介绍</a></li>
			<li><a href="#">旅游介绍</a></li>
			<li><a href="#">旅游介绍</a></li>
			<li><a href="#">旅游介绍</a></li>
			<li><a href="#">旅游介绍</a></li>
			<li><a href="#">旅游介绍</a></li>
			<li id="border0"><a href="#">旅游介绍</a></li>
		</ul>
		<!-- banner -->
		<div id="banner">
			<img src="img/banner.png" alt="" class="im"/>
		</div>
		<!-- news -->
		<div id="news">
			<div class="news_l">
				<h2>公司新闻</h2>
				<ul class="news_list">
					<li>
						<a href="#">新闻展示</a>
						<span>2021-7-21</span>
					</li>
					<li>
						<a href="#">新闻展示</a>
						<span>2021-7-21</span>
					</li>
					<li>
						<a href="#">新闻展示</a>
						<span>2021-7-21</span>
					</li>
					<li>
						<a href="#">新闻展示</a>
						<span>2021-7-21</span>
					</li>
					<li>
						<a href="#">新闻展示</a>
						<span>2021-7-21</span>
					</li>
					<li>
						<a href="#">新闻展示</a>
						<span>2021-7-21</span>
					</li>
				</ul>
			</div>
			<div class="news_c">
				<h2>公司介绍</h2>
				<h2><strong>公司成立于2021年3月4日,上市进行专项审查,核准效果是一个伟大的创举。</strong></h2>
				<h2>感谢大家一起共享</h2>
			</div>
			<div class="news_r">
				<h2>人才招聘</h2>
				<div id="img_box">
					<img src="img/ik.png" class="small"/>
					<img src="img/pp.png" class="sma"/>
				</div>
			</div>
		</div>
		<!-- piture -->
		<div id="picture">
			<table id="tb">
				<th>
					<td>
						<img src="img/ik.png"/ >
						<p>感谢大家开始学习html5</p>
					</td>
				</th>
				<th>
					<td>
						<img src="img/ik.png"/ >
						<p>感谢大家开始学习html5</p>
					</td>
				</th>
				<th>
					<td>
						<img src="img/ik.png"/ >
						<p>感谢大家开始学习html5</p>
					</td>
				</th>
				<th>
					<td>
						<img src="img/ik.png"/ >
						<p>感谢大家开始学习html5</p>
					</td>
				</th>
			</table>
		</div>
		<div id="next">
			
			
		</div>
		<div id="loss">
			<p id="m1">陕西生物科技有限公司</p>
			<p id="m2">@copyright2021</p>
		</div>
	</body>
</html>

 

以上是关于企业网站集成的主要内容,如果未能解决你的问题,请参考以下文章

iphone / Objective c的最佳代码片段网站是啥[重复]

超级有用的9个PHP代码片段

vs2003:快速片段工具

html 将以编程方式附加外部脚本文件的javascript代码片段,并按顺序排列。用于响应式网站,其中ma

如何在 Reactjs 中添加丰富的代码片段?

Wordpress阻止访问wp admin€“wpsnipp.com网站你博客的Wordpress代码片段