CSS_之浮动设置

深碍√TFBOYSˉ_ 2022-01-12 02:43 189阅读 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 条评论，189人围观）

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

相关阅读

相关 CSS浮动

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

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

相关 css之如何清除浮动

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

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

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

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

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

相关 css边框属性border，css布局设置，浮动属性，css转换display

7 边框属性所有的thml标签都是有边框的不过默认是看不见 Border是边框例如 border：1px solid red ，对应的属性是边框粗是1像素

迷南。/ 2022年06月06日 03:06/ 0 赞/ 303 阅读

相关 CSS-浮动

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

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

相关 CSS之清除float浮动

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

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

相关 CSS_之浮动设置

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

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

相关 css学习_css浮动

1、文档流介绍网页布局的核心就是利用css来摆放盒子，把盒子摆放在合适的位置。 css的定位机制有以下3种（网页布局一般需要3种搭配使用）： a、普通流（标准流）

水深无声/ 2021年12月20日 01:59/ 0 赞/ 371 阅读

相关 css浮动

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

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

相关 css3之浮动流技术及清除浮动流

浮动流的原理是：浮动的目的可以让块级元素左右漂浮【打破块级元素独占一行的特性】浮动流float只有两个属性，一个left左浮动，一个right右浮动。浮动的原则就是

Dear 丶/ 2021年09月18日 14:58/ 0 赞/ 308 阅读