1，竖向下拉导航 鼠标单击打开 再打击关闭

<style>

*{ margin:0px auto; padding:0px;}

div{ width:100px; height:50px; background-color:#900; border:1px solid #000; text-align:center; vertical-align:middle; line-height:50px;}

#biao{ cursor:pointer;}

li{ width:100px; height:25px; background-color:#0F0; border:1px solid #F00; list-style:none; text-align:center; vertical-align:middle; line-height:25px; }

</style>

</head>

<body>

<div id="biao" onclick="biao(1)">标题1</div>

<ul id="nei1" style=" display:none;">

<li>内容1</li>

<li>内容2</li>

<li>内容3</li>

</ul>

<div id="biao" onclick="biao(2)">标题2</div>

<ul id="nei2" style=" display:none;">

<li>内容1</li>

<li>内容2</li>

<li>内容3</li>

</ul>

<div id="biao" onclick="biao(3)">标题3</div>

<ul id="nei3" style=" display:none;">

<li>内容1</li>

<li>内容2</li>

<li>内容3</li>

</ul>

</body>

</html>

<script>

function biao(n)

{

    if(document.getElementById("nei"+n).style.display=="none")

    {

    document.getElementById("nei"+n).style.display="block";

    }

    else{

        document.getElementById("nei"+n).style.display="none";

        }

    }

</script>

2.横向下拉导航  鼠标放上显示  鼠标移开 关闭

<style>

*{ margin:0px auto; padding:0px;}

#aa{ width:100px; height:125px; float:left}

#biao{ width:100px; height:50px; background-color:#900; border:1px solid #000; text-align:center; vertical-align:middle; line-height:50px;}

#biao{ cursor:pointer;}

#nei1{ display:none;}

#nei2{ display:none;}

#nei3{ display:none;}

#nei4{ display:none;}

#nei5{ display:none;}

li{ width:100px; height:25px; background-color:#0F0; border:1px solid #F00; list-style:none; text-align:center; vertical-align:middle; line-height:25px; }

</style>

</head>

<body>

<div id="aa">

<div id="biao" onmouseover="biao(1)" onmouseout="biao1(1)">标题1</div>

<ul id="nei1">

<li>内容1</li>

<li>内容2</li>

<li>内容3</li>

</ul>

</div>

<div id="aa">

<div id="biao" onmouseover="biao(2)" onmouseout="biao1(2)">标题2</div>

<ul id="nei2">

<li>内容1</li>

<li>内容2</li>

<li>内容3</li>

</ul>

</div>

<div id="aa">

<div id="biao" onmouseover="biao(3)" onmouseout="biao1(3)">标题3</div>

<ul id="nei3">

<li>内容1</li>

<li>内容2</li>

<li>内容3</li>

</ul>

</div>

<div id="aa">

<div id="biao" onmouseover="biao(4)" onmouseout="biao1(4)">标题4</div>

<ul id="nei4">

<li>内容1</li>

<li>内容2</li>

<li>内容3</li>

</ul>

</div>

<div id="aa">

<div id="biao" onmouseover="biao(5)" onmouseout="biao1(5)">标题5</div>

<ul id="nei5">

<li>内容1</li>

<li>内容2</li>

<li>内容3</li>

</ul>

</div>

</body>

</html>

<script>

function biao(n)

{

    document.getElementById("nei"+n).style.display="block";

    }

function biao1(n)

    {

        document.getElementById("nei"+n).style.display="none";

        }

</script>

 3.下拉菜单

<style type="text/css">

*{ margin:0px auto; padding:0px}

#xiala{ width:200px; height:40px; border:1px solid #999;text-align:center; line-height:40px; vertical-align:middle;}

#xiala:hover{ cursor:pointer}

.list{ width:200px; height:40px; text-align:center; line-height:40px; vertical-align:middle; border:1px solid #999; border-top-width:0px; display:none}

.list:hover{ cursor:pointer; background-color:#63C; color:white;}

</style>

</head>

<body>

<br />

<div style="width:500px; height:500px;">

    <div id="xiala" onclick="showa()"></div>

    <div class="list" onclick="xuan(this)">山东</div>

    <div class="list" onclick="xuan(this)">北京</div>

    <div class="list" onclick="xuan(this)">上海</div>

    <div class="list" onclick="xuan(this)">深圳</div>

    <div class="list" onclick="xuan(this)">广州</div>

</div>

<script type="text/javascript">

function showa()

{

    var list = document.getElementsByClassName("list");

    for(var i=0; i<list.length;i++)

    {

        list[i].style.display = "block";

    }

}

function xuan(a)

{

    var nr = a.innerHTML;

    document.getElementById("xiala").innerHTML=nr;

    var list = document.getElementsByClassName("list");

    for(var i=0; i<list.length;i++)

    {

        list[i].style.display = "none";

    }

}

</script>

 4.图片轮播 加图片下方圆点 利用让图片显示与隐藏的思想做轮播

<style type="text/css">

*{ margin:0px auto; padding:0px}

#tp{ width:100%; height:350px}

.img{ display:none}

#dian{ width:200px; height:15px; position:relative; top:-25px}

.yuan{ width:13px; height:13px; float:left; margin-left:20px; border:2px solid #F00;border-radius:100px; background-color:#FFF}

.yuan:hover{ cursor:pointer}

</style>

</head>

<body>

<div id="tp">

    <img style="display:block" class="img" src="../1027汉企实训/项目/图片/借鉴图片.jpg" width="100%" height="350" />

    <img class="img" src="../1027汉企实训/项目/图片/拒绝雾霾.jpg" width="100%" height="350" />

    <img class="img" src="../1027汉企实训/项目/图片/雾霾.jpg" width="100%" height="350" />

    <img class="img" src="../1027汉企实训/项目/图片/雾霾原因.jpg" width="100%" height="350" />

    <img class="img" src="../1027汉企实训/项目/图片/原因1.jpg" width="100%" height="350" />

</div>

<div id="dian">    //写图片下方圆点

    <div bs="0" class="yuan" onclick="xianshi(this,'0')"></div>

    <div bs="1" class="yuan" onclick="xianshi(this,'1')"></div>

    <div bs="2" class="yuan" onclick="xianshi(this,'2')"></div>

    <div bs="3" class="yuan" onclick="xianshi(this,'3')"></div>

    <div bs="4" class="yuan" onclick="xianshi(this,'4')"></div>

</div>

<script type="text/javascript">

//图片索引

var sy = 0;

//间隔调用

window.setInterval("Huan()",3000);

//调一下换一个

function Huan()

{

    var img = document.getElementsByClassName("img");

    sy++; //索引加1

    //判断是否到了最后一张

    if(sy>=img.length)

    {

        sy=0;

    }

    //让所有隐藏

    for(var i=0;i<img.length;i++)

    {

        img[i].style.display="none";

    }

    //让下一张显示

    img[sy].style.display="block";

    //换圆点的样式

    var yuan = document.getElementsByClassName("yuan");

    for(var j=0;j<yuan.length;j++)

    {

        if(yuan[j].getAttribute("bs")==sy)

        {

            yuan[j].style.borderColor = "green";

        }

        else

        {

            yuan[j].style.borderColor = "red";

        }

    }

}

function xianshi(t,s)

{

    sy=s;

    var img = document.getElementsByClassName("img");

    //让所有隐藏

    for(var i=0;i<img.length;i++)

    {

        img[i].style.display="none";

    }

    //让下一张显示

    img[s].style.display="block";

    //改自身样式

    var yuan = document.getElementsByClassName("yuan");

    for(var j=0;j<yuan.length;j++)

    {

        yuan[j].style.borderColor="red";

    }

    t.style.borderColor="green";

}

</script>

</body>

利用更换外框背景的思想，做轮播

<style>

*{ margin:0px auto; padding:0px; font-style:"微软雅黑"；}

#waikuang{ width:760px; height:350px; background-repeat:no-repeat; border:1px solid #C00; background-image:url(../../%E9%A1%B9%E7%9B%AE/%E5%9B%BE%E7%89%87/%E5%8E%9F%E5%9B%A01.jpg)}

.page{ top:200px; background-color:#000; background-position:center; background-repeat:no-repeat; opacity:0.4; width:30px; height:60px;border:1px solid #C00;}

#p1{ background-image:url(../../%E9%A1%B9%E7%9B%AE/%E7%AE%AD%E5%A4%B4/%E5%B7%A6.png); float:left; margin:150px 0px 0px 10px;}

#p2{ background-image:url(../../%E9%A1%B9%E7%9B%AE/%E7%AE%AD%E5%A4%B4/%E5%8F%B3.png);float:right; margin:150px 10px 0px 0px;}

</style>

</head>

<body>

<div id="waikuang">

<div class="page" id="p1" onclick="dodo(-1)"></div>

<div class="page" id="p2" onclick="dodo(1)"></div>

</div>

 </body>

</html>

<script>

var jpg=new Array();

jpg[0]="url(../../%E9%A1%B9%E7%9B%AE/%E5%9B%BE%E7%89%87/%E5%80%9F%E9%89%B4%E5%9B%BE%E7%89%87.jpg)";

jpg[1]="url(../../%E9%A1%B9%E7%9B%AE/%E5%9B%BE%E7%89%87/%E6%8B%92%E7%BB%9D%E9%9B%BE%E9%9C%BE.jpg)";

jpg[2]="url(../../%E9%A1%B9%E7%9B%AE/%E5%9B%BE%E7%89%87/%E9%9B%BE%E9%9C%BE.jpg)";

var wk=document.getElementById("waikuang");

var biao=0;

var n=0;

function huan()

{

    biao++;

    if(biao==jpg.length)

    {

        biao=0;

        }

    wk.style.backgroundImage=jpg[biao];

    if(n==0)

    {

      window.setTimeout("huan()",3000);

        }

    }

function dodo(m)

{

    n=1;

    biao=biao+m;

    if(biao<0)

    {

        biao=jpg.length-1;

        }

    else if(biao>=jpg.length)

    {

        biao=0;

        }

    wk.style.backgroundImage=jpg[biao];

    }

window.setTimeout("huan()",3000)

</script>

 5选项卡

<style type="text/css">

*{ margin:0px auto; padding:0px}

#fenlei{ width:500px; height:35px;}

.xiang{ float:left; width:100px; height:35px; text-align:center; line-height:35px; vertical-align:middle;}

.xiang:hover{ cursor:pointer}

.xuanxiang{ width:500px; height:300px; display:none}

#guonei{ background-color:#63C; display:block}

#guoji{ background-color:#3C9}

#tiyu{ background-color:#C36}

#yule{ background-color:#FF6}

</style>

</head>

<body>

<br />

<div id="fenlei">

    <div class="xiang" style="background-color:#63C" onclick="showa('guonei')">国内新闻</div>

    <div class="xiang" style="background-color:#3C9" onclick="showa('guoji')">国际新闻</div>

    <div class="xiang" style="background-color:#C36" onclick="showa('tiyu')">体育新闻</div>

    <div class="xiang" style="background-color:#FF6" onclick="showa('yule')">娱乐新闻</div>

</div>

<div id="guonei" class="xuanxiang">

</div>

<div id="guoji" class="xuanxiang">

</div>

<div id="tiyu" class="xuanxiang">

</div>

<div id="yule" class="xuanxiang">

</div>

<script type="text/javascript">

function showa(d)

{

    var div = document.getElementById(d);

    var suoyou = document.getElementsByClassName("xuanxiang");

    for(var i=0;i<suoyou.length;i++)

    {

        suoyou[i].style.display = "none";

    }

    div.style.display = "block";

}

</script>

6进度条

<style type="text/css">

*{ margin:0px auto; padding:0px}

#kuang{ width:200px; height:10px; border:1px solid #60F;}

#jindu{ height:10px; background-color:#F03; float:left}

</style>

</head>

<body>

<br />

<div id="kuang">

    <div id="jindu" style="width:0px"></div>

</div>

<script type="text/javascript">

window.setTimeout("jindu()",30);

//调一下进度前进1%

function jindu()

{

    //获取进度div的宽度

    var div = document.getElementById("jindu");

    //获取到的是字符串"0px"

    var str = div.style.width;

    //处理字符串获取数字

    var cd = str.substr(0,str.length-2);

    //判断长度是否到最大值

    if(cd<200)

    {

        //将长度转为整数加2

        var cd = parseInt(cd)+2;

        //让进度的DIV长度变为cd

        div.style.width = cd+"px";

        //调用自身

        window.setTimeout("jindu()",30);

    }

}

</script>

7.横向选项卡，下拉显示的内容有选中状态

<style>

*{ margin:0px auto; padding:0px;}

#aa{ width:100px; height:125px; float:left}

#biao{ width:100px; height:50px; background-color:#900; border:1px solid #000; text-align:center; vertical-align:middle; line-height:50px;}

#biao{ cursor:pointer;}

#nei1{ display:none;}

#nei2{ display:none;}

li{ width:100px; height:25px; background-color:#66F; border:1px solid #F00; list-style:none; text-align:center; vertical-align:middle; line-height:25px; }

</style>

</head>

<body>

<div id="aa">

<div id="biao" onmouseover="biao(1)" onmouseout="biao1(1)">标题1</div>

<ul id="nei1" onmouseover="biao(1)" onmouseout="biao1(1)">

<li class="nr" onmouseover="bian(this)" onmouseout="huifu()">内容1</li>

<li class="nr" onmouseover="bian(this)" onmouseout="huifu()">内容2</li>

<li class="nr" onmouseover="bian(this)" onmouseout="huifu()">内容3</li>

</ul>

</div>

<div id="aa">

<div id="biao" onmouseover="biao(2)" onmouseout="biao1(2)">标题2</div>

<ul id="nei2" onmouseover="biao(2)" onmouseout="biao1(2)">

<li class="nr" onmouseover="bian(this)" onmouseout="huifu()">内容1</li>

<li class="nr" onmouseover="bian(this)" onmouseout="huifu()">内容2</li>

<li class="nr" onmouseover="bian(this)" onmouseout="huifu()">内容3</li>

</ul>

</div>

</body>

</html>

<script>

function biao(n)

{

    document.getElementById("nei"+n).style.display="block";

    }

function biao1(n)

    {

        document.getElementById("nei"+n).style.display="none";

        }

  function bian(d)

{

    //清

    var list = document.getElementsByClassName("nr");

    for(var i=0;i<list.length;i++)

    {

        if(list[i].getAttribute("bs")!="1")

        {

            list[i].style.backgroundColor = "#66F";

        }

    }

    //选

    d.style.backgroundColor = "#F33";

}

function huifu()

{

    var list = document.getElementsByClassName("nr");

    for(var i=0;i<list.length;i++)

    {

        if(list[i].getAttribute("bs")!="1")

        {

            list[i].style.backgroundColor = "#66F";

        }

    }

}  

</script>

</body>

</html>

8，div+css模拟做下拉列表

<style type="text/css">

* {

    margin:0px;

    padding:0px;

}

body {

    font-fwbily: Arial, Helvetica, sans-serif;

    font-size: 12px;

}

.cur {

    cursor:pointer;

    display:block;

    color:#788F72;

    width:71px;

    height:22px;

    line-height:22px;

    padding:0px 0px 0px 2px;

}

.wb {

    border: 0px;

    color:#788F72;

    cursor: pointer;

    background: url(http://www.codefans.net/jscss/demoimg/201111/icon_111.jpg) no-repeat center center;

    border:1px #ccc solid;

    display:block;

    cursor:pointer;

    width:73px;

    height: 19px;

    margin:10px 0px 0px 10px;

    padding:3px 0px 0px 2px;

}

.kuang {

    border: 1px #999999 solid;

    width:73px;

    margin-left:10px;

}

</style>

</head>

<body>

  <input onclick="hide('cc')" type="text" value="请选择" id="wb" class="wb" />

  <div id="cc" style="display: none " class="kuang">

      <div id="a1" onclick="dj('测试一')" onMouseOver="bgcolor('a1')" onMouseOut="nocolor('a1')" class="cur">测试一</div>

      <div id="a2" onclick="dj('测试二')" onMouseOver="bgcolor('a2')" onMouseOut="nocolor('a2')" class="cur">测试二</div>

      <div id="a3" onclick="dj('测试三')" onMouseOver="bgcolor('a3')" onMouseOut="nocolor('a3')" class="cur">测试三</div>

      <div id="a4" onclick="dj('测试四')" onMouseOver="bgcolor('a4')" onMouseOut="nocolor('a4')" class="cur">测试四</div>

      <div id="a5" onclick="dj('测试五')" onMouseOver="bgcolor('a5')" onMouseOut="nocolor('a5')" class="cur">测试五</div>

      <div id="a6" onclick="dj('测试六')" onMouseOver="bgcolor('a6')" onMouseOut="nocolor('a6')" class="cur">测试六</div>

    </div>

</body>

</html>

<script type="text/javascript" >

function aa(bb){

 return document.getElementById(bb);

 }

function hide(bb)

 {aa(bb).style.display = aa(bb).style.display == "none" ? "" : "none";}

function dj(v) {

 document.getElementById('wb').value=v;

hide('cc')

}

function bgcolor(id){

 document.getElementById(id).style.background="#F7FFFA";

 document.getElementById(id).style.color="#000";

}

function nocolor(id){

 document.getElementById(id).style.background="";

 document.getElementById(id).style.color="#788F72";

}

</script>

9.js做大图轮播

 <style>

 ul{

  margin: 0;

  padding: 0;

  list-style: none;

 }

 .sliderWrap{

  width: 200px;

  height: 112px;

  overflow: hidden;

  margin: 0 auto;

 }

 .sliderWrap ul{

  position: relative;

  width: 1000px;

  transition: left .5s ease;

  left: 0;

 }

 .sliderWrap li{

  position: relative;

  float: left;

 }

 .sliderWrap ul li img{

  width: 100%;

 }

 </style>

</head>

<body>

<div class="sliderWrap">

 <ul id="slider">

 <li><img src="file/2017031316082714872975652365568.JPG" alt=""></li>

 <li><img src="file/2017031316082714872975652365568.JPG" alt=""></li>

 <li><img src="file/2017031316082714872975652365568.JPG" alt=""></li>

 <li><img src="file/2017031316082714872975652365568.JPG" alt=""></li>

 </ul>

</div>

<input type="button" value="click me" id="next"/>

<script>

 /**

 * 图片轮播

 * @type {Element}

 */

 var btn = document.getElementById("next");

 var dom = document.getElementById("slider");

 var liArr = dom.getElementsByTagName("li");

 var curWidth = 200;

 var ulWidth = curWidth * liArr.length;

 var show = [];

 var circle = [];

 var goAway = "translate(-" + curWidth +"px, 0) translateZ(0px)";

 var goIn = "translate(0, 0) translateZ(0px)";

 var goPre = "translate(" + curWidth +"px, 0) translateZ(0px)";

 //保证所有li在ul中能在一行内放下

 dom.style.width = ulWidth + "px";

 for(var i = 0, len = liArr.length; i < len; i++){

 var curLi = liArr[i];

 curLi.setAttribute("data-index", i);

 curLi.style.width = curWidth + "px";

 if(i == 0){

  curLi.style.left = 0;

  show.push(curLi);

 }else{

  curLi.style.left = - curWidth * i + "px";

  if(i > 1){

  translate(curLi, goAway, '')

  circle.push(curLi);

  }else{

  show.push(curLi);

  translate(curLi, goPre, '');

  }

 }

 }

 circle.reverse();

 btn.onclick = function(){

 //已展示的图片滚粗

 var showFirst = show.shift();

 translate(showFirst, goAway, "300ms");

 //正在展示的图片

 translate(show[0], goIn, "300ms");

 circle.splice(0, 0, showFirst);

 //准备好下一个将要展示的图片

 var nextPre = circle.pop();

 translate(nextPre, goPre, "0ms");

 show.push(nextPre);

 };

 function translate(dom, goType, time){

 dom.style.transform =

  dom.style.webkitTransform =

   dom.style.mozTransform =

    dom.style.msTransform =

     dom.style.oTransform = goType;

 dom.style.transitionDuration =

  dom.style.webkitTransitionDuration =

   dom.style.mozTransitionDuration =

    dom.style.msTransitionDuration =

     dom.oTransitionDuration = time;

 }

</script>

</body>

</html>

HTML DOM部分---做竖向横向的下拉导航 下拉菜单 图片轮播（圆点、箭头） 选项卡 进度条；的更多相关文章

  1. Android 使用ViewPager 做的半吊子的图片轮播

    Android 使用ViewPager 做的半吊子的图片轮播 效果图 虽然不咋样,但是最起码的功能是实现了,下面我们来一步步的实现它. 界面 下面我们来分析一下界面的构成 整体的布局: 因为我们要做出 ...

  2. H5如何做手机app(移动Web App)?图片轮播？ionic、MUI

    移动Web App 跨平台开发 用户不需要去卖场来下载安装App 任何时候都可以发布App只需要一个开发项目 可以使用HTML5,CSS3以及JavaScript以及服务器端语言来完成(PHP,Rub ...

  3. 使用jQuery做简单的图片轮播效果

      一.本特效主要用到的前端知识点 CSS中绝对定位(absolute)CSS实现垂直居中jQuery中简单的淡入淡出动画效果(fadeIn,fadeOut)定时器(setInterval,clear ...

  4. (转)jQuery轻量级响应式图片轮播插件ResponsiveSlides.js(仅1kb)也可以做纯文本轮播

    ResponsiveSlides.js是一个展示同一容器内图片的轻量级响应式jQuery幻灯片插件(tiny responsive slideshow jQuery plugin).它支持包括IE6在 ...

  5. H5+CSS3做图片轮播滚动效果

    HTML代码部分: <div id="wrap"> <ul id="list"> <li>10</li> < ...

  6. 用JS做图片轮播

    脚本之家 首页应用手游攻略教程 ﹤首页 >> 网络编程 >> JavaScript >> 网页特效 >> 图象特效 js 图片轮播(5张图片) 作者:m ...

  7. 基于SwiperJs的H5/移动端下拉刷新上拉加载更多的效果

    最早时,公司的H5项目中曾用过点击一个"加载更多"的DOM元素来实现分页的功能,后来又用过网上有人写的一个上拉加载更多的插件,那个插件是页面将要滚动到底部时就自动请求数据并插入到页 ...

  8. 基于SwiperJs的H5/移动端下拉刷新上拉加载更多

    最早时,公司的H5项目中曾用过点击一个"加载更多"的DOM元素来实现分页的功能,后来又用过网上有人写的一个上拉加载更多的插件,那个插件是页面将要滚动到底部时就自动请求数据并插入到页 ...

  9. Android 下拉刷新上拉载入 多种应用场景 超级大放送（上）

    转载请标明原文地址:http://blog.csdn.net/yalinfendou/article/details/47707017 关于Android下拉刷新上拉载入,网上的Demo太多太多了,这 ...

随机推荐

  1. 蓝桥杯 2015年省赛最后一题 生命之树（树形dp）

    题目描述: 生命之树 在X森林里,上帝创建了生命之树. 他给每棵树的每个节点(叶子也称为一个节点)上,都标了一个整数,代表这个点的和谐值.上帝要在这棵树内选出一个非空节点集S,使得对于S中的任意两个点 ...

  2. java---数据格式的验证

    package cc.cococ.trade.util; import java.util.regex.Matcher; import java.util.regex.Pattern; public ...

  3. Unity开发Android应用程序：调用安卓应用程序功能

    开发环境: Eclipse3.4 + adt12 + jdk6 + AndroidSDK2.2 Unity3.4 + windows7 测试设备: HTC Desire HD 本文要涉及到的几个重点问 ...

  4. 对于C#中的一些点滴你真的理解了吗？

    废话不多说看题目,看看我们自己真的理解了吗? 1.如下代码输出的结果是什么? public class A{ public virtual void Func(int  number=10) { Co ...

  5. 关于$.getJson

    这是一个Ajax函数的缩写,这相当于: 1 2 3 4 5 6 $.ajax({ dataType: "json", url: url, data: data, success: ...

  6. BestCoder Round #1

    逃生 反向拓扑+优先队列+逆序输出 这里要注意,题中要求的不是输出字典序,而是要编号小的尽量考前(首先1尽量考前,然后2尽量考前..). 比如说 约束是 4->1,3->2,字典序答案就是 ...

  7. Java 嵌套作用域

    在C/C++中,当一个块处于另一个块作用域内的时候,内层定义的变量会把外层的变量隐藏, 遵循所谓的就近原则. 在Java中,在内层定义与外层同名的变量是禁止的! 如下: int i = 0; for( ...

  8. SingleThreadModel is deprecated in Servlet API version 2.4

    Ensures that servlets handle only one request at a time. This interface has no methods. If a servlet ...

  9. Interview----判断整数序列是否是二叉搜索树的后序遍历结果

    题目:输入一个整数数组,判断该数组是不是某二元查找树的后序遍历的结果. 如果是返回true,否则返回false. 例如输入5.7.6.9.11.10.8,由于这一整数序列是如下树的后序遍历结果:   ...

  10. python3爬虫初探（四）之文件保存

    接着上面的写,抓取到网址之后,我们要把图片保存到本地,这里有几种方法都是可以的. #-----urllib.request.urlretrieve----- import urllib.request ...