跟着辛星一起用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的细节问题,这些问题的涉及将会使我们的工作更加完好. *************凝视*** ...
随机推荐
- EF6 Working with Proxies ProxyCreationEnabled
When creating instances of POCO entity types, the Entity Framework often creates instances of a dyna ...
- CentOS7安装配置WPS
1.下载 地址:http://wps-community.org/downloads 2.安装 rpm -ivh wps-office-10.1.0.5707-1.a21.x86_64.rpm 3.运 ...
- 2018 ACM-ICPC 北京网络赛
Problem A 最短路,跑一下dij就可以了. Problem B Problem C 按照题意模拟,不过坑点很多 1.注意字典序: 2.注意挑战的时候失败的那个人要把当前所有桌子上的牌都拿走 P ...
- upm配置文件
组件配置说明 Ø 配置文件规范 Ø 组件分为公共组件和私有组件,分别在public段和private段,如下所示. <?xml version="1.0" encoding= ...
- json_decode转码无效
由于最近从原来常用的utf-8的字符转到了gbk:所以,在用json_decode的时候遇到了返回为空: 经查找发现是json_decode和json_encode只针对utf8字符串有效: 于是用到 ...
- 洛谷——P1916 小书童——蚂蚁大战
P1916 小书童——蚂蚁大战 题目背景 小A在你的帮助下,开始“刷题”,他在小书童里发现了一款叫“蚂蚁大战”(又称蛋糕保卫战)的游戏.(你懂得) 题目描述 游戏中会出现n只蚂蚁,分别有a1,a2…… ...
- Flask实战第40天：图片验证码生成技术
图片验证码生成 安装pillow pip install pillow 在utils下新建python package命名为captcha 把需要需要用到的字体放在captcha下 编辑captcha ...
- Python开发基础-Day13模块2
sys模块 sys模块提供了一系列有关Python运行环境的变量和函数. #重点记忆 sys.argv #命令行参数List,第一个元素是程序本身路径 sys.exit(n) #退出执行的程序未见,正 ...
- grunt-contrib-qunit安装过程中phantomjs安装报错问题解决
今天自己fork了一个github上别人写的一个关于grunt项目的一个小demo(https://github.com/cowboy/jquery-tiny-pubsub),主要是想学习下grunt ...
- 【POJ 2409】Let it Bead
http://poj.org/problem?id=2409 Burnside引理:设\(G\)是\(X\)的置换群,而\(\mathcal{C}\)是\(X\)中一个满足下面条件的着色集合:对于\( ...