CSS_之浮动设置

最新推荐文章于 2024-04-26 22:21:10 发布

weixin_34252686

最新推荐文章于 2024-04-26 22:21:10 发布

阅读量771

点赞数

原文链接：https://juejin.im/post/5d0839626fb9a07ee30e1a5b

版权

实现案例

要实现如上图所示，（把 HOME ABOUT GARLLERY EVENT CONACT 展示在导航栏汇中）

html代码实现

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" type="text/css" href="../css/index2.css">
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div class="header">
    <div class="logo"><img src="../images/logo.png"></div>
    <div class="link_page">
        <ul>
            <li>home</li>
            <li>home</li>
            <li>home</li>
            <li>home</li>
            <li>home</li>
            <li>home</li>
        </ul>
    </div>
</div>
</body>
</html>
复制代码

css代码实现

* {
    margin: 0px;
    padding: 0px;
}

.header {
    width: 100%;
    height: 70px;
    background-color: #07cbc9;
}
.header .logo img {
    margin-top: 11px;
    margin-left: 100px;
}
.header .logo{
    float: left;
    position: relative;
}
.header .link_page{
    float: right;
    position: relative;
}
.header .link_page ul li{
    float: left;
    position: relative;
    margin-top: 5%;
    margin-right: 30px;
    list-style: none;
}
.logo .link_page .blo {
    width: 30px;
    height:  70px;
    background: black;
}
a{
    text-decoration: none;
    color: black;
}
复制代码

实现鼠标移动变背景颜色

可以在css中添加

.header .link_page a:hover {
    background: black;
    color: white;
    height: 70px;
    width: 30px;
}
复制代码

转载于:https://juejin.im/post/5d0839626fb9a07ee30e1a5b

weixin_34252686

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS_之浮动设置

实现案例要实现如上图所示，（把 HOME ABOUT GARLLERY EVENT CONACT 展示在导航栏汇中）html代码实现<!DOCTYPE html><html lang="en"><head> <link rel="stylesheet" type="text/css" href="../css/index2.css"&g...
复制链接

扫一扫