• 对齐
• 尺寸
• 分类
• 导航栏
• 图片

对齐

1.使用margin 属性进行水平对齐
2.使用position 属性进行左右对齐
3.使用float 属性进行左右对齐

/*margin-left: auto;*/
/*margin-right: auto;*/
/*position: absolute;*/
/*left: 0px;*/
/*float: inherit;*/
margin: 100px auto;

尺寸操作

尺寸操作.png

分类

分类.png

关键说明一下 display的用法
diaplay 可以改变标签排列的位置，可以用来做导航栏

<li>pinguo</li>
<li>juzi</li>
<li>xinagijao</li>

li{ 
   display: inline;    visibility: visible;
}

效果图

2.png

导航栏

1.垂直导航栏
2.水平导航栏

导航栏.png

648A8236-E5E3-4F45-81C8-4D88C5A9B4F3.png

图片

单独块的设计.png

瀑布流.png