博主信息
博文 42
粉丝 3
评论 2
访问量 38804
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
PHP第二期在线培训第七天作业
HeartofSunny的博客
原创
1147人浏览过

实例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>国内虚拟主机</title>
	<style type="text/css">
	body {
		color: #555;
		background:#f5f5f5;
		font:11px "Helvetica Neue";
	}

	p{	/*p标签自带有12px的margin,line-height设置时减少12px;*/
		border-bottom: 1px solid #e6e5e5;
		height: 42px;
		line-height: 30px;
	}

	li{
		display: inline;
		padding-left: 20px;
		list-style: none;
		float: left;
	}
	.h3{
		font-family: "KaiTi_GB2312";
		font-size: 22px;
		color: #ffffff;
		width: 263px;
		height: 170px;
		background: #4d4d4d;
		display: table-cell;  /*设置显示方式为表格单元格*/
		vertical-align: middle; /*设置该单元格内的元素垂直居中*/
	}
	span{
		font:20px "Helvetica Neue";
		display: block;
		margin-top: 20px;
	}
	.a{ /*设置a标签为按钮*/
		color:#2086ee;
		height: 38px;
		width: 110px;
		line-height: 38px;
		display: inline-block;
		text-decoration: none;
		background: #fff;
		text-align: center;
		margin-left: 10px;
		margin-bottom: 20px;
		border: 1px solid #2086ee;
	}
	.div{	/*父级DIV在浏览器中居中对齐*/
		width: 1000px;
		margin: 0px auto;
		text-align: center;
	}
	.div2 {
		width: 263px;
		margin: 0px auto;
		text-align: center;
		background: white;
	}
	.div3{
		margin-top: 50px;
		padding-left: 20px;
		padding-right: 20px;
	}

	.hover:hover .h3{	/*鼠标停留改变h3标签背景颜色*/
          background: #2086ee;
        }

	.hover:hover .a{	/*鼠标停留改变a标签背景颜色*/
          background: #2086ee;
          color: white;
        }
	</style>
</head>
<body>
	<div class="div">
		<ul>
			<li>
				<div class="hover">
					<div class="div2">
						<h3 class="h3">体验型150M
						<br><span>68/年</span></h3>
						<div class="div3">
							<P>网页空间:150M+赠送30M</P>
							<P>每月流量:15G</P>
							<P>数据库:MySQL5(30M)</P>
							<P>机房线路:国内电信机房</P>
						</div>
					<div>
						<a class="a" href="">立即购买</a>
						<a class="a" href="">查看详情</a>
					</div>
				</div>
				</div>
			</li>
			<li>
				<div class="hover">
					<div class="div2">
						<h3 class="h3">云峰A 1G
						<br><span>188/年</span></h3>
						<div class="div3">
							<P>网页空间:1G+赠送200M</P>
							<P>每月流量:25G</P>
							<P>数据库:SQL Server 2008(50M)</P>
							<P>机房线路:国内BGP/双线机房</P>
						</div>
						<div>
							<a class="a" href="">立即购买</a>
							<a class="a" href="">查看详情</a>
						</div>
					</div>
				</div>
			</li>
			<li>
				<div class="hover">
					<div class="div2">
						<h3 class="h3">云峰B 2G
						<br><span>288/年</span></h3>
						<div class="div3">
							<P>网页空间:2G+赠送400M</P>
							<P>每月流量:40G</P>
							<P>数据库:SQL Server 2008(100M)</P>
							<P>机房线路:国内BGP/双线机房</P>
						</div>
						<div>
							<a class="a" href="">立即购买</a>
							<a class="a" href="">查看详情</a>
						</div>
					</div>
				</div>
			</li>
		
		</ul>
	</div>
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

手抄:

微信图片_20180326125653.jpg

批改状态:合格

老师批语:
本博文版权归博主所有,转载请注明地址!如有侵权、违法,请联系admin@php.cn举报处理!
全部评论 文明上网理性发言,请遵守新闻评论服务协议
0条评论
作者最新博文
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • 登录PHP中文网,和优秀的人一起学习!
    全站2000+教程免费学