天猫品牌街Web前端开发 第二阶段设计
2017-02-12 02:14
585 查看
我们接下来要用backgroud的全简写定义格式实现一个缩小的“尚天猫”banner图标，先看看第二阶段要完成的效果截图：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html" charset="utf-8"/>
<title>品牌街-上天猫，就够了</title>
<meta name="keywords" content="关键词,关键词">
<meta name="description" content="">
<style type="text/css">
body,div{margin:0;padding:0;}
body{font-size:12px;font-family:"微软雅黑";color:#666;}
.top{width:100%;height:85px;background:#ffffff;}
.top .t-header{width:1000px;height:85px;background:#ffffff;margin:0 auto;}
.top .t-header .t-logo{float:left;margin-top:28px;}
.top .t-header .t-desc{float:right;line-height:85px;font-size:22px;font-weight:300;}
.banner{width:100%;height:104px;background:#ff0000;}
</style>
</head>
<body>
<div class="top">
<div class="t-header">
<div class="t-logo">
<a href="#">
<img src="images/logo.png" alt="天猫Tmall.com" width="190px" height="27px"/>
</a>
</div>
<div class="t-desc">品牌咱都来这儿集合了！</div>
</div>
</div>
<div class="banner"></div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html" charset="utf-8"/>
<title>品牌街-上天猫，就够了</title>
<meta name="keywords" content="关键词,关键词">
<meta name="description" content="">
<style type="text/css">
body,div{margin:0;padding:0;}
body{font-size:12px;font-family:"微软雅黑";color:#666;}
.top{width:100%;height:85px;background:#ffffff;}
.top .t-header{width:1000px;height:85px;background:#ffffff;margin:0 auto;}
.top .t-header .t-logo{float:left;margin-top:28px;}
.top .t-header .t-desc{float:right;line-height:85px;font-size:22px;font-weight:300;}
.banner{width:100%;height:104px;background:#ff0000 url("images/banner.png");}
</style>
</head>
<body>
<div class="top">
<div class="t-header">
<div class="t-logo">
<a href="#">
<img src="images/logo.png" alt="天猫Tmall.com" width="190px" height="27px"/>
</a>
</div>
<div class="t-desc">品牌咱都来这儿集合了！</div>
</div>
</div>
<div class="banner"></div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html" charset="utf-8"/>
<title>品牌街-上天猫，就够了</title>
<meta name="keywords" content="关键词,关键词">
<meta name="description" content="">
<style type="text/css">
body,div{margin:0;padding:0;}
body{font-size:12px;font-family:"微软雅黑";color:#666;}
.top{width:100%;height:85px;background:#ffffff;}
.top .t-header{width:1000px;height:85px;background:#ffffff;margin:0 auto;}
.top .t-header .t-logo{float:left;margin-top:28px;}
.top .t-header .t-desc{float:right;line-height:85px;font-size:22px;font-weight:300;}
.banner{width:100%;height:104px;background:#ff0000 url("images/banner.png") no-repeat;}
</style>
</head>
<body>
<div class="top">
<div class="t-header">
<div class="t-logo">
<a href="#">
<img src="images/logo.png" alt="天猫Tmall.com" width="190px" height="27px"/>
</a>
</div>
<div class="t-desc">品牌咱都来这儿集合了！</div>
</div>
</div>
<div class="banner"></div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html" charset="utf-8"/>
<title>品牌街-上天猫，就够了</title>
<meta name="keywords" content="关键词,关键词">
<meta name="description" content="">
<style type="text/css">
body,div{margin:0;padding:0;}
body{font-size:12px;font-family:"微软雅黑";color:#666;}
.top{width:100%;height:85px;background:#ffffff;}
.top .t-header{width:1000px;height:85px;background:#ffffff;margin:0 auto;}
.top .t-header .t-logo{float:left;margin-top:28px;}
.top .t-header .t-desc{float:right;line-height:85px;font-size:22px;font-weight:300;}
.banner{width:100%;height:104px;background:#ff0000 url("images/banner.png") no-repeat center;}
</style>
</head>
<body>
<div class="top">
<div class="t-header">
<div class="t-logo">
<a href="#">
<img src="images/logo.png" alt="天猫Tmall.com" width="190px" height="27px"/>
</a>
</div>
<div class="t-desc">品牌咱都来这儿集合了！</div>
</div>
</div>
<div class="banner"></div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html" charset="utf-8"/>
<title>品牌街-上天猫，就够了</title>
<meta name="keywords" content="关键词,关键词">
<meta name="description" content="">
<style type="text/css">
body,div{margin:0;padding:0;}
body{font-size:12px;font-family:"微软雅黑";color:#666;}
.top{width:100%;height:85px;background:#ffffff;}
.top .t-header{width:1000px;height:85px;background:#ffffff;margin:0 auto;}
.top .t-header .t-logo{float:left;margin-top:28px;}
.top .t-header .t-desc{float:right;line-height:85px;font-size:22px;font-weight:300;}
.banner{width:100%;height:104px;background:#ff0000 url("images/banner.png") no-repeat center / 160px 68px;}
</style>
</head>
<body>
<div class="top">
<div class="t-header">
<div class="t-logo">
<a href="#">
<img src="images/logo.png" alt="天猫Tmall.com" width="190px" height="27px"/>
</a>
</div>
<div class="t-desc">品牌咱都来这儿集合了！</div>
</div>
</div>
<div class="banner"></div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html" charset="utf-8"/>
<title>品牌街-上天猫，就够了</title>
<meta name="keywords" content="关键词,关键词">
<meta name="description" content="">
<style type="text/css">
body,div{margin:0;padding:0;}
body{font-size:12px;font-family:"微软雅黑";color:#666;}
.top{width:100%;height:85px;background:#ffffff;}
.top .t-header{width:1000px;height:85px;background:#ffffff;margin:0 auto;}
.top .t-header .t-logo{float:left;margin-top:28px;}
.top .t-header .t-desc{float:right;line-height:85px;font-size:22px;font-weight:300;}
.banner{width:100%;height:104px;background:#ffffff url("images/banner.png") no-repeat center / 160px 68px;}
</style>
</head>
<body>
<div class="top">
<div class="t-header">
<div class="t-logo">
<a href="#">
<img src="images/logo.png" alt="天猫Tmall.com" width="190px" height="27px"/>
</a>
</div>
<div class="t-desc">品牌咱都来这儿集合了！</div>
</div>
</div>
<div class="banner"></div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html" charset="utf-8"/>
<title>品牌街-上天猫，就够了</title>
<meta name="keywords" content="关键词,关键词">
<meta name="description" content="">
<style type="text/css">
body,div{margin:0;padding:0;}
body{font-size:12px;font-family:"微软雅黑";color:#666;}
.top{width:100%;height:85px;background:#ffffff;}
.top .t-header{width:1000px;height:85px;background:#ffffff;margin:0 auto;}
.top .t-header .t-logo{float:left;margin-top:28px;}
.top .t-header .t-desc{float:right;line-height:85px;font-size:22px;font-weight:300;}
.banner{width:100%;height:104px;background:#ff0000;}
</style>
</head>
<body>
<div class="top">
<div class="t-header">
<div class="t-logo">
<a href="#">
<img src="images/logo.png" alt="天猫Tmall.com" width="190px" height="27px"/>
</a>
</div>
<div class="t-desc">品牌咱都来这儿集合了！</div>
</div>
</div>
<div class="banner"></div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html" charset="utf-8"/>
<title>品牌街-上天猫，就够了</title>
<meta name="keywords" content="关键词,关键词">
<meta name="description" content="">
<style type="text/css">
body,div{margin:0;padding:0;}
body{font-size:12px;font-family:"微软雅黑";color:#666;}
.top{width:100%;height:85px;background:#ffffff;}
.top .t-header{width:1000px;height:85px;background:#ffffff;margin:0 auto;}
.top .t-header .t-logo{float:left;margin-top:28px;}
.top .t-header .t-desc{float:right;line-height:85px;font-size:22px;font-weight:300;}
.banner{width:100%;height:104px;background:#ff0000 url("images/banner.png");}
</style>
</head>
<body>
<div class="top">
<div class="t-header">
<div class="t-logo">
<a href="#">
<img src="images/logo.png" alt="天猫Tmall.com" width="190px" height="27px"/>
</a>
</div>
<div class="t-desc">品牌咱都来这儿集合了！</div>
</div>
</div>
<div class="banner"></div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html" charset="utf-8"/>
<title>品牌街-上天猫，就够了</title>
<meta name="keywords" content="关键词,关键词">
<meta name="description" content="">
<style type="text/css">
body,div{margin:0;padding:0;}
body{font-size:12px;font-family:"微软雅黑";color:#666;}
.top{width:100%;height:85px;background:#ffffff;}
.top .t-header{width:1000px;height:85px;background:#ffffff;margin:0 auto;}
.top .t-header .t-logo{float:left;margin-top:28px;}
.top .t-header .t-desc{float:right;line-height:85px;font-size:22px;font-weight:300;}
.banner{width:100%;height:104px;background:#ff0000 url("images/banner.png") no-repeat;}
</style>
</head>
<body>
<div class="top">
<div class="t-header">
<div class="t-logo">
<a href="#">
<img src="images/logo.png" alt="天猫Tmall.com" width="190px" height="27px"/>
</a>
</div>
<div class="t-desc">品牌咱都来这儿集合了！</div>
</div>
</div>
<div class="banner"></div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html" charset="utf-8"/>
<title>品牌街-上天猫，就够了</title>
<meta name="keywords" content="关键词,关键词">
<meta name="description" content="">
<style type="text/css">
body,div{margin:0;padding:0;}
body{font-size:12px;font-family:"微软雅黑";color:#666;}
.top{width:100%;height:85px;background:#ffffff;}
.top .t-header{width:1000px;height:85px;background:#ffffff;margin:0 auto;}
.top .t-header .t-logo{float:left;margin-top:28px;}
.top .t-header .t-desc{float:right;line-height:85px;font-size:22px;font-weight:300;}
.banner{width:100%;height:104px;background:#ff0000 url("images/banner.png") no-repeat center;}
</style>
</head>
<body>
<div class="top">
<div class="t-header">
<div class="t-logo">
<a href="#">
<img src="images/logo.png" alt="天猫Tmall.com" width="190px" height="27px"/>
</a>
</div>
<div class="t-desc">品牌咱都来这儿集合了！</div>
</div>
</div>
<div class="banner"></div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html" charset="utf-8"/>
<title>品牌街-上天猫，就够了</title>
<meta name="keywords" content="关键词,关键词">
<meta name="description" content="">
<style type="text/css">
body,div{margin:0;padding:0;}
body{font-size:12px;font-family:"微软雅黑";color:#666;}
.top{width:100%;height:85px;background:#ffffff;}
.top .t-header{width:1000px;height:85px;background:#ffffff;margin:0 auto;}
.top .t-header .t-logo{float:left;margin-top:28px;}
.top .t-header .t-desc{float:right;line-height:85px;font-size:22px;font-weight:300;}
.banner{width:100%;height:104px;background:#ff0000 url("images/banner.png") no-repeat center / 160px 68px;}
</style>
</head>
<body>
<div class="top">
<div class="t-header">
<div class="t-logo">
<a href="#">
<img src="images/logo.png" alt="天猫Tmall.com" width="190px" height="27px"/>
</a>
</div>
<div class="t-desc">品牌咱都来这儿集合了！</div>
</div>
</div>
<div class="banner"></div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html" charset="utf-8"/>
<title>品牌街-上天猫，就够了</title>
<meta name="keywords" content="关键词,关键词">
<meta name="description" content="">
<style type="text/css">
body,div{margin:0;padding:0;}
body{font-size:12px;font-family:"微软雅黑";color:#666;}
.top{width:100%;height:85px;background:#ffffff;}
.top .t-header{width:1000px;height:85px;background:#ffffff;margin:0 auto;}
.top .t-header .t-logo{float:left;margin-top:28px;}
.top .t-header .t-desc{float:right;line-height:85px;font-size:22px;font-weight:300;}
.banner{width:100%;height:104px;background:#ffffff url("images/banner.png") no-repeat center / 160px 68px;}
</style>
</head>
<body>
<div class="top">
<div class="t-header">
<div class="t-logo">
<a href="#">
<img src="images/logo.png" alt="天猫Tmall.com" width="190px" height="27px"/>
</a>
</div>
<div class="t-desc">品牌咱都来这儿集合了！</div>
</div>
</div>
<div class="banner"></div>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 天猫品牌街Web前端开发 第一阶段设计
- 天猫品牌街Web前端开发第三阶段设计 模仿前端开发的通杀神技
- Web前端开发设计笔试题集锦
- web前端开发与页面设计的协作、区别与发展
- Web 前端开发优秀设计搜录
- 分享我那些年学习平面设计的经历，现从事web前端开发6.5k
- 第一阶段：web前端开发基础环境配置1
- 网页设计、web前端、后台的开发流程和注意事项
- 前端webpack构建react系列二：开发阶段，热模块替换（HMR，热更新）
- web开发-前端设计学习日志
- Web前端开发与PHP设计
- web端设计和web前端开发的区别
- web开发前端发展阶段
- web网页前端开发设计常用编辑器
- [课程设计]Scrum 2.0 多鱼点餐系统开发进度（第二阶段项目构思与任务规划）
- 网页设计、web前端、后台的开发流程和注意事项
- WEB网页设计前端(前台)开发的常用工具推荐
- Web 前端开发工程师必读的15 个设计博客
- web前端开发与页面设计的协作、区别与发展
- 软件开发全套视频教程汇总（javaSE，javaEE，linux,android开发，C# ,web前端，大数据云计算，数据挖掘,web前端，php开发，UI设计，C++开发，3D视频）