HTML和CSS是現(xiàn)代網(wǎng)頁設(shè)計和開發(fā)中不可或缺的兩個核心技術(shù)，它們能夠?qū)崿F(xiàn)許多有趣和令人贊嘆的網(wǎng)頁效果。下面是一個簡單的HTML和CSS代碼示例，可以幫助您更好地理解它們的功能。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>京東首頁</title>
<style>
/* 設(shè)置頁面整體樣式 */
body {
font-family: Arial, sans-serif;
background-color: #f5f5f5;
}
/* 設(shè)置導(dǎo)航欄樣式 */
nav {
background-color: #e3e3e3;
height: 40px;
padding-top: 10px;
padding-bottom: 10px;
margin-bottom: 20px;
}
/* 設(shè)置logo樣式 */
.logo {
font-size: 25px;
font-weight: bold;
color: #f86d28;
margin-left: 10px;
float: left;
}
/* 設(shè)置搜索框樣式 */
.search {
margin-right: 30px;
float: right;
}
.search input[type="text"] {
font-size: 16px;
padding: 5px;
border: none;
outline: none;
box-sizing: border-box;
border-radius: 20px;
}
.search input[type="submit"] {
background-color: #f86d28;
color: #fff;
font-size: 16px;
padding: 5px 15px;
border: none;
outline: none;
box-sizing: border-box;
border-radius: 20px;
cursor: pointer;
margin-left: 10px;
}
</style>
</head>
<body>
<nav>
<div class="logo">京東商城</div>
<div class="search">
<form action="#" method="get">
<input type="text" placeholder="搜索商品">
<input type="submit" value="搜索">
</form>
</div>
</nav>
<!-- 這里還有更多內(nèi)容，比如商品列表、廣告等 -->
</body>
</html>上面的代碼展示了京東商城首頁的一小部分，其中包括導(dǎo)航欄、Logo和搜索框等元素。可以看到，HTML用來描述網(wǎng)頁的結(jié)構(gòu)和內(nèi)容，而CSS則是用來控制網(wǎng)頁的樣式和布局。
在CSS部分，我們首先設(shè)置了整個頁面的字體和背景顏色，然后針對導(dǎo)航欄和搜索框分別設(shè)置樣式，包括背景顏色、內(nèi)邊距、外邊距、浮動等等。其中，.logo和.search是代表類名，可以通過HTML中元素的class屬性來應(yīng)用這些樣式規(guī)則。
通過HTML和CSS的結(jié)合，我們可以方便地為網(wǎng)頁添加各種效果和交互，非常實用且值得進(jìn)一步學(xué)習(xí)。