CSS样式3

于 2023-05-29 21:45:06 发布
阅读量45 收藏
点赞数
文章标签： css 前端 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hyhyxyx/article/details/130937218
版权

CSS样式3

文章目录


今日概要：

  • 案例应用（利用之前所学知识）
  • css知识点
  • 模板+CSS+构建页面

CSS案例

1.1 内容回顾

  • HTML标签
固定格式，记住标签长什么样子，例如：
h/div/span/a/img/ul/li/table/input/form

  • CSS样式

    • 应用CSS：标签、头部、文件
    .xx{
    ...
}

<div class='xx'></div>
    • CSS样式
    高度/宽度/块级or行内or块级&行内/浮动/字体/文字对齐方式/内边距/外边距
关于边距：
	-body
	-区域居中
    • 页面布局
    根据你看到的页面把他们划分成很多的小区域，再去填充样式

1.2 页面案例

  • 小米商城顶部

原版：

在这里插入图片描述

粗略写后：

在这里插入图片描述

代码实现：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>小米顶部</title>
  <style>
    body{
      margin: 0;
      }
    .header{
      background: #333;
      }
    .container{
        width:1226px;
        margin: 0 auto;   /*上下=0，左右为auto*/
        }
    .header .menu{
        float: left;
        color: white;
        height: 38px;
        line-height: 38px;
        }
    .header .account{
        float: right;
        color: white;
        height:38px;
        line-height: 38px;
        }
    .header a{
        color: #b0b0b0;
        font-size: 12px;
        display: inline-block;
        line-height: 40px;
        margin-right: 10px;
        }
  </style>
</head>
<body>
  <div class="header">
    <div class="container">
        <div class="menu">
            <a>小米官网</a>
            <a>小米商城</a>
            <a>MIUI</a>
            <a>loT</a>
            <a>云服务</a>
            <a>天星数科</a>
            <a>有品</a>
            <a>小爱开放平台</a>
            <a>企业团购</a>
            <a>资质证照</a>
            <a>协议规则</a>
            <a>下载app</a>
            <a>Select Location</a>
        </div>
        <div class="account">
            <a>登录</a>
            <a>注册</a>
            <a>消息通知</a>
        </div>
        <div style="clear: both"></div>
    </div>
  </div>

</body>
</html>
  • 小米商城二级菜单

原版：

在这里插入图片描述

1.2.1划分区域

在这里插入图片描述

1.2.2 搭建骨架
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>二级菜单</title>
    <style>
        body{
            margin: 0;
            }
        .sub-header{
            height:100px;
            background-color:grey;
            }
        .sub-header .ht{
            height: 100px;
        }
        .container{
            width: 1126px;
            margin: 0 auto;
            }
        .sub-header .logo{
            width:234px;
            float: left;
            }
        .sub-header .menu-list{
            float: left;
            }
        .sub-header .search{
            float: right;
            }
    </style>
</head>
<body>
<div class="sub-header">
  <div class="container">
    <div class="ht logo">f</div>
    <div class="ht menu-list">s</div>

    <div class="ht search">f</div>
    <div class="style:both"></div>
  </div>
</div>
</body>
</html>
1.2.3 Loge区域

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>二级菜单</title>
    <style>
        body{
            margin: 0;
            }
        .sub-header{
            height:100px;
            background-color:grey;
            }
        .sub-header .ht{
            height: 100px;
        }
        .container{
            width: 1126px;
            margin: 0 auto;
            }
        .sub-header .logo{
            width:234px;
            float: left;
            border: 1px solid red;

            }
        .sub-header .logo a{
            margin-top:22px;
            display:inline-block;
            }
        .sub-header .logo a img{
            height:56px;
            width:56px;
            }
        .sub-header .menu-list{
            float: left;
            }
        .sub-header .search{
            float: right;
            }
    </style>
</head>
<body>
<div class="sub-header">
  <div class="container">
    <div class="ht logo">
        <!-- a,行内标签，默认设置高度，边距无效。-》块级&行内+块级-->
        <a href="https://www.mi.com/" >
            <img src="images/logo-mi2.png"  alt="">
        </a>
    </div>
    <div class="ht menu-list">s</div>

    <div class="ht search">f</div>
    <div class="style:both"></div>
  </div>
</div>
</body>
</html>
1.2.4 菜单部分

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>二级菜单</title>
    <style>
        body{
            margin: 0;
            }
        .sub-header{
            height:100px;
            }
        .sub-header .ht{
            height: 100px;
        }
        .container{
            width: 1126px;
            margin: 0 auto;
            }
        .sub-header .logo{
            width:234px;
            float: left;
            }
        .sub-header .logo a{
            margin-top:22px;
            display:inline-block;
            }
        .sub-header .logo a img{
            height:56px;
            width:56px;
            }
        .sub-header .menu-list{
            float: left;
            line-height:100px;
            }
        .sub-header .menu-list a{
            display: inline-block;
            padding: 0 10px;
            color: #333;
            font-size: 16px;
            text-decoration: none;
            }
        .sub-header .menu-list a:hover{       
            <!--hover 鼠标点到哪，就应用它-->
            color: #ff6788;
            }
        .sub-header .search{
            float: right;
            }
    </style>
</head>
<body>
<div class="sub-header">
  <div class="container">
    <div class="ht logo">
        <!-- a,行内标签，默认设置高度，边距无效。-》块级&行内+块级-->
        <a href="https://www.mi.com/" >
            <img src="images/logo-mi2.png"  alt="">
        </a>
    </div>
    <div class="ht menu-list">
        <a href="https://www.mi.com/">Xiaomi手机</a>
        <a href="https://www.mi.com/">Redmi手机</a>
        <a href="https://www.mi.com/">电视</a>
        <a href="https://www.mi.com/">笔记本</a>
        <a href="https://www.mi.com/">平板</a>
        <a href="https://www.mi.com/">家电</a>
        <a href="https://www.mi.com/">路由器</a>
        <a href="https://www.mi.com/">服务中心</a>
        <a href="https://www.mi.com/">社区</a>
    </div>

    <div class="ht search">f</div>
    <div class="style:both"></div>
  </div>
</div>
</body>
</html>

1.3：顶部菜单+二级菜单

效果：

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>小米顶部</title>
  <style>
    body{
      margin: 0;
      }
    .header{
      background: #333;
      }
    .container{
        width:1226px;
        margin: 0 auto;   /*上下=0，左右为auto*/
        }
    .header .menu{
        float: left;
        color: white;
        height: 38px;
        line-height: 38px;
        }
    .header .account{
        float: right;
        color: white;
        height:38px;
        line-height: 38px;
        }
    .header a{
        color: #b0b0b0;
        font-size: 12px;
        display: inline-block;
        line-height: 40px;
        margin-right: 10px;
        }
    .header a:hover{
        color:white;
        }
    .sub-header{
            height:100px;
            }
    .sub-header .ht{
            height: 100px;
        }

    .sub-header .logo{
            width:234px;
            float: left;
    }
    .sub-header .logo a{
       margin-top:22px;
       display:inline-block;
            }
    .sub-header .logo a img{
            height:56px;
            width:56px;
            }
    .sub-header .menu-list{
            float: left;
            line-height:100px;
            }
    .sub-header .menu-list a{
            display: inline-block;
            padding: 0 10px;
            color: #333;
            font-size: 16px;
            text-decoration: none;
            }
    .sub-header .menu-list a:hover{
            color: #ff6788;
            }
    .sub-header .search{
            float: right;
            }
  </style>
</head>
<body>
  <div class="header">
    <div class="container">
        <div class="menu">
            <a>小米官网</a>
            <a>小米商城</a>
            <a>MIUI</a>
            <a>loT</a>
            <a>云服务</a>
            <a>天星数科</a>
            <a>有品</a>
            <a>小爱开放平台</a>
            <a>企业团购</a>
            <a>资质证照</a>
            <a>协议规则</a>
            <a>下载app</a>
            <a>Select Location</a>
        </div>
        <div class="account">
            <a>登录</a>
            <a>注册</a>
            <a>消息通知</a>
        </div>
        <div style="clear: both"></div>
    </div>
  </div>
  <div class="sub-header">
  <div class="container">
    <div class="ht logo">
        <!-- a,行内标签，默认设置高度，边距无效。-》块级&行内+块级-->
        <a href="https://www.mi.com/" >
            <img src="images/logo-mi2.png"  alt="">
        </a>
    </div>
    <div class="ht menu-list">
        <a href="https://www.mi.com/">Xiaomi手机</a>
        <a href="https://www.mi.com/">Redmi手机</a>
        <a href="https://www.mi.com/">电视</a>
        <a href="https://www.mi.com/">笔记本</a>
        <a href="https://www.mi.com/">平板</a>
        <a href="https://www.mi.com/">家电</a>
        <a href="https://www.mi.com/">路由器</a>
        <a href="https://www.mi.com/">服务中心</a>
        <a href="https://www.mi.com/">社区</a>
    </div>

    <div class="ht search"></div>
    <div class="style:both"></div>
  </div>
</div>
</body>
</html>
小结
  • a标签是行内标签，行内标签的高度、内外边距默认无效。
  • 垂直方向居中
    • 文本+line-height
    • 图片+边距
  • a标签默认有下划线(用这个可以去除)
text-decoration: none;
  • 鼠标放上去之后hover
.c1:hover{
    ...
}
a:hover{
    ...
}
hyhyxyx
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值