HTMLとCSSを使用して素晴らしいタグを作る方法
<h1>HELLO!</h1>
我々の世界Link here
My Portfolio
<input> タグでは、デフォルトでは、白い背景と境界線があります.ルックスまともな、NA?しかし、時々、私のために、それは十分に退屈に見えます.しかし、その例のために、私はこの『古い』を編集すると思いました事.ここで私はあなたとコードを共有します.記事を楽しむ🙃.共有する詩があります.
Design comes from your mind
It is a thing that someone could find
With it creativity is just 'yeah'
Someone said,
Without art, Earth is just 'eh'
さあ、その記事を始めましょう.
最初にHTMLファイルを作成します.
<!DOCTYPE html>
<html lang="en">
<head>
<title>How to make an awesome <input> tag using HTML and CSS
</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
margin: 0;
}
</style>
</head>
<body>
</body>
</html>
<input> タグアンダー<body> タグ.<input>
placeholder="" 属性<input> タグをテキストに追加する<input><input placeholder="Hello! 😎">
<input> タグは準備完了です.しかし、それはしなやかに見えません.それで、我々はこれを編集しなければなりません...まずパディングを追加します.
<input style="padding: 10px;" placeholder="Hello! 😎">
<input style="padding: 10px;background-color: rgba(225, 225, 255);" placeholder="Hello! 😎">
good-looking ボーダー.<input style="padding: 10px;background-color: rgba(225, 225, 255);border: 2px solid rgba(155, 155, 255);" placeholder="Hello! 😎">
<input style="padding: 10px;background-color: rgba(225, 225, 255);border: 2px solid rgba(155, 155, 255);border-radius: 100px;" placeholder="Hello! 😎">
それは私の好きなフォントとしてGoogleからPoppinフォントを使用します.
そこで、Googleフォントを追加するには、このタグをheadタグに追加する必要があります.
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Poppins">
<!DOCTYPE html>
<html lang="en">
<head>
<title>How to make an awesome <input> tag using HTML and CSS
</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Poppins">
<style>
body {
margin: 0;
}
</style>
</head>
<body>
<input style="padding: 10px;background-color: rgba(225, 225, 255);border: 2px solid rgba(155, 155, 255);border-radius: 100px;" placeholder="Hello! 😎">
</body>
</html>
<input><input style="padding: 10px;background-color: rgba(225, 225, 255);border: 2px solid rgba(155, 155, 255);border-radius: 100px;font-family: Poppins" placeholder="Hello! 😎">
フルコード.
<!DOCTYPE html>
<html lang="en">
<head>
<title>How to make an awesome <input> tag using HTML and CSS
</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Poppins">
<style>
body {
margin: 0;
}
</style>
</head>
<body>
<input style="padding: 10px;background-color: rgba(225, 225, 255);border: 2px solid rgba(155, 155, 255);border-radius: 100px;font-family: Poppins" placeholder="Hello! 😎">
</body>
</html>
私はWhatsAppのWebクローンを開発する必要がありますが、それを確認しないと思います.あなたがそれが良い考えであると思うならば、コメントを通して私に通知してください、あるいは、ポストのように...
次のポストで会いましょう😉.
私の新しいウェブサイトのデザインにスニークピーク.
閉じるこの動画はお気に入りから削除されています.😊
Reference
この問題について(HTMLとCSSを使用して素晴らしいタグを作る方法), 我々は、より多くの情報をここで見つけました https://dev.to/subhransuindia/how-to-make-an-awesome-tag-using-html-and-css-1437テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol