精华内容
下载资源
问答
  • 新闻滚动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) 
    
    展开全文
  • 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>
    复制代码


    展开全文
  • 在现代网页设计中,大背景图设计非常流行。随着高清(现在是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

    展开全文
  • 在本篇博客中,我们将使用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

    爬取效果:

    完整项目

     

     

     

     

     

     

     

     

     

     

     

     


     

     

     

     

     

     

    展开全文
  • 在本篇博客中,我们将使用selenium爬取人民网新闻滚动页面的所有新闻内容,包括题目、时间、来源、正文,并存入MongoDB数据库。网址:http://news.people.com.cn/ 打开后,发现这里都是一些滚动新闻,每隔一段...
  • 13.jQuery仿新浪新闻图片浏览器(支持鼠标左右滚动控制图片切换) 14.jquery仿苏宁易购商城产品图片全方位展示功能 15.jquery制作漂亮按钮示例打包 16.jQuery动态切换网页背景的大块图片的导航栏代码 17....
  • 固定顶部导航,不跟随滚动,固定页面顶部纯div+css; 以下代码经测试兼容IE6 7 8 9 google firefox HTML代码: &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "...
  • 简单爬取中国新闻网中的滚动新闻 代码的url样式如下所示, 通过改变中间的时间就能获取到所有时间的新闻, 通过循环实现,我在这里没有写 ,时间是最近10年的 其中由于时间的原因,具体解析时的 css 代码 肯定是不同...
  • 用jQuery写新闻标题轮播图解读

    千次阅读 2018-03-21 11:37:53
    3.滚动新闻标题的内容其实是存在于列表中,竖着排列的,只是超出大盒子的部分被隐藏了(overfloe:hidden;),为了方便看出不同的效果,此处给每一个li设置了不同的背景颜色。4.轮播图的运动是基于绝对定...
  • 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...
  • ="text/css" > #app { height : 300px ; overflow-x : hidden ; line-height : 30px ; text-align : center ; } #app nav::-webkit-scrollbar { width : 0 !important ; height : 0 !...
  • .css2 { overflow: hidden; /*自动隐藏文字*/ text-overflow: ellipsis;/*文字隐藏后添加省略号*/ white-space: nowrap;/*强制不换行*/ width: 20em;/*不允许出现半汉字截断*/ color:#6699ff; border:1px #ff...
  • 不同样式的垂直滚动: 无缝垂直滚动; 间歇性垂直滚动(一次滚动一条); 间歇性垂直滚动(一次滚动两条); 变量解释: speed:滚动的速度; delay:暂停的时长; scrollTop :滚动的高度; scrollHeight:滚动元素...
  • 先说单行滚动: --------直接复制以下代码即可试验 转载http://www.3lian.com/edu/2011/06-30/4986.html----------- <!DOCTYPE ...
  • div css布局中常常遇到文章标题列表前有序号(1-10)排版布局,如何简单实现这类新闻文章标题列表排版布局呢?如看到列表布局前有1 2 3 4 5 6 7等数字顺序。 最终效果图: 一、布局思维讲解 可能遇到这样的...
  • 要求实现:页面中一个小的区域循环滚动展示新闻(公告、活动、图片等等),并且,鼠标悬停时停止滚动并提示,离开后,继续滚动。演示效果图: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书写规范

    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命名规范,方便自己与大家学习查阅使用。虽然说,命名没有什么特别要求,但是为了体现一个人...
  • CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明: 每条声明由一个属性和一个值组成。 属性(property)是您希望设置的样式属性(style attribute)。每个属性有一个值。属性和值被冒号分开。 CSS...
  • 1级标题<!– 1:空白空间的处理 white-space:; pre pre-wrap pre-line inherit 继承! nowrap 不让文本换行 2:溢出属性(控制内容溢出时候的显示方式): overflow属性: auto 当内容超出的时候有滚动...
  • css3+html5——新闻列表设计

    万次阅读 2018-06-11 19:10:55
    随便写了个仿腾讯新闻列表,主要是布局和标题栏的设计(不随页面滚动滚动)、当鼠标移动到图片上的时候实现图片的放大功能:大概效果如下: 代码如下:&lt;!DOCTYPE html&gt; &lt;html lang="en...
  • js和css的命名规范

    2017-02-28 17:39:42
    笔者在撸代码是也会遇到不知道给元素或变量起什么名字的问题,中文拼音太俗气,随便敲几个字母又影响代码的查读性。...2)、属性的值一定要用双引号("")括起来,且一定要有值如class="divcss5",id="divcss5" 3)
  • css

    2019-09-16 12:59:46
    CSS的基本概念:CSS是层叠样式表(Cascading Style Sheet) ,用于控制网页的外观。指颜色 背景 大小元素定位… 二、Css选择器 css选择器,也称为选择符,用于选择需要添加样式的元素 css的基本语法: 选择器...
  • CSS的常用命名及规范

    2021-08-05 04:19:58
    常用命名标题:title摘要:summary箭头:arrow商标:label网站标志:logo转角/圆角:corner横幅广告:banner子菜单:subMenu搜索:search搜索框:searchBox登录:login登录条:loginbar工具条:toolbar下拉:drop...
  • 仿腾讯科技滚动图片JS代码,风格大气,支持手动控制图片滚动,支持文字标题,大网站的效果就是不一样,简洁大方。
  • css简析

    千次阅读 2020-05-12 12:50:09
    css选择器 标签选择器:针对一类标签(如:body,div,p,ul,li) ID选择器:针对某一个特定的标签使用(如:id=“demo”) 类选择器:针对你想要的所有标签使用(如:class=“demo”) 通用选择器(通配符):针对...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 5,641
精华内容 2,256
关键字:

新闻标题滚动css