HTML学习笔记一

HTML学习笔记一

1. input框的属性：
   border ，outline（光标点入输入框的时候，出现的外边框，可以通过设置`‘这里设置输入框的边框为0，鼠标点击的时候不会出现外边框）
2. 如果input框中的光标和前面的logo还有一定的距离可以将input框设置margin，然后去掉input框的border和outline属性，并设置背景为空白，就可以实现了。
3. 
4. 在做网页的时候由于大部分都是采用的微软雅黑，所以可以直接利用body{font-family:'微软雅黑';font-size:8px;}进行设置。
5. 浮动的清除问题：我们利用float：left; 设置元素进行浮动，将元素脱离文档流，对于不需要浮动的元素，就要进行浮动的清除，
   
   下面我们如果将蓝色的盒子设置为清除浮动，独立与第二行存在
   
   那么对于蓝色的盒子我们进行如下的设置style="clear:both;"
6. 制作网站的导航栏的时候，一般导航栏的宽度是设置为100%的，而这里的100%是相对于父级而言的，也就是包裹了导航栏的div来说的。
7. CSS的定位问题：position有三个属性值，分别是相对定位：relative 绝对定位：absolute ； 固定定位：fixed；
   相对定位：是div相对于自身原来的位置进行top/right/bottom/left的位置定位
   绝对定位：是div相对于浏览器的左上角进行定位。
8. 对于导航栏中的选项我们一般采用无序列表进行设置，同时将<UL>里面的的<li>的前面的点号去掉ul{list-style:none;} 这里可以设置为公共样式，凡是采用了无序列表的地方都能够直接去掉前面的点号。然后在将<li> 的样式设置为左浮动.class li{ float:left;}

9. 要设置文字在div中垂直对齐我们可以在写有文字的元素里面设置style属性的行高line-height 等于div的高度，比如一个div里面有个无序列表，那么我们就可以在元素<li>里面 设置行高 .div-class li{line-height:(行高)px;}
   这里还需要设置每个<li/>元素 之间的距离，可以用padding来表示。其实也可以用margin来表示，利用padding我们是以</li> 元素为中心向四周设置间距。.div-class li{padding:0 18px;}/*这里上下表示0px 左右表示18px padding只有两个元素的时候，第一个表示上下，第二个表示左右*/

10. 列表的分类 ：
    有序列表：<ol> (order list)
    无序列表：<UL>(unouder list)
    定义列表：<dl>(definition list) <dt>(definition title) <dd>(definition declaration)

11. 给<a> 标签添加鼠标停留的时候显示相应的文字利用title属性<a src="#" title="维纳斯鲜花礼品网"><img src="imgs/wnasi.png"/></a>
12. 去掉 <a> 标签的下划线 可以添加到公共样式里面，然后设置代码如下：a{ text-decoration:none;} 如果还要继续设置的话可以在具体的div里面进行设置.div_class a{color:red;font-family:'微软雅黑' font-size:15px;}
    如果还要设置鼠标停留的时候的颜色或者样式的变化可以利用hover属性进行设置
    .div_class a:hover{color:green; font-size:20px;}
13. 同样的对于<li>元素 也可以进行hover属性的设置 比如我们的导航栏中的列表当有鼠标移动上去的时候，可以改变背景的颜色或者列表的字体的大小等。.div_class li:hover{background:blue; font-size:18px;}
14. 超链接<a>的属性设置利用text-decoration进行设置
    超链接的伪类有四个：a:link{color:blue;}/*这是标签的原始属性*/ a:hover{color:red;} /*这是鼠标悬停的时候*/ a:acitve{color:green;} /*这是鼠标点击之后还没有松开的时候*/ a:visited{color:yello;}/*这是访问之后的样式*/ 对于这些伪类的属性不仅仅只有<a>标签 有，其他的元素都可以进行伪类属性的设置，比如我们的图片或这div都可以设置 ，其中用的最多的就是hover属性。.div-class img:hover{border:1px solid red;}/*这是设置鼠标悬停在图片的上方时将边框设置为1px*/