毕竟是第一个前端,需要总结学习的地方还是很多
目录
一、复习
1.字体图标的使用
(1)上icomoon官网选择需要的图标download到本地后,将解压后的fonts文件放入项目根目录下,如要加入新的图标,则重新下载重新覆盖。
(2)打开style.css文件,复制到display:block;为止,放入网页css文件中,如下:
/* 声明字体图标 */
@font-face {
font-family: 'icomoon';
src: url('fonts/icomoon.eot?omaf0z');
src: url('fonts/icomoon.eot?omaf0z#iefix') format('embedded-opentype'),
url('fonts/icomoon.ttf?omaf0z') format('truetype'),
url('fonts/icomoon.woff?omaf0z') format('woff'),
url('fonts/icomoon.svg?omaf0z#icomoon') format('svg');
font-weight: normal;
font-style: normal;
font-display: block;
}
(3)使用::before/::after放在文字之前/之后,在demo.html中找到字体图标编码,放入content中,记得加转义符'\',如下:
.arrow-icon::after {
content: '\e900';
//调整位置
margin-left: 6px;
//字体种类
font-family: 'icomoon';
}
2.导入css文件
<!-- 导入初始化模块 -->
<link rel="stylesheet" href="base.css">
3.文字中添加空格: 记得分号
<li>品优购欢迎你! </li>
4.网页中排列整齐的效果基本都用ul>li>a
<div class="navitems">
<ul>
<li><a href="#">服装城</a></li>
<li><a href="#">服装城</a></li>
<li><a href="#">服装城</a></li>
<li><a href="#">服装城</a></li>
<li><a href="#">服装城</a></li>
<li><a href="#">服装城</a></li>
<li><a href="#">服装城</a></li>
<li><a href="#">服装城</a></li>
</ul>
</div>
5.box-sizing
盒子具体尺寸是否包括margin、border、padding值?
具体参考:CSS解读之box-sizing属性_笔心的博客-CSDN博客
6.精灵图
坐标一般为负
background: url(images/icons.png) no-repeat 0 0
7.文字溢出省略号显示
.news_bd ul li {
height: 24px;
line-height: 24px;
//溢出部分隐藏
overflow: hidden;
//所有文字一行显示
white-space: nowrap;
//省略部分用省略号表示
text-overflow: ellipsis;
}
效果如下:
8.子绝父相
9.选中第几个孩子
前三个: .recom_bd li:nth-child(-n+3)
最后一个: .sk_con ul li:last-child
4的倍数: .sk_bd ul li:nth-child(4n)
偶数个: .shortcut .fr ul li:nth-child(even)
奇数个: .shortcut .fr ul li:nth-child(odd)
10.图片、表单等与旁边文字对齐方式:vertical
vertical-align:top;
11.网站格式初始化
/* 所有标签内外边距清零 */
* {
margin: 0;
padding: 0;
}
/* em和i的斜体的文字不倾斜 */
em,
i {
font-style: normal;
}
/* 去掉li前面的小圆点 */
li {
list-style: none;
}
/* border0兼容性,图片有链接时会有边框出现 */
/* 取消图片底部空白缝隙 */
img {
border: 0;
vertical-align: middle;
}
/* 鼠标经过button时变成小手 */
button {
cursor: pointer;
}
/* 超链接文字的颜色及下划线 */
a {
color: #666;
text-decoration: none;
}
/* 鼠标经过超链接文本颜色变红 */
a:hover {
color: #c81623;
}
/* button和表单字体统一 */
button,
input {
font-family: Microsoft YaHei, Heiti SC, tahoma, arial,Hiragino Sans GB,"\5B8B\4F53",sans-serif;
/* 去除默认的灰色边框 */
border: 0;
/* 去除点击后出现的focus */
outline: none;
}
body {
/* 抗锯齿性,让文字显示更加清晰 */
-webkit-font-smoothing: antialiased;
background-color: #fff;
font: 12px/1.5 Microsoft YaHei, Heiti SC, tahoma, arial,Hiragino Sans GB,"\5B8B\4F53",sans-serif;
color: #666;
}
/* 清除浮动 */
.clearfix:after {
visibility: hidden;
clear: both;
display: block;
content: "";
height: 0;
}
.clearfix {
*zoom: 1;
}
12.清除浮动
参考:清除浮动的最常用的四种方法,以及优缺点_h_qingyi的博客-CSDN博客_清除浮动
13.网站底部相关链接等显示
使用dl、dt/dd
<dl>
<dt>服务指南</dt>
<dd>购物流程</dd>
<dd>会员介绍</dd>
<dd>联系我们</dd>
<dd>用户协议</dd>
<dd>加入我们</dd>
<dd>友情链接</dd>
</dl>
效果如下:
14.text-align-center使用
(1)块级元素下使用text-align: center,使得其文本内容居中对齐
(2)块级元素下使用text-align: center,使得包含在其中的行内元素或行内块元素居中对齐
(3)块级元素下使用text-align: center,包含在其中的块级元素不能居中对齐, 但是这个子代块级元素p会继承text-align: center,使得p的文本内容居中对齐
参考:细谈text-align: center_番茄炒蛋加鸡腿的博客-CSDN博客_text-align:center
与<center>区别参考:text-align:center 与 <center> 的区别_醋酸菌HaC的博客-CSDN博客_text-align:center
二、新学知识
1.网站favicon图标
显示在网站标签页的网站名前,为ico格式文件,将ico文件放入项目根目录下,并在html文件中导入图标
<!-- 导入favicon图标 -->
<link rel="shortcut icon" href="favicon.ico">
2.TDK三大标签SEO优化
SEO(Serach Engine Optimization)搜索引擎优化,在搜索引擎中网站的权重,决定了在搜索关键字时网站的排名是否靠前。
SEO目的是通过对网站的深度优化,帮助网站获取免费流量,提升网页排名。
(1)title
格式:网站名-网站介绍(一般不超过30字)
(2)description
网站的具体形容,字数更多
(3)keywords
网站关键词
具体格式如下:
<title>品优购-综合网购首选,正品低价、品质保障、配送及时、轻松购物!</title>
<!-- 网站说明 -->
<meta name="description"
content="品优购-专业的综合网上购物商城,为您提供正品低价的购物选择、优质便捷的服务体验。商品来自全球数十万品牌商家,囊括家电、手机、电脑、服装、居家、母婴、美妆、个护、食品、生鲜等丰富品类,满足各种购物需求。" />
<!-- 关键字 -->
<meta name="Keywords" content="网上购物,网上商城,家电,手机,电脑,服装,居家,母婴,美妆,个护,食品,生鲜,京东" />
(4)logo->h1>a,a中背景为logo图片,title为网站名
<!-- 1.logo -->
<div class="logo">
<!--
1.logo里面先放h1标签,提高权重,搜索引擎中靠前
2.h1里面再放一个链接,可以返回首页,链接里面放文字,但文字不能显示
-->
<h1>
<a href="index.html" title="品优购商城">品优购商城</a>
</h1>
</div>