【无标题】zy

最新推荐文章于 2024-09-16 23:39:36 发布

wangsiling6

最新推荐文章于 2024-09-16 23:39:36 发布

阅读量414

点赞数 9

文章标签： html

本文链接：https://blog.csdn.net/wangsiling6/article/details/134691176

版权

margin: 0;
            padding: 0;
        }
        .a {
            height: 30px;
            width: 2000px;
            background-color: #000000;
        }
        .b{
            height: 100px;
            width<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
         : 2000px;
            background-color: white;
        }
        .c{
            width: 250px;
            height: 100px;
            float: left;
        }
        ul {
      list-style: none;
      width: 1000px;
      height: 100px;
      margin: 0 auto;
      float: right;
    }

    ul li {
      float: left;
      width: 8%;
      height: 100px;
      box-sizing: border-box;
    }

    ul .last {
     border-right: none;
    }

    ul li a {
      display: block;
      height: 40px;
      text-decoration: none;
      color: #000;
    }
    .d {
        width: 1226px;
        height: 460px;
        text-align: center;
        margin: 0 auto;
    }
    .e {
        width: 20%;
        height: 460px;
        float: left;
    }
    .f {
        width: 80%;
        height: 460px;
        float: right;
    }
    </style>
</head>
<body>
    <div class="a">
    </div>
    <div class="b">
        <div class="c"><img src="./屏幕截图 2023-11-28 205528.png">
        <ul>
            <li><a href="#">小米手机</a></li>
            <li><a href="#">电脑</a></li>
            <li><a href="#">平板</a></li>
            <li><a href="#">电视</a></li>
            <li><a href="#">家具</a></li>
            <li><a href="#">路由器</a></li>
        </ul>
    </div></div>
    <div class="d">
        <div class="e"><img src="./屏幕截图 2023-11-29 145827.png"></div>
        <div class="f"><img src="./屏幕截图 2023-11-29 145937.png"></div>
    </div>
</body>
</html>

选择器补充

ul li:nth-of-type(行数){}

ul-li:nth-child(n+)奇数行

字体样式

font-size: px;改大小

font-family:"";改字体

font-style: ;改字倾斜

font-weight:;加粗

font:粗倾斜大小字体；

文本样式

text-indent:n(数字)em;段前空格

line-height:npx;行高