说实话,近期对CSS的关注还是蛮多的,不为别的,仅仅是由于自己喜欢,感觉写CSS就像画家绘画一样,使用热情和激情去探索,没有了那份功利心,反而感觉是一种享受。特别有成就感,好啦,今天就分享一期自己用CSS美化商品列表的步骤把。不喜勿喷奥。有建议请留言。

首先看一下做好之后的效果图把:

假设读者特别不喜欢这个样式。能够点击右上角的关闭,省的自己看了心烦意乱,好。我们首先新建一个HTML文件。内容书写例如以下:

<html>
<head>
<title>CSS新闻列表制作</title>
<link rel="stylesheet" type="text/css" href="an.css">
</head>
<body>
<div id = "news">
<ul class=list>
<li><strong>新闻专栏</strong><li>
<li><span>2014年7月23日</span><a href="#">辛星PHP</a></li>
<li><span>2014年7月23日</span><a href="#">辛星CSS</a></li>
<li><span>2014年7月23日</span><a href="#">辛星HTML</a></li>
<li><span>2014年7月23日</span><a href="#">辛星jQuery</a></li>
</ul>
<div>
</body>
</html>

然后我们新建一个an.css文件,我们要做的第一步,就是首先把列表的小圆点给干掉,我们书写例如以下代码:

#news ul{list-style-type: none;}

此时效果图例如以下:

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQveGluZ3VpbWVuZw==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="">

下一步我们就让这个日期靠右显示,仅仅须要加一个浮动就能够了。例如以下:

#news ul{list-style-type: none;}
#news ul li span{float: right;}

此时效果图:

那么怎么让它到左边来呢,非常easy啦。仅仅须要给我们的news设定一个大小就能够了,然后加一个边框。我们加入例如以下代码:

#news{width: 300px;height: 100px;
border: 1px solid purple;
} #news ul{list-style-type: none;}
#news ul li span{float: right;}

我们发现它溢出了。此时的效果图例如以下:

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQveGluZ3VpbWVuZw==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="">

那么我们该怎么办呢?我们能够设置一下列表的边距啊,我们把它设置为0就能够了,此时代码变成以下这个样子:

#news{width: 300px;height: 100px;
border: 1px solid purple;
} #news ul{list-style-type: none;
margin: 0px;
padding: 0px;}
#news ul li span{float: right;}

那么我们的效果就是这个样子啦:

然后我们先设置一下超链接的字体。我个人喜欢把字体的工作放到最后一步来做,由于我感觉它是影响最小的那部分。我们加入代码例如以下:

#news{width: 300px;height: 100px;
border: 1px solid purple;
} #news ul{list-style-type: none;
margin: 0px;
padding: 0px;}
#news ul li span{float: right;}
.list li a{
color: #777777;
text-decoration: none;
}
.list li a:hover{
color: #336699;
text-decoration: none;
}

此时它的效果例如以下:

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQveGluZ3VpbWVuZw==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="">

接下来,我们再改动一下字体,把我们的css文件美化一下格式,就打完收工了,最后的css文件:

#news{
width: 300px;height: 100px;
border: 1px solid purple;
}
#news ul{
list-style-type: none;
margin: 0px;
padding: 0px;}
#news ul li strong {
color: #777777;
}
#news ul li span{
float: right;
color:#777777;
}
.list li a{
color: #777777;
text-decoration: none;
}
.list li a:hover{
color: #336699;
text-decoration: none;
}

然后就是最后的效果图:

到这里就完毕了,不知道该说什么了,仅仅能说:我是辛星,传递温情。

跟着辛星一起用CSS美化商品列表的更多相关文章

  1. 2014年最新的辛星html、css教程打包公布了,免积分,纯PDF(还有PHP奥)

    首先说一下,这个教程是我的全部的博客的精华,我整理了两天之后才做出的这个pdf文档,累死我了,以下免积分给大家,希望大家可以不吝指正,提出它的一些不足什么的,谢谢啦: 以下就是它的下载地址了:2014 ...

  2. 跟着辛星认识一下PHP的自己主动载入

    作为一个框架,文件的载入机制是不能少的,那么我们应该怎么载入呢,这些PHP已经给我们想好了,所以我们仅仅须要依照规则办事就能够了,PHP中有两个函数能够完毕这个功能,第一个是__autoload,如今 ...

  3. 跟着辛星用PHP的反射机制来实现插件

    我的博文的前一篇解说了PHP的反射机制是怎么回事,假设读者还不清楚反射机制,能够搜索下或者看我的博文,都是不错的选择.我们開始解说一下怎么用PHP来实现插件机制.所谓插件机制.就是我们定义一个接口.即 ...

  4. 2014辛星在读CSS第八节 使用背景图片

    这应该是系统CSS本教程的最后一节,为什么,由于本节.我觉得基础已经完成,接下来的就是无休止的战斗,战斗非常难用知识讲出来,通过积累,战斗经验.这些都不是说出来. 伟大,下来说一下用CSS加入背景图片 ...

  5. 辛星和您一起手写CSS气泡

    上文中我公布了一篇手写导航条的博客,那么这一篇博客我将和大家一起手写气泡.那么什么是气泡呢?先给那些刚入门的童鞋一个截图,来更好的认识一下什么是气泡把: 这就是一个简单的气泡啦,那么它主要用来干什么呢 ...

  6. 辛星跟您解析在CSS面包屑中三角形的定位问题

    刚才看到有位网友非常纳闷第二个棕色三角形是怎么定位的,我当感觉在以下说不清楚,就特别开了一片博客.来说清楚它.首先,前面的代码我们先抄下来,至于前面这部分代码是怎么来的,读我的用CSS制作面包屑导航的 ...

  7. 辛星跟您玩转vim第一节之vim的下载与三种模式

    首先值得一提的是,我的vim教程pdf版本号已经写完了,大家能够去下载,这里是csdn的下载地址:点此下载 ,假设左边的下载地址挂掉了,也能够自行在浏览器以下输入例如以下地址进行下载:http://d ...

  8. 2014年度辛星css教程夏季版第二节

    第一节我们简介了一下CSS的工作流程,我相信读者会有一个大体的认识,那么接下来我们将会深入的研究一下CSS的细节问题,这些问题的涉及将会使我们的工作更加完善. *************注释***** ...

  9. 2014年辛星解读css第二节

    第一节我们简单介绍了一下CSS的工作流程,我相信读者会有一个大体的认识,那么接下来我们将会深入的研究一下CSS的细节问题,这些问题的涉及将会使我们的工作更加完好. *************凝视*** ...

随机推荐

  1. 延长SSH的连接时间并重启ssh服务

    用SSH登录到Linux的时候,由于默认的连接超时时间很短,经常需要短了后再连接,比较麻烦.可以修改下sshd的配置文件,然后重启sshd服务即可: 1.#vim /etc/ssh/sshd_conf ...

  2. Ubuntu18.04 安装Chrome浏览器

    一路copy paste就OK sudo wget http://www.linuxidc.com/files/repo/google-chrome.list -P /etc/apt/sources. ...

  3. es2015(es6)学习总结

    1.三种声明方式 var:它是variable的简写,可以理解成变量的意思. let:它在英文中是“让”的意思,也可以理解为一种声明的意思. const:它在英文中也是常量的意思,在ES6也是用来声明 ...

  4. 数学【CF743C】Vladik and fractions

    Description 请找出一组合法的解使得\(\frac {1}{x} + \frac{1}{y} + \frac {1}{z} = \frac {2}{n}\)成立 其中\(x,y,z\)为正整 ...

  5. shell中的特殊变量

    常见的特殊变量: $* 和 $@ 的区别: 1. 在这两个变量没有被双引号""引起来的时候,它们没有区别. 2. 在这两个变量被双引号""引起来的时候,&quo ...

  6. mvc4 to mvc5 orEF5 to EF6 ,(升级EF6)

    把后台MVC4 自动生成的网站从EF5.0 升级为 EF6.1.3 (6.0以上) 报错 找不到方法:“System.Data.Objects.ObjectContext System.Data.En ...

  7. [BZOJ5011][JXOI2017]颜色

    5011: [Jx2017]颜色 Time Limit: 30 Sec  Memory Limit: 512 MBSubmit: 84  Solved: 46[Submit][Status][Disc ...

  8. [CF1063F]String Journey

    题意:定义长度为$k$的journey为一个字符串序列$t_{1\cdots k}$,对$\forall i\gt1$满足$t_i$是$t_{i-1}$的严格子串,定义字符串$s$上的journey为 ...

  9. 【数论】bzoj1968 [Ahoi2005]COMMON 约数研究

    对于i属于[1,n],i只能成为[1,n]中n/i个数的约数,易证. #include<stdio.h> int n,i; long long ans; int main() { scan ...

  10. python基础之包与logging模块

    包 1.什么是包? 包是模块的一种形式,包的本质就是一个含有__init__.py文件的文件夹 2.为什么要有包? 提高程序的结构性和可维护性 3.如何使用包? 导入包就是在导包下的__init__. ...