整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
喜歡互聯(lián)網(wǎng)的一點(diǎn)是在互聯(lián)網(wǎng)放置靜態(tài)頁面是如此簡單。今天有人問我該怎么做，所以我想我會(huì)快速地寫下來！
-- Julia Evans（作者）
我喜歡互聯(lián)網(wǎng)的一點(diǎn)是在互聯(lián)網(wǎng)放置靜態(tài)頁面是如此簡單。今天有人問我該怎么做，所以我想我會(huì)快速地寫下來！
我的所有網(wǎng)站都只是靜態(tài) HTML 和 CSS。我的網(wǎng)頁設(shè)計(jì)技巧相對(duì)不高（ https://wizardzines.com 是我自己開發(fā)的最復(fù)雜的網(wǎng)站），因此保持我所有的網(wǎng)站相對(duì)簡單意味著我可以做一些改變/修復(fù)，而不會(huì)花費(fèi)大量時(shí)間。
因此，我們將在此文章中采用盡可能簡單的方式 —— 只需一個(gè) HTML 頁面。
我們要放在互聯(lián)網(wǎng)上的網(wǎng)站只是一個(gè)名為 index.html 的文件。你可以在 https://github.com/jvns/website-example 找到它，它是一個(gè) Github 倉庫，其中只包含一個(gè)文件。
HTML 文件中包含一些 CSS，使其看起來不那么無聊，部分復(fù)制自 https://example.com 。
有以下幾步：
上面的 index.html 頁面位于 julia-example-website.neocities.com 中，如果你查看源代碼，你將看到它與 github 倉庫中的 HTML 相同。
我認(rèn)為這可能是將 HTML 頁面放在互聯(lián)網(wǎng)上的最簡單的方法（這是一次回歸 Geocities，它是我在 2003 年制作我的第一個(gè)網(wǎng)站的方式）:)。我也喜歡 Neocities （像 glitch ，我也喜歡）它能實(shí)驗(yàn)、學(xué)習(xí)，并有樂趣。
這絕不是唯一簡單的方式，在你推送 Git 倉庫時(shí)，Github pages 和 Gitlab pages 以及 Netlify 都將會(huì)自動(dòng)發(fā)布站點(diǎn)，并且它們都非常易于使用（只需將它們連接到你的 GitHub 倉庫即可）。我個(gè)人使用 Git 倉庫的方式，因?yàn)?Git 不會(huì)讓我感到緊張，我想知道我實(shí)際推送的頁面發(fā)生了什么更改。但我想你如果第一次只想將 HTML/CSS 制作的站點(diǎn)放到互聯(lián)網(wǎng)上，那么 Neocities 就是一個(gè)非常好的方法。
如果你不只是玩，而是要將網(wǎng)站用于真實(shí)用途，那么你或許會(huì)需要買一個(gè)域名，以便你將來可以更改托管服務(wù)提供商，但這有點(diǎn)不那么簡單。
如果你熟悉在 Git 中編輯文件，同時(shí)想練習(xí) HTML/CSS 的話，我認(rèn)為將它放在網(wǎng)站中是一個(gè)有趣的方式！我真的很喜歡它的簡單性 —— 實(shí)際上這只有一個(gè)文件，所以沒有其他花哨的東西需要去理解。
還有很多方法可以復(fù)雜化/擴(kuò)展它，比如這個(gè)博客實(shí)際上是用 Hugo 生成的，它生成了一堆 HTML 文件并放在網(wǎng)絡(luò)中，但從基礎(chǔ)開始總是不錯(cuò)的。
via: https://jvns.ca/blog/2019/09/06/how-to-put-an-html-page-on-the-internet/
作者： Julia Evans 選題： lujun9972 譯者： geekpi 校對(duì)： wxy
本文由 LCTT 原創(chuàng)編譯， Linux中國 榮譽(yù)推出
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>登錄頁面</title>
/*總體的樣式*/
<style>
/*盒子樣式*/
#box{
width: 350px; //寬
height: 450px; //高
border: 1px solid black; //邊框
border-radius: 10px; //邊框弧度
font-family: 黑體; //字體
letter-spacing:8px; //段間距
word-spacing: 10px; //字間距
line-height: 40px; //行高
font-size: 18px; //字大小
padding: 20px; //內(nèi)邊框
}
/*給'注冊(cè)'賦予樣式*/
.register{
width:280px ; //寬
height: 50px; //高
background-color: skyblue; //背景顏色
border-radius: 10px; //邊框弧度
}
/*將所有邊框都改變*/
*{
border-radius: 5px; 邊框弧度
}
/*使用class選擇器，賦予number寬高和邊框*/
.number{
width: 185px; //寬
height: 27px; //高
border-width: 1px; //邊框?qū)挾?
}
/*id選擇器*/
#two{
width: 55px; //寬
border-width: 1px; 邊框?qū)挾? }
/*id選擇器*/
#phone{
width: 103px; //寬
}
/*class 選擇器*/
.boxs{
zoom: 75%; //清除浮動(dòng)
color: darkgray; //顏色
}
/*class選擇器*/
.box_a{
width: 50px; //寬
height: 50px; //高
background-image: url("../image/04.jpg "); //背景圖片
background-repeat: no-repeat; // 是否平鋪
background-size: 50px 25px; //背景尺寸
position: relative; //定位 相對(duì)定位
left: 310px; //定位后左移
bottom: 32px; //定位后下移
}
</style>
</head>
<body>
<div id="box">
<h1>請(qǐng)注冊(cè)</h1>
<p style="color: darkgray">已有帳號(hào)?<a href="https://im.qq.com/index">登錄</a></p>
<form action="" method="post">
<label for="name">用戶名</label>
<input type="text" placeholder="請(qǐng)輸入用戶名" id="name" class="number"> <br>
<label for="phone">手機(jī)號(hào)</label>
<select name="" id="two" class="number">
<optgroup>
<option style="" class="">+86</option>
</optgroup>
</select>
<input type="text" placeholder="請(qǐng)輸入手機(jī)號(hào)" id="phone" class="number"> <br>
<label for="mima">密?碼</label>
<input type="password" placeholder="請(qǐng)輸入密碼" id="mima" class="number"> <br>
<label for="mima">驗(yàn)證碼</label>
<input type="password" placeholder="請(qǐng)輸入驗(yàn)證碼" id="is" class="number">
<div class="box_a"></div>
<div class="boxs">
<input type="radio" id="" class="accept">閱讀并接受協(xié)議<br>
</div>
<input type="submit" value="注冊(cè)" class="register" >
</form>
</div>
</body>
</html>
在這里插入圖片描述段時(shí)間做畢業(yè)設(shè)計(jì)的過程中，發(fā)現(xiàn)了兩個(gè)十分好看的前端頁面，利用HTML，CSS以及JS寫成的。
第一個(gè)代碼點(diǎn)擊進(jìn)入時(shí)有好看的進(jìn)入動(dòng)畫，旋轉(zhuǎn)轉(zhuǎn)圈之后，從中間向兩側(cè)緩緩打開：
打開之后，首頁長這樣：
點(diǎn)擊頭部的幾塊區(qū)域，有炫酷的滑動(dòng)切換動(dòng)畫：
第二個(gè)頁面點(diǎn)擊進(jìn)入之后，第一眼看到的頁面是這樣的：
鼠標(biāo)下拉可以繼續(xù)查看：
是不是很好看呢？我的畢業(yè)設(shè)計(jì)頁面就是在第一個(gè)頁面的基礎(chǔ)上來設(shè)計(jì)實(shí)現(xiàn)的，哈哈，我的頁面長這樣：
嗯，畢業(yè)設(shè)計(jì)做了一個(gè)簡單的圖像文字識(shí)別系統(tǒng)，在頁面上傳圖片后，系統(tǒng)識(shí)別出圖片中的文字，并在此基礎(chǔ)上衍生出身份證識(shí)別，銀行卡識(shí)別，駕駛證識(shí)別，傳圖識(shí)色等功能，整個(gè)系統(tǒng)涉及到圖像預(yù)處理，神經(jīng)網(wǎng)絡(luò)等技術(shù)。
可把我厲害壞了，哈哈，不過其實(shí)市面上有很多圖像識(shí)別方面的軟件啦。
圖像預(yù)處理技術(shù)
等改天有時(shí)間了，我準(zhǔn)備把這個(gè)圖像文字識(shí)別系統(tǒng)從設(shè)計(jì)到實(shí)現(xiàn)的過程一步一步寫出來，屆時(shí)，歡迎大家前來圍觀啊！！
想要前面兩個(gè)前端頁面代碼的小伙伴，可以私信我獲取哦~~
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
