跟着辛星一起用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的细节问题,这些问题的涉及将会使我们的工作更加完好. *************凝视*** ...
随机推荐
- vue之v-text渲染多值
其原理,是利用vue里的computed计算属性来做. 请看代码: <div id='app'> <div v-text="newUsers"></d ...
- Django学生管理系统添加学生时，报错Not Found: /POST
最近在学习Django,跟着视频写了一个学生系统,主要是增删改查操作,界面丑的一匹 1.url.py from django.contrib import admin from django.urls ...
- java中常用的String方法
1 length()字符串的长度 String a = "Hello Word!"; System.out.println(a.length); 输出的结果是字符串长度10. 2 ...
- Nodejs Mocha测试学习
参考大神阮一峰的文章<测试框架 Mocha 实例教程> 目前在使用Nodejs,但写完的程序很容易出错,那怎么办?需要引入单元测试去做基础的测试 目前Nodejs用来做单元测试的工具接触的 ...
- 洛谷P1880 [NOI1995] 石子合并 [DP，前缀和]
题目传送门 题目描述 在一个圆形操场的四周摆放N堆石子,现要将石子有次序地合并成一堆.规定每次只能选相邻的2堆合并成新的一堆,并将新的一堆的石子数,记为该次合并的得分. 试设计出1个算法,计算出将N堆 ...
- redis的运行机制
从以前总结的redis一些基本性能中,可知redis是非关系型数据库(nosql):这一类的数据类型有以下特点: 非关系型的(sql语句对它不起作用,不需要建表存数据,它是直接存储),分布式(主从复制 ...
- 线段树+扫描线【bzoj1645】[USACO07OPEN]城市的地平线City Horizon
Description 约翰带着奶牛去都市观光.在落日的余晖里,他们看到了一幢接一幢的摩天高楼的轮廓在地平线 上形成美丽的图案.以地平线为 X 轴,每幢高楼的轮廓是一个位于地平线上的矩形,彼此间可能有 ...
- MAC安装go
下载官方pkg文件,一路傻瓜next就行了. pkg默认是安装到/usr/local/go 安装完成,接下来是配置mac下的环境变量.打开终端(Terminal),敲入一下代码:cd ~ #进入当前用 ...
- 【BZOJ 4025】 （CDQ？还是整体二分？+并查集及它的恢复操作）
4025: 二分图 Description 神犇有一个n个节点的图.因为神犇是神犇,所以在T时间内一些边会出现后消失.神犇要求出每一时间段内这个图是否是二分图.这么简单的问题神犇当然会做了,于是他想考 ...
- JZYZOJ1383 [usaco2003feb]impster 位运算 最短路
http://172.20.6.3/Problem_Show.asp?id=1383 找能到达某个状态的最小操作数,然后把所有状态扫一遍即可,要额外判定一下起始就有的状态(如果起始里没有0那么这些状 ...