新闻标题滚动css

新闻上滚动html

2019-12-31 21:56:12

标题新闻上滚动无缝连接切换-HTML css样式## /*新闻动态样式begin*/ .notice_active{ float: left; width: 100%; height: 42px; overflow: hidden; position: relative; box-sizing: border-box; white-...

标题 新闻上滚动无缝连接切换-HTML 
css样式## 
/*新闻动态样式begin*/
.notice_active{
	float: left;
	width: 100%;
	height: 42px;
	overflow: hidden;
	position: relative;
	box-sizing: border-box;
	white-space: nowrap;
	text-overflow: ellipsis;
	background-color: rgb(229,245,252);
	margin-top: 20px;
}
.notice_active>ul>li{
	line-height: 42px;
	display: flex;
	align-items: center;
	font-size: 16px;
}
.notice_active>ul>li>img{
	width: 0.4rem;
	margin-right: 0.2rem;
}
.tooLength{
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	display: block;
}
 
html模板 
<!--新闻动态begin-->
<div class="notice_active">
	<ul>
		<li v-for="item,index in informationDynamicsList">
			<span style="margin-left: 12px;width: 80px;">
				<a style="color:#00a0e9;" href="/information/infodynamics-list">资讯动态：</a>
			</span>
			<span style="width: 84px;color:#939393;" v-html="item.infoPublishTime"></span>
			<span style="margin:0 24px;width: 767px;">
				<a class="tooLength" target="_blank" :href="'/information/information-detail?infoId='+item.id" style="color: #4a4a4a;" v-html="item.title"></a>
			</span>
			<span style="float: right;text-align: right;">
				<a style="color:#00a0e9;text-decoration: underline;" href="/information/infodynamics-list">查看更多&gt;&gt;&gt;</a>
			</span>
		</li>
	</ul>
</div>
<!--新闻动态end-->
 
JS模块 
//新闻动态上下滚动
//3.方法
function t() {
	var he = $(".notice_active>ul>li").height();//找到li高
	$(".notice_active>ul").animate({
			"marginTop": "-" + he
		}, 500, function () {
			$(".notice_active>ul").css({
				"marginTop": 0
			});
			//二选一
			//复制第一个到最后一个
			$(".notice_active>ul>li").eq(0).appendTo($(".notice_active>ul")); 					      	
			//复制第一个到最后一个(多个的情况)	
			$(".notice_active_two>ul>li:eq(0),.notice_active_two>ul>li:eq(1),.notice_active_two>ul>li:eq(2)").appendTo($(".notice_active_two>ul")); 		
	});
}

//4. 触发方法
//新闻动态
var time = setInterval(function () {
	t();
}, 5000)

收起

展开全文

html css js

html5 css3实现字幕滚动的效果

万次阅读 2017-11-29 15:28:17

html5中marquee逐渐被取代，要实现字幕的滚动可以再js中实现： html5 body { margin: 0px; font-size: 12px; color: #938C43; line-height: 150%; text-align:center; } a:link{color: #9D943A;...

html5中marquee逐渐被取代，要实现字幕的滚动可以再js中实现： 
 
<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>html5</title> 
<style>
body { 
    margin: 0px; 
    font-size: 12px; 
    color: #938C43; 
    line-height: 150%; 
    text-align:center; 
} 
a:link{color: #9D943A;font-size:12px;} 
a:hover{color: #FF3300;font-size:12px;} 
a:visited{color: #9D943A;font-size:12px;} 
a.red:link{color: #ff0000;font-size:12px;} 
a.red:hover{color: #ff0000;font-size:12px;} 
a.red:visited{color: #ff0000;font-size:12px;} 
#marqueeBox{background:#f7f7f7;border:1px solid silver;padding:1px;text-align:center;margin:0 auto;} 
--> 
</style> 
</head> 
 
<body> 
<h4>滚动新闻</h4> 
<script language="JavaScript" type="text/javascript"> 
var marqueeContent=new Array(); 
marqueeContent[0]="<a href=http://xyq.163.com/news/2006/11/2-2-20061102170913.html target=_blank>用快速取回帐号密码</a>"; 
marqueeContent[1]="<a href=http://ekey.163.com/ target=_blank>网易将军令官方网站</a>"; 
marqueeContent[2]="<a href=http://xyq.163.com/download/wallpaper.htm target=_blank>最新壁纸下载</a>"; 
marqueeContent[3]="<a href=http://xyq.163.com/download/around.htm target=_blank>最新屏保下载</a>"; 
var marqueeInterval=new Array(); 
var marqueeId=0; 
var marqueeDelay=2000; 
var marqueeHeight=20; 
function initMarquee() { 
    var str=marqueeContent[0]; 
    document.write('<div id="marqueeBox" style="overflow:hidden;width:250px;height:'+marqueeHeight+'px" οnmοuseοver="clearInterval(marqueeInterval[0])" οnmοuseοut="marqueeInterval[0]=setInterval(\'startMarquee()\',marqueeDelay)"><div>'+str+'</div></div>'); 
    marqueeId++; 
    marqueeInterval[0]=setInterval("startMarquee()",marqueeDelay); 
} 
function startMarquee() { 
    var str=marqueeContent[marqueeId]; 
    marqueeId++; 
    if(marqueeId>=marqueeContent.length) marqueeId=0; 
    if(document.getElementById("marqueeBox").childNodes.length==1) { 
    var nextLine=document.createElement('DIV'); 
    nextLine.innerHTML=str; 
    document.getElementById("marqueeBox").appendChild(nextLine); 
    } 
    else { 
        document.getElementById("marqueeBox").childNodes[0].innerHTML=str; 
        document.getElementById("marqueeBox").appendChild(document.getElementById("marqueeBox").childNodes[0]); 
        document.getElementById("marqueeBox").scrollTop=0; 
    } 
    clearInterval(marqueeInterval[1]); 
    marqueeInterval[1]=setInterval("scrollMarquee()",20); 
} 
function scrollMarquee() { 
    document.getElementById("marqueeBox").scrollTop++; 
    if(document.getElementById("marqueeBox").scrollTop%marqueeHeight==(marqueeHeight-1)){ 
    clearInterval(marqueeInterval[1]); 
    } 
} 
initMarquee(); 
</script> 
 
</body>
</html>

 
也可以用css3实现： 
 
  
 
 <!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
@keyframes move
{
    0%
    {
        transform:translateY(0px);
    }
	50%
    {
        transform:translateY(-200px);
    }
    100%
    {
        transform:translateY(0px);
    }
}
.picTab{height:500px;border:2px solid #000; margin:50px auto;overflow:hidden;}
.picTab .topDiv{width:1000px;height:500px; animation:move 5s linear infinite;text-align:center;}
.picTab div {margin:5px;color:black;  }


</style>
</head>
<body>
<DIV class="picTab">
	<div  class="topDiv">
				<div>"控制洗衣机"</div>
				<div>"控制冰箱"</div>
				<div>"开启洗衣机"</div>
				<div>"开始洗衣"</div>
				<div>"关闭洗衣机"</div>
				<div>"棉麻洗"</div>
				<div>"洗涤时间设为20分钟"</div>
				<div>"漂洗2次"</div>
				<div>"脱水6分钟"</div>
				<div>"冰箱设为速冷模式"</div>
				<div>"冷藏室温度设为5度"</div>
				<div>"天气"</div>
			
		</div>
	




</DIV>
</body>
</html>

收起

展开全文

前端 html html5

炫酷 CSS 背景效果的 10 个代码片段

2021-08-04 04:37:22

在现代网页设计中，大背景图设计非常流行。随着高清(现在是4K)显示器的出现，越来越多的网页设计师使用大背景图来填充...CSS 混合模式的颜色变化这种背景效果之所以如此之酷，是因为当用户滚动时，顶部的固定元素似...


 在现代网页设计中，大背景图设计非常流行。随着高清(现在是4K)显示器的出现，越来越多的网页设计师使用大背景图来填充屏幕。
 因为这样可以造成很大的视觉冲击力，并有助于更好的传递所要表现的内容。
 但是，如果只是吧大背景简单的放在网页上效果有限。使用 CSS，偶尔结合 JavaScript ，可以创造出一些惊人的特效。
 CSS 混合模式的颜色变化
 这种背景效果之所以如此之酷，是因为当用户滚动时，顶部的固定元素似乎会改变颜色。CSS mix-blend-mode 属性的使用允许改变色调化，这取决于背景的内容。
 See the Pen CSS background change on scroll by Giana (@giana) on CodePen.0
 滚动动画
 这一技术让人想起了过去的小游戏，它的特点是两种截然不同的图像向相反的方向滚动。他可以在 CSS transform 和一些 JS 的帮助下完成的。
 See the Pen GSAP Animate CSS background-position by Jonathan Marzullo (@jonathan) on CodePen.0
 斜切效果
 斜切背景是网页设计中最热门的趋势之一。这在印刷设计中是一个非常容易实现的效果，但是在网页上实现很痛苦 – 直到现在。这里有一个纯 HTML / CSS 解决方案，使其变得简单。
 See the Pen skew bg by Marcel (@MKasio) on CodePen.0
 图片切换效果
 使用一个相当简单的 CSS，允许背景在多个图像之间进行平滑的转换。它比传统的 JavaScript 更轻量。
 See the Pen Fullscreen CSS Background Image Slideshow by Kevin Lesht (@klesht) on CodePen.0
 渐变动画效果
 如果不仔细的处理，动画背景就会分散你的注意力。这个动画渐变的例子处理的很好，因为这个动画效果做的很微妙。使用 JavaScript，您可以定义渐变颜色。
 See the Pen Animated Background Gradient by Mario Klingemann (@quasimondo) on CodePen.0
 滚动时模糊视觉效果
 当你真的希望访问者把注意力集中在背景图像的上面一层的内容(比如新闻报道的标题)，让文本可以轻松阅读时，滚动时模糊视觉效果可能会非常有用。少量的jQuery 可以在滚动时改变 background-size 属性来创建这种效果。
 See the Pen Zoom and Blur background Image by Zach Richard (@zrichard) on CodePen.0
 淡入主页横幅并且滚动时覆盖
 在这个例子做了一些事情。首先，一个顶部全屏的主页横幅添加了一个颜色叠加，以创建一个不同的色调。然后实现一个淡色动画，以一种视觉平滑的方式来引入背景图像。最后，在混入了一个视觉差滚动效果。这是一个非常现代的效果，只需要一点点 CSS 代码( 无需 JS )。
 See the Pen CSS background image stacking with fade and overlay by Rand Seay (@randseay) on CodePen.0
 图片移动放大缩小视觉效果
 这是我们最近看到的一个效果。当用户鼠标悬停在面板上时，背景图像随着光标的任何移动放大和平移。添加了一些交互性并保持用户兴趣的简单方法。
 See the Pen Zoom + pan the image on hover & mouse move by feiwen8772 (@feiwen8772) on CodePen.0
 悬停比较效果
 这个例子显示了基于用户的鼠标位置显示背景的分屏。很强烈的比较，像“之前”和“后”的镜头。
 See the Pen CSS Background reveal by Eric Karkovack (@karks88) on CodePen.0
 滚动时改变颜色效果
 有时我们会忘记使用简单的纯色是多么的强大。在这里，我们可以看到背景颜色根据滚动位置的变化而产生变化。这种轻量级的解决方案就跟使用大背景图一样直观效果。
 See the Pen Changing Background Color on Scroll by Jack Harner (@jackharner) on CodePen.0
 背景不再只是体现内容框的一种手段 – 现在，他们通常是内容本身的一部分。有这么多有趣的方式可以利用它们，尝试各种背景技术是值得的，看看他们如何提高下一个项目的用户体验。
 如何利用GitHub设计一个炫酷的个人网站(含代码)
 1.在开始制作之前我们先预览一下我的网站吧! 1.方式一: 由于是手机版的所以用手机访问下面的链接体验比较好一点: https://tom-shushu.github.io/MyWeb.github. ...
 炫酷CSS

收起

展开全文

Python爬虫实战 | (21) Scrapy+Selenium爬取新浪滚动新闻

千次阅读 2019-07-24 20:52:13

在本篇博客中，我们将使用Scrapy对接Selenium来爬取新浪滚动新闻，之前我们用Selenium爬取过滚动新闻，它是由javascript动态渲染的页面，Scrapy 抓取页面的方式和requests 库类似，都是直接模拟HTTP 请求，所以...

在本篇博客中，我们将使用Scrapy对接Selenium来爬取新浪滚动新闻，之前我们用Selenium爬取过滚动新闻，它是由javascript动态渲染的页面，Scrapy 抓取页面的方式和requests 库类似，都是直接模拟HTTP 请求，所以Scrapy 也不能直接抓取JavaScript 动态渲染的页面。所以需要使用Selenium。 
抓取JavaScript 渲染的页面有两种方式： 
1）一种是分析Ajax 请求，找到其对应的接口抓取， Scrapy 同样可以用此种方式抓取。 
2）另一种是直接用Selenium 模拟浏览器进行抓取，不需要关心页面后台发生的请求，也不需要分析渲染过程，只需要关心页面最终结果即可，可见即可爬。 
  
在命令行创建scrapy项目
首先在命令行进入PyCharm的项目目录，然后执行 scrapy startproject ScrapySinaRollNews，生成爬虫项目。会自动生成项目结构和一些文件： 
 
在命令行创建Spider
Spider 是一个自定义的类， Scrapy 用它来从网页里抓取内容，并解析抓取的结果。这个类必须继承Spider 类（scrapy.Spider） ，需定义Spider 的名称和起始请求，以及解析爬取结果的方法。 
命令：scrapy  genspider  Spider名称  网站域名 
例：scrapy genspider sinanews     
进入之前生成的spiders目录，执行上述命令： 
此时会在spiders目录下生成一个以爬虫名字命名的.py文件： 
 
创建item
Item 是保存爬取数据的容器。创建Item 需要继承scrapy.Item 类，并且定义类型为scrapy.Field 的字段。 
我们主要获取每篇新闻的链接、标题、时间、来源、正文这些字段。接下来我们要自定义items.py(原本是空的，只有主要结构)，定义我们想要的字段,items.py： 
# -*- coding: utf-8 -*-

# Define here the models for your scraped items
#
# See documentation in:
# https://doc.scrapy.org/en/latest/topics/items.html

import scrapy


class ScrapysinarollnewsItem(scrapy.Item):
    # define the fields for your item here like:
    # name = scrapy.Field()
    link = scrapy.Field()
    title = scrapy.Field()
    date = scrapy.Field()
    source = scrapy.Field()
    article = scrapy.Field()
    pass
 
对接Selenium
在middlewares.py中定义SeleniumDownloaderMiddleware类： 
class SeleniumDownloaderMiddleware():
    def __init__(self, timeout=None):
        self.logger = getLogger(__name__)
        self.timeout = timeout
        chrome_options = webdriver.ChromeOptions()
        chrome_options.add_argument('--headless')   #无界面浏览器
        self.browser = webdriver.Chrome(options=chrome_options)
        self.wait = WebDriverWait(self.browser, self.timeout)

    def __del__(self):
        self.browser.close()

    @classmethod
    def from_crawler(cls, crawler):
        return cls(
            timeout=crawler.settings.get('SELENIUM_TIMEOUT') #在配置文件中拿到SELENIUM_TIMEOUT 需要自己定义
        )

    def process_request(self, request, spider):
        self.logger.debug('------------Chrome is starting-------------' + request.url)
        try:
            self.browser.get(request.url)
            #需要爬两次 第一次在滚动新闻页面 爬取所有新闻的url；第二次在爬取新闻的详细信息
            if 'https://news.sina.com.cn/roll' in request.url:  #如果是滚动新闻页面
                news_list = ''   #存储所有新闻的url
                page = 0
                while page < 2:  #只爬两页
                    try:
                        page = page + 1
                        '''
                        <div class="d_list_txt" id="d_list" style="width:100%;">
                        <ul>
                        <li onmouseover="this.className='hover'" onmouseout="this.className=''" class="">
                        <span class="c_chl">[全部]</span><span class="c_tit">
                        <a href="https://finance.sina.com.cn/money/bank/gsdt/2019-07-24/doc-ihytcerm5959531.shtml" target="_blank">招商银行：上半年实现净利润506.12亿 同比增13.08%</a></span><span class="c_time" s="1563959946">07-24 17:19</span></li><li onmouseover="this.className='hover'" onmouseout="this.className=''" class=""><span class="c_chl">[全部]</span><span class="c_tit"><a href="https://news.sina.com.cn/w/2019-07-24/doc-ihytcerm5973095.shtml" target="_blank">为寻失踪36年少女 梵蒂冈掘公主墓发现数千根人骨</a></span><span class="c_time" s="1563959920">07-24 17:18</span></li><li onmouseover="this.className='hover'" onmouseout="this.className=''" class=""><span class="c_chl">[全部]</span><span class="c_tit"><a href="https://finance.sina.com.cn/money/forex/forexanaly/2019-07-24/doc-ihytcitm4320345.shtml" target="_blank">李鼎缘:黄金原油怎么操作 日内走势分析及操作建议</a></span><span class="c_time" s="1563959917">07-24 17:18</span></li><li onmouseover="this.className='hover'" onmouseout="this.className=''" class=""><span class="c_chl">[全部]</span><span class="c_tit"><a href="https://news.sina.com.cn/s/2019-07-24/doc-ihytcerm5961028.shtml" target="_blank">5000元欠了六年才还上 背后的故事却这么温暖</a></span><span class="c_time" s="1563959862">07-24 17:17</span></li><li onmouseover="this.className='hover'" onmouseout="this.className=''" class=""><span class="c_chl">[全部]</span><span class="c_tit"><a href="https://finance.sina.com.cn/money/future/roll/2019-07-24/doc-ihytcitm4320124.shtml" target="_blank">沪镍下滑震荡 需求疲弱打压</a></span><span class="c_time" s="1563959860">07-24 17:17</span></li></ul><ul><li onmouseover="this.className='hover'" onmouseout="this.className=''" class=""><span class="c_chl">[全部]</span><span class="c_tit"><a href="https://finance.sina.com.cn/stock/relnews/us/2019-07-24/doc-ihytcerm5959813.shtml" target="_blank">美股科技股盘前走低 美司法部启动大范围反垄断调查</a></span><span class="c_time" s="1563959797">07-24 17:16</span></li><li onmouseover="this.className='hover'" onmouseout="this.className=''" class=""><span class="c_chl">[全部]</span><span class="c_tit"><a href="https://finance.sina.com.cn/stock/relnews/hk/2019-07-24/doc-ihytcerm5965807.shtml" target="_blank">中信建投证券完成兑付30亿元本年度第一期短期融资券</a></span><span class="c_time" s="1563959760">07-24 17:16</span></li><li onmouseover="this.className='hover'" onmouseout="this.className=''" class=""><span class="c_chl">[全部]</span><span class="c_tit"><a href="https://finance.sina.com.cn/money/forex/forexanaly/2019-07-24/doc-ihytcitm4319691.shtml" target="_blank">陈一铭:美元三连阳非美承压 黄金多空拉锯如过山车</a></span><span class="c_time" s="1563959755">07-24 17:15</span></li><li onmouseover="this.className='hover'" onmouseout="this.className=''" class=""><span class="c_chl">[全部]</span><span class="c_tit"><a href="https://news.sina.com.cn/c/2019-07-24/doc-ihytcitm4327565.shtml" target="_blank">交通部：新申请的跨省客运班线不得超过800公里</a></span><span class="c_time" s="1563959640">07-24 17:14</span></li><li onmouseover="this.className='hover'" onmouseout="this.className=''" class=""><span class="c_chl">[全部]</span><span class="c_tit"><a href="https://tech.sina.com.cn/i/2019-07-24/doc-ihytcitm4326190.shtml" target="_blank">澎湃新闻：孙宇晨是黑是白，谁来说清楚？</a></span><span class="c_time" s="1563959640">07-24 17:14</span></li></ul><ul><li onmouseover="this.className='hover'" onmouseout="this.className=''" class=""><span class="c_chl">[全部]</span><span class="c_tit"><a href="https://finance.sina.com.cn/roll/2019-07-24/doc-ihytcerm5958736.shtml" target="_blank">子公司对外追讨逾4亿货款 *ST尤夫五跌停后收获3连板</a></span><span class="c_time" s="1563959640">07-24 17:14</span></li><li onmouseover="this.className='hover'" onmouseout="this.className=''" class=""><span class="c_chl">[全部]</span><span class="c_tit"><a href="https://news.sina.com.cn/o/2019-07-24/doc-ihytcitm4319399.shtml" target="_blank">澎湃：孙宇晨是黑是白 谁来说清楚？</a></span><span class="c_time" s="1563959640">07-24 17:14</span></li><li onmouseover="this.className='hover'" onmouseout="this.className=''"><span class="c_chl">[全部]</span><span class="c_tit"><a href="https://finance.sina.com.cn/stock/jhzx/2019-07-24/doc-ihytcerm5958217.shtml" target="_blank">深交所投教：详解股东的基本权利</a></span><span class="c_time" s="1563959640">07-24 17:14</span></li><li onmouseover="this.className='hover'" onmouseout="this.className=''" class=""><span class="c_chl">[全部]</span><span class="c_tit"><a href="https://finance.sina.com.cn/roll/2019-07-24/doc-ihytcerm5963095.shtml" target="_blank">欧元区、德法7月制造业PMI惨淡 市场押注欧央行降息</a></span><span class="c_time" s="1563959630">07-24 17:13</span></li><li onmouseover="this.className='hover'" onmouseout="this.className=''"><span class="c_chl">[全部]</span><span class="c_tit"><a href="https://finance.sina.com.cn/money/forex/forexanaly/2019-07-24/doc-ihytcerm5958168.shtml" target="_blank">方威铭:降息前夕黄金上蹿下跳 唯白银独秀</a></span><span class="c_time" s="1563959629">07-24 17:13</span></li></ul><ul><li onmouseover="this.className='hover'" onmouseout="this.className=''"><span class="c_chl">[全部]</span><span class="c_tit"><a href="https://finance.sina.com.cn/roll/2019-07-24/doc-ihytcerm5962740.shtml" target="_blank">7月土地市场降温：热点一二线城市溢价率走低</a></span><span class="c_time" s="1563959597">07-24 17:13</span></li><li onmouseover="this.className='hover'" onmouseout="this.className=''"><span class="c_chl">[全部]</span><span class="c_tit"><a class="videoNewsLeft" href="https://finance.sina.com.cn/roll/2019-07-24/doc-ihytcitm4320009.shtml" target="_blank">共享汽车途歌董事长卸任 拖欠的押金还退得了吗？</a></span><span class="c_time" s="1563959580">07-24 17:13</span></li><li onmouseover="this.className='hover'" onmouseout="this.className=''"><span class="c_chl">[全部]</span><span class="c_tit"><a href="https://finance.sina.com.cn/roll/2019-07-24/doc-ihytcitm4319187.shtml" target="_blank">摩拜单车又涨价！上海起步价涨至1.5元(视频)</a></span><span class="c_time" s="1563959580">07-24 17:13</span></li><li onmouseover="this.className='hover'" onmouseout="this.className=''"><span class="c_chl">[全部]</span><span class="c_tit"><a href="https://finance.sina.com.cn/stock/s/2019-07-24/doc-ihytcerm5957739.shtml" target="_blank">招商银行：上半年净利润506.12亿 同比增长13.08%</a></span><span class="c_time" s="1563959540">07-24 17:12</span></li><li onmouseover="this.className='hover'" onmouseout="this.className=''"><span class="c_chl">[全部]</span><span class="c_tit"><a href="https://finance.sina.com.cn/money/future/roll/2019-07-24/doc-ihytcerm5957518.shtml" target="_blank">AP910期价下探回升 短期或延续弱势</a></span><span class="c_time" s="1563959498">07-24 17:11</span></li></ul><ul><li onmouseover="this.className='hover'" onmouseout="this.className=''"><span class="c_chl">[全部]</span><span class="c_tit"><a href="https://finance.sina.com.cn/money/forex/forexanaly/2019-07-24/doc-ihytcerm5957450.shtml" target="_blank">周品源:黄金最新走势分析 今日最新黄金操作建议</a></span><span class="c_time" s="1563959487">07-24 17:11</span></li><li onmouseover="this.className='hover'" onmouseout="this.className=''"><span class="c_chl">[全部]</span><span class="c_tit"><a href="https://news.sina.com.cn/c/2019-07-24/doc-ihytcitm4318741.shtml" target="_blank">公安部督办特大制毒案告破 23人落网</a></span><span class="c_time" s="1563959480">07-24 17:11</span></li><li onmouseover="this.className='hover'" onmouseout="this.className=''"><span class="c_chl">[全部]</span><span class="c_tit"><a href="https://finance.sina.com.cn/roll/2019-07-24/doc-ihytcerm5962314.shtml" target="_blank">刚兑打破后债市违约不再稀奇 市场风险正被重新定价</a></span><span class="c_time" s="1563959468">07-24 17:11</span></li><li onmouseover="this.className='hover'" onmouseout="this.className=''"><span class="c_chl">[全部]</span><span class="c_tit"><a href="https://finance.sina.com.cn/money/forex/forexanaly/2019-07-24/doc-ihytcerm5956829.shtml" target="_blank">戴鑫伟:早间黄金原油走势分析 实时操作策略</a></span><span class="c_time" s="1563959380">07-24 17:09</span></li><li onmouseover="this.className='hover'" onmouseout="this.className=''"><span class="c_chl">[全部]</span><span class="c_tit"><a href="https://finance.sina.com.cn/money/bond/research/2019-07-24/doc-ihytcerm5956719.shtml" target="_blank">社科院学部委员王国刚：逐步实现利率市场化改革</a></span><span class="c_time" s="1563959355">07-24 17:09</span></li></ul><ul><li onmouseover="this.className='hover'" onmouseout="this.className=''"><span class="c_chl">[全部]</span><span class="c_tit"><a href="https://finance.sina.com.cn/roll/2019-07-24/doc-ihytcerm5975917.shtml" target="_blank">广州酒家收购陶陶居 能否“盘活”老字号？</a></span><span class="c_time" s="1563959329">07-24 17:08</span></li><li onmouseover="this.className='hover'" onmouseout="this.className=''"><span class="c_chl">[全部]</span><span class="c_tit"><a href="https://finance.sina.com.cn/money/future/roll/2019-07-24/doc-ihytcitm4317600.shtml" target="_blank">外盘提振 期价大幅反弹</a></span><span class="c_time" s="1563959326">07-24 17:08</span></li><li onmouseover="this.className='hover'" onmouseout="this.className=''"><span class="c_chl">[全部]</span><span class="c_tit"><a href="https://news.sina.com.cn/c/2019-07-24/doc-ihytcerm5956286.shtml" target="_blank">海外网：岂止是香烟 这才是民进党最大的私货</a></span><span class="c_time" s="1563959251">07-24 17:07</span></li><li onmouseover="this.className='hover'" onmouseout="this.className=''"><span class="c_chl">[全部]</span><span class="c_tit"><a href="https://finance.sina.com.cn/china/2019-07-24/doc-ihytcitm4317284.shtml" target="_blank">美企对特定儿童安全型可开闭密封条提起337调查申请</a></span><span class="c_time" s="1563959241">07-24 17:07</span></li><li onmouseover="this.className='hover'" onmouseout="this.className=''"><span class="c_chl">[全部]</span><span class="c_tit"><a href="https://finance.sina.com.cn/money/forex/forexfxyc/2019-07-24/doc-ihytcerm5956226.shtml" target="_blank">邦达亚洲:欧洲央行有望率先降息 欧元刷新8周低位</a></span><span class="c_time" s="1563959238">07-24 17:07</span></li></ul><ul><li onmouseover="this.className='hover'" onmouseout="this.className=''"><span class="c_chl">[全部]</span><span class="c_tit"><a href="https://finance.sina.com.cn/roll/2019-07-24/doc-ihytcerm5957520.shtml" target="_blank">华为回应美国子公司裁员：这是个困难决定 涉600余人</a></span><span class="c_time" s="1563959159">07-24 17:05</span></li><li onmouseover="this.className='hover'" onmouseout="this.className=''"><span class="c_chl">[全部]</span><span class="c_tit"><a href="https://finance.sina.com.cn/world/gjcj/2019-07-24/doc-ihytcerm5955654.shtml" target="_blank">欧元区制造业健康程度明显恶化 经济前景黯淡</a></span><span class="c_time" s="1563959103">07-24 17:05</span></li><li onmouseover="this.className='hover'" onmouseout="this.className=''"><span class="c_chl">[全部]</span><span class="c_tit"><a href="https://news.sina.com.cn/c/2019-07-24/doc-ihytcerm5956204.shtml" target="_blank">今年征兵工作下月开始：将多征集大学生毕业生</a></span><span class="c_time" s="1563959100">07-24 17:05</span></li><li onmouseover="this.className='hover'" onmouseout="this.className=''"><span class="c_chl">[全部]</span><span class="c_tit"><a href="https://finance.sina.com.cn/roll/2019-07-24/doc-ihytcerm5958094.shtml" target="_blank">papi酱公司被诉侵权 律师：原告证明为权利人成关键</a></span><span class="c_time" s="1563959100">07-24 17:05</span></li><li onmouseover="this.className='hover'" onmouseout="this.className=''"><span class="c_chl">[全部]</span><span class="c_tit"><a href="https://finance.sina.com.cn/stock/hkstock/ggscyd/2019-07-24/doc-ihytcerm5955599.shtml" target="_blank">卡宾：8月5日举行董事会会议 批准中期业绩</a></span><span class="c_time" s="1563959087">07-24 17:04</span></li></ul><ul><li onmouseover="this.className='hover'" onmouseout="this.className=''"><span class="c_chl">[全部]</span><span class="c_tit"><a href="https://finance.sina.com.cn/chanjing/gsnews/2019-07-24/doc-ihytcitm4317048.shtml" target="_blank">或参与负债累累的托马斯库克重组谈判 复星图啥？</a></span><span class="c_time" s="1563959078">07-24 17:04</span></li><li onmouseover="this.className='hover'" onmouseout="this.className=''"><span class="c_chl">[全部]</span><span class="c_tit"><a href="https://finance.sina.com.cn/stock/relnews/cn/2019-07-24/doc-ihytcerm5959394.shtml" target="_blank">江南化工全资控股中金立华 能否缓解盾安危机成疑</a></span><span class="c_time" s="1563959065">07-24 17:04</span></li><li onmouseover="this.className='hover'" onmouseout="this.className=''"><span class="c_chl">[全部]</span><span class="c_tit"><a href="https://finance.sina.com.cn/stock/s/2019-07-24/doc-ihytcerm5955502.shtml" target="_blank">淮南市委通报巡视情况：支持淮南矿业集团整体上市</a></span><span class="c_time" s="1563959054">07-24 17:04</span></li><li onmouseover="this.className='hover'" onmouseout="this.className=''"><span class="c_chl">[全部]</span><span class="c_tit"><a href="https://finance.sina.com.cn/money/fund/jjsy/2019-07-24/doc-ihytcitm4316467.shtml" target="_blank">明星挂名受监管 几类基金要小心</a></span><span class="c_time" s="1563959052">07-24 17:04</span></li><li onmouseover="this.className='hover'" onmouseout="this.className=''"><span class="c_chl">[全部]</span><span class="c_tit"><a href="https://finance.sina.com.cn/roll/2019-07-24/doc-ihytcitm4316339.shtml" target="_blank">广西准入准营退出 实现企业开办1个工作日内办结目标</a></span><span class="c_time" s="1563958980">07-24 17:03</span></li></ul><ul><li onmouseover="this.className='hover'" onmouseout="this.className=''"><span class="c_chl">[全部]</span><span class="c_tit"><a href="https://finance.sina.com.cn/stock/hkstock/marketalerts/2019-07-24/doc-ihytcerm5954921.shtml" target="_blank">盘后部署：投资者以观望态度为主 港股28800点料受阻</a></span><span class="c_time" s="1563958921">07-24 17:02</span></li><li onmouseover="this.className='hover'" onmouseout="this.className=''"><span class="c_chl">[全部]</span><span class="c_tit"><a href="https://tech.sina.com.cn/it/2019-07-24/doc-ihytcitm4315862.shtml" target="_blank">TCL回应拟并购日本JDI传闻：暂无一致性意向和协议</a></span><span class="c_time" s="1563958917">07-24 17:01</span></li><li onmouseover="this.className='hover'" onmouseout="this.className=''"><span class="c_chl">[全部]</span><span class="c_tit"><a href="https://finance.sina.com.cn/chanjing/gsnews/2019-07-24/doc-ihytcerm5955297.shtml" target="_blank">福布斯中国慈善榜:许家印居首 近半数来自房地产业</a></span><span class="c_time" s="1563958886">07-24 17:01</span></li><li onmouseover="this.className='hover'" onmouseout="this.className=''"><span class="c_chl">[全部]</span><span class="c_tit"><a href="https://finance.sina.com.cn/money/forex/forexfxyc/2019-07-24/doc-ihytcitm4315669.shtml" target="_blank">牛汇:美联储再受抨击金价又该如何</a></span><span class="c_time" s="1563958886">07-24 17:01</span></li><li onmouseover="this.className='hover'" onmouseout="this.className=''"><span class="c_chl">[全部]</span><span class="c_tit"><a href="https://news.sina.com.cn/o/2019-07-24/doc-ihytcitm4316476.shtml" target="_blank">将毒品渗入纤维逃避检测 澳门破2019最大宗毒品案</a></span><span class="c_time" s="1563958865">07-24 17:01</span></li></ul><ul><li onmouseover="this.className='hover'" onmouseout="this.className=''"><span class="c_chl">[全部]</span><span class="c_tit"><a href="https://finance.sina.com.cn/roll/2019-07-24/doc-ihytcitm4316232.shtml" target="_blank">TCL回应拟并购日本JDI传闻：暂无一致性意向和协议</a></span><span class="c_time" s="1563958862">07-24 17:01</span></li><li onmouseover="this.className='hover'" onmouseout="this.className=''"><span class="c_chl">[全部]</span><span class="c_tit"><a href="https://finance.sina.com.cn/stock/s/2019-07-24/doc-ihytcitm4317606.shtml" target="_blank">汇通能源一季度盈转亏 控股股东仍溢价收购谋控制权</a></span><span class="c_time" s="1563958860">07-24 17:01</span></li><li onmouseover="this.className='hover'" onmouseout="this.className=''"><span class="c_chl">[全部]</span><span class="c_tit"><a href="https://finance.sina.com.cn/stock/hkstock/marketalerts/2019-07-24/doc-ihytcerm5955900.shtml" target="_blank">汇丰控股将于9月26日派发第二次股息</a></span><span class="c_time" s="1563958785">07-24 16:59</span></li><li onmouseover="this.className='hover'" onmouseout="this.className=''"><span class="c_chl">[全部]</span><span class="c_tit"><a href="https://finance.sina.com.cn/money/forex/forexfxyc/2019-07-24/doc-ihytcerm5953996.shtml" target="_blank">牛汇:API多空交织 EIA枕戈待旦</a></span><span class="c_time" s="1563958746">07-24 16:59</span></li><li onmouseover="this.className='hover'" onmouseout="this.className=''"><span class="c_chl">[全部]</span><span class="c_tit"><a href="https://finance.sina.com.cn/roll/2019-07-24/doc-ihytcitm4315229.shtml" target="_blank">TCL回应并购日本JDI:进行交流 暂无一致性意向和协议</a></span><span class="c_time" s="1563958740">07-24 16:59</span></li></ul><div class="pagebox"> <span class="pagebox_pre"><a href="javascript:void(0)" onclick="newsList.page.pre();return false;">上一页</a></span> <span class="pagebox_num"><a href="javascript:void(0)" onclick="newsList.page.goTo(1);return false;">1</a></span> <span class="pagebox_num"><a href="javascript:void(0)" onclick="newsList.page.goTo(2);return false;">2</a></span> <span class="pagebox_num"><a href="javascript:void(0)" onclick="newsList.page.goTo(3);return false;">3</a></span> <span class="pagebox_num"><a href="javascript:void(0)" onclick="newsList.page.goTo(4);return false;">4</a></span> <span class="pagebox_num_nonce">5</span> <span class="pagebox_num"><a href="javascript:void(0)" onclick="newsList.page.goTo(6);return false;">6</a></span> <span class="pagebox_num"><a href="javascript:void(0)" onclick="newsList.page.goTo(7);return false;">7</a></span> <span class="pagebox_num"><a href="javascript:void(0)" onclick="newsList.page.goTo(8);return false;">8</a></span> <span class="pagebox_num"><a href="javascript:void(0)" onclick="newsList.page.goTo(9);return false;">9</a></span> <span class="pagebox_num"><a href="javascript:void(0)" onclick="newsList.page.goTo(10);return false;">10</a></span> <span class="pagebox_num"><a href="javascript:void(0)" onclick="newsList.page.goTo(11);return false;">11</a></span> <span class="pagebox_num_ellipsis">..</span> <span class="pagebox_num"><a href="javascript:void(0)" onclick="newsList.page.goTo(16277);return false;">16277</a></span> <span class="pagebox_pre"><a href="javascript:void(0)" onclick="newsList.page.next();return false;">下一页</a></span></div></div>
                        '''
                        
                        self.wait.until(EC.presence_of_element_located(
                            (By.XPATH, '//div[@class="d_list_txt"]/ul/li/span/a')))
                        elements = self.browser.find_elements_by_xpath('//div[@class="d_list_txt"]/ul/li/span/a')
                        for i in elements:
                            news_list = news_list + ',' + i.get_attribute('href')#用,拼接
                        # <a href="javascript:void(0)" onclick="newsList.page.next();return false;">下一页</a>
                        #找到并点击下一页
                        next = self.wait.until(EC.presence_of_element_located((By.XPATH, '//a[@onclick="newsList.page.next();return false;"]')))
                        next.click()
                        self.wait.until(EC.presence_of_element_located(
                            (By.XPATH, '//div[@class="d_list_txt"]/ul/li/span/a')))
                        print('------------Chrome is starting-------------' + self.browser.current_url)
                    except TimeoutException:
                        break
                        # return HtmlResponse(url=request.url, body=news_list, request=request, encoding='utf8', status=200)
                return HtmlResponse(url=request.url, body=news_list, request=request, encoding='utf8', status=200) #返回所有新闻url
            #如果不是滚动新闻页面 具体新闻页面  则返回页面源码
            return HtmlResponse(url=request.url, body=self.browser.page_source, request=request, encoding='utf8', status=200)
        except TimeoutException:
            return HtmlResponse(url=request.url, status=500, request=request) 
需要在setting.py中进行注册： 
DOWNLOADER_MIDDLEWARES = {
    'ScrapySinaRollNews.middlewares.SeleniumDownloaderMiddleware':543,
} 
编辑spider中的parse方法（用于解析response）
对response 变量包含的内容进行解析，可以使用CSS选择器或Xpath选择器，解析结果赋值给Item中的字段。 
# -*- coding: utf-8 -*-
import scrapy
from ScrapySinaRollNews.items import ScrapysinarollnewsItem

class SinanewsSpider(scrapy.Spider):
    name = 'sinanews'
    #新浪滚动新闻页面 包含很多类别的新闻 域名各不相同 需要都添加上
    allowed_domains = ['news.sina.com.cn', 'finance.sina.com.cn', 'sports.sina.com.cn', 'ent.sina.com.cn',
                       'mil.news.sina.com.cn', 'tech.sina.com.cn']
    start_urls = ['https://news.sina.com.cn/roll'] #注意起始地址加上/roll

    def parse(self, response):
        news_list = response.text.split(',') #用,切分 得到url
        print('---------------------' + str(len(news_list)))
        for news_url in news_list:
            if news_url:  #第一个是空串 不考虑
                yield scrapy.Request(url=news_url,callback=self.parse_news) #对每个新闻url再进行请求 用parse_news进行解析 得到新闻详细信息



    def parse_news(self,response):
        item = ScrapysinarollnewsItem()
        item['link'] = response.url
        #解析标题
        '''
        <h1 class="main-title">招商银行：上半年实现净利润506.12亿 同比增13.08%</h1>
        '''
        title = response.css('.main-title::text')
        #可能有少部分新闻的标题不符合上述格式 单独处理
        if not title:
            title = response.css('#artibodyTitle::text')
        if title:
            title = title.extract()[0] #title = title.extract_first()
        item['title'] = title

        #解析日期
        '''
        <span class="date">2019年07月24日 17:19</span>
        '''
        date = response.css('.date::text')
        # 可能有少部分新闻的日期不符合上述格式 单独处理
        if not date:
            date = response.css('#pub_date::text')
        if date:
            date = date.extract()[0]
        item['date'] = date

        #解析来源
        '''
        <span class="source ent-source">新浪财经</span>
        '''
        source = response.css('.source::text')
        # 可能有少部分新闻的来源不符合上述格式 单独处理
        if not source:
            # <a href="http://tech.sina.com.cn/" target="_blank" data-sudaclick="media_name">新浪科技</a>
            source = response.css('[data-sudaclick="media_name"]::text')
        if source:
            source = source.extract()[0]
        item['source'] = source

        #解析正文
        article = response.xpath('//div[@class="article"]/p//text()')
        # 可能有少部分新闻的正文不符合上述格式 单独处理
        if not article:
            article = response.xpath('//div[@id="artibody"]/p//text()')
        if article:
            article_list = article.extract() #列表
        item['article'] = ''.join(article_list)

        yield item





 
使用item pipeline
将数据存入mongodb数据库，pipeline.py： 
定义一个类并实现process_item()，必须返回包含数据的字典或Item 对象，或者抛出Dropltem 异常。process_item()方法主要用到了两个参数：一个参数是item ，每次Spider 生成的Item 都会作为参数传递过来；一个参数是spider ，就是Spider 的实例。启用Item Pipeline后， Item Pipeline 会自动调用process_item()方法。
   
# -*- coding: utf-8 -*-

# Define your item pipelines here
#
# Don't forget to add your pipeline to the ITEM_PIPELINES setting
# See: https://doc.scrapy.org/en/latest/topics/item-pipeline.html

import pymongo

class ScrapysinarollnewsPipeline(object):
    def process_item(self, item, spider):
        return item

import pymongo

# 定义数据库存储类 将数据存储到mongodb数据库
class MongoPipeline(object):
    def __init__(self, mongo_uri, mongo_db):
        self.mongo_uri = mongo_uri
        self.mongo_db = mongo_db

    # 从配置文件setting.py中获取mongo_uri，mongo_db 需要自己在setting.py中定义
    @classmethod
    def from_crawler(cls, crawler):
        return cls(
            mongo_uri=crawler.settings.get('MONGO_URI'),
            mongo_db=crawler.settings.get('MONGO_DB')
        )

    # 连接并打开数据库
    def open_spider(self, spider):
        self.client=pymongo.MongoClient(self.mongo_uri)
        self.db=self.client[self.mongo_db]

    # 该方法必须定义，而且必须要有item和spider两个参数 其他方法可以随便写
    def process_item(self, item, spider):
        name = item.__class__.__name__ #集合名为类名
        if not self.db[name].find_one({'link': item['link']}): #不重复
            self.db[name].insert(dict(item))  # 将数据插入数据库 要转换为字典形式 键值对
        return item

    def close_spider(self, spider):
        self.client.close()
 
注意要把pipeline在setting.py里面进行注册，告诉scrapy增加了pipeline（把下面的代码加到setting.py中）： 
ITEM_PIPELINES = {
    'ScrapySinaRollNews.pipelines.MongoPipeline': 400,
} 
运行scrapy crawl sinanews 
爬取效果： 
 
完整项目

收起

展开全文

scrapy selenium 新浪滚动新闻

Python爬虫实战 | (14) 爬取人民网滚动新闻
千次阅读 2019-07-20 21:29:32
在本篇博客中，我们将使用selenium爬取人民网新闻中滚动页面的所有新闻内容，包括题目、时间、来源、正文，并存入MongoDB数据库。网址：http://news.people.com.cn/ 打开后，发现这里都是一些滚动新闻，每隔一段...
收起
Python爬虫实战 selenium 动态页面
JQuery&CSS;&CSS;+DIV实例大全.rar
2018-08-13 12:03:52
13.jQuery仿新浪新闻图片浏览器(支持鼠标左右滚动控制图片切换) 14.jquery仿苏宁易购商城产品图片全方位展示功能 15.jquery制作漂亮按钮示例打包 16.jQuery动态切换网页背景的大块图片的导航栏代码 17....
收起
CSS+DIV固定顶部导航代码-不跟随页面滚动，附源文件，经典收藏
2012-08-13 17:28:11
固定顶部导航，不跟随滚动，固定页面顶部纯div+css; 以下代码经测试兼容IE6 7 8 9 google firefox HTML代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "...
收起
固定页面顶部
python爬取中国新闻网滚动新闻栏的所有新闻（未完整实现）
2019-07-08 23:09:09
简单爬取中国新闻网中的滚动新闻 代码的url样式如下所示，通过改变中间的时间就能获取到所有时间的新闻，通过循环实现，我在这里没有写，时间是最近10年的其中由于时间的原因，具体解析时的 css 代码肯定是不同...
收起
python 爬虫
用jQuery写新闻标题轮播图解读
千次阅读 2018-03-21 11:37:53
3.滚动的新闻标题的内容其实是存在于列表中，竖着排列的，只是超出大盒子的部分被隐藏了（overfloe:hidden;），为了方便看出不同的效果，此处给每一个li设置了不同的背景颜色。4.轮播图的运动是基于绝对定...
收起
jquery轮播图前端轮播图
JQuery+CSS&CSS;+DIV实例大全(各种前端超级实用组件)
2018-08-13 13:37:43
13.jQuery仿新浪新闻图片浏览器(支持鼠标左右滚动控制图片切换) 14.jquery仿苏宁易购商城产品图片全方位展示功能 15.jquery制作漂亮按钮示例打包 16.jQuery动态切换网页背景的大块图片的导航栏代码 17....
收起
css笔记
2021-08-05 00:37:20
.news 新闻 .download 下载 .banner 广告条(顶部广告条)电子贸易相关 .products 产品 .products_prices 产品价格 .products_description 产品描述 .products_review 产品评论 .editor_review 编辑评论 .news_release...
收起
css 实现隐藏滚动条可以滑动模拟今日头条导航栏效果
2019-03-22 16:11:00
="text/css" > #app { height : 300px ; overflow-x : hidden ; line-height : 30px ; text-align : center ; } #app nav::-webkit-scrollbar { width : 0 !important ; height : 0 !...
收起
css控制标题长度超出部分显示省略号
千次阅读 2016-11-30 15:15:36
.css2 { overflow: hidden; /*自动隐藏文字*/ text-overflow: ellipsis;/*文字隐藏后添加省略号*/ white-space: nowrap;/*强制不换行*/ width: 20em;/*不允许出现半汉字截断*/ color:#6699ff; border:1px #ff...
收起
css
H5类似淘宝头条垂直滚动效果
2019-05-13 15:15:10
不同样式的垂直滚动：无缝垂直滚动；间歇性垂直滚动（一次滚动一条）；间歇性垂直滚动（一次滚动两条）；变量解释： speed：滚动的速度； delay：暂停的时长； scrollTop ：滚动的高度； scrollHeight：滚动元素...
收起
js实现新闻滚动-单行滚动或者多行滚动
2016-04-24 09:32:00
先说单行滚动： --------直接复制以下代码即可试验转载http://www.3lian.com/edu/2011/06-30/4986.html----------- <!DOCTYPE ...
收起
div+css实现有序新闻文章列表布局
2018-12-29 15:08:00
div css布局中常常遇到文章标题列表前有序号（1-10）排版布局，如何简单实现这类新闻文章标题列表排版布局呢？如看到列表布局前有1 2 3 4 5 6 7等数字顺序。最终效果图: 一、布局思维讲解可能遇到这样的...
收起
jQuery 列表自动循环滚动鼠标悬停时停止滚动的实现代码(图文)
2021-06-12 10:34:23
要求实现：页面中一个小的区域循环滚动展示新闻(公告、活动、图片等等)，并且，鼠标悬停时停止滚动并提示，离开后，继续滚动。演示效果图：1，html页面代码示例:2，css代码代码示例:ui,li {list-style: none;}#news{...
收起
新闻滚动效果
2019-03-24 22:01:00
今天给大家分享一个新闻滚动的效果具体代码如下 task1 HTML结构 1 <div class="box"> 2 <div class="count1"> 3 <p>1号标题</p> 4 <p>2号标题</p> 5 ...
收起
css样式书写规范
2021-08-05 04:10:21
在工作当中css样式是非常重要的，但是咋样书写css样式更重要。一、css书写规范1、定位属性：position display float left top right bottom overflow clear z-index2、自身属性：width height padding border margin...
收起
CSS 样式书写规范
CSS书写规范
2018-07-31 13:54:07
一、CSS书写顺序 1.位置属性(position, top, right, z-index, display, float等) 2.大小(width, height, padding, margin) 3.文字系列(font, line-height, letter-spacing, color- text-align等) 4.背景...
收起
CSS
css border 虚线间距_前端开发必备的CSS命名规范与常用CSS代码集合
2020-11-21 03:55:27
但如果是自己在个人学习的时候，又特别不了解应该怎么对CSS命名的话，我今天把自己之前学习的一些资料重新整理了一份CSS命名规范，方便自己与大家学习查阅使用。虽然说，命名没有什么特别要求，但是为了体现一个人...
收起
css 删除线 css 右对齐 css 宋体
【牛腩新闻】——CSS（一）
2019-01-23 21:34:54
CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明: 每条声明由一个属性和一个值组成。属性（property）是您希望设置的样式属性（style attribute）。每个属性有一个值。属性和值被冒号分开。 CSS...
收起
css空白处理and编辑新闻列表的流程
2020-03-25 19:57:04
1级标题<!– 1:空白空间的处理 white-space:; pre pre-wrap pre-line inherit 继承！ nowrap 不让文本换行 2:溢出属性（控制内容溢出时候的显示方式）： overflow属性： auto 当内容超出的时候有滚动...
收起
css
css3+html5——新闻列表设计
万次阅读 2018-06-11 19:10:55
随便写了个仿腾讯新闻列表，主要是布局和标题栏的设计（不随页面滚动而滚动）、当鼠标移动到图片上的时候实现图片的放大功能：大概效果如下：代码如下：<!DOCTYPE html> <html lang="en...
收起
js和css的命名规范
2017-02-28 17:39:42
笔者在撸代码是也会遇到不知道给元素或变量起什么名字的问题，中文拼音太俗气，随便敲几个字母又影响代码的查读性。...2）、属性的值一定要用双引号("")括起来，且一定要有值如class="divcss5",id="divcss5" 3）
收起
javascript css
css
2019-09-16 12:59:46
CSS的基本概念：CSS是层叠样式表(Cascading Style Sheet) ,用于控制网页的外观。指颜色背景大小元素定位… 二、Css选择器 css选择器，也称为选择符，用于选择需要添加样式的元素 css的基本语法: 选择器...
收起
css
CSS的常用命名及规范
2021-08-05 04:19:58
常用命名标题：title摘要：summary箭头：arrow商标：label网站标志：logo转角/圆角：corner横幅广告：banner子菜单：subMenu搜索：search搜索框：searchBox登录：login登录条：loginbar工具条：toolbar下拉：drop...
收起
仿腾讯科技滚动新闻代码，左右箭头可控制图片.rar
2019-07-10 00:19:07
仿腾讯科技滚动图片JS代码，风格大气，支持手动控制图片滚动，支持文字标题，大网站的效果就是不一样，简洁大方。
收起
css简析
千次阅读 2020-05-12 12:50:09
css选择器标签选择器：针对一类标签（如：body,div,p,ul,li） ID选择器：针对某一个特定的标签使用（如：id=“demo”）类选择器：针对你想要的所有标签使用（如：class=“demo”）通用选择器（通配符）：针对...
收起
css

新闻上滚动html

标题新闻上滚动无缝连接切换-HTML

css样式##

html模板

JS模块

html5 css3实现字幕滚动的效果

炫酷 CSS 背景效果的 10 个代码片段

Python爬虫实战 | (21) Scrapy+Selenium爬取新浪滚动新闻

Python爬虫实战 | (14) 爬取人民网滚动新闻

JQuery&CSS;&CSS;+DIV实例大全.rar

CSS+DIV固定顶部导航代码-不跟随页面滚动，附源文件，经典收藏

python爬取中国新闻网滚动新闻栏的所有新闻（未完整实现）

用jQuery写新闻标题轮播图解读

JQuery+CSS&CSS;+DIV实例大全(各种前端超级实用组件)

css笔记

css 实现隐藏滚动条可以滑动模拟今日头条导航栏效果

css控制标题长度超出部分显示省略号

H5类似淘宝头条垂直滚动效果

js实现新闻滚动-单行滚动或者多行滚动

div+css实现有序新闻文章列表布局

jQuery 列表自动循环滚动鼠标悬停时停止滚动的实现代码(图文)

新闻滚动效果

css样式书写规范

CSS书写规范

css border 虚线间距_前端开发必备的CSS命名规范与常用CSS代码集合

【牛腩新闻】——CSS（一）

css空白处理and编辑新闻列表的流程

css3+html5——新闻列表设计

js和css的命名规范

css

CSS的常用命名及规范

仿腾讯科技滚动新闻代码，左右箭头可控制图片.rar

css简析

新闻标题滚动css

新闻上滚动html

标题 新闻上滚动无缝连接切换-HTML

css样式##

html模板

JS模块

html5 css3实现字幕滚动的效果

炫酷 CSS 背景效果的 10 个代码片段

Python爬虫实战 | (21) Scrapy+Selenium爬取新浪滚动新闻

Python爬虫实战 | (14) 爬取人民网滚动新闻

JQuery&CSS;&CSS;+DIV实例大全.rar

CSS+DIV固定顶部导航代码-不跟随页面滚动，附源文件，经典收藏

python爬取中国新闻网滚动新闻栏的所有新闻（未完整实现）

用jQuery写新闻标题轮播图解读

JQuery+CSS&CSS;+DIV实例大全(各种前端超级实用组件)

css笔记

css 实现隐藏滚动条可以滑动 模拟今日头条导航栏效果

css控制标题长度超出部分显示省略号

H5类似淘宝头条垂直滚动效果

js实现新闻滚动-单行滚动或者多行滚动

div+css实现有序新闻文章列表布局

jQuery 列表自动循环滚动鼠标悬停时停止滚动的实现代码(图文)

新闻滚动效果

css样式书写规范

CSS书写规范

css border 虚线间距_前端开发必备的CSS命名规范与常用CSS代码集合

【牛腩新闻】——CSS（一）

css空白处理and编辑新闻列表的流程

css3+html5——新闻列表设计

js和css的命名规范

css

CSS的常用命名及规范

仿腾讯科技滚动新闻代码，左右箭头可控制图片.rar

css简析

新闻标题滚动css

标题新闻上滚动无缝连接切换-HTML

css 实现隐藏滚动条可以滑动模拟今日头条导航栏效果