zoukankan      html  css  js  c++  java
  • 图片样式加hover特效

    之前有个尴尬的事情发生,我不知道如何将文字放在图片右边,我想了个麻烦且愚蠢的办法,后来才知道只需要将图片居左就可以达到效果.....不说了看下面

    需要实现的效果:

    很简单,

    <img src="img/liuxiang.jpg" align="left"/>  标红的标签,就能将你的文字显示在图片右边,假如不设置,则会如下效果:

    ——————————————————分割线——————————————————————

    接下来举例一个淘宝的协议页面效果如何实现:

    效果:

    实现文字下划线代码:

    <u>文字</u> 

    利用选择器将a标签带来的下划线去除:

    text-decoration: none

     实现鼠标放置上面出现特效的效果:

    先利用伪类选择器选中a:

    a:hover{
                    text-decoration: underline;
                }

    underline是将鼠标放到a标签包裹的内容时出现下划线,还能出现其他的特效。

    按钮用法:

    <input type="button" name="" value="同意协议" />

    css:

    input{
                    background-color: coral;   ————按钮背景颜色
                    color: white;      ————字体颜色
                    border: none;   ————去除按钮边框
                     200px;    ————设置按钮宽度
                    height: 30px;  ————设置按钮高度
                    border-radius: 5px;   ——————设置按钮圆角(将按钮四个角变的带点弧度)
                }

    将鼠标放到某个属性中出现偏移:

    就拿li举例

    <ul class="one">

      <li></li>

    </ul>

    .one{

    position: absolute;

    }

    .one li:hover{

    position: relative;
        top:-1px;
        left: -1px;

    }

    效果图:

    变化前:

    变化后:

  • 相关阅读:
    Luogu P4205 [NOI2005]智慧珠游戏
    Luogu P3321 [SDOI2015]序列统计
    Luogu P2056 [ZJOI2007]捉迷藏
    Luogu P5168 xtq玩魔塔
    2019年一月刷题列表
    [转载]我们都是行走在镜面边缘的人
    [武汉加油] CF830C Bamboo Partition
    [武汉加油] [NOI Online 提高组]最小环
    [武汉加油] luogu P6178 【模板】Matrix-Tree 定理
    [武汉加油] bzoj 5099: [POI2018]Pionek 几何+双指针
  • 原文地址:https://www.cnblogs.com/hzqzwl/p/11180261.html
Copyright © 2011-2022 走看看