這個使同步和異步的區別
今天主要就是學了一些前端,搞了一些前端的頁面,之后準備學一下后端。
我寫的這個項目使百度貼吧,還沒有寫er圖。
? 先看一下主界面是什么樣子的。
這個是主界面,將來后面的主要功能點基本上全部是放在這個上面,如熱推信息,還一些很火的貼吧信息全部寫在這個上面。
上面這個注冊是一個超鏈接,當我點擊這個超鏈接的時候就會轉跳到注冊界面。
超鏈接在html中的標簽是
?<a href="注冊.html" target="_blank">注冊</a>
先解釋一下這個_blank就是重新創建一個頁面然后轉跳到這個頁面。然后這個"注冊.html"就是新創建的注冊的界面
跳轉到注冊界面是這樣的
這個注冊還沒有搞正則表達式,也沒有搞前后端交互。感覺前后端交互現在還不是很清楚,希望之后可以早點吧這個前后端的交互搞明白。
這個搞了我比較久就是這個“用科技讓復雜的世界變簡單”,剛開始我以為這兩端文字兩個div和在一起的,后面當時在原來的界面使用這個畫面放縮的時候發現這兩行是一個div。一致想不明白怎么實現讓一大一小的文字一起進行放縮,后面才知道那個大一點其實就是h3一個標題的標簽,那個較小的文字是p換行的文字,然后對這兩段文字進行css修飾(將這兩端文字染色呈白色,然后將這個文字,將這兩段文字的間距進行加寬)。
代碼如下
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>注冊界面</title><style>body {margin: 0;display: flex;height: 100vh;background-image: url('./reg_bg_min.jpg');background-size: cover;background-position: center;background-repeat: no-repeat;background-attachment: fixed; /* 讓背景固定,不隨頁面滾動 */}.container {position: relative;width: 100%;margin: 0 auto;}.mod-new-reg-logo {position: relative;}.mod-new-reg-logo h3{position: absolute;top: 170px;left: 12%;color: white;z-index: 101;margin: 0; /* 去除默認的 margin */font-size: 35px; /* 增加字體大小 */}.mod-new-reg-logo p {position: absolute;top: 215px;left: 12%;color: white;z-index: 101;margin: 0; /* 去除默認的 margin */font-size: 19px; /* 增加字體大小 */line-height: 2; /* 設置行間距為字體大小的1.5倍,可以根據需要調整 */}/* 下面就是登錄注冊的表格形式,說句實話我沒想到,背景直接就是表格 */table {position: absolute;top: 15%; /* 使表格頂部位于父元素的50%位置 */left: 70%; /* 使表格左側位于父元素的50%位置 */background-color: rgba(255, 255, 255, 0.8); /* 使用 RGBA 值設置背景色,最后一個參數為透明度 */border-collapse: collapse;width: 270px;box-shadow: 0 0 10px rgba(0,0,0,0.1);border-radius: 30px; /* 設置邊框的圓角半徑為10px */}th, td {padding: 10px;text-align: left;}th {background-color: #f2f2f2;}input[type="text"], input[type="password"], input[type="email"] {width: calc(100% - 20px); /* 讓輸入框寬度占據表格的剩余空間 */padding: 8px;margin: 5px;border: 1px solid #ccc;border-radius: 3px;box-sizing: border-box;}input[type="submit"] {background-color: #4CAF50;color: white;border: none;padding: 10px 20px;text-align: center;text-decoration: none;display: inline-block;font-size: 16px;border-radius: 5px;cursor: pointer;}input[type="submit"]:hover {background-color: #45a049;}#lableRegister{background-color: rgba(255, 255, 255, 0.7); /* 使用 RGBA 值設置背景色,最后一個參數為透明度 */}</style>
</head>
<body><div class="container"><div class="mod-new-reg-logo"><h3>用科技</h3><p>讓復雜的世界更簡單</p></div><table><tr><th colspan="2" ><h2 id = "lableRegister">用戶注冊</h2></th></tr><tr><td><label for="username">用戶名:</label></td><td><input type="text" id="username" name="username" required></td></tr><tr><td><label for="email">郵箱:</label></td><td><input type="email" id="email" name="email" required></td></tr><tr><td><label for="password">密碼:</label></td><td><input type="password" id="password" name="password" required></td></tr><tr><td><label for="confirm-password">確認密碼:</label></td><td><input type="password" id="confirm-password" name="confirm-password" required></td></tr><tr><td colspan="2" style="text-align:center;"><input type="submit" value="注冊"></td></tr></table></div>
</body>
</html>