Web前端：苏州百特电器有限公司网站设计

最新推荐文章于 2024-06-08 18:59:08 发布

零小唬

最新推荐文章于 2024-06-08 18:59:08 发布

阅读量1.6k

点赞数 3

分类专栏：前端基础文章标签：前端 javascript html

本文链接：https://blog.csdn.net/weixin_55804957/article/details/127206412

版权

前端基础专栏收录该内容

110 篇文章 10 订阅

订阅专栏

题目

在这里插入图片描述
html代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="author" content="huyiwei">
		<meta name="generator" content="HBuilder X">
		<title>苏州百特电器有限公司网站</title>
		<link rel="stylesheet" href="综合实例8-1.css" type="text/css" />
	</head>
	<body>
		<div id="top">
			<div id="logo" class="">
				<img src="图片/logo.png"/>
			</div>
			<div id="search" class="">
				<p id="p1">
					中文|ENGLISH<br />
					关键字：<input type="search" />
					<img src="图片/serach.png"/>
				</p>
			</div>
			<div id="nav">
				<ul>
					<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>
				</ul>
			</div>
		</div>
		<div id="picture">
			<img src="图片/微信图片_20221007082404.png"/>
		</div>
		<div id="main">
			<div id="left">
				<img src="图片/xwzx.jpg" border = "0"/>
				<input type="image" src="图片/more.png" />
				<ul>
					<li>
						<a href="#">
							本公司正式上线欢迎您的访问..
						</a>
						&nbsp;&nbsp;2013-06-06
					</li>
					<li>
						<a href="#">
							本公司正式上线欢迎您的访问..
						</a>
						&nbsp;&nbsp;2013-06-06
					</li>
					<li>
						<a href="#">
							本公司正式上线欢迎您的访问..
						</a>
						&nbsp;&nbsp;2013-06-06
					</li>
					<li>
						<a href="#">
							本公司正式上线欢迎您的访问..
						</a>
						&nbsp;&nbsp;2013-06-06
					</li>
					<li>
						<a href="#">
							本公司正式上线欢迎您的访问..
						</a>
						&nbsp;&nbsp;2013-06-06
					</li>
					<li>
						<a href="#">
							本公司正式上线欢迎您的访问..
						</a>
						&nbsp;&nbsp;2013-06-06
					</li>
				</ul>
			</div>
			<div id="center">
				<img src="图片/cpzx.jpg" border = "0"/>
				<input type="image" src="图片/more.png" />
				<marquee direction = "left" loop = "100" scrollamount = "5px" 
				onmouseout="this.start()" onmouseover="this.stop()">
					<img src="图片/tu1.jpg"/>
					<img src="图片/tu2.jpg"/>
					<img src="图片/tu3.jpg"/>
					<img src="图片/tu4.jpg"/>
				</marquee>
			</div>
			<div id="right">
				<img src="图片/lianxi.png" border = "0" />
				<ul>
					<li>
						咨询热线：
					</li>
					<li>
						固定电话：0512-65787572
					</li>
					<li>
						Email:eva@better-var.com
					</li>
				</ul>
			</div>
			<br><br>
		</div>
		<div id="footer">
			<p>
				版权所有&copy;2013 Suzhou Best Clean Electrical Co.,Ltd   
				苏ICP备88888888    技术支持：中国万网
			</p>
		</div>
	</body>
</html>

css样式

*{
	font-size: 12px;
	font-family: 'Times New Roman', Times, serif;
}
#top{
	width: 984px;
	height: 100px;
	/* background-color: #d7d7d7; */
}
#logo{
	width: 199px;
	height: 60px;
	/* background-color: #d7d7d7; */
	float: left;
}
#search{
	width: 765px;
	height: 60px;
	/* background-color: #d7d7d7; */
	float: right;
}
#search #p1{
	text-align: right;
}
#nav{
	width: 984px;
	height: 40px;
	background-color: #d7d7d7;
	float: right;
}
#nav ul{
	list-style-type: none;
}
#nav li{
	display: inline;
	padding: 10px 45px;
	background: url("图片/line.png") no-repeat right;
}
#nav a:hover{
	color: #bf0000;
	test-decoration:none;
}
#main{
	width: 984px;
	height: 250px;
	/* background-color: brown; */
	border-bottom: 2px inset;
}
#left{
	width: 200px;
	height: 240px;
	/* background-color: cyan; */
	float: left;
}
#main ul{
	list-style-type: none;
}
#center{
	width: 467px;
	height: 200px;
	/* background-color: burlywood; */
	float: left;
	margin-left: 10px;
}
#right{
	width: 263px;
	height: 200px;
	/* background-color: orangered; */
	float: right;
}
#p1 img{
	padding-top: 8px;
}
#footer{
	text-align: center;
}
#footer p{
	margin-top: 20px;	
	color: #333333;
	padding-right: 50px;
}
input{
	vertical-align: middle;
	padding: 2px auto;
}