Make a simple HTML pet cat webpage (HTML+CSS)

Excellent column recommendationGet contact at the end of the article
About the author: A technical blogger who loves to turn logical thinking into code
Author’s homepage: [Homepage–? Get more high-quality source code]
Web front-end major homework: 【Practice cases of high-quality project projects (1000 sets) 】
Programmer’s interesting confession method: 【HTML Tanabata Valentine’s Day Confession Web Page Production (110 sets) 】
Super cool Echarts large-screen visualization source code: [ Echarts large-screen display big data platform visualization (150 sets) 】
HTML + CSS + JS example code: [?HTML + CSS + JS example code (cool special effect web page code) is being updated…]
Free and practical WEB front-end learning guide: [web front-end zero basic to advanced learning video tutorial 120G dry goods sharing]
About the author: Successively served as R&D engineer, technical team leader, and teaching director; won the top ten blog stars of CSDN twice in 2016 and 2020. Ten years of cold ice, it is difficult to cool the blood; many years have passed, and after changes, things have changed. However, the exploration and pursuit of technology never stops. Insist on originality, love to share, keep the original intention, carry on the past and open up the future!

Article directory

  • 1. ?Website title
  • 2. Website description
  • 3. Introduction to the website
  • 4. Website Demo
  • 5. Website code
    • HTML structure code
    • CSS style code
  • 6. How to make learning no longer blind
  • 7. More dry goods

1. ?Website title

pet web design, animal protection webpage, whale dolphin theme, protection of elephants, and other website design and production.

2. Website description

?HTML pet webpage design, using DIV + CSS layout, a total of multiple pages, tidy layout, rich content, clear theme, rich CSS layout on the homepage, bright and vibrant colors, different font sizes for navigation and body text. The background image is set for the navigation area. Subpages include text-only pages and pages with pictures and texts.

A high-quality web design should include (specifically, it can be determined according to individual requirements)

  1. The page is divided into four parts: the header, the menu navigation bar (preferably pull down), the middle content section, and the footer.
  2. All pages are hyperlinked to each other, leading to three-level pages, consisting of 5-10 pages.
  3. The unified layout of the page style is normal, not messy, using Div + Css technology.
  4. The menu is beautiful and eye-catching, and the secondary menu can pop up and jump normally.
  5. There must be JS special effects, such as timing switching and manual switching of picture carousels.
  6. There are multimedia elements in the page, such as gif, video, music, and the use of form technology.
  7. The page is clean, beautiful, generous, and not the same. .
  8. Not only must it be able to present the content requested by users, but it must also meet the requirements of good layout, beautiful interface, elegant color matching, and various forms of expression.

3. Website introduction

Website layout: It is planned to adopt the current mainstream floating webpage layout structure that is compatible with major mainstream browsers and has stable display effects.

Web site program: It is planned to use the latest web programming language HTML5 + CSS3 + JS programming language to complete the functional design of the website. And ensure that the website code is compatible with all mainstream browsers currently on the market, so that the website can be seen immediately after opening.

Website materials: plan to collect good-looking picture materials from various platforms, carefully select pictures suitable for the style of the webpage, and then use PS to make pictures suitable for the size of the webpage.

Website files: The types of website system files include: html web page structure files, css web page style files, js web page special effect files, images web page picture files;

Webpage editing: The code of the webpage works is simple, and any HTML editing software can be used (such as: Dreamweaver, HBuilder, Vscode, Sublime, Webstorm, Text, Notepad + + , etc. Any html editing software for operation, modification and editing).
in:
(1) The html file contains: index.html is the home page, and other html is the second-level page;
(2) The css file contains: all css page styles, text scrolling, image zooming, etc.;
(3) The js file includes: js to achieve dynamic carousel effects, form submission, click events, etc. (js code is used in individual web pages).

4. Website demo







5. Website code

HTML structure code

<!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" />
<title>Untitled document</title>
<link href="style/css.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="header"><img src="images/top.jpg" width="1000"/></div>
<div id="nav"> & amp;nbsp; & amp;nbsp; & amp;nbsp; & amp;nbsp; & amp;nbsp; & amp;nbsp; & amp;nbsp; & amp;nbsp; & amp;nbsp; & amp;nbsp; & amp;nbsp; & amp;nbsp; <a href="index.html">Home</a> <a href="suo.html">Introduction</a> <a href="dian.html">Appearance Features</a> <a href="qing.html">Life Habits</a> <a href="cheng.html">Variety Introduction</a><a href="news.html ">Wonderful Atlas</a><a href="about.html">Leave me a message</a> </div>
<div class="cont">
  <h2 style="border-bottom:1px solid #ddd; font-size:15px;">Introduction to Ragdoll</h2>
  <p>Ragdoll, also known as "Ragdoll (Ragdoll)", originated in the United States and is a hybrid pet cat. It is one of the largest and heaviest cats in existence. The head is wedge-shaped, the eyes are big and round, the coat is thick, the limbs are long and full of sensuality, the tail is long, the body is soft, and the coat color is point color, glove color or two-color, etc. Ragdoll cats are more docile, quiet and friendly to people. Its beauty is elegant and very similar to the dog's character (Puppy cat) and it is called "fairy cat", "little dog cat". Special appearance and gentle personality are one of the biggest characteristics of puppet cats.</p>
  <h2 style="border-bottom:1px solid #ddd; font-size:15px;">Muppet Cat Album</h2>
  <table width="100%" border="0" cellspacing="10" cellpadding="0">
    <tr>
      <td><img src="images/qing01.jpg" width="220" height="200"/></td>
      <td><img src="images/qing02.jpg" width="220" height="200"/></td>
      <td><img src="images/qing03.jpg" width="220" height="200"/></td>
      <td><img src="images/qing04.jpg" width="220" height="200"/></td>
    </tr>
  </table>
</div>
<div id="bottom" style=" text-align: center;">
  <p>cat plush</p>
</div>
</body>
</html>

CSS style code

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

/* reset style */
* {<!-- -->
margin: 0;
padding: 0;
}
ul, li, dl, dt, dd {<!-- -->
list-style: none;
}
a {<!-- -->
text-decoration: none;
color:#fff;
}
a:hover {<!-- -->
text-decoration: none;
}
img {<!-- -->
border: none;
}
/*Public style*/
body {<!-- -->
font-family:'Microsoft Yahei', Helvetica, sans-serif;
font-size: 14px;
color:#333;
background:#F0F2F5;background:url(../images/bg.jpg) right top fixed;
}
#header {<!-- -->
width:1000px;
margin: 0 auto;
}
#nav {<!-- -->
width:1000px;
margin: 0 auto;
background:#000;
height:40px;
line-height: 40px;
}
#nav a {<!-- -->
padding: 0px 30px;
font-size: 14px;
}
.cont {<!-- -->
width:940px;
margin: 0 auto;
background:#fff;
padding: 15px 30px;
line-height: 40px;
}
.cont h2 {<!-- -->
font-size: 30px;
color:#E0503D;
margin-bottom: 30px;
}
.cont p {<!-- -->
font-size: 20px;
}
#bottom {<!-- -->
width:960px;
margin:0 auto;padding:20px;background:#fff;
}
#bottom p {<!-- -->
text-align: center;
line-height: 50px;
}

6. How to make learning no longer blind

16 pieces of advice for programming rookies summed up by 21-year programmers

  1. Don’t read too many books blindly during the entry period, find a textbook recommended by experienced programmers on the Internet or around you, and study systematically first.
  2. Read more help documents, the help documents are like a game’s gameplay explaining the secrets of customs clearance, so don’t be too confident if you read it.
  3. Rookies are easily confused by vocabulary such as objects, attributes, and methods? That’s because you haven’t even mastered the basics.
  4. Don’t ignore any seemingly inconspicuous problems, and often sum up to draw inferences from one instance.
  5. You cannot develop a complete project without accumulating enough knowledge and experience.
  6. It is better to keep the outdated technology in mind than to talk about the latest technology.
  7. Live to the old and learn to be old, you can’t break through the rivers and lakes with only one trick and a half.
  8. Read the books you can understand carefully; read the books you don’t understand.
  9. If you read the book a hundred times, you will see its meaning. Don’t expect to be able to master it after reading it once.
  10. Please put the examples in the tutorial into practice, even if there is complete source code in the case.
  11. Expand on the meaningful examples you saw in the tutorials; and apply them practically to your own work.
  12. Don’t miss any of the exercises in the tutorial – do them all and take notes.
  13. The level is improved and developed through continuous practice, and the only difference between you and the big cow is the accumulation of experience.
  14. Every time you learn a difficult point, try to share your experience with friends or online, so that others can understand it, which means you really master it.
  15. Make a good habit of saving source files, these are your knowledge accumulation.
  16. Don’t open your mouth to ask questions when you encounter problems, but learn to find the answers yourself. For example, there are a lot of programming-related materials on Google, Baidu, and w3cschool. You only need to enter keywords to find your answers.

7. More dry goods

1. If my blog is helpful to you, if you like my blog content, Please "Like" "Comment" "Favorite" One click and three links!

2. 【?Follow me | Get more source code | High-quality articles】 Take you to learn various front-end plug-ins, 3D cool effects, Picture display, text effects, and templates for the whole site, HTML templates for college graduates, final homework templates, etc. “There are a lot of front-end developers here, let’s discuss front-end Node knowledge and learn from each other”!

3.

Questions related to the above content technology? Welcome to exchange and learn together?