【CSS】相对位置小练习

要求:

成果:

代码:

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>相对位置小练习</title>
    <link rel="stylesheet" href="./css/style.css">
</head>
<body>
    <div class="Q1">
        <a href="http://www.baidu.com" target="_blank" class="W1">百度</a>
        <a href="http://www.google.com" target="_blank" class="W2">谷歌</a>
        <a href="http://www.bing.com" target="_blank" class="W3">必应</a>
        <a href="http://www.taobao.com" target="_blank" class="W4">淘宝</a>
        <a href="http://www.jd.com" target="_blank" class="W5">京东</a>
    </div>
</body>
</html>
css 复制代码
/*做一个最外层的框架*/
.Q1{
    width: 310px;
    height: 310px;
    border: #ff5000 3px solid;
}
/*给所有a类创建伪类,使鼠标移动到指定位置变色*/
.Q1 a:hover{
    background: blue;
}
/*调整超链接字体颜色,并且把下划线去掉*/
.Q1 a{
    width: 100px;
    height: 100px;
    color: white;
    text-decoration: none;
    background: deeppink;
}
/*下面是对五个具体的超链接进行变换*/
.W1{
    display: inline-block;
    margin: 5px 0 0 5px;
}
.W2{
    display: inline-block;
    margin: 5px 5px 0 0;
    /*相对位置进行变换*/
    position: relative;
    right: -95px;
}
.W3{
    display: block;
    margin: 5px 0 0 0;
    position: relative;
    right: -105px;
    top: -5px
}
.W4{
    display: inline-block;
    margin: 0 0 5px 5px;
    position: relative;
    top: -5px
}
.W5{
    display: inline-block;
    margin: 0 5px 5px 0;
    position: relative;
    top: -5px;
    right: -95px;
}
相关推荐
Epat3 分钟前
关于一个小菜鸡是如何通过自定义 postcss 插件解决 color-mix 兼容问题的
前端
小小小小宇4 分钟前
webComponent实现一个拖拽组件
前端
满怀10154 分钟前
【Python核心库实战指南】从数据处理到Web开发
开发语言·前端·python
PBitW12 分钟前
工作中突然发现零宽字符串的作用了!
前端·javascript·vue.js
VeryCool13 分钟前
React Native新架构升级实战【从 0.62 到 0.72】
前端·javascript·架构
小小小小宇14 分钟前
JS匹配两数组中全相等对象
前端
xixixin_17 分钟前
【uniapp】uni.setClipboardData 方法失效 bug 解决方案
java·前端·uni-app
狂炫一碗大米饭18 分钟前
大厂一面,刨析题型,把握趋势🔭💯
前端·javascript·面试
星空寻流年24 分钟前
css3新特性第五章(web字体)
前端·css·css3
MaisieKim_27 分钟前
CSS预处理工具有哪些?分享主流产品
css·less·sass