前端第一阶段总结

一.网页logo图标替换

​​<link rel="shortcut icon" href="logo.ico" />​​

（代码放到head内）

图标文件放到网页总文件夹内

**在线制作ico图标网站：http://www.bitbug.net/

二，CSS元素显示模式

1.CSS块元素

• 
  

2.CSS行内元素*

3.行内块元素

**

4.元素显示模式总结

**

CSS元素显示模式转换：

display属性：

隐藏元素：display：none

转换为块元素和使隐藏元素显示：display：block;

（上面两种常用于下拉菜单的设置，使下拉内容隐藏和显示，显示时用到了hover伪类）

转换为行内元素：display:inline;

转换为行内块元素：display:inline-block;

三.CSS Position(定位)

position 属性指定了元素的定位类型。

position 属性的五个值：

static：HTML 元素的默认值，即没有定位，遵循正常的文档流对象。

relative：相对定位元素的定位是相对其正常位置。（相对定位）

fixed：元素的位置相对于浏览器窗口是固定位置。（固定定位）

absolute：绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于。（绝对定位）

sticky：粘性定位的元素是依赖于用户的滚动，在 position:relative 与 position:fixed 定位之间切换。（粘性定位）

z-index：指定了一个元素的堆叠顺序（哪个元素应该放在前面，或后面，数组大的放前面）

**

四，CSS Float浮动

**

• • 
    
• 
  

CSS 的 Float（浮动），会使元素向左或向右移动，其周围的元素也会重新排列

把几个浮动的元素放到一起，如果有空间的话，它们将彼此相邻。

左右浮动： float:right; float:left;

清除浮动：1.clear 属性指定元素两侧不能出现浮动元素。
clear的值有left，right，both，none，inherit
2.overflow：hidden
**

• 
  

五，overflow: hidden;的使用

**

1. 溢出隐藏

：如果某一元素内容超过所给定的宽高，就会溢出。而overflow：hidden可以使溢出部分隐藏

2. 清楚浮动

：当父元素没有设置高度时，当父级元素内部的子元素全部都设置浮动float后，子元素会脱离标准流，不占位，所以父级元素高度为0。

（父元素背景色为黑色）

3. 解决外边距塌陷

当父元素内有子元素，想给子元素增加margin-top。但是此时并不是子元素和父元素之间有边距，而是父元素会随着子元素往下掉，是父元素和浏览器增加了外边距。

解决方式为给父元素添加overflow：hidden属性

overflow其他的值：

overflow属性指定如果内容溢出一个元素的框，会发生什么。

visible 默认值。内容不会被修剪，会呈现在元素框之外。

hidden 内容会被修剪，并且其余内容是不可见的。

scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。

auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。

inherit 规定应该从父元素继承 overflow 属性的值。

**

六，使内容居中显示

1. 1. 
      
2. margin: auto;
3. text-align: center;
4. vertical-align: middle;（使元素垂直居中）
5. 单独设置上下左右间距
   margin为整个大盒子与外界间距
   padding为内容与盒子间距
   1. 
      

**

七，CSS 轮廓（outline）

轮廓（outline）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。

轮廓（outline）属性指定元素轮廓的样式、颜色和宽度。

outline-color轮廓颜色：

• • 
    
• invert默认。执行颜色反转（逆向的颜色）可使轮廓在不同的背景颜色中都是可见。
• color 指定轮廓颜色。在 CSS颜色值寻找颜色值的完整列表。
• inherit 规定应该从父元素继承轮廓颜色的设置。
  • 
    

outline-style轮廓样式：

• • 
    
• none 默认。定义无轮廓。
• dotted 定义点状的轮廓
• dashed 定义虚线轮廓。*
• solid 定义实线轮廓。*
• double 定义双线轮廓。双线的宽度等同于outline-width 的值。
• groove 定义 3D 凹槽轮廓。此效果取决于 outline-color 值。
• ridge 定义 3D 凸槽轮廓。此效果取决于 outline-color 值。
• inset 定义 3D 凹边轮廓。此效果取决于 outline-color 值。
• outset 定义 3D 凸边轮廓。此效果取决于 outline-color 值。
• inherit 规定应该从父元素继承轮廓样式的设置。
  • 
    

outline-width轮廓宽度：

• • 
    
• thin 规定细轮廓。
• medium 默认。规定中等的轮廓。
• thick 规定粗的轮廓。
• length 允许您规定轮廓粗细的值。
• inherit 规定应该从父元素继承轮廓宽度的设置。
  • 
    

八，文字font属性

font-weight: 400;可使粗体变细体

font-weight: 700;可使细体变粗体

**

九，小知识

**

.w {
            width: 1374px;
            /* auto使版心水平居中 */
            margin: auto;
        }

        li {
            /* 列表样式无（去除li前默认的小圆点） */
            list-style: none;
        }

        a {
            /* 去除链接下划线 */
            text-decoration: none;
        }`

1. 1. 
      
2. border-radius：？？px；属性控制盒子圆角
3. border: none;去除按钮边框，border可调按钮边框大小
4. opacity改变元素透明度
   1. 
      

**

**

十，做网页的心得

1. 1. 
      
2. 写代码一定要有序，一步一步来，条理要清晰，结构要完整。
   
3. 每部分的标签和id尽量用英文，简单易懂，使他人能明白写的是那部分。
   
4. 为了尽量减少代码，可以使用分组选择器，每个选择器用逗号分隔。如​​h1,h2,p { color:green; }​​
5. 注释不要太多不要太少，要适中。
   
6. 
   

**

十一，自我总结

**

• • 
    
• 前端第一阶段结束了，我并没有很好的达到第一阶段结束的要求，第一阶段我学习了HTML，CSS和一部分CSS3，HTML5，第一阶段考核内容为静态网页，稍后会以另一篇博客来上传我的第一阶段考核作品。
• 在这段学习时间里，知识点铺天盖地的向我袭来，好多内容自己不需要死记硬背，自己先把知识点简单过一下，留有一个印象，然后就需要有大量的时间去实践这些知识点，比如去做一些成品，模仿一些网页，跟着视频教程一步步把网页打出来，遇到网页的部分内容自己头脑里要开始回忆应该使用哪些知识点，就是要提前构思，想到之后自己能盲打的就直接把代码打出来，遇到没记住的就去查，然后在代码里写成注释，一次记不住，多打几次多查几次多注释几次就记住了。
• 最重要的一点，写网页时一定要提前构思怎么写，写的作品结构是怎样的，元素该怎么布局等等，不能直接去堆积元素，这样很可能做不到自己想要的效果，因为太多的内容堆积很可能会扰乱自己的思绪。
• 如何在有限的时间写出最好的成品是我最该思考的问题，自己还需在知识点应用方面下更多的力，首先要先提高的自己的眼界，只有见识的多，解决问题的方法才会随之增多。
• 要多在实践中学习，应用知识点，这样才会对知识点印象深刻，自己做考核内容时大多都是现学现用，这样确实慢了点，但至少会令自己更加理解各种属性，元素的含义和用法，多多实践，多多总结。
•