CSS_之浮動設置

時間 2019-12-01

標籤 css 浮動設置欄目 CSS 简体版

原文原文鏈接

實現案例

要實現如上圖所示，（把 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;
}
複製代碼

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。