简单的布局练习,总结了一些方法和技巧。

一、代码实现

实现效果:

299

正版效果:

288

二、总结

(1)上下居中

  1. 内容只有左右居中,text-align: center;没有方便的上下居中选项。
  2. 想要实现上下居中效果,只能这样:line-height: 100px;
  3. 注意我这里的块高度height:100px,反正文字高度和块的高度设成一样的就可以了。

(2)padding

padding这个东西很好用,当选项栏的文字凑在了一起的时候,就需要使用padding把间距扩大,更加好看。

(3)text-decoration: underline

选择文本时添加下划线。

(4)display: inline;

设成内联元素,使li不自动换行。

(5)单独的文本a也有各种状态

a:link,a:visited…..

对应的不同情况的css,可以进行更加详细的设置。

(6)list-style-type: none;

去掉列表的默认格式。

发表评论

电子邮件地址不会被公开。 必填项已用*标注