网址导航

叶子陪你玩

发布于 2020-08-06 11:36:49

3.9K0

发布于 2020-08-06 11:36:49

文章被收录于专栏：叶子陪你玩编程叶子陪你玩编程

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

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

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

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

第二课：网址导航

任务拆分：

任务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>

(全文完)

本文参与腾讯云自媒体分享计划，分享自微信公众号。

原始发表：2020-08-03，如有侵权请联系 cloudcommunity@tencent.com 删除

css