HTML哆啦A夢

目錄

寫在前面

HTML簡介

完整代碼

代碼分析

系列推薦

寫在最后

寫在前面

誰不想擁有一只可愛的叮當貓呢？本期小編給大家帶來了一個萌萌的哆啦A夢。

HTML簡介

HTML，即超文本標記語言，是構建網頁的基礎技術之一，它是一種標記語言，通過使用一系列標簽來定義網頁內容的結構和樣式。HTML文檔由不同的元素組成，如段落、標題、圖片、鏈接等，每個元素由特定的標簽包裹，以告知瀏覽器如何顯示這些內容。

例如，<p>標簽用于定義段落，<h1>到<h6>用于定義不同級別的標題，<a>標簽用于創建鏈接，而<img>標簽則用來嵌入圖片。此外，HTML還支持列表、表格、表單等多種復雜結構，使得網頁內容豐富多彩。

HTML代碼通常以.html或.htm為文件擴展名，用任何文本編輯器即可編寫，瀏覽器負責解釋這些標簽并渲染成用戶可見的網頁。隨著HTML5標準的推出，HTML的功能得到極大豐富，不僅加強了多媒體內容的支持，還新增了諸如canvas繪圖、本地存儲、地理定位等現代Web應用功能，極大地推動了互聯網的發展。

完整代碼

<!DOCTYPE?html>
<html lang="en">
<head><meta charset="UTF-8"><title></title><style type="text/css">body{background:#feec7b;}.pokonyan{width:572px; height:397px; margin:0 auto; position: absolute; left:50%; top:50%; margin-left:-286px; margin-top:-198px;}.header{width:340px; height:318px; position:absolute; right:12px; top:0; border-top-left-radius:50%; border-top-right-radius:50%; border-bottom-left-radius:50%; border-bottom-right-radius:48%; background:#00a0e9; border:#000 solid 2px; z-index: 6;}.header .face{width: 305px; height:235px;  position: absolute; right: -8px; bottom: 0px; background:#fff; border:#000 solid 2px; border-top-left-radius:40%; border-top-right-radius:40%; border-bottom-left-radius:50%; border-bottom-right-radius:50%;  -webkit-transform:rotate(-25deg); -moz-transform:rotate(-25deg); transform:rotate(-25deg);}.header .eye{width:75px; right:182px; height:97px; position: absolute; border:#000 solid 2px; border-radius: 50%; background:#fff; top:34px; -webkit-transform:rotate(-20deg); -moz-transform:rotate(-20deg); transform:rotate(-20deg);}.header .eyeBlack{width:18px; height:36px; position:absolute; right:7px; bottom:23px; overflow:hidden; background:#000; border-radius: 50%;}.header .eyeWhite{width:8px; height:12px; position:absolute; right:3px; bottom:13px; overflow:hidden; background:#fff;  border-radius: 50%; }.header .eyer{right:110px; top:2px; -webkit-transform:rotate(-28deg); -moz-transform:rotate(-28deg); transform:rotate(-28deg);}.header .eyer .eyeBlack{left:14px;  bottom:28px;}.header .noseLine{width:20px; height:160px; border-right:#000 solid 2px; border-radius:50%; position:absolute; right:120px; top:100px;  -webkit-transform:rotate(-20deg); -moz-transform:rotate(-20deg); transform:rotate(-20deg);}.header .quilt{width:100px; height:60px; background:#fff; border-radius:50%;  position:absolute; top:220px; right:60px;}.header .nose{width: 44px; height:44px; position: absolute; top:84px; right:132px; background:#e0002a; border-radius:50%; border: 2px solid #000; }.header .nose .white{width:13px; height:13px; position: absolute; top:14px; left:10px; background:#fff; border-radius:50%; }.header .mouthBox{width:290px; height:82px; position:absolute; bottom:84px; right: 0px;  overflow:hidden;  -webkit-transform:rotate(-20deg); -moz-transform:rotate(-20deg); transform:rotate(-20deg);}.header .mouthBox .mouth{width: 290px; height:200px; border-radius:50%; position:absolute; bottom:0; right:0; border:#000 solid 2px; }.header .beard{width:107px; height:3px; background:#000; position:absolute; border-radius:50%; overflow: hidden;}.header .beard1{top:170px; left:60px; -webkit-transform:rotate(-10deg); -moz-transform:rotate(-10deg); transform:rotate(-10deg);}.header .beard2{top:200px; left:62px; -webkit-transform:rotate(-20deg); -moz-transform:rotate(-20deg); transform:rotate(-20deg);}.header .beard3{top:230px; left:68px; -webkit-transform:rotate(-30deg); -moz-transform:rotate(-30deg); transform:rotate(-30deg);}.header .beard4{top:120px; right:-10px; -webkit-transform:rotate(-20deg); -moz-transform:rotate(-20deg); transform:rotate(-30deg);}.header .beard5{top:150px; right:-20px; -webkit-transform:rotate(-30deg); -moz-transform:rotate(-30deg); transform:rotate(-20deg);}.header .beard6{top:180px; right:-30px; -webkit-transform:rotate(-40deg); -moz-transform:rotate(-40deg); transform:rotate(-10deg);}/*脖子*/.neckBox{width:302px; height:318px; position:absolute;  background:#e0002a; border:#000 solid 2px; z-index: 4; right:41px; top:18px;  overflow:hidden; border-top-left-radius:50%; border-top-right-radius:50%; border-bottom-left-radius:50%; border-bottom-right-radius:48%;}.neckBox .necka{width:340px; height:318px; position:absolute;  background:#e0002a; z-index: 4; right:5px; bottom:-3px; border-top-left-radius:50%; border-top-right-radius:50%; border-bottom-left-radius:50%; border-bottom-right-radius:48%;}/*鈴鐺*/.bell{width:56px; height:56px; background:#ffe43b; border:#000 solid 2px; border-radius:50%; position: absolute; bottom:27px; right:110px; z-index: 5; overflow:hidden;}.bell .line{width:56px; height:50px; border-right:#000 solid 2px; position:absolute; top:20px; left:-24px; border-radius: 50%;}.bell .linebg{width:86px; height:56px; background:#ffe43b;  position:absolute; bottom:18px; left:-30px; border-radius: 50%;}.bell .center{width:15px; height:7px; border-radius:50%; background:#7d6b56; border:#000 solid 2px; position: absolute; top:33px; left:22px; -webkit-transform:rotate(-10deg); -moz-transform:rotate(-10deg); transform:rotate(-10deg);}.bell .top{width:86px; height:56px; background:#ffe43b; border:#000 solid 2px; position:absolute; bottom:28px; left:-30px; border-radius: 50%;}.bell .top2{width:86px; height:56px; background:#ffe43b; border:#000 solid 2px; position:absolute; bottom:35px; left:-30px; border-radius: 50%;}/*屁股*/.arse{width:186px; height:186px; position: absolute; top:160px; left:106px; border-radius:50%; background:#00a0e9; border-top:#000 solid 2px;  border-left:#000 solid 2px; border-bottom:#00a0e9 solid 2px; -webkit-transform:rotate(40deg); -moz-transform:rotate(40deg); transform:rotate(40deg);  z-index: 3;}/*肚子*/.tummy{width:240px; height:186px; position: absolute; bottom:33px; left:146px; border-radius:50%; background:#00a0e9; border-bottom:#000 solid 2px;  border-right:#000 solid 2px; border-left:#00a0e9 solid 2px; z-index: 3;}@-webkit-keyframes tail {0%{margin-left:0;}25%{margin-left:-10px;}50%{margin-left:-20px;}75%{margin-left:10px;}100%{margin-left:20px;}}.tail{width:58px; height:58px; position: absolute; bottom:216px; left:92px; z-index: 2; }.tail .circle{width:50px; height:50px; background:#e0002a; border:#000 solid 2px;  border-radius:50%;}.tail .lineBox{width:18px; height:18px; position: absolute; bottom:0; right:4px; overflow:hidden;}.tail .lineBox .line{width:50px; height:50px; border:#000 solid 2px; position:absolute; bottom:-30px; left:-36px; border-radius:50%;}/*腿*/.leg{width:120px; height:120px; position: absolute; bottom:37px; left:82px; border-radius:50%; background:#00a0e9;  border:#000 solid 2px; z-index: 2;}.legbottomBox{width:169px; height:120px; background:#333333; overflow:hidden; position: absolute; bottom:30px; left:90px; border-radius:40%; z-index: 3;}.legbottomBox .legbottom{width:240px; height:120px; position:relative; bottom:4px; left:-40px; border-radius:50%; background:#00a0e9;  border:#000 solid 2px;   border-bottom:#000 solid 2px;  -webkit-transform:rotate(0deg); -moz-transform:rotate(0deg); transform:rotate(0deg);}/*腳*/.foot{width:120px; height:100px; position: absolute; bottom:38px; left:22px; border-radius:50%; background:#fff; border:#000 solid 2px;  -webkit-transform:rotate(-10deg); -moz-transform:rotate(-10deg); transform:rotate(-20deg);   z-index: 1;}.foottop{width:97px; height:100px; position: absolute; bottom:20px; left:-16px; border-bottom-left-radius:50%;  border-top-left-radius:50%; background:#fff; border:#000 solid 2px; border-right:none;  -webkit-transform:rotate(-10deg); -moz-transform:rotate(-10deg); transform:rotate(-20deg);   z-index: 1;}.handr{width:130px; height:90px; position: absolute; bottom:46px; right:0px; border-radius:50%; background:#00a0e9; border:#000 solid 2px; z-index: 3;}.handr .palm{width: 78px; height:60px; position: absolute; top:-30px; right:-10px; border-radius:50%; background:#fff; border:#000 solid 2px; z-index: 3; -webkit-transform:rotate(-45deg); -moz-transform:rotate(-45deg); transform:rotate(-45deg);}.handr .line{width: 80px; height:80px; position: absolute; border-left:#000 solid 2px; border-bottom:transparent solid 2px; top:8px; right:-6px; border-radius: 50%; -webkit-transform:rotate(50deg); -moz-transform:rotate(50deg); transform:rotate(50deg);}.handtop{width:74px; height:40px; background:#00a0e9; border-top:#000 solid 2px; border-left:#00a0e9 solid 2px; position: absolute; bottom:58px; right:240px;  -webkit-transform:rotate(30deg); -moz-transform:rotate(30deg); transform:rotate(20deg); z-index:5;}.handlBox{width:180px; height:70px; position: absolute; bottom:6px; right:152px; overflow: hidden; z-index:5;}.handlBox .handl{width:260px; height:110px; border:#000 solid 2px;  background:#00a0e9; border-left:transparent solid 2px; position:absolute; bottom:26px; right:-3px; border-radius: 50%; -webkit-transform:rotate(30deg); -moz-transform:rotate(30deg); transform:rotate(30deg);}.handlBox .handl .line{width:40px; height:80px; position: absolute; background:none; border-left:#000 solid 2px; top:0px; right:48px;}.palml{width:86px; height:70px; position: absolute; bottom:32px; right:168px; border-radius:50%; background:#fff; border:#000 solid 2px; z-index: 3; -webkit-transform:rotate(20deg); -moz-transform:rotate(20deg); transform:rotate(20deg); z-index: 7;}
</style>
</head>
<body>
<div class="pokonyan"><div class="header"><div class="face"></div><div class="eye eyel"><div class="eyeBlack"><div class="eyeWhite"></div></div></div><div class="eye eyer"><div class="eyeBlack"><div class="eyeWhite"></div></div></div><div class="noseLine"></div><div class="quilt"></div><div class="nose"><div class="white"></div></div><div class="mouthBox"><div class="mouth"></div></div><div class="beard beard1"></div><div class="beard beard2"></div><div class="beard beard3"></div><div class="beard beard4"></div><div class="beard beard5"></div><div class="beard beard6"></div></div><div class="neckBox"><div class="neck"></div></div><div class="bell"><div class="line"></div><div class="linebg"></div><div class="center"></div><div class="top"></div><div class="top2"></div></div><div class="arse"><div class="neck"></div></div><div class="tummy"></div><div class="tail"><div class="circle"></div><div class="lineBox" ><div class="line"></div></div></div><div class="leg"></div><div class="legbottomBox"><div class="legbottom"></div></div><div class="foot"></div><div class="handr"><div class="line"></div><div class="palm"></div></div><div class="handtop"></div><div class="handlBox"><div class="handl"><div class="line"></div></div></div><div class="palml"></div>
</div>
</body>
</html>

代碼分析

這段代碼使用HTML和CSS繪制了一個哆啦A夢的圖像。

HTML部分建立了一個名為"pokonyan"的div元素，這個div內包含了哆啦A夢的各個部分，比如頭部（header）、脖子（neckBox）、鈴鐺（bell）、屁股（arse）、肚子（tummy）、尾巴（tail）、腿（leg）和手（handr、handlBox）等部分。每個部分都是一個div元素，這些元素的樣式在CSS中定義。

CSS部分定義了每個div元素的樣式，包括寬度、高度、位置、背景顏色、邊框等，以此來形成哆啦A夢的形象。例如，".header"類定義了哆啦A夢的頭部的樣式，包括寬度、高度、位置、背景顏色等，".face"類定義了臉的樣式，".eye"類定義了眼睛的樣式，".nose"類定義了鼻子的樣式。

此外，還有一些類用于創建哆啦A夢的細節部分，如眼球（eyeBlack、eyeWhite）、胡須（beard1-beard6）、鈴鐺的細節（line、linebg、center、top、top2）等。最后，通過改變每個元素的位置和大小，以及旋轉角度（使用transform:rotate），將這些元素組合在一起，形成了一個哆啦A夢的圖像。

系列推薦

序號目錄直達鏈接
1HTML實現3D相冊https://want595.blog.csdn.net/article/details/138652869
2HTML元素周期表https://want595.blog.csdn.net/article/details/138653653
3HTML黑客帝國字母雨https://want595.blog.csdn.net/article/details/138654054
4HTML五彩繽紛的愛心https://want595.blog.csdn.net/article/details/138654581
5HTML飄落的花瓣https://want595.blog.csdn.net/article/details/138785324
6HTML哆啦A夢https://want595.blog.csdn.net/article/details/138834877
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

寫在最后

我是一只有趣的兔子，感謝你的喜歡！

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/diannao/12595.shtml
繁體地址，請注明出處：http://hk.pswp.cn/diannao/12595.shtml
英文地址，請注明出處：http://en.pswp.cn/diannao/12595.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！

相關文章

JavaEE初階-多線程進階2

JavaEE初階-多線程進階2

文章目錄 前言一、CAS1.1 CAS的概念1.2 原子類1.3 CAS的ABA問題 二、JUC中常用類2.1 Callable接口2.2 ReentrantLock&#xff08;可重入&#xff09;2.3 Semaphore信號量2.4 CountDownLatch類2.5 CopyOnWriteArrayList類2.6 ConcurrentHashMap 前言 對于多線程進階的部分&…
閱讀更多...
Scala學習之 控制結構和函數

Scala學習之 控制結構和函數

目錄 第二章 控制結構和函數1- 條件表達式2- 語句終止3- 塊表達式和賦值4- 輸入和輸出5- 循環6- 高級for循環和for推到式7- 函數8- 默認參數和帶名參數9- 可變參數10- 過程11- 懶值12- 異常end 第二章 控制結構和函數 1- 條件表達式 Scala的 if/esle 語法結構與java一樣, 但是…
閱讀更多...
C語言例題43、打印倒立金字塔

C語言例題43、打印倒立金字塔

#include <stdio.h>void main() {int i, j;for (i 5; i > 0; i--) {for (j 5; j > i; j--) {//輸出空格printf(" ");}for (j 2 * i; j > 1; j--) {//輸出星號printf("* ");}printf("\n");} }運行結果&#xff1a; 本章C語言…
閱讀更多...
用好 explain 媽媽再也不用擔心我的 SQL 慢了

用好 explain 媽媽再也不用擔心我的 SQL 慢了

大家好&#xff0c;我是聰&#xff0c;一個樂于分享的小小程序員。在不久之前我寫了一個慢 SQL 分析工具&#xff0c;可以用來分析 Java Mybatis 項目的 SQL 執行情況&#xff0c;其中剛好涉及到了 explain 的使用。感興趣的可以了解一下。 Github 地址?&#xff1a;https://…
閱讀更多...
【C#】學習獲取程序執行路徑，Gemini 幫助分析

【C#】學習獲取程序執行路徑，Gemini 幫助分析

一、前言&#xff1a; 在Delphi中&#xff0c;如果想要獲取當前執行程序的目錄&#xff0c;程序代碼如下&#xff1a; ExtractFilePath(ParamStr(0)); 今天在分析一個別人做的C#程序時看到了一段C#代碼&#xff0c;意思是獲取執行程序所在的文件目錄&#xff1a; public stat…
閱讀更多...
基于區塊鏈的Web 3.0關鍵技術研討會順利召開

基于區塊鏈的Web 3.0關鍵技術研討會順利召開

基于區塊鏈的Web3.0關鍵技術研討會 2024年4月23日&#xff0c;由國家區塊鏈技術創新中心主辦的“基于區塊鏈的web3.0關鍵技術研討會”召開。Web3.0被用來描述一個運行在“區塊鏈”技術之上的“去中心化”的互聯網&#xff0c;該網絡上的主體掌握自己數據所有權和使用權&#xf…
閱讀更多...
【回眸】git VS repo 區別

【回眸】git VS repo 區別

git VS repo 區別 1. git&#xff1a;Git是一個開源的分布式版本控制系統&#xff0c;用以有效、高速的處理從很小到非常大的項目版本管理。 2. Repo: Repo是谷歌用Python腳本寫的調用git的一個腳本,Repo實現管理多個git庫。 Git 常用命令 1. git init&#xff1a;在當前目…
閱讀更多...
【原創】java+springboot+mysql企業郵件管理系統設計與實現

【原創】java+springboot+mysql企業郵件管理系統設計與實現

個人主頁&#xff1a;程序猿小小楊 個人簡介&#xff1a;從事開發多年&#xff0c;Java、Php、Python、前端開發均有涉獵 博客內容&#xff1a;Java項目實戰、項目演示、技術分享 文末有作者名片&#xff0c;希望和大家一起共同進步&#xff0c;你只管努力&#xff0c;剩下的交…
閱讀更多...
Vue的學習 —— ＜vue組件＞

Vue的學習 —— ＜vue組件＞

目錄 前言 正文 一、選項式API與組合式API 二、生命周期函數 1、onBeforeMount() 2、onMounted() 3、onBeforeUpdate() 4、onUpdated() 5、onBeforeUnmount() 6、onUnmounted() 三、組件之間的樣式沖突 四、父組件向子組件傳遞數據 1、定義props 2、靜態綁定props…
閱讀更多...
C++青少年簡明教程：賦值語句

C++青少年簡明教程：賦值語句

C青少年簡明教程&#xff1a;賦值語句 賦值語句是編程中最基本也是最常用的概念之一&#xff0c;它用于將一個值分配給一個變量。 使用等號&#xff08; 稱為賦值運算符&#xff09;來給變量賦值&#xff0c;賦值語句的左邊是要賦值的變量&#xff0c;右邊是要賦給變量的值。C…
閱讀更多...
Docker 使用 CentOS 鏡像

Docker 使用 CentOS 鏡像

使用 docker run 直接運行 CentOS 7 鏡像&#xff0c;并登錄 bash。 C:\Users\yhu>docker run -it centos:centos7 bash Unable to find image centos:centos7 locally centos7: Pulling from library/centos 2d473b07cdd5: Pull complete Digest: sha256:be65f488b7764ad36…
閱讀更多...
GPT-4o：全面深入了解 OpenAI 的 GPT-4o

GPT-4o：全面深入了解 OpenAI 的 GPT-4o

GPT-4o&#xff1a;全面深入了解 OpenAI 的 GPT-4o 關于 GPT-4o 的所有信息ChatGPT 增強的用戶體驗改進的多語言和音頻功能GPT-4o 優于 Whisper-v3M3Exam 基準測試中的表現 GPT-4o 的起源追蹤語言模型的演變GPT 譜系&#xff1a;人工智能語言的開拓者多模式飛躍&#xff1a;超越…
閱讀更多...
連接虛擬機的 redis

連接虛擬機的 redis

用Windows 的 Redis Insight 連接虛擬機的 安裝redis發現連不上 我的redis是新安裝&#xff0c;沒有用戶名密碼&#xff0c;發現是ip問題 127 開頭的被我注釋了&#xff0c;換成了ifconfig查到的ip
閱讀更多...
vim命令大全（基礎版）

vim命令大全（基礎版）

創建一個py文件 vim cs.py一、命令模式 按Esc后&#xff0c;按shift&#xff1a;進入命令模式 :wq # 保存并退出 :q # 退出 :q! # 強制退出 :%d # 刪除全部內容按兩下d&#xff0c;刪除光標所在行 按兩下y&#xff0c;復制光標所在行 按一下p&#xff0c;粘貼復制內容到下…
閱讀更多...
Android性能：SurfaceFlinger與BufferQueue（3）

Android性能：SurfaceFlinger與BufferQueue（3）

Android性能&#xff1a;SurfaceFlinger與BufferQueue&#xff08;3&#xff09; Android顯示系統的組成可以概括為兩大部分&#xff1a;繪制(DrawFrame)合成&#xff08;SurfaceFlinger HWC&#xff09; 繪制&#xff1a;Surface中空的 GraphicBuffer->CPU或者GPU通過Canv…
閱讀更多...
Python GUI開發- Qt Designer環境搭建

Python GUI開發- Qt Designer環境搭建

前言 Qt Designer是PyQt5 程序UI界面的實現工具&#xff0c;使用 Qt Designer 可以拖拽、點擊完成GUI界面設計&#xff0c;并且設計完成的 .ui 程序可以轉換成 .py 文件供 python 程序調用 環境準備 使用pip安裝 pip install pyqt5-toolsQt Designer 環境搭建 在pip安裝包…
閱讀更多...
Vue 常見通信

Vue 常見通信

Vue 常見通信 1、父子通信 父傳子 props&#xff0c;子傳父 events&#xff08;$emit&#xff09;&#xff1b; 通過父鏈 / 子鏈 通信$parent / $children&#xff1b; $refs獲取ref 可以訪問組件實例方法&#xff0c;&#xff1b; 提供與注射provide / inject a t t r s …
閱讀更多...
使用Processing和PixelFlow庫創建交互式流體太極動畫

使用Processing和PixelFlow庫創建交互式流體太極動畫

使用Processing和PixelFlow庫創建交互式流體太極動畫 引言準備工作效果展示代碼結構代碼解析第一部分&#xff1a;導入庫和設置基本參數第二部分&#xff1a;流體類定義MyFluidDataConfig 類詳解MyFluidData 類詳解my_update 方法詳解流體類定義完整代碼 第三部分&#xff1a;太…
閱讀更多...
找數字-算法

找數字-算法

解法一、數位模擬 比n大的最小數就是n1&#xff0c;當n1時&#xff0c;以下幾種情況會導致n中1的個數發生變化&#xff08;或者不變&#xff09; 1.n的低位連續1的個數count>1&#xff0c;如1011&#xff0c;10111,1111等&#xff0c;加1后使得n中1的個數減少count-1個 解…
閱讀更多...
基于SVPWM的飛輪控制系統的simulink建模與仿真

基于SVPWM的飛輪控制系統的simulink建模與仿真

目錄 1.課題概述 2.系統仿真結果 3.核心程序與模型 4.系統原理簡介 5.完整工程文件 1.課題概述 基于SVPWM的飛輪控制系統的simulink建模與仿真。SVPWM的核心思想是將逆變器輸出的三相電壓矢量在兩相靜止坐標系&#xff08;αβ坐標系&#xff09;中表示&#xff0c;通過控…
閱讀更多...
最新文章

Copyright @ 2022~2023