文档章节

CSS雪碧图 登录界面

K
 Kevin1129
发布于 2015/09/08 17:14
字数 423
阅读 42
收藏 0
<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;

border-bottom-color: #AAA;

border-top: 0;

height: 692px;

box-shadow: 0 1px 1px #CCC;

background: #ebf2fa url(http://a.xnimg.cn/n/apps/login/v6/cssimg/sidebar-bg.png) left top no-repeat;

margin-top: -2px;

}

.login-form {

padding: 35px 15px 15px;

}

.login-form dl {

line-height: 20px;

}

.login-form dl.pwd {

margin: 15px 0 0;

}

.bottom {

margin-top: 15px;

}

.top dd,.pwd dd{

width: 186px;

background: #FFF url(http://a.xnimg.cn/n/apps/login/v6/cssimg/bg.png) 0 -76px no-repeat;

border: 1px solid #adb6c9;

border-radius: 3px;

height: 32px;

box-shadow: 0 0 1px #FFF;

padding: 1px;

}

.login-form .input-text {

background: transparent;

font-size: 14px;

height: 32px;

line-height: 32px;

padding: 0;

margin: 0 0 0 30px;

width: 155px;

border: 0;

}


.login-btn {

width: 190px;

height: 38px;

text-indent: -9999em;

border: 0;

background: url(sp.png) no-repeat;

cursor: pointer;

}


.regnow {

margin: 0 15px;

padding: 17px 0 15px;

}


.regnow input{

background-position: 0 -38px;

border: 0;

padding: 0 0 3px 0;

}

</style>

</head>

<body>

<div class="container">

<form method="post" class="login-form">

<dl class="top clearfix">

<dd>

<input type="text" name="email" class="input-text">

</dd>

</dl>

<dl class="pwd clearfix">

<dd>

<input type="text" name="email" class="input-text">

</dd>

</dl>

<dl class="bottom">

<input type="submit" class="input-submit login-btn" value="登录">

</dl>

</form>

<div class="regnow">

<input type="button" class="input-button login-btn" value="注册" >

</div>

</div>

</body>

</html>


© 著作权归作者所有

K
粉丝 0
博文 9
码字总数 1746
作品 0
武汉
私信 提问
css之background-position属性实现雪碧图

本文转载于:猿2048网站➧css之background-position属性实现雪碧图 什么是雪碧图 雪碧图就是CSS Sprite,也有人叫它CSS精灵,是一种CSS图像合并技术,就是把多张小图标合并到一张图片上,然后...

前端老手
09/10
16
0
切片合并雪碧图--grunt-css-sprite

grunt-css-sprite 这是什么 这是一个帮助前端开发工程师将 css 代码中的切片合并成雪碧图的工具; 其灵感来源于 grunt-sprite,由于其配置参数限制目录结构等,不能满足通用项目需求,重新造...

米空格
2015/01/29
1K
0
QMUI Web 框架正式发布 2.0 版本

QMUI Web 是一个专注 Web UI 开发,帮助开发者快速实现特定的一整套设计的框架。框架主要由一个强大的 SASS 方法合集与内置的工作流构成,由QMUI 团队出品。 重要更新 本次框架更新版为 2.0 ...

kayo5994
2017/04/11
3.2K
2
webpack中如何使用雪碧图

一、什么是雪碧图? CSS雪碧 即CSS Sprite,也有人叫它CSS精灵,是一种CSS图像合并技术,该方法是将小图标和背景图像合并到一张图片上,然后利用css的背景定位来显示需要显示的图片部分。 二...

程序员小哥哥
2018/11/10
0
0
compass精灵图

css雪碧图又叫css精灵或css sprite,是一种背景图片的拼合技术。使用css雪碧图,能够减少页面的请求数、降低图片占用的字节,以此来达到提升页面访问速度的目的。但是它也有令人诟病的地方,...

Billydotzhang
2016/11/17
13
0

没有更多内容

加载失败,请刷新页面

加载更多

Dubbo-自适应拓展机制

背景 在 Dubbo 中,很多拓展都是通过 SPI 机制进行加载的,比如 Protocol、Cluster、LoadBalance 等,这些都是Dubbo的基础组件。这些基础组件的拓展不是在系统框架启动阶段被加载,而是拓展方...

rock-man
20分钟前
4
0
Kali安装fcitx输入法(五笔)

安装fcitx > sudo apt-get install fcitx-rime fcitx-config-gtk3 重启 > sudo reboot fcitx配置 效果就是这样 配置输入法切换 系统设置...

yeahlife
22分钟前
3
0
IE之css3效果兼容

本文转载于:专业的前端网站▷IE之css3效果兼容 一、兼容css阴影效果(ie滤镜) 1.Shadow,阴影 .shadow { -moz-box-shadow: 3px 3px 4px #000; -webkit-box-shadow: 3px 3px 4px #000; box-sha...

前端老手
25分钟前
3
0
NiushopB2C开源商城功能列表说明:

B2C单商户免费版:PC商城+微商城 B2C单商户标准版:PC商城+微商城组合套餐+阶梯优惠核销功能 B2C单商户企业版:PC商城+微商城拼团+组合套餐阶梯优惠+核销功能 B2C单商户分销版:PC商城+微商城...

niushop-芳
27分钟前
3
0
图片如何转GIF图片呢

如何将生活中拍摄的好玩有趣的图片制作成GIF动图呢?相信很多小伙伴都不知道要如何制作,其实制作方法非常的简单,下面分享一个图片转GIF动图的方法,希望这个方法能够帮助大家在与好友斗图时...

白米稀饭2019
34分钟前
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部