博客html标签设计简单代码介绍

边框圆角  border-radius 

给border设置背景 留心height的问题

为什么会出现不同的效果?
浏览器在解析第二个p的时候,因为字母之间没有空格,机算机会认为一个单词没有写完所以没有换行
列表
1.无序列表ul
第一内部必须有子标签<li></li>
第二ul天生自带外边距 还有一个p标签
并集选择器 用逗号隔开
*选择器有好处有弊端
好处是省事,弊端是太省事了,无端加大了浏览器的负荷。
解决办法按需选择。

list-style是样式属性,除去列标签的符号

list-style的属性值circle(空心圆)disc(实心圆)square(正方形)none(空)
ol有序列表
1内部必须有子标签
2天生自带外边距
ol和ul不同之处就在外边距
有序列表改变前面的符号用标签属性
用标签属性type修改
自定义列表
dl定义列表 dt小标题 dd内容
列表能做什么?
做二级菜单做导航和
备注Margin和padding问题的探讨
Margin:200px;设置一个值说明top。right。bottom。left都是200px
200px;100px;设置两个值上下是200px左右是100px
200px;50px;100px上是200px左右是50px下是100px
200px;50px;100px;50px上200右50下100左50

简单来说就是根据写的距离的数量依次是

1个数量    上下左右

2个数量     上下    左右  

3个数量     上   左右   下  

4个数量      上 右 下  左

 

 

实际高度=height+padding-top+padding-bottom+2*border

 

margin的塌陷现象是什么
相邻两个块级元素同时设置margin时,他们之间外边距不会叠加,会取最大的。这种现象叫margin塌陷
有的标签设置背景是会独占一行,有的还会随着内容的增减而改变自己的空间大小


块级标签 会独占一行无论内容有多少

标签

内敛标签 《行级标签》根多空间大小少占用据内容
块级 p h1--h6系列 div ul ol li dl
内敛:span img i b a em icon(矢量标签)
二者的区别
1块级元素会独占一行
2可以设置宽高
内敛
1内敛不会独占一行
2内敛不可以设置宽高
3内敛元素的margin上下不起作用了
二者转
块计转行级 display(显示)inline行
给块计元素添加属性 display:inline;
行级转会计
给需要的元素添加属性
行级块元
给需要元素添加属性display:inline-block
(可以设置宽高了,可以再一行了)
Line-height 行高 设置字体的垂直位置

 

 

a:link:超链接未被点击时
a:hover:鼠标移上超链接时
a:active:超链接被点击时
a:visited :超链接被点击后

 

 
posted @ 2018-09-13 19:45  前端学习者1  阅读(411)  评论(0编辑  收藏  举报