title: 我的第一篇博客.md date: 2022-10-17 18:36:44 tags:

• 第一篇
• 测试 categories:
• 一级分类
• 二级分类

代码测试：

print("Hello")

注意：这里因为我放在md文件中的，所以加上了\，不解析```，实际测试时请去掉\。

图片测试：

引用测试：

这是一条引用

无序列表测试：

• 哈哈
• 嘿嘿
• 吼吼

1.上面 全部商品分类 和下面列表应该在一个dropdown div里面 宽度一样 命名：上面dt 下面dd
2.下拉菜单用列表 ul>li 来做 大盒子dd给定宽高背景 红色
3.li设置左margin：2px 里面文字有一定距离 pdding-left：10px 文字居中
4.hover做法 碰到li变色
5.后面箭头用after做

<div class="dropdown">
  <div class="dt">全部商品分类</div>
  <div class="dd">
    <ul>
      <li>家用电器</li>
      <li>手机、数码、通信</li>
      <li>电脑、办公</li>
      <li>家居、家具、家装、厨具</li>
      <li>男装、女装、童装、内衣</li>
      <li>个户化妆、清洁用品、宠物</li>
      <li>鞋靴、箱包、珠宝、奢侈品</li>
      <li>运动户外、钟表</li>
      <li>汽车、汽车用品</li>
      <li>母婴、玩具乐器</li>
      <li>食品、酒类、生鲜、特产</li>
      <li>医药保健</li>
      <li>图书、音像、电子书</li>
      <li>彩票、旅行、充值、票务</li>
      <li>理财、众筹、白条、保险</li>
    </ul>
  </div>
</div>

1.marfin-left 2px 为了点以后左边留红 美观

.dropdown .dd ul li {
    position: relative;
    margin-left: 2px;
    height: 31px;
    line-height: 31px;
    padding-left: 10px;
    color: #fff;
}

1、用绝对定位 absolute
2.相对于父亲是li li加相对定位relarive

.dropdown .dd ul li::after {
  position: absolute;
  top: 1px;
  right: 10px;
  font-family: 'icomoon';
  content: '\e920';
  font-size: 14px;
}

做法思路： 为了增大链接选项

1.设置ul  左浮动

2.ul里放a   a为行内元素  给a转为inline-block     给padding撑开a的范围（左右距离各一半25）  用户鼠标放在盒子上有链接

.navitems ul li a {
    display: block;
    padding: 0 25px;
    line-height: 45px;
    font-size: 16px;
    font-weight: 500;
}

1. 上面 全部商品分类 和下面列表应该在一个dropdown div里面 宽度一样 命名：上面dt 下面dd
2. 下拉菜单用列表 ul>li 来做 大盒子dd给定宽高背景 红色
3. li设置左margin：2px 里面文字有一定距离 pdding-left：10px 文字居中
4. hover做法 碰到li变色
5. 后面箭头用after做

1.四个盒子div 左1 中2 右1

<header class="header w">
        <div class="logo">
            <h1>
                <a href="index.html">品优购商城</a>
            </h1>
        </div>
        <div class="search">2</div>
        <div class="hotwords">3</div>
        <div class="shopcar">4</div>
    </header>

.header .logo {
    position: absolute;
    width: 171px;
    height: 61px;
    left: 0;
    top: 27px;
}


header .logo a {
    display: block;
    width: 171px;
    height: 61px;
    background: url(../images/logo.png) no-repeat;
    /* 隐藏文字 */
    font-size: 0;
    /* text-indent: -9999px;
    overflow: hidden; */
}

1.注意隐藏文字两种方式 font-size: 0;

2.插入logo的图片大小=div大小

<div _class_="search">
            <input_type_="search"_name_=""_**id**_=""_placeholder_="语言开发">
            <button>搜索</button>
</div>

1.大盒子定位到中间 然后边框2 红色 注释：input和buttom都是块级元素 加左浮动 border: 2pxsolid #b1191a;

2.input 行内块元素 宽高量里面
3.文字placeholder 设置pdding 10px

4.文字白色 大小16px 背景红色

小链接直接用多个a标签 加上absolute绝对定位 left top 定位 .header.hotwords { position: absolute; left: 346px; top: 66px; }

绝对定位到位置 里面文字居中对齐 text-align: center; line-height: 35px;

用before做,margin-right调整位置

.shopcar::before {
    font-family: 'icomoon';
    content: '\e93a';
    color: #b1191a;
    margin-right: 5px;
}

margin-left调整位置

count 给绝对定位： 行内元素i（类似span） 根据内容给大小

.count {
    position: absolute;
    left: 105px;
    top: -5px;
    right: 20px;
    /* 防止继承 */
    line-height: 14px;
    height: 14px;
    color: #fff;
    background-color: #c81623;
    padding: 0 5px;
    border-radius: 7px 7px 7px 0;
}