跟着辛星一起用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的细节问题,这些问题的涉及将会使我们的工作更加完好. *************凝视*** ...
随机推荐
- Unable to find a qt build, to solve this problem specify a qt build
可能路径设置不对,比如大小写错误导致找不到qmake编译器,点击VS工具栏的QT菜单,选择options,指定qt Build所在的路径(qt安装路径),然后点击ok. 这是修改过默认安装路径的
- OOX之间的关系
OOA,OOD,OOP三者关系OOA的分析结果可以作为OOD的需求模型OOD的设计结果作为OOP的指导蓝图OOP负责最终实现目标系统
- ZSTU OJ 4272 最佳淘汰算法
线段树. 处理出每个位置下一个位置是哪里.然后搞个线段树找一下最大值就可以了. #include<map> #include<set> #include<ctime> ...
- CodeForces 731D 80-th Level Archeology
区间并. 对于上下两个数字,如果不一样,那么可以计算出哪一段范围内可以保证字典序,并且后面所有位置都无需再考虑.对所有范围求交集就是答案了. 求交集写起来有点烦,直接对不可取的范围求并即可. #pra ...
- Single Number II（LintCode）
Single Number II Given 3*n + 1 numbers, every numbers occurs triple times except one, find it. Examp ...
- 2017 Hackatari Codeathon C. Arcade（DP）（滚动数组）
C. Arcade time limit per test 1 second memory limit per test 256 megabytes input standard input outp ...
- oracle latch工作原理
latch是一种轻量级用于保护oracle共享内存结构,用户并发操作一致性的串行化锁定机制,如SGA中,各种数据被反复从磁盘读取到内存,又被重新写回到磁盘上,如果有并发用户做相同的事情,oracle必 ...
- 1.3（SQL学习笔记）计算字段及函数
一.计算字段 1.1拼接字段 一般情况下返回的字段是指定列的属性名.如果有时我们对返回格式有特殊要求. 例如,我们需要将显示商品名,即商品价格,同时商品名后面的价格放在括号内. prod_name(p ...
- Erlang学习记录(一)——Windows下的环境搭建
一.安装编译器 在http://www.erlang.org/download.html下载R16B01 Windows Binary File并安装. 二.运行编译器 安装完编译器后,打开安装目录下 ...
- PHP手册笔记
<?php getenv — 获取一个环境变量的值 $ip = getenv ( 'REMOTE_ADDR' ); // 或简单仅使用全局变量($_SERVER 或 $_ENV) $ip = $ ...