网页布局练习一

制作样式如图：

css代码：

html代码：

制作效果：

制作思路：

我的制作思路是先设置一个大的div使内容居中先，然后设置一个ul标签，里面有三个li标签，li向右浮动，每个li标签下又有一个ul标签，四行li，每个设置取消浮动，第一个li包含H标签，第二个包含img和P标签，P标签设置定位、设置背景图片和字体颜色，第三个li中有一个P标签和input，其中P标签包含两个span标签，各自设置相应颜色，还有设置浮动和设置宽度把input按钮推到右边。还有前三个li里面的内容算好宽度设置左右內间距，第四个li不设置內间距，设置边框和颜色，就差不多做成了。