HTML5+CSS3-ドラえもん
* {
マージン: 0;
パディング: 0;
}
.whole {
width: 800ピクセル;
margin: 20px auto;
/*border: 2px 黄色一色;*/
背景色: 白;
位置: 相対;
}
.head {
margin: 0 auto ;
位置: 相対;
幅: 500px;
高さ: 440px;
背景色: #00b7e7;
境界線: 220px;
境界線: 1px 単色赤;
}
.eye .left_eye,
.eye .right_eye {幅: 100px;
高さ: 130px;
背景色: 白;
境界線: 2px 純黒;
境界半径: 50px;
位置: 絶対;
トップ: 50px;
z-index: 3;
}
.eye .LeyeBall,
.eye .ReyeBall {
width: 20px;
高さ: 20ピクセル;
背景: 黒;
境界半径: 10px;
位置: 絶対;
上部: 65px;
}
.eye .left_eye {
左: 146px;
}
.eye .right_eye {
左: 250px;
}
.eye .LeyeBall {
右: 10px;
}
.R eyeBall {
左: 10px;
}
.face {
位置: 相対;
z-index: 2;
}
.face .feature {
幅: 400px;
高さ: 320px;
ボーダー-半径: 160px;
位置: 絶対;
上: 100px;
左: 50px;
背景: 白;
}
.face .nose {
width: 45px;
身長: 50px;
ボーダー半径: 23px;
背景色: #cf3318;
ボーダー: 2 ピクセル黒一色;
位置: 絶対;
上: 165 ピクセル;
左: 225 ピクセル;
z-index : 3;
}
.face .Nline {
幅: 3px;
高さ: 160px;
背景: 黒;
位置: 絶対;
トップ: 218px;
左: 248px ;
z-index: 3;
}
.face .mouth {
width: 280px;
height: 280px;
border-bottom: 5px ソリッドブラック;
border-radius: 140ピクセル;
位置: 絶対;
上: 98px;
左: 105px;
}
.face .mustache .MutR_higher {
幅: 80px;
高さ: 2px;
背景: 黒;
位置: 絶対;
上: 220px;
左: 295px;
z-index: 2;
}
.face .mustache .MutR_middle {
width : 80px;
高さ: 2px;
背景: 黒;
位置: 絶対;
上: 240px;
左: 295px;
z-index: 2;
}
.face .mustache 。 MutR_ lower {
幅: 80px;
高さ: 2px;
背景: 黒;
位置: 絶対;
上: 260px;
左: 295px;
z-index: 2;
}
.face .mustache .mutl_top {width:80px;
height:2Px; ;
}
.face .mustache .MutL_center {
幅: 80px;
高さ: 2px;
背景: 黒;
位置: 絶対;
トップ: 240px;
左: 115px ;
z-index: 2;
}
.face .mustache .MutL_bottom {
幅: 80px;
高さ: 2px;
背景: 黒;
位置: 絶対;
トップ: 260px;
左: 115px;
z-index: 2;
}
.face .mustache .MutL_bottom,
.face .mustache .MutR_higher {
変換: 回転(160 度);
}
.face .mustache .MutL_top,
.face .mustache .MutR_ lower {
変換: 回転(200度);
}
.neck {
幅: 300px;
高さ: 30px;
背景色: #a31f12;
ボーダー: 2px ソリッドブラック;
ボーダー半径: 15px;
位置: 相対的;
上: 0px;
左: 250px;
z-インデックス: 4;
}
.neck .bell {
width: 60px;
height: 60px;
overflow: hidden;
border: 2px ソリッドブラック;
border-radius: ;
background-color: #cfcb3c;
position: absolute;
top: 5px;
left: 120px;
}
.bell .Bline {
width: 60px;
height: 2px;
background-color: #cfcb3c;
border: 2px solid black;
border-radius: 3px 3px 0 0;
position: absolute;
top: 15px;
}
.bell .Bcircle {
width: 20px;
height: 16px;
background: black;
border-radius: 8px;
position: absolute;
top: 25px;
left: 20px;
}
.bell .Bunderpart {
width: 3px;
height: 20px;
background-color: black;
position: absolute;
left: 28px;
top: 40px;
}
.body {
position: relative;
top: -300px;
z-index: 1;
}
.body .tummy {
width: 280px;
height: 240px;
background-color: #00b1e1;
border: 2px solid black;
position: absolute;
top: 267px;
left: 260px;
}
.body .bellyband {
width: 220px;
height: 220px;
background-color: white;
border: 2px solid black;
border-radius: 110px;
position: absolute;
left: 290px;
top: 267px;
}
.body .pocket {
width: 160px;
height: 160px;
border-radius: 80px;
background-color: white;
border: 2px solid black;
position: absolute;
top: 305px;
left: 320px;
}
.cover {
width: 164px;
height: 80px;
background-color: white;
border-bottom: 2px solid black;
/*border: 5px solid orange;*/
position: absolute;
top: 300px;
left: 320px;
}
.left_hand,
.right_hand {
height: 100px;
width: 100px;
position: absolute;
top: 272px;
left: 248px;
}
.left_hand {
left: -10px;
}
.left_hand .Larm {
width: 70px;
height: 100px;
background-color: #00bee8;
border: 1px solid black;
position: relative;
top: 200px;
left: 535px;
transform: rotateZ(135deg);
/*z-index: -1;*/
}
.right_hand {
left: -10px;
}
.right_hand .Rarm {
width: 70px;
height: 100px;
background-color: #00bee8;
border: 1px solid black;
/*z-index: -1;*/
position: relative;
top: 200px;
left: 215px;
transform: rotateZ(45deg);
}
.left_hand .Lpalm,
.right_hand .Rpalm {
width: 80px;
height: 80px;
border-radius: 40px;
border: 2px solid black;
background-color: white;
position: absolute;
}
.right_hand .Rpalm {
left: 580px;
top: 260px;
z-index: 1;
}
.left_hand .Lpalm {
left: 160px;
top: 260px;
z-index: 1;
}
.foot .left_foot,
.foot .right_foot {
width: 150px;
height: 40px;
background-color: white;
border: 2px solid black;
border-radius: 80px 60px 60px 40px;
position: relative;
}
.foot .left_foot {
left: 240px;
top: 210px;
}
.foot .right_foot {
top: 165px;
left: 410px;
}
.foot .crotch {
width: 40px;
height: 20px;
background-color: white;
border: 2px solid black;
border-bottom: none;
border-radius: 40px 40px 0 0;
position: relative;
top: 103px;
left: 382px;
z-index: 2
}
div>
< !-- 口袋 -->
div>
html>

ホットAIツール

Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。

Undress AI Tool
脱衣画像を無料で

Clothoff.io
AI衣類リムーバー

AI Hentai Generator
AIヘンタイを無料で生成します。

人気の記事

ホットツール

メモ帳++7.3.1
使いやすく無料のコードエディター

SublimeText3 中国語版
中国語版、とても使いやすい

ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境

ドリームウィーバー CS6
ビジュアル Web 開発ツール

SublimeText3 Mac版
神レベルのコード編集ソフト(SublimeText3)

ホットトピック









この記事では、HTML&lt; Progress&gt;について説明します。要素、その目的、スタイリング、および&lt; meter&gt;との違い要素。主な焦点は、&lt; Progress&gt;を使用することです。タスクの完了と&lt; Meter&gt; statiの場合

この記事では、HTML&lt; Datalist&GT;について説明します。オートコンプリートの提案を提供し、ユーザーエクスペリエンスの改善、エラーの削減によりフォームを強化する要素。

この記事では、html&lt; meter&gt;について説明します。要素は、範囲内でスカラーまたは分数値を表示するために使用され、Web開発におけるその一般的なアプリケーション。それは差別化&lt; Meter&gt; &lt; Progress&gt;およびex

記事では、HTML5クロスブラウザーの互換性を確保するためのベストプラクティスについて説明し、機能検出、プログレッシブエンハンスメント、およびテスト方法に焦点を当てています。

この記事では、html5&lt; time&gt;について説明します。セマンティックデート/時刻表現の要素。 人間の読み取り可能なテキストとともに、マシンの読みやすさ(ISO 8601形式)のDateTime属性の重要性を強調し、Accessibilitを増やします

この記事では、ブラウザのユーザー入力を直接検証するために、必要、パターン、MIN、MAX、および長さの制限などのHTML5フォーム検証属性を使用して説明します。

この記事では、モバイルデバイスのレスポンシブWebデザインに不可欠なViewportメタタグについて説明します。適切な使用により、最適なコンテンツのスケーリングとユーザーの相互作用が保証され、誤用が設計とアクセシビリティの問題につながる可能性があることを説明しています。

この記事では、&lt; iframe&gt;外部コンテンツをWebページ、その一般的な用途、セキュリティリスク、およびオブジェクトタグやAPIなどの代替案に埋め込む際のタグの目的。
