css新闻列表优化-突破思维新方法更利于搜索引擎

效果图如下：

也许你会认为这个是很简单的，呵呵那是因为一般写这个列表的时候用的都是时间写在前面，标题写在后面，那样对于显示来说是先有时间后有标题的，对搜索引擎不是很友好。老方法大概是这样的： html代码：

<li><span>2010-07-30</span><a href="#">css基础-基本知识点梳理</a></li>

这个大家应该都会，就是把span的float设置为right。现在我们考虑另一种方案，把标题放在前面，时间放在后面看看 html代码：

<ul><li><a href="#">css基础-基本知识点梳理</a>2010-07-30</li><li><a href="#">css混排-左右交替2</a>2010-07-29</li><li><a href="#">css优先级详解</a>2010-07-29</li><li><a href="#">用css制作鼠标经过提示效果</a>2010-07-22</li><li><a href="#">css图片替换文字技巧系列1-内联元素</a>2010-07-08</li><li><a href="#">CSS列表系列1-炫酷列表</a>2010-07-05</li>
</ul>

css代码如下：

ul{
background:#ededed;
width:410px;
margin-left:20px;
padding:10px;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
}
li{
padding:5px;
text-align:right;
width:400px;
list-style:none;
color:#F33;
font-size:12px;
border-bottom:1px solid #ccc;
border-top:1px solid #efefef;
}
a{
margin-right:10px;
float:left;
text-decoration:none;
font-size:13px;
color:#999;
}

关键是设置li的对齐方式为右对齐，即text-align:right;然后再设置a的浮动为左，即float:left;这就是解决问题的思路。其余的css为修饰之用。简单方便且符合先重后次顺序还利于搜索引擎。

转载于:https://blog.51cto.com/osweb/732342

css新闻列表优化-突破思维新方法更利于搜索引擎相关推荐

CSS盒子模型（border、padding、margin、圆角边框、盒子阴影、文字阴影、新闻列表综合案例、新浪导航栏案例）
1. 网页布局的本质首先利用CSS设置好盒子的大小,然后摆放盒子的位置. 最后把网页元素比如文字图片等等,放入盒子里面. 以上两步就是网页布局的本质 2. 盒子模型(Box Model) 盒子模型 ...
如何设计网站导航更利于SEO优化？
网站SEO优化都会做站内站外的优化,清晰的导航结构对于网站建设来说至关重要,导航优化也是优化人员重视的优化作业,优质的导航对于网站结构以及用户体验都有很大的帮助,让用户清楚的知道自己的所在的位置以及起 ...
[性能优化]UITableView性能优化的一点感悟及计算UILabel高度的新方法
前言在使用过程中发现,我们App的首页在快速滑动时会出现掉帧,以及在上拉加载更多时会抖动,因为首页模块是以前的同事写的,很多代码已不适应当前的需求,所以产生了优化的想法,优化主要分为以下几个方面: ...
[性能优化]UITableView性能优化的一点感悟及计算UILabel高度的新方法 1
前言在使用过程中发现,我们App的首页在快速滑动时会出现掉帧,以及在上拉加载更多时会抖动,因为首页模块是以前的同事写的,很多代码已不适应当前的需求,所以产生了优化的想法,优化主要分为以下几个方面: ...
尚硅谷前端-京东左侧导航栏及网易新闻列表练习——CSS
跟着尚硅谷老师的练习,记录一下自己做的内容,查漏补缺. 目录一.京东左侧导航栏 1.第一次自己做的代码(未看老师讲解视频前做的): 总结: 2.看完老师视频后跟着写的代码: 注意点及总结删除行内元 ...
CVPR 2019 | 旷视研究院提出Re-ID新方法VPM，优化局部成像下行人再识别
全球计算机视觉三大顶级会议之一 CVPR 2019 将于当地时间 6 月 16-20 日在美国洛杉矶举办.届时,旷视研究院将带领团队远赴盛会,助力计算机视觉技术的交流与落地.在此之前,旷视每周会介绍一 ...
百度云盘搜索引擎微信公证号_微信公众号被百度搜索引擎收录？SEO优化诞生新方法！...
用"site:mp.weixin.qq.com"这条指令,可以检验各大搜索引擎对微信公众平台文章的收录情况. 下面就以百度为例,具体讲讲如何来操作吧. 被百度搜索收录 1.内容源同 ...
（html+css）一个完整的网页主页布局：logo+导航+banner+新闻列表...
index.html(主页-结构) <!DOCTYPE html>  <html lang="en"> <!- ...
html中如何写新闻题目,用DIV+CSS实现网页排版中新闻列表的制作
css代码: .list{ margin: 0px 10px 20px; text-align: left; } .list ul{ list-style-type: none; margin: 0p ...

css新闻列表优化-突破思维新方法更利于搜索引擎

css新闻列表优化-突破思维新方法更利于搜索引擎相关推荐

最新文章

热门文章