跟着辛星一起用CSS美化商品列表
说实话，近期对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美化商品列表的更多相关文章
- 2014年最新的辛星html、css教程打包公布了，免积分，纯PDF（还有PHP奥）
首先说一下,这个教程是我的全部的博客的精华,我整理了两天之后才做出的这个pdf文档,累死我了,以下免积分给大家,希望大家可以不吝指正,提出它的一些不足什么的,谢谢啦: 以下就是它的下载地址了:2014 ...
- 跟着辛星认识一下PHP的自己主动载入
作为一个框架,文件的载入机制是不能少的,那么我们应该怎么载入呢,这些PHP已经给我们想好了,所以我们仅仅须要依照规则办事就能够了,PHP中有两个函数能够完毕这个功能,第一个是__autoload,如今 ...
- 跟着辛星用PHP的反射机制来实现插件
我的博文的前一篇解说了PHP的反射机制是怎么回事,假设读者还不清楚反射机制,能够搜索下或者看我的博文,都是不错的选择.我们開始解说一下怎么用PHP来实现插件机制.所谓插件机制.就是我们定义一个接口.即 ...
- 2014辛星在读CSS第八节 使用背景图片
这应该是系统CSS本教程的最后一节,为什么,由于本节.我觉得基础已经完成,接下来的就是无休止的战斗,战斗非常难用知识讲出来,通过积累,战斗经验.这些都不是说出来. 伟大,下来说一下用CSS加入背景图片 ...
- 辛星和您一起手写CSS气泡
上文中我公布了一篇手写导航条的博客,那么这一篇博客我将和大家一起手写气泡.那么什么是气泡呢?先给那些刚入门的童鞋一个截图,来更好的认识一下什么是气泡把: 这就是一个简单的气泡啦,那么它主要用来干什么呢 ...
- 辛星跟您解析在CSS面包屑中三角形的定位问题
刚才看到有位网友非常纳闷第二个棕色三角形是怎么定位的,我当感觉在以下说不清楚,就特别开了一片博客.来说清楚它.首先,前面的代码我们先抄下来,至于前面这部分代码是怎么来的,读我的用CSS制作面包屑导航的 ...
- 辛星跟您玩转vim第一节之vim的下载与三种模式
首先值得一提的是,我的vim教程pdf版本号已经写完了,大家能够去下载,这里是csdn的下载地址:点此下载 ,假设左边的下载地址挂掉了,也能够自行在浏览器以下输入例如以下地址进行下载:http://d ...
- 2014年度辛星css教程夏季版第二节
第一节我们简介了一下CSS的工作流程,我相信读者会有一个大体的认识,那么接下来我们将会深入的研究一下CSS的细节问题,这些问题的涉及将会使我们的工作更加完善. *************注释***** ...
- 2014年辛星解读css第二节
第一节我们简单介绍了一下CSS的工作流程,我相信读者会有一个大体的认识,那么接下来我们将会深入的研究一下CSS的细节问题,这些问题的涉及将会使我们的工作更加完好. *************凝视*** ...
随机推荐
- 从零开始，学习web前端之HTML5开发
什么是HTML5 HTML5是HTML最新的修订版本,2014年10月由万维网联盟(W3C)完成标准制定.是下一代 HTML 标准. 为什么要学习HTML5 HTML5定义了一系列新元素,如新语义标签 ...
- 转型（java）（.net）
/** * 父类 */ class Animal { public void eat() { //输出 父类吃.... } } class Bird extends Animal { public v ...
- 关于DRY原则
软件工程,模式,语言,设计思想发展到今天,说白了,所有的技巧,思想,原则归根结底都是为了这个DRY 从机器语言开始: 为了DRY,出现了汇编符号来代表指令,使开发人员不用“重复翻阅指令手册” 为了D ...
- 洛谷P3941入阵曲
题目传送门 这道题也是今年湖南集训队Day8的第一题,昨天洛谷的公开赛上又考了一遍,来发个记录(其实是因为五月天,另外两道题分别是将军令和星空,出这次题目的人肯定同为五迷(✪㉨✪)) 话不多说.先理解 ...
- ExtJs之列表(grid)
--renderers渲染器 可以格式化该列显示的数据格式或者按照你自定义的脚本显示最终数据样子 先看下renderer: function()里的参数 renderer:function(value ...
- 【Spring学习】在Spring+Maven环境中使用Junit Test
在Spring+Maven环境中使用Junit Test 前言 以前我是很讨厌写测试代码的,总觉得测试用例是测试人员写的,现在想想自己真是Too yuong too simple,接触开发多了之后发现 ...
- Spring源码阅读入门指引
本文大概的对IOC和AOP进行了解,入门先到这一点便已经有了大概的印象了,详细内容请看下文. AD: 本文说明2点: 1.阅读源码的入口在哪里? 2.入门前必备知识了解:IOC和AOP 一.我们从哪里 ...
- VB 中DTpicker日期控件的运用
1.如何加载 VB默认的控件栏中是没有DTpicker日期控件的,添加过程:工具--部件--控件--"Microsoft Windows Common Controls-2.6.0&quo ...
- 【UOJ #171】【WC 2016】挑战NPC
http://uoj.ac/problem/171 带花树开花时的u和v一定要记清楚顺序,想好了再写,数据范围也要算好! 对每个筐子拆成3个点,连成一个三元环,对每个(u,v),让u和v的3个点都连边 ...
- hdu 1529 Cashier Employment（差分约束）
Cashier Employment Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Other ...