Me pehea te Whakamahia CSS Positioning ki te waihanga Tahora I waho o nga ripanga

Tahora Tae Korero Tuwhera Nga Raina Hoahoa Hou

He maha nga take e kore e whakamahi i nga ripanga mo te tahora . Ko tetahi o nga take tino nui ka tukuna e te tangata ki te whakamahi i aua mea no te mea he uaua ki te mahi i te taapiri me CSS. Ahakoa ko te tuhinga a CSS e uru ana ki te taahi akoranga, ka mohio koe ki te mahi i te whakatakotoranga CSS, ka miharo koe ki te ngawari o te mahi. A, ka ako koe, ka taea e koe te korero i te tuarua o nga take ka tukua e te tangata mo te kore e whakamahi CSS- "He tere atu te tuhi i nga ripanga." He tere atu no te mea e mohio ana koe ki nga ripanga, engari ka ako koe i te CSS, me taua.

Tautoko Pūtirotiro o CSS Positioning

Kei te tautokona te poari CSS i roto i nga kaihoahoa hou . Mena kei te hangaia e koe tetahi pae mo Netscape 4, Internet Explorer 4 ranei, kaore he raruraru o au kaipānui ki te tiro i o rarangi Tukutuku Tukutuku.

Te whakamahara i te pehea e hanga ai e koe he Whārangi

Ina hangaia e koe he pae ma te whakamahi i nga tepu, me whakaaro koe ki te whakatakotoranga whanui. I etahi atu kupu, kei te whakaaro koe ki nga waahi me nga rarangi me nga pou. Ka whakaatuhia e to Papanga Tukutuku tenei huarahi. Ka neke koe ki te hoahoa whakanoho CSS, ka tīmata koe ki te whakaaro ki o raatau whārangi mo te ihirangi, no te mea e taea ana te whakauru ki nga wahi katoa e hiahia ana koe ki te tahora-ara noa atu i runga i etahi atu ihirangi.

He rerekē nga hanganga o nga paetukutuku rereke. Hei hanga i tetahi whārangi whai hua, aromatawai i te hanganga o tetahi waahanga i mua i to waitohu ai i nga ihirangi ki taua mea. Kei roto i tetahi whārangi tauira nga waahanga e rima:

  1. Pane . Te whare ki te panui karaati, te ingoa o te pae, te hono whakatere, te taitara tuhinga, me etahi atu mea.
  2. Tīwae matau . Koinei te taha matau o te whārangi me te pouaka rapu, nga panui, nga pouaka ataata, me nga waa hoko.
  3. Ihirangi . Ko te tuhinga o te tuhinga, te pou rangitaki, te kaata hokohoko-nga kai-me-rīwai o te whārangi.
  4. Whakatairanga Raina . Ko nga korero whakahuahua i roto i nga tuhinga.
  5. Tuhinga . Ko te whakatere raro, nga korero a te kaituhi, nga korero a te mana pupuri, nga panui karaiho iti, me nga hononga e hono ana.

Engari kaua e waiho nga mea e rima i roto i te tepu, whakamahia nga huānga huinga HTML5 hei tautuhi i nga waahanga rereke o te ihirangi, ka whakamahi i te waitohu CSS hei whakanoho i nga huānga ihirangi kei te whārangi.

Te tautuhi i nga Wahanga Ihirangi

I muri i to tautuhi i nga waahanga rererangi o to pae, me tuhi koe ki to HTML. Ahakoa e taea e koe, i te nuinga o te waa, tuhia nga waahanga ki tetahi raupapa, he pai ki te waiho i nga waahanga tino nui o to tuhinga. Ka awhina tenei huarahi ki te whakawhitinga rapu-engine, ano.

Hei whakaatu i te tūnga, tirohia he whārangi me nga pou e toru, engari kaore he pane, he waewae ranei. Ka taea e koe te whakamahi i te tūnga hei waihanga i tetahi ahua o te tahora e hiahia ana koe.

Mo te whakatakotoranga e toru-pou, tautuhi i nga waahanga e toru: te raina maui, te pourangi tika, me te ihirangi.

Ka waatea enei waahanga ma te whakamahi i te huānga ARTICLE mo nga tuhinga me nga waahanga e rua nga waahanga WHAKANUI mo nga pou e rua. Ka whai hua ano nga mea katoa. Ina whakamahi koe i te tohu id, me tohu koe i tetahi ingoa ahurei mo ia id.

Te Whakarite i te Ihirangi

Ma te whakamahi i te CSS, tautuhi i te turanga mo o nga mea ID'd. Tiakihia to korero i roto i te momo ahua penei:

#content {

}

Ko te ihirangi i roto i enei huinga ka nui ake te waahi, ko te 100 ōrau o te whānui o te tauwāhi onāianei, te whārangi rānei. Hei painga ki te waahi o te waahanga me te kore e whakaekea ki te whanui whanui, whakarereke i nga paera me nga waahanga tawhito.

Mo tenei whakatakotoranga, tautuhi i nga pou e rua ki nga whanui whaitake, ka tautuhi i to raatau turanga, kia kore ai e pa ki te wahi e kitea ana i roto i te HTML.

# te taha mauī-tīwae {
tūranga: tino;
maui: 0;
whanui: 150px;
taha-maui: 10px;
te taha-runga: 20px;
tae: # 000000;
te taraiwa: 3px;
}
# tīwae-tika {
tūranga: tino;
ki maui: 80%;
runga: 20px;
whanui: 140px;
tarai-maui: 10px;
z-index: 3;
tae: # 000000;
te taraiwa: 3px;
}

Na, mo te rohe ihirangi, tautuhi i nga taapiri ki te taha matau me te maui kia kore ai e rawehia nga papa e rua i waho.

#content {
runga: 0px;
tapahi: 0px 25% 0 165px;
te taraiwa: 3px;
tae: # 000000;
}

Ko te tautuhi i to tuhinga ma te whakamahi i CSS hei utu mo te ripanga HTML e hiahia ana koe ki tetahi pukenga hangarau ake, engari ko te utu e whai ake nei mai i nga mahinga tere atu me te urupare me te pai ake i te hanga i nga whakarereketanga hanganga ki to papanga i muri mai.