Some basic knowledge of CSS and DIV (2)_html/css

Some basic knowledge of CSS and DIV (2)_html/css_WEB-ITnose

WBOY

Release： 2016-06-24 12:31:57

Original

862 people have browsed it

margin: outer margin, which is the distance between this tag and other tags. padding: inner margin, the inner margin of the tag. For the compatibility of various browsers, it is best to add it at the top of the css file every time. As long as tags are used, the following reset

div, body

{

margin:0;

padding:0;

}

display:block; can turn inline elements into block elements float:left; float, can arrange block elements in a row clear:both Clear floating html tags: the items in the ordered list ul are li, ul and li are all block elements, so one element per line. If you want to parallelize it, just float float:left. By default, there is a dot before the sub-item, which can be removed by list-style:none; (in ul)

; >

& lt; li & gt; career development plan & lt;/li & gt;

& lt; li & gt; I want to apply for & lt;/li & gt;

& lt; li & lt; online & lt; /li>

Reset the center: Just let the line height = the line height of the text, and text-align:center, as follows

#nav ul li

{

float:left;

margin-right:1px;

height:35px;

line-height:35px;

text-align:center;

padding:0 10px;

}

For the menu in the website, just design it as above (basic structure)

text-decoration:none; indicates the normal text style text-decoration:underline with underline

10. Tag: a:hover is when the mouse passes over it

The following is the two passes A small example of learning, a navigation bar, first is part of the html code

Then, apply it to this div css code

                  <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>

Copy after login

                  <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>

Copy after login