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