imooc 网页定位导航特效 练习

大概过了一遍jquery 

以为自己差不多问题不大,所以就想找个小实例练一下

做个购物网站 一晚上连个css都没写完 觉得自己笨笨的

尤其是css写出来 然后没有反应的时候

都想哭了。。。

最后找到问题后,发现自己

啊,这都能有问题!!!

哎,不积跬步无以至千里

慢慢来,比较快


今天的代码

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>shopping web</title>
  <style type="text/css">
    *{
      margin: 0;
      padding: 0;
    }


    body{
      font-size: 12px;
      line-height: 1.7;
    }


    li{
      list-style: none;
    }


    #content{
      width: 800px;
      margin: 0 auto;
      padding: 20px;
      margin-bottom: 20px;


    }


    #content .item{
      padding: 20px;
      border: 1px dotted red;
      margin-bottom: 30px;


    }


    #content .item li{
      display: inline;
      


    }


    #content .item li a img{
      width: 230px;
      height: 230px;
      margin: 10px;
    }


  </style>
</head>
<body>
<div id="menu">
  <ul>
    <li><a href="#">1F 男装</a></li>
    <li><a href="#">2F 女装</a></li>
    <li><a href="#">3F 美妆</a></li>
    <li><a href="#">4F 数码</a></li>
    <li><a href="#">5F 母婴</a></li>
  </ul>
</div>
<div id="content">
  <h1>shopping web</h1>
  <div id="item1" class="item">
    <h2>1F 男装</h2>
    <ul>
      <li><a href="#"><img src="image/1F.jpg"></a></li>
      <li><a href="#"><img src="image/1F.jpg"></a></li>
      <li><a href="#"><img src="image/1F.jpg"></a></li>
      <li><a href="#"><img src="image/1F.jpg"></a></li>
      <li><a href="#"><img src="image/1F.jpg"></a></li>
      <li><a href="#"><img src="image/1F.jpg"></a></li>
      <li><a href="#"><img src="image/1F.jpg"></a></li>
      <li><a href="#"><img src="image/1F.jpg"></a></li>
      <li><a href="#"><img src="image/1F.jpg"></a></li>
    </ul>
  </div>
    <div id="item1" class="item">
    <h2>2F 女装</h2>
    <ul>
      <li><a href="#"><img src="image/2F.jpg"></a></li>
      <li><a href="#"><img src="image/2F.jpg"></a></li>
      <li><a href="#"><img src="image/2F.jpg"></a></li>
      <li><a href="#"><img src="image/2F.jpg"></a></li>
      <li><a href="#"><img src="image/2F.jpg"></a></li>
      <li><a href="#"><img src="image/2F.jpg"></a></li>
      <li><a href="#"><img src="image/2F.jpg"></a></li>
      <li><a href="#"><img src="image/2F.jpg"></a></li>
      <li><a href="#"><img src="image/2F.jpg"></a></li>
    </ul>
  </div>
    <div id="item1" class="item">
    <h2>3F 美妆</h2>
    <ul>
      <li><a href="#"><img src="image/3F.jpg"></a></li>
      <li><a href="#"><img src="image/3F.jpg"></a></li>
      <li><a href="#"><img src="image/3F.jpg"></a></li>
      <li><a href="#"><img src="image/3F.jpg"></a></li>
      <li><a href="#"><img src="image/3F.jpg"></a></li>
      <li><a href="#"><img src="image/3F.jpg"></a></li>
      <li><a href="#"><img src="image/3F.jpg"></a></li>
      <li><a href="#"><img src="image/3F.jpg"></a></li>
      <li><a href="#"><img src="image/3F.jpg"></a></li>
    </ul>
  </div>
    <div id="item1" class="item">
    <h2>4F 数码</h2>
    <ul>
      <li><a href="#"><img src="image/4F.png"></a></li>
      <li><a href="#"><img src="image/4F.png"></a></li>
      <li><a href="#"><img src="image/4F.png"></a></li>
      <li><a href="#"><img src="image/4F.png"></a></li>
      <li><a href="#"><img src="image/4F.png"></a></li>
      <li><a href="#"><img src="image/4F.png"></a></li>
      <li><a href="#"><img src="image/4F.png"></a></li>
      <li><a href="#"><img src="image/4F.png"></a></li>
      <li><a href="#"><img src="image/4F.png"></a></li>
    </ul>
  </div>
      <div id="item1" class="item">
    <h2>5F 母婴</h2>
    <ul>
      <li><a href="#"><img src="image/4F.png"></a></li>
      <li><a href="#"><img src="image/4F.png"></a></li>
      <li><a href="#"><img src="image/4F.png"></a></li>
      <li><a href="#"><img src="image/4F.png"></a></li>
      <li><a href="#"><img src="image/4F.png"></a></li>
      <li><a href="#"><img src="image/4F.png"></a></li>
      <li><a href="#"><img src="image/4F.png"></a></li>
      <li><a href="#"><img src="image/4F.png"></a></li>
      <li><a href="#"><img src="image/4F.png"></a></li>
    </ul>
  </div>
</div>
</body>
</html>


注意:

1.html没什么大问题,但是那个ul>li*9那个还没学会 明天安插件吧

2.line-height 行间距 新技能get!

3.我发现

    *{
      margin: 0;
      padding: 0;
    }

这真是万能的 

有了这个之后,list的样式都没了!

4.今天又感受到了margin的神奇,外框外框

5.那个css选择器太坑爹了 要有空格!!!#content .item空格啊空格

6.我直接用margin: 0 auto;是没有效果的,要先给个宽度width: 800px; 这个要记住啊 直接用没有效果

7.九个图片放上去就不太好看,padding让它们9个距离散开 神奇!


css真的是要多练才能发现问题啊 


---------------------------------------------------------------------------------------------分割线-----------------------------------------------------------------------------------


今天终终终于学完了jquery的第一个实例  哭

理论永远看起来简单~

<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
  <script type="text/javascript">
    $(function(){
      $(window).scroll(function(){
        var top=$(document).scrollTop();
        var menu=$("#menu");
        var items=$("#content").find(".item");


        var currentId="";
        items.each(function(){
          var m=$(this);
          var itemTop=m.offset().top;
          if(top+400>itemTop){
            currentId="#"+m.attr("id");


          }else{
            return false;
          }      
        });


        var currentLink=menu.find(".current");
        if(currentId&&currentLink.attr("href")!=currentId){
          currentLink.removeClass("current");
          menu.find("[href="+currentId+"]").addClass("current");


        }

      });
    })
  </script>


这一小段代码看似简单,但真的需要想很久呢,用几行代码就能完成很多事情,这或许就是编程的魅力所在吧

注意:

1.scroll是实际的偏移量,而offset是相对偏移量

这里就是获取m.offset().top来获取items的相对偏移量再去比较实际Top与它的大小,来改变id的值,从而达到变换的效果

2.其实效果好像并没有那么高大上,就是removeClass和addClass而已啊 easy!不要害怕

3.大概思路就是:遍历每一个item,比较top与m.offset().top,从而获得currentid,我就知道了当前位置需要哪一个id

然后就要改变item的class,我先看看现在拥有current类的是哪个item,默认是1楼,这里有一些边缘值的考虑:如果不是空,也不是应该有的id,那我就开始改变class。currelink保存了当前拥有current类的代码,我先把currentlink那行代码removeclass,之后给currentid的那行代码addclass就大功告成啦

4.top-400那里是要考虑到用户体验,我希望快到4楼了就换到4楼,而不是顶格写

5.多动手多动手多动手!!!



---------------------------------------------------------------------------------------------分割线-----------------------------------------------------------------------------------

注意:

1.自己写了一遍,竟然写出来了!!开心

2.卡壳在两个地方:attr竟然写成了att 哭。第二个&&写成了$$我是有多蠢啊啊啊啊


  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
好的,让我们开始Python模拟登录imooc.com的练习。 首先,我们需要导入需要的库,包括requests和BeautifulSoup。requests库用于发送http请求,BeautifulSoup库用于解析html文本。 ```python import requests from bs4 import BeautifulSoup ``` 接下来,我们需要获取登录页面的html代码。我们可以使用requests库的get()方法来发送一个get请求,并将返回的html代码存储在一个变量中。 ```python login_url = 'https://www.imooc.com/' login_page = requests.get(login_url) login_soup = BeautifulSoup(login_page.text, 'html.parser') ``` 接下来,我们需要从登录页面中获取登录所需的信息,包括表单的action、method、以及需要提交的表单数据。我们可以使用BeautifulSoup库来解析html代码,并使用find()方法来查找表单元素。 ```python # 获取登录表单元素 login_form = login_soup.find('form', attrs={'id': 'signup-form'}) # 获取表单的action和method action_url = login_form['action'] method = login_form['method'] # 获取需要提交的表单数据 email = input('请输入邮箱:') password = input('请输入密码:') data = { 'email': email, 'password': password } ``` 接下来,我们可以使用requests库的post()方法来发送一个post请求,将表单数据提交到服务器。需要注意的是,我们需要将表单数据和请求头一起提交到服务器。 ```python # 构造请求头 headers = { 'Referer': login_url, 'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/58.0.3029.110 Safari/537.3'} # 发送post请求 response = requests.post(action_url, data=data, headers=headers) ``` 最后,我们可以判断登录是否成功,可以通过检查返回的html代码中是否包含登录成功的提示信息来判断。 ```python # 判断登录是否成功 if '个人中心' in response.text: print('登录成功!') else: print('登录失败!') ``` 完整代码如下: ```python import requests from bs4 import BeautifulSoup # 获取登录页面html代码 login_url = 'https://www.imooc.com/' login_page = requests.get(login_url) login_soup = BeautifulSoup(login_page.text, 'html.parser') # 获取登录表单元素 login_form = login_soup.find('form', attrs={'id': 'signup-form'}) # 获取表单的action和method action_url = login_form['action'] method = login_form['method'] # 获取需要提交的表单数据 email = input('请输入邮箱:') password = input('请输入密码:') data = { 'email': email, 'password': password } # 构造请求头 headers = { 'Referer': login_url, 'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/58.0.3029.110 Safari/537.3'} # 发送post请求 response = requests.post(action_url, data=data, headers=headers) # 判断登录是否成功 if '个人中心' in response.text: print('登录成功!') else: print('登录失败!') ``` 注意,此代码仅供学习参考。在实际应用中,请勿使用模拟登录的方式获取个人信息,以免造成不必要的风险。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值