CSS与DIV的一些基础知识（2）_html/css_WEB-ITnose-html教程-PHP中文网

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

php中文网

发布： 2016-06-24 12:31:57

原创

1040人浏览过

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;

知我AI

一款多端AI知识助理，通过一键生成播客/视频/文档/网页文章摘要、思维导图，提高个人知识获取效率；自动存储知识，通过与知识库聊天，提高知识利用效率。

查看详情

height:35px;

line-height:35px;

text-align:center;

padding:0 10px;

}

立即学习“前端免费学习笔记（深入）”；

网站中menu的话，按如上设计就可以了（基本结构）

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

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

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

                  <p class="sycode">                 <     div      id     ="nav"     >           <     ul     >           <     li     ><     a      href     ="#"     >     MyHome     </     a     ></     li     >           <     li     ><     a      href     ="#"     >     个人简介     </     a     ></     li     >           <     li     ><     a      href     ="#"     >     文档分类     </     a     ></     li     >           <     li     ><     a      href     ="#"     >     人生发展规划     </     a     ></     li     >           <     li     ><     a      href     ="#"     >     我要提问     </     a     ></     li     >           <     li     ><     a      href     ="#"     >     在线问答     </     a     ></     li     >           </     ul     >           </     div     >                  </p>

登录后复制

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

                  <p class="sycode">                 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     }                  </p>

登录后复制