html模板之动漫主题《熊出没》 web期末大作业

最新推荐文章于 2024-09-06 10:27:59 发布

软件技术NINI

最新推荐文章于 2024-09-06 10:27:59 发布

阅读量750

点赞数 17

分类专栏： html/css 文章标签：前端 html 课程设计

本文链接：https://blog.csdn.net/2301_78133614/article/details/141534714

版权

html/css 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

一、👨‍🎓网站题目

旅游，当地特色，历史文化，特色小吃等网站的设计与制作。

二、✍️网站描述

👨‍🎓静态网站的编写主要是用HTML DIV+CSS 等来完成页面的排版设计👩‍🎓,常用的网页设计软件有Dreamweaver、EditPlus、HBuilderX、VScode 、Webstorm、Animate等等，用的最多的还是DW，当然不同软件写出的前端Html5代码都是一致的，本网页适合修改成为各种类型的产品展示网页，比如美食、旅游、摄影、电影、音乐等等多种主题，希望对大家有所帮助。

三、📚网站介绍

📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。

📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。

📘网站素材方面：计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。

📒网站文件方面：网站系统文件种类包含：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件；

📙网页编辑方面：网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作）。
其中：
（1）📜html文件包含：其中index.html是首页、其他html为二级页面；
（2）📑 css文件包含：css全部页面样式,文字滚动, 图片放大等；

四、🌐网站效果

五、🪓 代码实现

🧱HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link href="css/style.css" type="text/css" rel="stylesheet" />
    <title>熊出没</title>
  </head>

  <body>
    <style>
      A.applink:hover {
        border: 2px dotted #dce6f4;
        padding: 2px;
        background-color: #ffff00;
        color: green;
        text-decoration: none;
      }

      A.applink {
        border: 2px dotted #dce6f4;
        padding: 2px;
        color: #2f5bff;
        background: transparent;
        text-decoration: none;
      }

      A.info {
        color: #2f5bff;
        background: transparent;
        text-decoration: none;
      }

      A.info:hover {
        color: green;
        background: transparent;
        text-decoration: underline;
      }
    </style>
    <div class="banner">
      <img src="https://p1.ssl.qhmsg.com/t012b0aeaa6a22e270e.jpg" width="1500px" height="400px" />
    </div>

    <!-- content -->
    <div class="content">
      <div class="content_nav">
        <a href="index.html" >漫画简介</a>
        <a href="pic.html" class="now_nav">人物简介</a>
        <a href="tuji.html">人物图集</a>
        <a href="xinshang.html">漫画欣赏</a>
        <a href="jieshao.html">网站介绍</a>
      </div>
      <div class="content_qb">
        <img src="https://pic.baike.soso.com/ugc/baikepic2/2784/20170906041034-719913862.jpg/300"  width="100px;" height="200px"/>
       <p> 光头强</p>
        <p>
          聪明无比，但经常聪明反被聪明误。多才多艺，会跳舞、游泳、钓鱼、唱歌等。其实他一点也不计较狗熊们去他家吃喝玩乐，他如果真的计较，熊们就不可能这么快活了，由于剧情需要，他每次都要失败，和灰太狼一样，是个聪明无比，多才多艺但经常由于剧情需要而失败的家伙。
        </p>
      </div>
      <div class="content_mh"></div>
      <div class="content_qb">
        <img src="https://pic.baike.soso.com/ugc/baikepic2/6487/20170906041034-1073422031.jpg/300"  width="100px;" height="200px"/>
       <p> 熊二</p>
        <p>
          一头憨厚可爱、力大无穷、比较聪明却好吃懒做的雄性狗熊，小动物们落难，熊二都会挺身而出，运用智慧打败光头强。
        </p>
      </div>
      <div class="content_mh"></div>
      <div class="content_qb">
        <img src="https://pic.baike.soso.com/ugc/baikepic2/2784/20170906041034-110009376.jpg/300"  width="100px;" height="200px"/>
       <p> 熊大</p>
        <p>
          一头聪颖、智慧无边的雄性狗熊，懂得坚持主见的重要性，足智多谋，喜欢母熊翠花，常常为了讨好翠花与胞弟熊二互相竞争；在讨好翠花这一方面，熊大略逊于熊二。
        </p>
      </div>
      <div class="content_mh"></div>
      <div class="content_qb">
        <img src="https://pic.baike.soso.com/ugc/baikepic2/2784/20170906041034-1347589812.jpg/300"  width="100px;" height="200px"/>
       <p> 松鼠（蹦蹦）</p>
       <P>胆小，擅长装死。</P>
      </div>
      <div class="content_mh"></div>
      <div class="content_qb">
        <img src="https://pic.baike.soso.com/ugc/baikepic2/3425/20170906041034-641476297.jpg/300"  width="100px;" height="200px"/>
       <p> 李老板</p>
       <P>《熊出没》系列配角，非常抠门，出现几率很小，经常打电话催光头强交木头，每回给光头强买药和发明都从光头强的工资里扣。</P>
      </div>
    </div>
  </body>
</html>

🧱css

@charset "utf-8";
/* CSS Document */

body,
ul,
ol,
li,
p,
h1,
h2,
h3,
h4,
h5,
h6,
form,
fieldset,
table,
td,
img,
div {
    margin: 0;
    padding: 0;
}

* {
    margin: 0;
    padding: 0;
    border: 0;
}

body {
    font-family: "宋体";
    font-size: 14px;
}

a {
    text-decoration: none;
    color: #fff;
}

ul,
li {
    list-style-type: none;
}

img {
    border: 0;
}

.banner,
.content {
    width: 1500px;
    height: 351px;
    margin: auto;
}

.content {
    height: 724px;
    position: absolute;
    top: 325px;
}

.content_nav {
    width: 960px;
    height: 80px;
    margin: auto;
}

.content_nav a {
    line-height: 80px;
    padding-left: 25px;
    padding-right: 50px;
    font-weight: bold;
}

.content_nav a:hover,
.now_nav {
    color: #429cd1;
}

.content_qb,
.content_mh,
.content_foot,
.content_mh1 {
    width: 1200px;
    margin: auto;
}

.content_qb img {
    width: 259px;
    height: 271px;
    float: left;
    margin: 40px 25px 0px 40px;
}

.content_qb p {
    width: 600px;
    float: left;
    text-indent: 2em;
    line-height: 24px;
    color: #b8b3b3;
    margin-top: 60px;
}

.content_mh {
    clear: both;
}

.content_mh h1 {
    margin: 0px 0px 20px 40px;
    padding-top: 60px;
}

.content_mh a,
.content_mh1 a {
    display: inline-block;
    margin-left: 25px;
}

.content_foot {
    margin-top: 55px;
}

.content_foot p {
    text-align: center;
    height: 24px;
    color: #b8b3b3;
    font-size: 12px;
}

.content1 {
    background:#429cd1 no-repeat;
    width: 100px;
}

.content_mh1 a {
    margin-top: 63px;
}

.content_mh1 a img {
    width: 157px;
    height: 108px;
}

.content_mh1 p {
    line-height: 24px;
    color: #b8b3b3;
    padding-left: 50px;
}

.content_mh1 h1 {
    font-size: 14px;
    color: #fff;
    padding-left: 50px;
}

六、🥇 如何让学习不再盲目

很多刚入门编程的小白学习了基础语法，却不知道语法的用途，不知道如何加深映像，不知道如何提升自己，这个时候每天刷自主刷一些题就非常重要（百炼成神），可以去牛客网上的编程初学者入门训练。该专题为编程入门级别，适合刚学完语法的小白练习，题目涉及编程基础语法，基本结构等，每道题带有练习模式和考试模式，可还原考试模式进行模拟，也可通过练习模式进行练习。