HTML 做乙個HTML的個人簡介頁面

2021-10-08 03:25:28 字數 3847 閱讀 8203

效果我的hexo部落格是看的大神教程一步步做的,然後所以我的about介面,也準備仿著大佬的做,之前根本沒學過web的前端,只接觸過xaml這種帶標籤的設計語言…

確定好每個區域的位置,背景色和透明度,顏色我不會弄成漸變的,暫且純色代替,css我也沒學過,寫法如果錯誤請見諒…

>

.center

.centerafterleft

.centerafterright

.footer

.lastfooter

body

style

>

基本上部落格上的內容複製過去就直接能用,然後我就不求甚解了…

拿最上層舉例,暱稱和後面的文字是需要在一行的,標籤p需要設定display:inline-block;

然後空格我也不知道為啥html預設不顯示,我查到的方法是 ,好像markdown裡也是這樣的

style

="float

: left;

margin-left

: 20px;

">

style

="margin-bottom

: 10px;

display

: inline-block;

font-weight

: bold;

">

暱稱:p

>

style

="margin-bottom

: 10px;

display

: inline-block;

">

染墨灬若流雲p

>

>

style

="margin-bottom

: 15px;

display

: inline-block;

font-weight

: bold;

">

最愛:p

>

style

="margin-bottom

: 15px;

display

: inline-block;

">

迷人又可愛的鹿寶寶~p

>

div>

我知道這樣寫會有問題,如果是xaml布局,我會考慮豎屏下的情況,避免解析度變化造成的頁面顯示異常,但是html實在是無能為力…

中間的右半部分,那個黑色的點很容易讓人想到markdown的-,那麼是不是html可以用markdown語法呢?很遺憾不可以,但是可以把markdown轉換成html,typora或者csdn的編輯器都支援這個功能

>

>

學歷: li

>

>

>

現況: li

>

>

>

目標: li

>

>

>

部落格: li

>

>

>

興趣: >

>

ul>

匯出後最後是沒有

標籤的,我是為了和左邊對齊

這個我查了很多,都是用js來做,可惜js我也沒學過,我覺得我在window_load事件中寫會導致重新整理的時候明顯感覺矩形閃爍,大佬的部落格about介面就沒這個問題,所以我覺得這個方法不太對…

/*技能條*/

var canvas = document.

getelementbyid

("skillcanvas");

if(canvas ==

null

)return

;var t =

newarray(12

,39,64

,89,114);

var y =

newarray

("#4ab480"

,"#e1ab3e"

,"#dc595#7390f2"

,"#747dc5");

var l =

newarray

(120

,150,40

,60,30

);var content = canvas.

getcontext

("2d");

for(

var i =

0; i <5;

++i)

這樣寫維護性很差很差,但是考慮到這個介面過很久很久才可能更新,所以先只追求效果,不追求**規範(給自己的菜找一找藉口)

技能的百分比就還是之前的方法,移到合適的位置就好

排版的話我畢竟沒學過,追求效果類似我用的margin-left,直接偏移過去,不知道更優雅的做法是怎麼樣的…大佬的這個介面是禁用左右鍵和f12的…

大佬這樣做的目的可能是保護自己的**或者不讓自己的介面被人改動,既然我們是仿照大佬的做,這個功能我們也要有

js也可以禁用左右鍵,但是網上說禁用js指令碼後這招就沒用了,所以這裡用html自帶的屬性

topmargin

="0"

oncontextmenu

="return false"

ondragstart

="return false"

onselectstart

="return false"

onselect

="document.selection.empty()"

oncopy

="document.selection.empty()"

onbeforecopy

="return false"

onmouseup

="document.selection.empty()"

>

將這段放入body標籤中即可生效

禁用f12我只找到了js的方法,不知道大佬是怎麼做的…

window.onkeydown = window.onkeyup = window.

onkeypress

=function

(event)

}

鏈結是標籤,鏈結就是在這個標籤裡加入乙個標籤

href

=""target

="-blank"

title

="csdn"

>

"blog"

style

="margin-top

: 0px;

left

: 75%;

position

: absolute;

" src

="">

a>

飄雪的****於大佬的教程

將js**拷貝到script標籤下,然後window_load事件呼叫即可

window.

onload

=function

startsnow()

);snow.

start()

;

一些小細節比如說,中間左右部分之間的間隔和上下的不一致…背景圖沒有找用純色代替…還有大佬的模組背景和技能條的顏色都是漸變的…這些我都沒處理好,不過還是先記錄下來先做到這個樣子吧…

最終效果

用html做乙個目錄 用555做乙個高壓發生器

用555做乙個高壓發生器。如圖,ne555為脈衝發生晶元 以此晶元外圍電路為準,頻率約1.7khz,占空比 10 q2為n溝道場效電晶體,q1為npn三極體,t1為高壓線圈。如圖所示 晶元為ne555,為脈衝發生晶元,脈衝頻率由c1 r1和r2來調整。開關管q2為n溝道場效電晶體。r3為場效電晶體的...

乙個html介面與另外乙個html介面之間傳遞資料

兩個html介面之間的資料傳遞出了通過後台邏輯進行傳遞之外,如果通過ajax來傳遞的話,一些後台傳遞過來的值不能夠正確的傳遞到前台介面上面去。有一種方法,就是先將後台傳遞進來的資料先放到乙個隱藏的文字框中,然後傳遞給另外乙個介面文字框中的內容,就可以做到兩個頁面直接的資料傳遞。隱藏文字框 ajax請...

html習題(浮動的應用,做乙個文字環繞效果)

沒放,就用乙個div標籤代替一下 以下是html頁面的 lang zh cn charset utf 8 name viewport content width device width,initial scale 1.0 中國的流浪貓title rel stylesheet href index....