CSS_之浮动设置

深碍√TFBOYSˉ_ 2022-01-12 02:43 192阅读 0赞

## 实现案例 ##

要实现如上图所示，（把 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

发表评论取消回复

表情：

评论列表（有 0 条评论，192人围观）

还没有评论，来说两句吧...

相关阅读

相关 css浮动

文章目录 1.其他样式 1.1 圆角边框 1.2 盒子阴影 1.3 文字阴影 2

迈不过友情╰/ 2024年03月17日 17:25/ 0 赞/ 60 阅读

相关 CSS_浮动

浮动作用：可以使块元素水平排列 <body> <style> .box5 { width: 100px; h

短命女/ 2023年10月06日 16:51/ 0 赞/ 10 阅读

相关 CSS浮动

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

淡淡的烟草味﹌/ 2023年07月09日 08:29/ 0 赞/ 132 阅读

相关 CSS浮动

浮动元素脱离文档流使用float脱离文档流时，其他盒子会无视这个元素，但其他盒子内的文本依然会为这个元素让出位置，环绕在该元素的周围。 <pre style=

旧城等待，/ 2023年01月10日 10:21/ 0 赞/ 211 阅读

相关 css之如何清除浮动

一共有四种方式，参考链接：[https://www.cnblogs.com/wush-1215/p/10623243.html][https_www.cnblogs.com_w

古城微笑少年丶/ 2023年01月08日 08:11/ 0 赞/ 169 阅读

相关 CSS浮动——浮动的特性、清除浮动

CSS浮动一个页面基本包含了三种布局方式：标准流、浮动和定位浮动（float）浮动可以改变元素标签默认的排列方式，最典型的是可以让多个块级元素一行内排列显示

一时失言乱红尘/ 2022年11月22日 12:52/ 0 赞/ 278 阅读

相关 CSS-浮动

1.浮动(float)的基础知识 float:left;向左浮动 float:right;向右浮动 float:none;元素不浮动 float:inherit

绝地灬酷狼/ 2022年05月03日 03:28/ 0 赞/ 305 阅读

相关 CSS之清除float浮动

转自: [http://www.divcss5.com/jiqiao/j406.shtml][http_www.divcss5.com_jiqiao_j406.shtml]

﹏ヽ暗。殇╰゛Y/ 2022年03月20日 05:21/ 0 赞/ 298 阅读

相关 CSS_之浮动设置

实现案例要实现如上图所示，（把 HOME ABOUT GARLLERY EVENT CONACT 展示在导航栏汇中） html代码实现 <!DOCTYP

深碍√TFBOYSˉ_/ 2022年01月12日 02:43/ 0 赞/ 193 阅读

相关 css浮动

css浮动和清除浮动在写页面的过程中，浮动是大家经常用的属性，在好多的排版布局中都是用的浮动；定义：使元素脱离文档流，按照指定的方向移动，直到边缘碰到包含框或者另一个

男娘i/ 2021年11月02日 06:58/ 0 赞/ 427 阅读