订阅博客
收藏博客
微博分享
QQ空间分享

html之一个网站主页的练习

频道:前端 标签:练习 时间:2019年07月13日 浏览:101次 评论:0条
作者: 三只松果

代码:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.header{
				
				height: 40px;
				width: 880px;
				margin: 0px auto;
			}
			#logo{
				float: left;
			}
			.search{
				margin-right: -5px;
				height: 40px;
				float: right;
			}
			#searchinput{
				position: relative;
				top: -6px;
				height: 24px;
				width: 150px;
			}
			#submit{
				
				position: relative;
				top: 5px;
				left: -6px;
				background: white url(images/search2.jpg);
				height: 30px;
				width: 31px;
			}
			.nav{
				border-top: 1px #DCDCDC solid;
				height: 41px;
				background: white url(images/nav_bg.png) repeat-x;
			}
			.nav ul{
				width: 880px;
				margin: 0px auto;

				list-style: none;
			}
			.nav ul li{
				display: inline-block;
				width: 105px;
				height: 30px;
				text-align: center;
				background:  url(images/nav_bg-line.png) no-repeat right;
				padding-top: 10px;
			}
			a{
				text-decoration: none;
				color:black
			}
			.banner{
				width: 880px;
				height: 480px;
				margin: 0px auto;
				background: url(images/banner.jpg);
				background-size: contain;
			}
			.notice{
				height: 25px;
				border-bottom: #DCDCDC solid 1px;
				border-top: #DCDCDC solid 1px;
				
				background: rgb(98%,98%,98%);
			}
			.notice2{
				height: 25px;
				width: 880px;
				margin: 0px auto;
				
			}
			.notice2 span{
				line-height: 10px;
				font-size: 3px;
			}
			.noticeright{
				height: 25px;
				line-height: 30px;
				width: 80px;
				float: right;
				
			}
			.content{
				margin: 10px auto;
				width: 880px;
				height: 210px;
				
			}
			.contentleft{
				display: inline-block;
				position: relative;
				padding-left: 5px;
				height: 200px;
				width: 270px;
				border:  #DCDCDC 2px solid;
				float: left;
				margin: 5px 5px 10px 0px;
			}
			.contentleft p{
				margin-top: 5px;
				font-size: 13px;
				
			}
			.contentleft p a{
				color:  limegreen;
			}
			#imgleft{
				position: absolute;
				left: 10px;
				top: 100px;
			}
			#imgmidle{
				position: absolute;
				left: 40px;
				top: 30px;
			}
			#imgright{
				position: absolute;
				left: 250px;
				top: 100px;
			}
			.contentmidle{
				padding-left: 5px;
				margin: 5px 0px 10px 5px;
				display: inline-block;
				height: 200px;
				width: 300px;
				border:  #DCDCDC 2px solid;
			}
			.contentmidle p{
				margin-top: 5px;
				font-size: 13px;
				
			}
			.contentmidle p a{
				color:  limegreen;
			}
			.contentmidle ul{
				list-style: none;
				padding: 0px;
				padding-left: 8px;
				padding-right: 12px;
				font-size: 13px;
			}
			.contentmidle ul li{
				height: 25px;
				border-bottom: #DCDCDC 1px dashed;
			}
			.contentright{
					margin: 5px 0px 5px 5px;
					display: inline-block;
					height: 200px;
					width: 265px;
					float: right;
					border:  #DCDCDC 2px solid;
					padding-left: 5px;
			}
			.contentright p{
				margin-top: 5px;
				font-size: 13px;
				
			}
			.contentright p a{
				color:  limegreen;
			}
			.contentright ul{
				list-style: none;
				padding: 0px;
				padding-left: 16px;
				padding-right: 12px;
				font-size: 13px;
			}
			.contentright ul li{
				line-height:c;
				height: 15px;
				border-left: #008000 4px solid;
				margin-bottom: 10px;
				padding-left: 5px;
			}
			#p1{
				margin-left: 16px;
				margin-right: 50px;
			}
			.footer{
				height: 200px;
				background-color: rgb(20%,20%,20%);
			}
			.footerleft{
				width: 880px;
				margin: 0px auto;
			}
			.footerleft table{
				width: 400px;
				height: 100px;
				margin-left: -3.5px;
				
			}
			.footerleft table th{
				color: gainsboro;
				text-align: left;
				font-weight: 400;
			}
			.footerleft table td{
				font-weight: 100;
				text-align: left;
				color: gainsboro;
			}
			.bottom{
				height: 70px;
				background: rgb(20%,20%,20%);
				border-top: gray 1px dashed;
				text-align: center;
			}
			.bottom p{
				display: inline-block;
				width: 300px;
				color: black;
				text-align: center;
				font-size: 2px;
			}
			
		</style>
	</head>
	<body>
		<div class="header">
			<img id="logo" src="images/logo.jpg" >
			<div class="search">
				<form >
				<input type="" name="" id="searchinput" value="请输入..." />
				<input type="submit" name="" id="submit" value="" />
				</form>
			</div>
		</div>
		<div class="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 class="banner"></div>
		<div class="notice">
			<div class="notice2">
				<span>最新公告:尚合Aone智能手机入网证已获取工信部门审批下发。尚合官网</span>
				<div class="noticeright">
					<a href=""><img src="images/zone.png" ></a>
					<a href=""><img src="images/weibo.png" ></a>
					<a href=""><img src="images/xinlang.png" ></a>
					<a href=""><img src="images/renren.png" ></a>
				</div>
			</div>
		</div>
		<div class="content">
			<div class="contentleft">
				<p><img src="images/o.jpg" ><a href="">新品发布</a></p>
				<a href=""><img src="images/left.png" id="imgleft" ></a>
				<a href=""><img src="images/home_hot_01.png" id="imgmidle" ></a>
				<a href=""><img src="images/right.png" id="imgright" ></a>
			</div>
			<div class="contentmidle">
				<p><img src="images/o.jpg" ><a href="">新闻中心</a></p>
				<ul>
					<li><font size="" color="red">致歉公告</font></li>
					<li>首批尚合Aonet已全部售替!</li>
					<li>[媒体报导]国产高性价比尚合Aonet四核手机评测</li>
					<li>我司产品已经通过了国家强制性产品3C认证</li>
					<li>尚合hone智能手机入网证已经获工信部i审批下发</li>
					<li>我司通过IS09001 :2008国际质里管理体系认证</li>
				</ul>
			</div>
			<div class="contentright">
				<p><img src="images/o.jpg" ><a href="">技术与支持</a></p>
				<ul>
					<li>售后服务</li>
					<li>投诉与建议</li>
					<li>联保网点</li>
					<li>常见问题FAQ</li>
				</ul>
				<p id="p1">深圳市汇聚众合科技发展有限公司
服务热线: 400-633 7922</p>
			</div>
		</div>
		<div class="footer">
			<div class="footerleft">
				<table border="0" cellspacing="" cellpadding="">
					<tr><th>尚合首页</th><th>尚合首页</th><th>尚合首页</th><th>尚合首页</th></tr>
					<tr><td>返回首页</td><td>返回首页</td><td>返回首页</td><td>返回首页</td></tr>
				</table>
			</div>
		</div>
		<div class="bottom">
			<p>深圳尚合有限公司深圳尚合有限公司深圳尚合有限公司深圳尚合有限公司</p>
		</div>
	</body>
</html>

效果演示:

截图演示:

index.png

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。