前端新手——初学制作静态页面时常用的命令

初学HTML及CSS

新手刚开始学习前端，有说的不对或是不专业的地方欢迎指正，以下是初次练手制作静态页面时常常会遇到的一些基础问题。

1、定位

在制作静态页面时需要用到定位，大盒子与小盒子嵌套的情况。

.big{
		background-color: gray;
		width: 500px;
		height:500px;
		position: relative;
	}//画一个灰色的大盒子
.small{
		background-color: greenyellow;
		width: 300px;
		height:300px;
		position:absolute;
		left: 100px;
		top: 100px;
	}//嵌套一个黄绿色的小盒子

<div class="big">
	<div class="small">
	</div>
</div>

利用left和top让小盒子在大盒子内自由放置，甚至跑到大盒子外也是可以的。

2、图片与文字对齐

先随意的设置个列表。
有时候需要图片后跟一段文字或者文字后跟一张图片，由于图片是顶部对齐，文字是底部对齐，则会变成这样：

这时候若是想让图片与文字居中对齐的话可以添加以下代码：

.one{
		vertical-align: middle;
	}

<div class="big">
        <div class="small">
            <ul>
                <div><img class="one" src="./images/1.png">第一</div>
                <div><img class="one" src="./images/up.jpg">第二</div>
                <div><img class="one" src="./images/down.jpg">第三</div>
            </ul>
        </div>
</div>

图片和文字就能居中对齐了：

制作静态页面时常常用到margin来调整盒子、文字和图片的位置。