网址导航_盒子模型


对于没有接触过网页编程的人来说，又想学习爬虫，先学习一些网页基础知识非常有必要且重要，以后如果想做网站开发也能用的上，这一部分设计了三节课，为之后的爬虫打下网页知识基础。


第一课：互动图片画廊，主要了解网页的基本结构，HTML 标记语言是什么，h,p，img标签使用，互动样式设置等。


第二课：网址导航，主要了解链接，块状元素，行内元素，CSS盒子模型以及一些互动样式设置。


第三课：个人静态网站，主要了解网页的功能设计，页面布局，导航，JS利用。



第二课：网址导航


       网址导航_html_02

任务拆分：


  • 任务1：链接

  • 任务2：块状元素和行内元素

  • 任务3：CSS盒子模型

  • 任务4：完善最终效果


最终代码：

<!DOCTYPE html>
<html>
    <head>
  <title>网址导航</title>
  <style>
  body{background:url("bg4.jpg");}
  h1{text-align:center;}
  div{text-align:center;margin:20px;}
  a{background:yellow;display:inline-block;width:150px;padding:50px 0;border-radius: 25px;opacity:0.6;font-size:20px;text-decoration: none;}
  a:hover{box-shadow: 0px 10px 10px #ffffff;opacity:1;}
  .item1{background:OrangeRed}
  .item2{background:LightSkyBlue}
  .item3{background:LightPink}
  .item4{background:SpringGreen}
</style>
    </head>
    <body>
      <h1>常用网站</h1>
      <div>
          <a href="https://www.baidu.com/" class="item1">百度</a>
          <a href="#" class="item2">bilibili</a>
          <a href="#" class="item3">淘宝</a>
          <a href="#" class="item4">百度网盘</a>
      </div>
      <div>
          <a href="#" class="item4">知乎</a>
          <a href="#" class="item3">腾讯视频</a>
          <a href="#" class="item2">豆瓣</a>
          <a href="#" class="item1">直播吧</a>
      </div>
      <div>
          <a href="#" class="item1">Google</a>
          <a href="#" class="item2">Youku</a>
          <a href="#" class="item3">爱奇艺</a>
          <a href="#" class="item4">西瓜视频</a>
      </div>
    </body>
</html>

(全文完)

长按二维码，加关注！叶子陪你玩

网址导航_网址导航_03


欢迎转载，转载请注明出处！

欢迎关注公众微信号：叶子陪你玩编程 分享自己的python学习之路