写给设计师的前端小知识

加入纷享阁资源网VIP，即可查看下载本站所有内容！
下载地址：
[hide]幕后大佬是样式啊，样式，嗯……样式，重要的事情说三遍！哈哈……sorry,让大家久等啦！（虽然我早就看封面不爽了，但是还来不及改，将就吧~）
            废话不多说，赶紧……（ ）
        一、样式大集合
       
        之前介绍了“嵌入样式”及“内联样式”，前者只对自己所在的标签起作用，后者对当前页面所有通过了class引用了该样式的标签起作用。内联样式一般写在头部，但是当样式积少成多，且其他html页面也要引用当前页面的样式的时候（比如针对body的）就比较麻烦了。你肯定不想再写一遍的
        所以又出现了“外联样式”，是的，嵌入不足，内联不够，所以拉个外场援助。
        外联样式是写在另一个文件内的，其文件即格式为 .css ，也称“样式表”，之所以是表我想大概是因为浏览器要像查表一样根据类名来查询吧，然后获取里面的样式内容。其写法跟 里的是一模一样的，只不过已经有了专用的 .css文件来装了，自然也就不需要style标签包装了。如果你还稍微有点晕，那下面我就用PS来讲一下吧。
       
       
       
        也就是说，只要是html文件有引入一个写了样式的CSS文件，都是起作用的，所以比起只管一个标签的嵌入样式和管理一个html的内联样式，外联的css文件作用域就相对比较大了。但是优先级却成反比。  
       
        这里为了能看见你的div先添加了一个背景，至于为什么不加就看不见，请翻阅前面的教程，哈哈哈……/**/内是可以写注释的，对网页无影响。url是图片的地址，可以像浏览文件一样选择图片，所以不担心会输错地址。有的童鞋可能会经常遇到提示文字不出来的情况，你可以删到“：”前面，从“：”开始打字，或者“；”后面空格才会出来，总之自己多试试……
        然后保存，浏览器打开：
       
       
        我去，这图截得，来看看原图：
       
        最起码给我截个中间的吧，所以你得加一句来调整背景的位置：background-position:center；（center即是将背景放置正中间）这样才算差不多了吧，当然你们随便下一张图片当背景都OK啦，仲基欧巴也不错哟~
          
       
       
        2.定位置   
            其实明显看到被咨询那一排挡住了一些，因为不在一层，原理翻阅第二篇。（让你们学完就忘，╭(╯^╰)╮哼！）
        所以得让其浮起来，并使用margin把与周围的距离隔离出来。
        那么怎么去算位置呢，如果你是UI的话，应该很清楚你平时给开发的标注是用来干什么的吧？随便量量就造啦：
       
       
            也就是加上float向右和顶部距离12px；就可以确定此div的位置了，
       
       
        pic_content的样式基本就这些了：
        .pic_content{ width:380px; height:568px; background:url(imges/01.jpg"text-align: center">
       
       
        即成如下效果：
       
       
        是不是有点像啦？
        里面的文字，唔……有的两三个字是可以不用定大小哦，因为文字嘛，作为设计师知道的，多少大小的文字，占的像素就为多少，例如14px的字体，占像素就为14*14px，当然，特别特殊的就不能保障了。但是这里的有些文字是在有限的宽度内显示，有换行，便说明装文字的盒子是有宽高的，其次，在第二步定位置时，不仅要考虑上下的margin，还要考虑左右的距离。（-_-