跟着辛星一起用CSS美化商品列表
2017-04-19 18:27
381 查看
说实话,近期对CSS的关注还是蛮多的,不为别的,仅仅是由于自己喜欢,感觉写CSS就像画家绘画一样,使用热情和激情去探索,没有了那份功利心,反而感觉是一种享受。特别有成就感,好啦,今天就分享一期自己用CSS美化商品列表的步骤把。不喜勿喷奥。有建议请留言。
首先看一下做好之后的效果图把:
假设读者特别不喜欢这个样式。能够点击右上角的关闭,省的自己看了心烦意乱,好。我们首先新建一个HTML文件。内容书写例如以下:
下一步我们就让这个日期靠右显示,仅仅须要加一个浮动就能够了。例如以下:
此时效果图:
那么怎么让它到左边来呢,非常easy啦。仅仅须要给我们的news设定一个大小就能够了,然后加一个边框。我们加入例如以下代码:
我们发现它溢出了。此时的效果图例如以下:
那么我们该怎么办呢?我们能够设置一下列表的边距啊,我们把它设置为0就能够了,此时代码变成以下这个样子:
然后我们先设置一下超链接的字体。我个人喜欢把字体的工作放到最后一步来做,由于我感觉它是影响最小的那部分。我们加入代码例如以下:
此时它的效果例如以下:
接下来,我们再改动一下字体,把我们的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;}此时效果图例如以下:
下一步我们就让这个日期靠右显示,仅仅须要加一个浮动就能够了。例如以下:
#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;}
我们发现它溢出了。此时的效果图例如以下:
那么我们该怎么办呢?我们能够设置一下列表的边距啊,我们把它设置为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;
}
此时它的效果例如以下:
接下来,我们再改动一下字体,把我们的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美化商品列表
- 辛星和您一起用纯CSS美化面包屑导航
- 巧用css美化select下拉列表 更换下拉箭头
- JS+CSS和图片美化下拉列表选择框(select)
- 跟着辛星一起了解下PHP的函数的性能
- 纯css美化复选框、单选框、下拉列表、file文件上传器
- css美化select下拉列表(更换下拉箭头)的方法
- 辛星和您一起用CSS手写导航条
- 用DIV+CSS实现图文混排与文字列表一起显示
- CSS笔记(美化列表)
- CSS制作一个商品分类列表,边框是圆角弧度
- 深入理解 CSS 的 :before 和 :after 选择器(制作select下拉列表美化插件)
- 用DIV+CSS实现图文混排与文字列表一起显示
- 用CSS进行美化的新闻列表
- 辛星和您一起手写CSS气泡
- 商品产品列表分类可右侧展开详细分类DIV+CSS+JS特效
- 跟着辛星一起学PHP中的常用的字符串函数
- CSS select样式列表-------美化列表
- CSS制作商品列表 欢迎来到贵美商城
- JS+CSS和图片美化下拉列表选择框