您的位置：首页 > 其它

页面布局效果（二）

2018-01-14 14:42 288 查看

效果图：

图1：

图2：

代码清单：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>基本布局</title>
<link rel="stylesheet" type="text/css" href="css/normalize.css">
<link rel="stylesheet" type="text/css" href="css/font.css">
<link rel="stylesheet" type="text/css" href="css/layout.css">
</head>
<body>
<!-- 产品详情样式 -->
<style type="text/css">
.product-desc{position: relative; width: 600px; border: 1px solid #E9E9E9; padding: 20px; margin-left: 40px;}
.product-desc h3{font-size: 14px; color: #000; font-weight: normal; line-height: 26px;}
.product-desc h3 i{margin-right: 14px; color: #333; font-size: 16px;}
.product-desc p{margin-left: 30px; height: 26px; line-height: 26px; font-size: 14px; color: #999;}
.product-desc p span{color: #666;}
.product-desc p small{color: #ff3c00;}
.product-desc a{display: block; width: 150px; height: 35px; line-height: 35px; text-align: center; text-decoration: none; position: absolute; top: 46px; right: 23px; bottom: 29px; font-size: 14px; color: #666; border: 1px solid #ccc; border-radius: 5px;}
.product-desc a:hover{background-color: #108CEE; color: #fff; border-color: #108CEE; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.5s;}
</style>

<!-- 产品详情结构 -->
<div class="product-desc">
<h3><i class="icon-drive"></i>对象存储 BOS</h3>
<p>提供稳定、安全、高效、高可扩展的云存储服务</p>
<p>价格：<span>按流量计费</span><small>￥0.23/GB</small><span>起，</span>  优惠：<span>价格直降最高</span><small>64%</small></span></p>
<a href="#">查看详情</a>
</div>
</body>
</html>

代码地址：https://github.com/Easy-MJ/csdn-blog-demo/tree/master/layout-demo/02

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航