切图--学习笔记(一)

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/Jaya_lee/article/details/56839165

正式的规律的学习生活已经开始了一周了,这一周的学习内容是html和css写静态页面,也就是所谓的切图。切图是每个前端的基本活,对于小白来讲,看着通过自己的代码变成网页时,心中是满满成就感。切了一周的图,收获不小,之前写的感觉和原图差不多就行了,但随着技术的加深(呸呸呸 其实就是多写了些页面有了一些总结),强迫症对一像素的执着,因此对我在写页面时出现的问题做了一些总结,希望可以帮助到一些同样困惑的小伙伴(大神请自动跳过)。话不多说,直接上货。


1.关于伪类选择器

<ul>
    <li><a href="#">lorem ipsum dolor sit amet</a></li>
    <li><a href="#">consetetur sadipscing eiitr sed diam</a></li>
    <li><a href="#">nonumy eirmod tempor invidunt ut</a></li>
</ul>

比如我要给第二个li写样式,则可以ul li:nth-child(2){}表示ul里的第二个li ,
但是我要给第二个a写,用 ul li a:nth-child(2){},这种就是错误的,因为一个li只有一个a,不存在第几个child。所以就需这样写ul li:nth-child(2) a.
所以这里需要明确的就是:之前的元素,它是否有相邻兄弟元素,以及它是父级中的第几个子级。
2.关于overflow:hidden
现在我的top大盒子里有ul li,即使我给定了top的高, li的高若是超过了大盒高, 它不会让top的高变大,但是它会使top的相邻兄弟元素有了一个上边距,因此给top一个overflow.
还有常见的一种情况就是浮动元素造成父级的高没有了,塌陷。这种情况可以给父级元素一个overflow:hidden;父级的高就有了。相当于清浮动的效果。
3.关于清浮动
元素浮动带来的影响可谓是千变万化,根本无法预测造成什么样的影响,但是你要发现有些元素不按照你预定的样式呈现,而它前面有浮动的元素,就要考虑是浮动带来的影响。
清浮动一般我用两种。一种是在样式里写一个总的.clear{clear:both},这样的话就可以在浮动元素的后面加一个

,这样便可以清掉刚才浮动元素带来的所有的影响。
还有一种比如我看到了前面浮动元素使我的banner有了影响,我就在banner里写一个.banner{clear:both;},这样可以避免加一个空的div标签,但是这两种情况相比起来还是第一种好用,因为浮动元素可能不止影响了banner,说不定同时影响了别的地方,用法一就可以全部清除了。
4.关于布局
一开始大家都是从固定布局开始做起,熟练了之后就可以开始考虑别的因素,比如浏览器放大缩小带给它的影响,为后面做响应式布局、移动端时奠定一个好的基础。
这里写图片描述
a)看到网页时,我们可以发现整个文本是居中的,这样可以给带有文本的大盒一个固定的宽(也就是图中标尺间的宽度),让它margin:0 auto;至于左上角logo图片和banner里的图片可以给它们定个位。然后再分别给带背景的最大盒width:100%;并且铺上背景色。这样就可以避免在别的大屏的电脑中出现空白条。而且习惯了固定布局给宽给padding,在不同分辨率的电脑里是有很大的影响,所以现在先养成这种好的习惯。
b)尽量不要给盒子高度,通过边距、行高这些让大盒子撑起来。


今天就先总结到这里了,欢迎大家评论哈~

展开阅读全文

没有更多推荐了,返回首页