CSS雪碧图登录界面

最新推荐文章于 2023-03-28 15:52:39 发布

chengjiaonuo2060

最新推荐文章于 2023-03-28 15:52:39 发布

阅读量113

点赞数

原文链接：https://my.oschina.net/u/2419152/blog/502875

版权

<style>

blockquote, body, button, dd, dl, dt, fieldset, form, h1, h2, h3, h4, h5, h6, hr, input, legend, li, ol, p, pre, td, textarea, th, ul{
margin: 0;
padding: 0;
}
h3 {
    display: block;  变成块级元素
	margin: 0;
	padding: 0;
}


.cat {
    position: relative;
    width: 150px;
	background: #f8f8f8;
	 border: 1px solid #bbb;
}

ol, ul {
	list-style: none;   去掉list前默认圆点
}

li {
    z-index: 2;
    position: relative;
    display: block;
    height: 31px;       设置高度和行高完成居中
    line-height: 31px;
    overflow: hidden;
    margin: 1px 10px 0;
    vertical-align: bottom;
    border-bottom: 1px solid #dedede
}

li h3 {
    font-size: 14px;  字体大小
    font-weight: 400; 字体粗细
}

li i {
    display: inline;    转换成内联元素 不换行
    float: left;
    margin: 3px 10px 0 0;
    height: 24px;
    width: 30px
}

<body>
  <div class="cat">
      <ul >
        <li>
          <i></i>
          <h3>服装内衣</h3>
        </li>
        <li class="cat-2">
          <i></i>
          <h3>鞋包配饰</h3>
        </li>

<html>

<head>

<style>

blockquote, body, button, dd, dl, dt, fieldset, form, h1, h2, h3, h4, h5, h6, hr, input, legend, li, ol, p, pre, td, textarea, th, ul {

margin: 0;

padding: 0;

}

.container {

width: 220px;

margin-right: 35px;

background: #ebf2fa;

border: 1px solid #d4d4d4;