CSS小练习4——w3School导航栏

最新推荐文章于 2024-07-09 17:02:33 发布

原创

最新推荐文章于 2024-07-09 17:02:33 发布 · 613 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#css #css3 #前端

较繁琐的方法

建立七个块元素分别进行样式设置：
在这里插入图片描述
代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="../reset.css">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Surymy</title>
    <style>
        div:hover{
   
   
            background-color:rgb(31, 30, 30);
        }
        a{
   
   
            font-size:20px;
            color:rgb(145, 142, 142);
            text-decoration: none;
        }
        .box1{
   
   
            height:60px;
            width:170px;
            line-height:60px;
            padding-left:40px;
            background-color: #ccc;
            float: