技术文章 | Technical articles

css源码笔记(五)——前端培训机构

一、 雪碧图


又叫CSS精灵,CSSSprite;

引入雪碧图好处,减少http请求,可以使页面加载速度更快

雪碧图实现:利用背景相关属性实现,关键在于background-position位置的调整

淘宝案例:

特殊字母案例:


HTML代码: 

 

<ul>

    <li><i></i><span>充话费</span></li>

    <li><i></i><span>旅行</span></li>

    <li><i></i><span>旅行</span></li>

    <li><i></i><span>旅行</span></li>

    <li><i></i><span>旅行</span></li>

    <li><i></i><span>旅行</span></li>

    <li><i></i><span>旅行</span></li>

    <li><i></i><span>旅行</span></li>

    <li><i></i><span>找服务</span></li>

    <li><i></i><span>旅行</span></li>

    <li><i></i><span>找服务</span></li>

    <li><i></i><span>找服务</span></li>

  </ul>

 

CSS代码:

*{margin: 0;padding: 0;}

a{text-decoration: none;color: black;}

li{list-style: none;}

.ml1{

margin-left: 1px;

}

ul{

width: 291px;

height: 230px;

margin: 100px auto;

background: #f4f4f4;

/*overflow: hidden;*/

}

li{

float: left;

width: 72px;

height: 76px;

margin-top: 1px;

font-size: 12px;

text-align: center;

background: white;

}

i{

display: block;

height: 24px;

width: 26px;

margin:13px auto;

background: url(./images/csssprite.png) -23px -26px;

/*border: solid 1px;*/

}

li:nth-of-type(2) i{

background-position: -95px -26px;

}

li:nth-of-type(3) i{

background-position: -169px -26px;

}

li:nth-of-type(4) i{

background-position: -241px -26px;

}

li:nth-of-type(5) i{

background-position: -23px -102px;

}

li:nth-of-type(6) i{

background-position: -95px -102px;

}

li:nth-of-type(7) i{

background-position: -169px -102px;

}

li:nth-of-type(8) i{

background-position: -241px -102px;

}

li:nth-of-type(9) i{

background-position: -23px -178px;

}

li:nth-of-type(10) i{

background-position: -95px -178px;

}

li:nth-of-type(11) i{

background-position: -169px -178px;

}

li:nth-of-type(12) i{

background-position: -241px -178px;

}

二、单行文本溢出省略号

/*设置单行文本溢出 省略号*/

text-overflow: ellipsis;

/*设置强制不换行*/

white-space: nowrap;

/*溢出隐藏*/

overflow: hidden;

 

三、选项卡制作

HTML代码:

<div class="container">

<ul class="menu clear">

<li class="on">国际新闻</li>

<li>国内新闻</li>

<li>世界杯</li>

</ul>

<div class="content">

<ul>

<li>谱写中朝友谊新篇,维护半岛和平稳定</li>

<li>习近平出席金正恩举行的欢送仪式 结束访问回到北京</li>

<li>谱写中朝友谊新篇,维护半岛和平稳定</li>

<li>北京跨河桥也能成跳台?护城河边练跳水,您不要</li>

</ul>

<ul class="hid">

<li>国内新闻国内新闻国内新闻国内新闻</li>

<li>国内新闻国内新闻国内新闻国内新闻</li>

<li>国内新闻国内新闻国内新闻国内新闻</li>

<li>国内新闻国内新闻国内新闻国内新闻</li>

</ul>

<ul class="hid">

<li>世界杯世界杯世界杯世界杯</li>

<li>世界杯世界杯世界杯世界杯</li>

<li>世界杯世界杯世界杯世界杯</li>

<li>世界杯世界杯世界杯世界杯</li>

</ul>

</div>

</div>

 

CSS代码:

*{margin: 0;padding: 0;}

li{list-style: none;}

.clear:after{

display: block;

height: 0;

content: "";

clear: both;

visibility: hidden;

}

.container{

width: 300px;

margin: 100px auto;

padding: 10px;

/*border: groove 1px;*/

}

ul.menu{

box-sizing: border-box;

width: 282px;

margin: auto;

}

ul.menu li{

float: left;

width: 80px;

height: 30px;

line-height: 30px;

text-align: center;

border: solid 1px gray;

border-bottom: none;

}

ul.menu li:nth-of-type(2){

margin: 0 18px;

}

ul.menu li.on{

border-top-width: 2px;

border-bottom:solid 2px white;

}

ul.menu li:hover{

border-top-width: 2px;

border-bottom:solid 2px white;

/*设置鼠标样式*/

cursor: pointer;

}

.content{

box-sizing: border-box;

width: 300px;

margin-top: -2px;

padding: 20px 10px;

line-height: 32px;

border: solid 1px;

border-top-width: 2px;

}

.content>ul.hid{

display: none;

}

.content li{

/*设置单行文本溢出 省略号*/

text-overflow: ellipsis;

/*设置强制不换行*/

white-space: nowrap;

/*溢出隐藏*/

overflow: hidden;

}

完整笔记、web前端视频教程,请添加微信“haomei0452”免费领取


微信个人号二维码.jpg

关注微信公众号“icketang”,获取最新前端资讯,学习资料

B站搜索“爱创课堂网络科技” 免费观看前端视频以及项目实战


QQ图片20190401143635.jpg

上一篇文章: css源码笔记(四)——前端培训机构
下一篇文章: css源码笔记(六)——前端培训机构
更多详细内容请访问爱创官网首页:http://www.icketang.com/

最新发布 | 这里有最新的文章查看更多>>

爱创推荐 | 这里有推荐的文章查看更多>>