css三角形之美与品优购项目
程序员文章站
2022-04-01 11:28:57
...
CSS三角形之美
div{
width: 0;
height: 0;
line-height:0;
font-size: 0;
border-top: 10px solid red;
border-right:10px solid green;
border-bottom: 10px solid blue;
border-left: 10px solid #000;
}
一张图，你就知道css三角是怎么来的来的了，
做法如下：
1. 我们用css边框可以模拟三角形效果
2. 宽度高度为0
3. 我们4个边框都要写，只保留需要的边框颜色，其余的不能省略，都改为transparent透明就好了
4. 为了照顾兼容性，加上font-size：0； line-height：0；
命令示例图：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div {
width: 0;
height: 0;
border-top: 200px solid red;
border-right: 200px solid green;
border-bottom: 200px solid blue;
border-left: 200px solid yellow;
}
p{
width: 0;
height: 0;
border-style: solid;
border-width: 10px;
border-color: transparent transparent transparent;
font-size: 0;
line-height: 0;
}
</style>
</head>
<body>
<div></div>
<p></p>
</body>
</html>
网页显示图：
品优购项目
一、品优购项目介绍
项目名称： 品优购 。
项目描述：品优购是一个电商网站，我们要完成首页、列表页、详情页、注册页面的制作。
二、项目背景
现阶段电商类网站很流行，很多同学毕业之后进入电商类企业工作，同时电商类网站需要的技术也是较为复杂的
1. 复习、总结、提高前面所学布局技术。
三、设计目标
保证浏览器ie7及以上，火狐、360、Safari、Chrome等。谁让我再测ie6，就跟谁急。
熟悉css+div布局，页面的搭建工作
了解常用电商类网站的布局模式
为后期品优购移动端做铺垫。
四、几点思考
1. 开发工具 sublime、photoshop（fw）、主流浏览器（以Chrome浏览器为主）
2. 技术栈
HTML 结构 + css 布局 （因为我们就会这些。。。嘻嘻）
五、代码规范
请参照品优购代码规范
六、前期准备工作
要实现结构和样式相分离的设计思想。
目录文件夹：
| 名称 | 说明 |
| 项目文件夹 | pinyougou |
| 样式类图片文件夹 | img |
| 样式文件夹 | css |
| 产品类图片文件夹 | upload |
| 字体类文件夹 | fonts |
| 脚本文件夹 | js |
样式文件的分类
1. 初始化css（css reset） 让浏览器风格统一，把常用的初始化语句放入base.css里面。
2. 我们把一些公开的样式放入common.css里面。
七、 网站ico图标
1. 使用ico图标
1.首先吧favicon.ico这个图标放到根目录下。
- 在HTML里面，head之间引入代码。
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>
2. 制作ico图标
我们可以自己做的图片，转换为ico图标，以便放到我们站点里面，
方法步骤：
1. 首先把我们想要的切成图片。
2. 要把图片转换为ico图标，我们借助与第三方转换网站： http://www.bitbug.net/。比特虫
总结：
代码： <link rel="shortcut icon" href="favicon.ico" type="image/x-ico"/>
注意：
1. 它是显示在浏览器中的网页图标。
2. 它是图标形式，不是一个图片。
3. 位置是放到head标签中间。
4. 后面的type="image/x-icon"属性可以省略。（我相信你也愿意省略）
5. 为了兼容性，请将favicon.ico这个图标放到根目录下。（我们就不要任性了，听话放位置，省很多麻烦。
你好，我也好。）
八、 网站优化三大标签
SEO是由英文Seach Engine optimalzation缩写而来，中文意译为“搜索引擎优化”！
常见的搜索引擎，比如百度，谷歌，雅虎，搜狗等等....
SEO是指通过对网站进行站内优化、网站结构调整、网站内容建设、网站代码优化等和站外优化，从而提高网站的关键词
排名以及公司产品的曝光度。简单地说就是，把产品做好，搜索引擎就会介绍客户来。
我们现在阶段主要进行站内优化，网站优化，我们应该要懂。。
1. 网页title标题
title具有不可替代性，是我们的内页第一个最重要标签，是搜索引擎了解网页的入口，
和对网页主题归属的最佳判断点。
建议：
首页标题： 网站名（产品名） -网站的介绍
例如：
品优购-综合网购首选-正品低价、品质保障、配送及时、轻松购物！
2. description 网站说明
对于关键词的作用明显降低，但由于很多搜索引擎，仍然大量采用网页的MATA标签中描述部分作为
搜索结果的“内容摘要”。就是简要说明我们网站主要做什么的。
我们提倡，description作为网站的总体业务和主题概括，多采用“我们是...”“我们提供...”“xxx网作为...”
“电话：010...”之类语句。
品优购网：
<meta name="description" content="品优购JD.COM- 专业的综合网上购物商城，销售家，数码通讯
，电脑，家居百货，服装服饰，母婴，图书，食品等数万个品牌优质商品，便捷、诚信的服务，为您提供愉悦的网上购物体验！"/>
注意点：
1. 描述中出现关键词，与正文内容相关，这部分内容是给人看的，所以要写的很详细，让人感兴趣，吸引用户
点击。
2. 同样遵循简短原则，字符数含空格在内不要超过120个汉字。
3. 补充在title-keywords 中未能充分表述的说明。
4. 用英文逗号 关键词1，关键词2
3. keywords 关键字
keywords是页面关键词，是搜索引擎关注点之一。keywords应该限制在6~8个关键词左右，电商类网站
可以多少许。
品优购网：
<meta name="keywords" content-"网上购物，网上商店。手机，笔记本，电脑，
MP3,CD,VCD,DV,/相机，数码，配件，手表，存储卡。品优购 ">
小米网：
<meta name="keywords" content="小米，小米6，红米note4，红米MIX，小米商城" />
4. 总结：
1. 我们的网页要做的优秀，符合搜索引擎的要求，才可以让搜索引擎优先显示我们的网页。
所以我们的网站要做很多的优化，其中就有这三大标签。
2. 一边情况下，三大标签里面的优化词，都是专门的优化人员写的，我们大概了解一下规范就可以了。
3. 我们的主要任务是，能够这三大标签，然后把优化人员给我们的内容，添加到里面。
上一篇： 吃茭白的禁忌有哪些呢？