工作中的小问题

168 阅读2分钟

1、a标签的选择问题 需要修改带class的a标签的hover的文字颜色,方式如下

<style>
    a.egHyperlink:hover{
        color:red;
    }
</style>
<a href="#" class="egHyperlink">smile</a>

2、hr分割线 需要一条粉红色的分割线,宽度1px

<style>
    hr{
        height:2px;
        border:none;
        border-top:1px solid #00BFFF;
    }
</style>
<hr>

展示效果如下:


3、图片环绕文字

<div>
<img src="https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2018/5/10/1634933fa3100474~tplv-t2oaga2asx-image.image" width="50%" style="float:left;border:1px solid #00BFFF;margin:0 10px 0 0;"/>
<p>What I want to accomplish is for the text to be aligned with the top and left side of the floated img and to wrap immediately underneath with no margin. When I comment out the padding in 'p' the image has no bottom margin, but I want the padding property to be active in my stylesheet.What I want to accomplish is for the text to be aligned with the top and left side of the floated img and to wrap immediately underneath with no margin. When I comment out the padding in 'p' the image has no bottom margin, but I want the padding property to be active in my stylesheet.</p>
<div style="clear:both;"></div>
</div>

效果如下:

What I want to accomplish is for the text to be aligned with the top and left side of the floated img and to wrap immediately underneath with no margin. When I comment out the padding in 'p' the image has no bottom margin, but I want the padding property to be active in my stylesheet.What I want to accomplish is for the text to be aligned with the top and left side of the floated img and to wrap immediately underneath with no margin. When I comment out the padding in 'p' the image has no bottom margin, but I want the padding property to be active in my stylesheet.

4、颜色的值,遇到过几次需要使用颜色而又不是特别严格要求使用某一种颜色的问题,这个时候可以自己选择,今天先更新一个,以后遇到就记下来

#00BFFF
rgb(2, 221, 223)
文字颜色,
rgb(75,75,75)

5、@media screen问题 总是遇到需要使用@media screen来区分设备的问题,却总是忘记代码,脑子啊,css样式要写在{}内

# Mobile
@media screen and (min-width: 480px){}

# Tablet
@meida screen and (min-width: 768px){}

# Desktop
@media screen and (min-width: 992px){}

# Huge
@media screen and (min-width: 1280px){}

或者

# Phone
@media screen and (max-width:320px){}

# Tablet
@media screen and (min-width:321px) and (max-width:768px){}

# Desktop
@media screen and (min-width:769px){}