Day4—HTML_家用电器分类及窗口自适应

最新推荐文章于 2022-04-24 20:23:22 发布

一朵风中摇曳的水仙花-

最新推荐文章于 2022-04-24 20:23:22 发布

阅读量1.4k

点赞数 3

分类专栏：实训

本文链接：https://blog.csdn.net/qq_45313388/article/details/117524471

版权

这篇博客介绍了CSS选择器的用法，包括div标签选择器、类选择器和ID选择器，并通过实例展示了如何应用这些选择器实现家用电器分类的网页布局。此外，还详细讲解了窗口自适应的代码实现，使页面元素'second'能够根据窗口大小动态调整。

摘要由CSDN通过智能技术生成

一、CSS选择器

1.div标签选择器

标签选择器就是按标签添加样式，直接输入标签，后加大括号即可。

div{
        border:1px solid white;
        width: 500px;
        height: 600px;
        background: white;
    }

2.类选择器

类选择器选择有特定 class 属性的 HTML 元素。如需选择拥有特定 class 的元素，请写一个句点（.）字符，后面跟类名。

 .container{
        display: flex;
    }

 <div class="container"></div>

3.ID选择器

id 选择器使用 HTML 元素的 id 属性来选择特定元素。使用方式为：#+id。

 #a{
        align-self: auto;
        width: 1000px;
        height: 1000px;
   }

二、实例

1.家用电器分类

1.1 代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=, initial-scale=1.0">
    <title>家用电器排列</title>
    <style>.num 
    div,h2{
     
        margin:0px;}
    div{
     
        border:1px solid white;
        width: 500px;
        height: 600px;
        background: white;
    }
    h2{
     
        font-size: 18px;
        font-weight: bold;
        color: seashell;
        line-height: 35px;
        text-indent: 2em;
        background:#0f7cbf;
    }
    h3{