web的學習和開發

這個使同步和異步的區別

今天主要就是學了一些前端,搞了一些前端的頁面,之后準備學一下后端。

我寫的這個項目使百度貼吧,還沒有寫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>

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/diannao/39690.shtml
繁體地址,請注明出處:http://hk.pswp.cn/diannao/39690.shtml
英文地址,請注明出處:http://en.pswp.cn/diannao/39690.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

推動能源綠色低碳發展,風機巡檢進入國產超高清+AI時代

全球綠色低碳能源數字轉型發展正在進入一個重要窗口期。風電作為一種清潔能源&#xff0c;在碳中和過程中扮演重要角色&#xff0c;但風電場運維卻是一件十足的“苦差事”。 傳統的風機葉片人工巡檢方式主要依靠巡檢人員利用高倍望遠鏡檢查、高空繞行下降目測檢查(蜘蛛人)、葉…

STM32——Modbus協議

一、Modbus協議簡介&#xff1a; 1.modbus介紹&#xff1a; Modbus是一種串行通信協議&#xff0c;是Modicon公司&#xff08;現在的施耐德電氣 Schneider Electric&#xff09;于1979年為使用可編程邏輯控制器&#xff08;PLC&#xff09;通信而發表。Modbus已經成為工業領域…

PythonConda系列(親測有效):【解決方案】Collecting package metadata (current_repodata.json): failed

【解決方案】Collecting package metadata (current_repodata.json&#xff09;: failed 問題描述解決方案小結參考文獻 問題描述 在cmd下運行&#xff1a;conda install pylint -y&#xff0c;報錯如下&#xff1a; C:\Users\apr> conda install --name apr pylint -y Co…

PDF壓縮工具選哪個?6款免費PDF壓縮工具分享

PDF文件已經成為一種常見的文檔格式。然而&#xff0c;PDF文件的體積有時可能非常龐大&#xff0c;尤其是在包含大量圖像或復雜格式的情況下。選擇一個高效的PDF壓縮工具就顯得尤為重要。小編今天給大家整理了2024年6款市面上反響不錯的PDF壓縮文件工具。輕松幫助你找到最適合自…

漆包線行業生產管理革新:萬界星空科技MES系統解決方案

一、引言 在科技日新月異的今天&#xff0c;萬界星空科技憑借其在智能制造領域的深厚積累&#xff0c;為漆包線行業量身打造了一套先進的生產管理執行系統&#xff08;MES&#xff09;解決方案。隨著市場競爭的加劇&#xff0c;漆包線作為電氣設備的核心材料&#xff0c;其生產…

React+TS前臺項目實戰(二十四)-- 繪制組件Qrcode封裝

文章目錄 前言Qrcode組件1. 功能分析2. 代碼詳細注釋3. 使用方式4. 效果展示(pc端 / 移動端) 總結 前言 今天要封裝的Qrcode 組件&#xff0c;是通過傳入的信息&#xff0c;繪制在二維碼上&#xff0c;可用于很多場景&#xff0c;如區塊鏈項目中的區塊顯示交易地址時就可以用到…

無人值守停車場管理系統具備哪些功能?無人值守收費停車場系統多少錢

隨著城市化進程的加快&#xff0c;停車難已成為制約城市發展的一個突出問題。在傳統停車場管理中&#xff0c;人工收費、車輛登記等環節不僅效率低下&#xff0c;而且容易出錯。無人值守停車系統的出現&#xff0c;無人值守停車場系統以其高效、智能的特點&#xff0c;通過集成…

Meta 3D Gen:文生 3D 模型

是由 Meta 公布的一個利用 Meta AssetGen&#xff08;模型生成&#xff09;和 TextureGen&#xff08;貼圖材質生成&#xff09;的組合 AI 系統&#xff0c;可以在分分鐘內生成高質量 3D 模型和高分辨率貼圖紋理。 視頻演示的效果非常好&#xff0c;目前只有論文&#xff0c;期…

telegram mini app和game實現登錄功能

接上一篇文章&#xff0c;我們在創建好telegram機器人后&#xff0c;開始開發小游戲或者mini App&#xff0c;那就避免不了登錄功能。 公開鏈接 bot設置教程:https://lengmo714.top/6e79860b.html 參考教程參考教程,telegram已經給我們提供非常多的api&#xff0c;我們在獲取用…

package.json配置詳解

package.json文件 執行 npm init 命令&#xff0c;會在當前目錄生成一個 package.json 文件 這個文檔是你需要知道的關于你的 package.json 文件中需要什么的所有信息。它必須是實際的 JSON&#xff0c;而不僅僅是一個 JavaScript 對象文字。 //package.json {//如果你打算發…

使用vue動態給同一個a標簽添加內容 并給a標簽設置hover,懸浮文字變色,結果鼠標懸浮有的字上面不變色

如果Vue的虛擬DOM更新機制導致樣式更新不及時&#xff0c;你可以嘗試以下幾種方法來解決這個問題&#xff1a; 確保使用響應式數據&#xff1a; 確保你使用的數據是響應式的&#xff0c;并且任何對這些數據的更改都會觸發視圖的更新。在Vue中&#xff0c;你應該使用data對象中的…

多源BFS——AcWing 173. 矩陣距離

多源BFS 定義 多源BFS&#xff08;多源廣度優先搜索&#xff09;是一種圖遍歷算法&#xff0c;它是標準BFS&#xff08;廣度優先搜索&#xff09;的擴展&#xff0c;主要用于解決具有多個起始節點的最短路徑問題。在多源BFS中&#xff0c;不是從單一源點開始搜索整個圖&#…

怎么把webp格式轉換成jpg?5個圖片格式轉換方法全面解析(2024最新)

webp 圖片常用于網站&#xff0c;可顯著改善頁面的瀏覽和加載體驗。然而&#xff0c;許多設備&#xff08;如蘋果手機設備、安卓手機等&#xff09;不支持webp文件。在這些設備上查看webp文件時&#xff0c;最佳做法是將其轉換為其他常見格式&#xff0c;如jpg或 png。Windows電…

LeetCode 69. x 的平方根

更多題解盡在 https://sugar.matrixlab.dev/algorithm 每日更新。 組隊打卡&#xff0c;更多解法等你一起來參與哦&#xff01; LeetCode 69. x 的平方根 &#xff0c;難度簡單。 暴力 解題思路&#xff1a;直接遍歷平方 i&#xff0c; 判斷 x 是否滿足 i 2 ≤ x < ( i …

2024上海大學生程序設計競賽I-六元組計數原根知識詳解

以前基本沒有了解原根相關的一塊內容&#xff0c;最近正好碰到了這個題&#xff0c;于是寫一篇博客記錄一下。 這道題的總體思路就是比較明顯&#xff0c;就是先算出 a p x a^px apx對于每個 x x x的解的個數&#xff0c;然后NTT算一下即可。 先來講一下怎么求歐拉函數 ? ( …

前端FCP指標優化

優化前 第三方依賴按需引入之后&#xff0c;打包的總體積減小到初始值的55%&#xff0c;但是依然存在很大的js文件&#xff0c;需要繼續優化 chunk-vendors.js進行分包之后 截圖 compression-webpack-plugin壓縮之后 截圖

簡單制作基礎的Python鏡像

拉取基礎鏡像 以Ubuntu24示例 docker pull ubuntu:24.04 啟動 docker run -it -d --name ubuntu24 ubuntu:24.04 進入docker docker exec -it ubuntu24 /bin/bash 更新依賴 apt update apt full-upgrade 安裝pip 會自動安裝python3.11.7 apt install pip 支持中文…

55、Flink 中使用 Java Lambda 表達式詳解

1&#xff09;概述 1.注意 Flink 支持對 Java API 的所有算子使用 Lambda 表達式&#xff0c;但是&#xff0c;當 Lambda 表達式使用 Java 泛型時&#xff0c;需要 顯式 地聲明類型信息。 2.示例和限制 示例&#xff1a; map() 函數使用 Lambda 表達式計算輸入值的平方。 …

大學新生人工智能學習路線規劃

1. 引言 七月來臨&#xff0c;各省高考分數已揭榜完成。而高考的完結并不意味著學習的結束&#xff0c;而是新旅程的開始。對于有志于踏入IT領域的高考少年們&#xff0c;這個假期是開啟探索IT世界的絕佳時機。作為該領域的前行者和經驗前輩&#xff0c;我愿意為準新生們提供一…

基于Hadoop平臺的電信客服數據的處理與分析③項目開發:搭建基于Hadoop的全分布式集群---任務10:Hive安裝部署

任務描述 任務內容為安裝并配置在Hadoop集群中使用Hive。 任務指導 Hive是一個基于Hadoop的數據倉庫框架&#xff0c;在實際使用時需要將元數據存儲在數據庫中 具體安裝步驟如下&#xff1a; 1. 安裝MySQL數據庫&#xff08;已安裝&#xff09; 2. 解壓縮Hive的壓縮包 3…