前端小知识

1、如何在网页标题栏中插入图片图标：

  

 <link rel="icon" type="image/x-icon" href="图片路径" />

（1） rel表示将连接的文件,与当前网页的关系。icon表示将连接的文件,是当前网页的图标。

---

2、导航条如何设置：

li {
        list-style: none;
      }
      a {
        text-decoration: none;
        color: #777777;
      }
ul {
        width: 550px;
        height: 50px;
        background-color: #e7e7e2;
        position: absolute;
        right: 250px; 
        margin:0;
      }
      ul > li {
        float: left;
        height: 50px;
        line-height: 50px;
        width:171px;
        text-align: center;
      }
      ul > li:hover {
        background-color: #403f40;
      }
  a {
        display: block;
      }
      a:hover {
        color: white;
      }

.container {
          width: 450px;
          height: 40px;
          margin: 100px;
          position: absolute;
          top: 5px;
          right:2%
        }
                        
 .parent {
              width: 100%;
              height: 42px;
              top: 4px;
              position: relative;
            }
                        
 .parent>input:first-of-type {
             width: 200px;
             height: 50px; 
             border: 1px solid #ccc;
             font-size: 16px;
             outline: none;
          }
                        
.parent>input:first-of-type:focus {
           border: 1px solid #317ef3;
           padding-left: 10px;
           }
                        

.parent>input:last-of-type {
           width: 100px;
            height: 54px; 
            position: absolute;
            background: #317ef3;
            border: 1px solid #317ef3;
            color: #fff;
            font-size: 16px;
            outline: none;
           }

<ul class="cs">
		  <li ><a href="#">Home</a></li>
		  <li ><a href="#au">About Us</a></li>
		  <li ><a href="#new">News</a></li>
		</ul>

（1）list-style: none;

去掉实心圆。

（2）text-decoration: none;

去除a标签默认样式的下划线。

（3）  margin:0;

移动到盒子中间（margin:0 auto设置对象上下外边距为0,左右为自动，水平居中，注意不要设置float，即可在div居中。）

（4）

相对定位和绝对定位的区别：

一、主体不同

1、相对定位：相对于元素框。

2、绝对定位：absolute 会脱离文档流。

二、特点不同

1、相对定位：在使用相对定位时，无论是否进行移动，元素仍然占据原来的空间。因此，移动元素会导致它覆盖其它框。

2、绝对定位：选取其最近的父级定位元素，当父级 position 为 static 时（默认为static），absolute元素将以body坐标原点进行定位，可以通过z-index进行层次分级（选取整数）。

（其中使用定位还可以使元素定位在某个具体位置）

（5）ul>li ：子代选择器，不包括 ol 里的 li 。(<ol>可以定义一个有序列表，可以使列表具有排序功能。具体的列表项使用<li>元素来规定。)(无序列表ul。)

（6）  text-align: center;

主要用来文本水平居中。

（7） display: block;

div元素默认其为块级元素。

（8）border：1px solid;

给元素设置边框，1px是边框的宽度，solid是边框的样式 （solid:实线，dotted:点线，dashed:虚线，double：双线）

(9).parent>input:last-of-type

.parent下的最后一个input

(10).parent>input:first-of-type:focus;

.parent下的第一个input，然后在获取焦点的时候执行输入的内容

（10） outline:none;

不显示元素轮廓

（11）：padding-left:10px;

距离左边补距10像素。

3、（使图片渐渐变暗）阴影部分的实现：

<div class="box1">
		<img src="图片路径" alt="" />
	    <h1></h1>
</div>
.box1{
		width: 430px;height: 280px; margin-left: 200px; position: relative;/* 设置阴影部分 */
	 }
.box1 img{display: block;width: 100%;height: 100%;}/* 将img设置为一个块元素 */
.box1 h1{position: absolute;width: 100%;height: 100%;background-color: black;top: 0;left: 0;margin: 0;opacity: 0;transition: all 0.5s;}
                      /* transition-duration: 数字s; (设置过渡秒数) */
.box1:hover h1{
				opacity: 0.5;/* 改变盒子的透明度 */
			  }

4、背景图片固定：

background-image:url('图片/heardone.jfif');
background-attachment: fixed;

background-attachment: fixed;

背景图片不会随着元素或页面的滚动而滚动