天猫品牌街Web前端开发第一阶段设计

来源：互联网发布：数据库是什么编辑：程序博客网时间：2024/04/30 04:01

HTML国际化标准模板格式:

<!DOCTYPE html><!-- 声明当前页面文件格式符合w3c标准，兼容所有浏览器 --><html><head><!-- 声明当前页面编码集：中文（GBK/GB2312），国际编码（utf-8） --><meta http-equiv="Content-Type" content="text/html" charset="utf-8"/><!-- 声明当前页面的三要素：title标签以及keywords和description的meta标签，三要素一般都要从数据库表里读取 --><title>国际化标准模板</title><!-- 页面标题一般不超过80个字符（40个汉字） --><meta name="keywords" content="关键词,关键词"><!-- 关键词：title和body内容对应的核心关键词，一般不超过100个字符（50个汉字） --><meta name="description" content=""><!-- 内容摘要，一般不超过200个字符（100个汉字） --><style type="text/css">*{margin:0;padding:0;}</style></head><body></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;}/* 以.符号开头的样式称为类样式  */.top{width:100%;height:85px;background:#ff9900;}.t-header{width:1000px;height:85px;background:#ff0000;}</style></head><body>    <!-- 以class="自定义名称"的样式称为类样式 --><div class="top"></div><div class="t-header"></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;}.top{width:100%;height:85px;background:#ff9900;}/* 嵌套类样式 */.top .t-header{width:1000px;height:85px;background:#ff0000;}</style></head><body>    <!-- 嵌套div标签  --><div class="top"><div class="t-header"></div></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;}.top{width:100%;height:85px;background:#ff9900;}/* 嵌套类样式 */.top .t-header{width:1000px;height:85px;background:#ff0000;margin:0 auto;}</style></head><body>    <!-- 嵌套div标签  --><div class="top"><div class="t-header"></div></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:#ff9900;}.top .t-header{width:1000px;height:85px;background:#ff0000;margin:0 auto;}/* 三层嵌套类样式 */.top .t-header .t-logo{}</style></head><body>    <!-- 三层嵌套div标签  --><div class="top"><div class="t-header"><div class="t-logo"><a href="#"><!-- img图片四要素:src,alt,width,height；搜索引擎会根据alt描述的内容搜索图片，一定要指定width和 --><!-- height的大小，避免因浏览器内核计算每张图片的宽度和高度消耗更多的系统资源而影响图片显示的速度 --><img src="images/logo.png" alt="天猫Tmall.com" width="190px" height="27px"/></a></div><div class="t-desc">品牌咱都来这儿集合了！</div></div></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:#ff9900;}.top .t-header{width:1000px;height:85px;background:#ff0000;margin:0 auto;}/* 三层嵌套类样式 说明：font-weight:700; bold的值等于700 */.top .t-header .t-logo{float:left;}.top .t-header .t-desc{float:right;line-height:85px;font-size:22px;font-weight:300;}</style></head><body>    <!-- 三层嵌套div标签  --><div class="top"><div class="t-header"><div class="t-logo"><a href="#"><!-- img图片四要素:src,alt,width,height；搜索引擎会根据alt描述的内容搜索图片，一定要指定width和 --><!-- height的大小，避免因浏览器内核计算每张图片的宽度和高度消耗更多的系统资源而影响图片显示的速度 --><img src="images/logo.png" alt="天猫Tmall.com" width="190px" height="27px"/></a></div><div class="t-desc">品牌咱都来这儿集合了！</div></div></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:#ff9900;}.top .t-header{width:1000px;height:85px;background:#ff0000;margin:0 auto;}/* 三层嵌套类样式 说明：font-weight:700; bold的值等于700 */.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;}</style></head><body>    <!-- 三层嵌套div标签  --><div class="top"><div class="t-header"><div class="t-logo"><a href="#"><!-- img图片四要素:src,alt,width,height；搜索引擎会根据alt描述的内容搜索图片，一定要指定width和 --><!-- height的大小，避免因浏览器内核计算每张图片的宽度和高度消耗更多的系统资源而影响图片显示的速度 --><img src="images/logo.png" alt="天猫Tmall.com" width="190px" height="27px"/></a></div><div class="t-desc">品牌咱都来这儿集合了！</div></div></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;}</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></body></html>

0 0

天猫品牌街Web前端开发 第一阶段设计

HTML国际化标准模板格式:

天猫品牌街Web前端开发第一阶段设计