实际作业中的细节与技巧总结
1.图片上的字体和文字色差很小时,如何凸出字体。
使用text-shadow
给图片上的文字设置阴影。
语法
抄自于w3c css参考手册
text-shadow:h-shadow v-shadow blur color
注释:text-shadow属性向文本添加一个或多个阴影,该属性是逗号隔开的阴影列表,每个阴影有2-3个长度值和一个颜色值进行规定,省略长度为0。
值 | 描述 |
---|---|
h-shadow | 必需,水平阴影的位置,允许负值。 |
v-shadow | 必需,垂直阴影的位置,允许负值。 |
blur | 可选,模糊的距离。(羽化值) |
color | 可选,阴影的颜色。 |
<style >
div{
width:500px;
height: 400px;
margin-left: auto;
margin-right: auto;
background-image: url(https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1840073864,3878040318&fm=27&gp=0.jpg);
}
h2{
text-shadow:0 1px 1px white,1px 0 1px black;
}
</style>
<div>
<h2>you can't see me</h2>
</div>
2.类名组合
页面的html元素的class
属性要见名知意,相同效果的元素可以用一个类名来封装起来,不同的部分再分别设置另一个类名。也就是一个元素,为了实现很多存在的效果,可以包含多个类名,用空格分隔。这样子会大大减少代码量,且让代码清晰易读。
<style >
/*所有的a标签都没有下划线,但香蕉要求颜色是黄色的*/
.fruit{
text-decoration: none;
}
.banana{
color:yellow;
}
</style>
<ul>
<li><a href="#" class="fruit banana">香蕉</a></li>
<li><a href="#" class="fruit">葡萄</a></li>
<li><a href="#" class="fruit">苹果</a></li>
</ul>
3.杂
a.页面的元素排版,能用float
就不要取用position
,position
在页面要求改变时不好操作。
b.相对路径是相对于当前文件所在位置的路径,绝对路径是资源的完整路径,包含根节点。
c.display
的block
(块级),inline
(行级),inline-block
(行内块)。其中行级就是指span
,a
这些元素,没有宽高,没有上下边界;块级指的是div
,p
这些元素,有宽高,还会独占一行;行内块,指的是img这写元素,有块级元素的一些特征,也有行级元素的一些特征,比如你想要a有宽高,可以将它变为行内块或者块级元素。