欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

CSS与DIV的一些基础知识(2)_html/css_WEB-ITnose

程序员文章站 2022-04-14 11:08:45
...
margin:外边距,就是这个标签与其他标签之间的距离 padding:内边距,标签内部边距 为了各浏览器的兼容性,最好每次在css文件的顶部加入,只要用到标签就应该加入下面的重置

div,body

{

margin:0;

padding:0;

}

display:block;可将内联元素变成块元素 float:left;浮动,可将块元素排在一行 clear:both 清除浮动 html标签:有序列表 ul 里面的项是 li,ul和li都是块状元素,所以一个元素一行,要并行的话就浮动就可以了 float:left, 默认子项前存在圆点,可用list-style:none;去除(ul中)

  • MyHome
  • 公司简介
  • 公司业务
  • 职业发展规划
  • 我要应聘
  • 在线问答
重置居中:让行高=文字的行高就行,并且text-align:center,如下

#nav ul li

{

float:left;

margin-right:1px;

height:35px;

line-height:35px;

text-align:center;

padding:0 10px;

}

网站中menu的话,按如上设计就可以了(基本结构)

text-decoration:none;表示文字正常样式 text-decoration:underline带下划线

10. 标签:a:hover 是鼠标经过时

下面是经过这两次学习的一个小例子,一个导航条,首先是html方面的部分代码

                  

MyHome a > li > 个人简介 a > li > 文档分类 a > li > 人生发展规划 a > li > 我要提问 a > li > 在线问答 a > li > ul > div >

之后是,应用到这个div的css代码

                  

div,body,ul,li { margin : 0 ; padding : 0 ; } #nav { width : 960px ; height : 35px ; margin : 0 auto ; margin-top : 35px ; background-color : #CCC ; } #nav ul { width : 960px ; height : 35px ; list-style : none ; } #nav ul li { float : left ; margin-right : 1px ; height : 35px ; line-height : 35px ; text-align : center ; } #nav ul li a { font-size : 14px ; color : Black ; text-decoration : none ; padding : 0 10px ; height : 35px ; display : block ; float : left ; } #nav ul li a:hover { color : White ; background : #000 }