no斜体 背景图片坐标

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>3.10新闻中心制作评测题</title>
<style type="text/css">

/*在此定义相关CSS样式*/
*{margin:0;padding:0;font-size:12px;}
li{list-style:none;
     height:16px;
    line-height:16px;
    margin-top:10px;
    margin-bottom:10px;
}
a{text-decoration:none;
    color:black;
    height:16px;
    line-height:16px;
}
.topList{
    border:1px solid #e8e8e8;
    width:300px;
    height:180px;
    margin:5px auto;
}
ul{
    padding:5px 5px;
}
em{
    display:block;
    float:left;
    width:20px;
    height:16px;
    text-align:center;
    font-style:normal;
    color:#333;
    background:url(" http://img.mukewang.com/53cf0fa20001d3dc00200032.jpg") no-repeat 0 -16px ;
}
.top em{
      background:url(" http://img.mukewang.com/53cf0fa20001d3dc00200032.jpg") ;
}
a:hover{
  color:red;
}

</style>
</head>

<body>
<div class="topList">
<ul>
<li class="top"><em>01</em>
<p><a href="http://www.imooc.com/" >【慕客访谈用户篇】“有为屌丝”在路上</a></p>
</li>
<li class="top"><em>02</em>
<p><a href="http://www.imooc.com/">【有奖活动】给父亲的三行书信</a></p>
</li>
<li class="top"><em>03</em>
<p><a href="http://www.imooc.com/">《程序猿,请晒出你的童年》活动获奖公告</a></p>
</li>
<li><em>04</em>
<p><a href="http://www.imooc.com/">【慕课访谈】破茧成蝶——美女程序员的蜕变史</a></p>
</li>
<li><em>05</em>
<p><a href="http://www.imooc.com/">【获奖公告】追“球”巅峰,争当“预言帝”</a></p>
</li>
<li><em>06</em>
<p><a href="http://www.imooc.com/">【问卷调查】慕课网用户学习情况大调查</a></p>
</li>
</ul>
</div>
</body>
时间: 2024-10-04 13:02:04

no斜体 背景图片坐标的相关文章

CSS背景图片定位

原文:CSS背景图片定位 在网页开发中我们经常需要对图片进行分割(如下图)来使用,而不是分别提供单独的图片来调用,常见的如页面背景,按钮图标等,这样做的好处就是减少请求次数,节省时间和带宽. 对背景图片的定位就需要用到CSS中的background样式,如: div{ background-image: url("1234.png"); background-repeat: no-repeat; background-position: 0px -100px; } 属性解释: back

背景图像坐标定位

实际上,如果没有发明image标签,可能就没有网页设计师这门职业. 然而对image标签的滥用可能导致纯修饰性的图像把页面弄乱.好在CSS使我们能够在页面上显示图像,而不需要让图像成为标记的一部分.实现方法是将图像作为背景添加到现有的元素中.  背景图像基础: 默认情况下,浏览器垂直和水平的重复显示背景图像,让图像平铺整个页面. 渐变效果:目前渐变非常时髦,你可能希望在页面上应用垂直渐变,为此需要创建一个很高但是很窄的渐变图像,然后将这个图像应用于页面的主体,并让他水平平铺. 因为这个渐变图像的

img只显示图片一部分 或 css设置背景图片只显示图片指定区域

17:14 2016/3/22img只显示图片一部分 或 css设置背景图片只显示图片指定区域 background-position: 100% 56%; 设置背景图片显示图片的哪个坐标区域,图片左上角为0,0或0%,0%,右下角为高度和宽度,或100%,100%. clip:rect(300px 100px 300px 0px); 设置显示图片的某个区域,分别是上右下左的顺序设置 部分代码:<style type="text/css">img {position:abs

移动端适配之雪碧图(sprite)背景图片定位

为了减少网络请求个数量,提高网站的访问速度,我们一般都会把一些小的图片合并成一张sprite图,然后根据background-position来进行定位.在web端由于是固定的大小与left .top,所以定位起来会比较准确.简单.但是在移动端就不一样了,各种手机的屏幕大小不一样,很难做到使用sprite图然后根据background-position来定位.所以普遍的做法都是使用单张图片,然后使用background-size: cover|100%|contain来控制背景图的大小.其实这样

背景图片定位

 背景图片定位(background-position)原理 A. 语法:Background-position:水平位置 垂直位置 B. 水平位置/垂直位置设置方法: 1) 数值(px)正负值都可以,正数值表示向右移动或向下移动,负数值表示向左或向上移动: 2) 百分比(%)范围:0%-100% 3) 关键词:水平位置:left(左) center(中) right(右) 垂直位置:top(上) center(中) bottom(下) 默认情况下,background-position的原点位

CSS常用背景图片定位方法

CSS背景图片定位其实对于每一位学习前端的同学来说,都已经非常熟悉了.网上铺天盖地的最常见的一种方案就是在父元素中relative,然后子元素absolute.这种方案当然好,不过带来的一个缺点就是会改变元素的层级关系,如果在多个地方使用,这样的层叠嵌套的关系会十分混乱. 先暂时抛弃那种方案,给大家分享几种CSS背景图片定位的方案. 整篇文章会按照如下思路: 1.无依赖的absolute定位 2.background-position扩展语法 3.background-origin定位 4.ca

Android中View(视图)绘制不同状态背景图片原理深入分析以及StateListDrawable使用详解

今天继续给大家分享下View的相关知识,重点有一下两点:   1.View的几种不同状态属性            2.如何根据不同状态去切换我们的背景图片. 开篇介绍:android背景选择器selector用法汇总 对Android开发有经验的同学,对 <selector>节点的使用一定很熟悉,该节点的作用就是定义一组状态资源图片,使其能够 在不同的状态下更换某个View的背景图片.例如,如下的hello_selection.xml文件定义: <?xml version="

css 背景图片定位方法

CSS背景图片定位其实对于每一位学习前端的同学来说,都已经非常熟悉了.网上铺天盖地的最常见的一种方案就是在父元素中relative,然后子元素absolute.这种方案当然好,不过带来的一个缺点就是会改变元素的层级关系,如果在多个地方使用,这样的层叠嵌套的关系会十分混乱. 先暂时抛弃那种方案,给大家分享几种CSS背景图片定位的方案. 整篇文章会按照如下思路: 1.无依赖的absolute定位 2.background-position扩展语法 3.background-origin定位 4.ca

CSS Sprites 网页背景图片定位技术简述

很多时候我们打开一些网站的背景图片会发现是很多图标集合的一张完整的图片.这种网页使用的就是CSS Sprite,通过将多个图标整合在同一张图片,可以减少向服务器请求图片的次数,加快网页的加载速度. CSS Sprites在国内很多人叫css精灵,是一种网页图片应用处理方式.它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去,这样一来,当访问该页面时,载入的图片就不会像以前那样一幅一幅地慢慢显示出来了.对于当前网络流行的速度而言,不高于200KB的单张图片的所需载入时间基本是差不多的,所以