navbar ด้วย ai

#พื้นฐานการเขียนเว็ปไซต์

#google #appscript

<!DOCTYPE html>

<html lang="th">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Navbar</title>

<style>

body {

margin: 0;

font-family: sans-serif;

}

.navbar {

width: 100%;

height: 50px;

background: linear-gradient(to right, #2ecc71 , #27ae60 ); /* สีเขียว */

display: flex;

justify-content: space-between;

align-items: center;

padding: 0 20px;

box-sizing: border-box;

color: white;

}

.navbar-left,

.navbar-center,

.navbar-right {

display: flex;

align-items: center;

}

.navbar-left a,

.navbar-center h1,

.navbar-right .logo {

text-decoration: none;

color: white;

font-size: 16px;

margin: 0 10px;

}

.navbar-center h1 {

font-size: 24px;

margin: 0;

}

.navbar-right .logo {

font-weight: bold;

font-size: 20px;

}

</style>

</head>

<body>

<nav class="navbar">

<div class="navbar-left">

<a href="#">📞 081-234-5678</a>

<a href="#">📱 LINE</a>

<a href="#">🎵 TikTok</a>

</div>

<div class="navbar-center">

<h1>ชื่อร้านค้า</h1>

</div>

<div class="navbar-right">

<div class="logo">LOGO</div>

</div>

</nav>

</body>

</html>

พร็อม

code navbar ด้วย css html มีความกว้าง 100% สูง 50px พื้นหลังเป็น สีเขียวแบบ llinear-gradient โดยแบ่งพื้นที่เป็น3ส่วน ฝั่งขวามสุดเป็นโลโก้ ตรงกลาง เป็นชื่อร้านค้า ซ้ายสุดเป็น เบอรโทรศัพท์ line tiktok