1.首先，在写音悦台项目的时候，我以为没有那么难，可是一接触下来，学到了很多小技巧，比之前学的实用多了
例如：最开始知道浮动用float,没想到写到最后会坍塌，然后就换了其他的方法，用display属性写浮动，分为 inline-block、
display:flex ;
justify-content: flex-end; 水平垂直居中
align-items: center;竖直垂直居中
更好的展示页面的美观度，也不会坍塌。
2.为了把一个页面嵌套在其他页面头部，试了很多办法，一直没有找到正确的，然后最后才发现，写完嵌套，跳转的时候还需要写target 。
position ：relative 相对定位 和absolute绝对定位
例子：
<iframe src="head.html" width="100%" height="178px"></iframe>:嵌套把页面嵌套到另外一个页面
css写属性
iframe{
border：0
}
然后当前页面点跳转的时候添加target="_top" 例子：<a href="index.html" class="active" target="_top">
target :语法
<a target="value">
属性值
_blank 在新窗口中打开被链接文档。
_self 默认。在相同的框架中打开被链接文档。
_parent 在父框架集中打开被链接文档。
_top 在整个窗口中打开被链接文档。
3。相对于之前用CSS属性写html页面，学到了许多新的东西，比如 ：
vertical-align: middle; 垂直居中对齐
vertical-align：top;把元素的顶端与行中最高元素的顶端对齐
vertical-align:bottom;使元素及其后代元素的底部与整行的底部对齐。
nth-child(n) 选择器匹配属于其父元素的第 N 个子元素，不论元素的类型。 更好的找到元素进行设计样式
等等...
4.学到的小知识点，供大家借鉴
1.box-sizing:boder-box 并排放置两个带边框的框，可通过将 box-sizing 设置为 "border-box"
2.相当于浮动
display: flex;
/*水平垂直居中*/ /*flex-end 是右边 flex-star 是左边*/
justify-content: space-around; /* 均匀排列每个元素 每个元素周围分配相同的空间 */
/*竖直垂直居中*/
align-items: center;
3.vertical-align: middle; 垂直居中对齐
vertical-align：top;把元素的顶端与行中最高元素的顶端对齐
vertical-align:bottom;使元素及其后代元素的底部与整行的底部对齐。
4.focus获取焦点
5.outline: none;/*outline 属性设置元素周围的轮廓线*/
6.cursor: pointer; /*把箭头变为小手*/
7.font-size: 0; /*空格占的东西给去掉*/
8.text-align: center; 设置居中
9. font-size:设置字体大小
10.font-weight:属性设置文本的粗细
11.background-image:url() :设置背景图片 记得添加高度(不然不显示图片）
background-position: center -95px; /*定位背景图像*/
12.background-repeat: no-repeat; 属性设置是否重复背景图像 不重复
13.text-decoration: none：消除文本下划线
14.hover: 选择器用于选择鼠标指针浮动在上面的元素
15.display: block:让对象成为块级元素(块级元素可以显示，行元素不能显示）
16.text-indent: 2em; /*text-indent 属性规定文本块中首行文本的缩进*/
17. line-height: 2em;/*line-height 属性设置行间的距离(行高)*/
18.border-radius: 10px; 边框弧度
22.文字过长，变成省略号
text-overflow: -o-ellipsis-lastline;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
23.
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
h2.pos_left
{
position:relative;
left:-20px;
}
h2.pos_right
{
position:relative;
left:20px;
}
</style>
</head>
<body>
<h2>这是位于正常位置的标题</h2>
<h2 class="pos_left">这个标题相对于其正常位置向左移动</h2>
<h2 class="pos_right">这个标题相对于其正常位置向右移动</h2>
<p>相对定位会按照元素的原始位置对该元素进行移动。</p>
<p>样式 "left:-20px" 从元素的原始左侧位置减去 20 像素。</p>
<p>样式 "left:20px" 向元素的原始左侧位置增加 20 像素。</p>
</body>
</html>
浙公网安备 33010602011771号