版权声明:本文为博主原创文章未经博主允许不得转载。 /xnh_/article/details/
设计出五环的正确颜色和形状并放置浏览器中间.
首先我们用5个div块级元素来形成5个环的颜色和形状,并把这5个環放置到一个父级容器div内再将这个父级元素div放置到浏览器中间位置。
div的作用:div是一个块级元素它可以将html分割成独立的、不同的部分。如果用id和class来标记div那么该标签便可以被css所使用变的更有效,通过id或class设计各种的样式
我们将用div元素来ps绘制奥运五环五环的颜色和形状。
(2).需要鼡到的样式属性及其用法
margin: 上外边距值 右外边距值 下外边距值 左外边距值 margin: 上外边距值 左右外边距值 下外边距值 margin: 上下边距值 左右边距值 |
border:边框宽喥 边框样式 边框颜色 |
首先给5个环设置class用来css文件关联样式并把这5个环放置一个父级div中
通过绑定html中设置好的class,然后ps绘制奥运五环五个环的形狀和大小还有位置
(3).ps绘制奥运五环每个环的颜色和位置
这里要注意每个环的颜色不同,位置是需要简单的计算第一个环的位置相对于父級div是距左0距上0,因为圆的半径为50px所以第二个环的位置应该是距左105距上0(中间留了5px的缝隙),以此类推
首先要知道,我们设计的5环是在div内部所以调整div的位置便可以实现浏览器居中i效果。
//设置到浏览器中间长度
//设置到浏览器中间高度
若是没有为margin-left和margin-top赋负值的话你会发现 这个五環的左上角在中间位置
所以需要注意的是计算出你所设计的五环的长和宽并且减去长和宽的距离。