Mae cynllun CSS yn ei gwneud yn ofynnol i chi feddwl am gynllun eich gwefan yn gyffredinol, ac yna tynnwch y darnau a'u rhoi gyda'i gilydd. Dysgwch sut i adeiladu cynllun syml 3-golofn gyda CSS.
01 o 09
Tynnwch eich Cynllun J Kyrnin Gallwch dynnu'ch cynllun ar bapur neu mewn rhaglen graffeg . Os oes gennych chi ffram wifr neu ddyluniad mwy helaeth mewn cof eisoes, ei symleiddio'r blychau sylfaenol sy'n ffurfio'r safle. Mae'r dyluniad sy'n cyd-fynd â'r erthygl hon yn cynnwys tair colofn yn y prif faes, yn ogystal â phennawd a phedair. Os edrychwch yn ofalus, gallwch weld nad yw'r tair colofn yn gyfartal o led.
Ar ôl i chi osod eich cynllun, gallwch ddechrau meddwl am ddimensiynau. Bydd y dyluniad enghreifftiol hwn yn cael y dimensiynau sylfaenol canlynol:
Dim mwy na 900 picsel o led Gutter 20 px ar y chwith 10 px rhwng colofnau a rhesi Colofnau sy'n 250px, 300px, a 300px o led Mae'r rhes uchaf yn 150px o uchder Mae'r rhes isaf yn 100px o uchder 02 o 09
Ysgrifennwch HTML / CSS Sylfaenol a Chreu Elfen Cynhwysydd Gan fod y dudalen hon yn ddogfen HTML ddilys, Dechreuwch gyda chynhwysydd HTML gwag
Untitled Document </ teitl> </ head> <body> </ body> </ html> <p> Ychwanegwch yn yr arddulliau CSS sylfaenol i <a href="https://cy.eyewated.com/defnyddiwch-css-i-ddileu-eich-margins-a-borders/">sero allan ymylon y tudalennau, ffiniau a paddinau</a> . Er bod <a href="https://cy.eyewated.com/dewch-i-wybod-taflenni-arddull-cascading-gydar-daflen-gwylio-css-hon/">arddulliau CSS safonol</a> eraill <a href="https://cy.eyewated.com/dewch-i-wybod-taflenni-arddull-cascading-gydar-daflen-gwylio-css-hon/">ar</a> gyfer dogfennau newydd, yr arddulliau hyn yw'r isafswm y mae angen i chi gael cynllun glân. Ychwanegwch nhw at ben eich dogfen: </p>
<style type = "text / css"> html, body {margin: 0px; padio: 0px; ffin: 0px; } </ style> <p> I ddechrau adeiladu'r cynllun, rhowch mewn elfen cynhwysydd. Mae'n digwydd weithiau y gallwch gael gwared â'r cynhwysydd yn ddiweddarach, ond ar gyfer y rhan fwyaf o gynlluniau lled sefydlog, gan fod yr elfen cynhwysydd yn ei gwneud hi'n haws ei reoli ar draws porwyr Gwe gwahanol. Felly yn y corff rhowch hyn: </p>
<div id = "container"> </ div> <p> Ac yn y daflen arddull CSS, rhowch: </p>
#container {} <p> <strong>03 o 09</strong> </p>
<h3> Arddull y Cynhwysydd </h3><p> Mae'r cynhwysydd yn diffinio pa mor eang y bydd cynnwys y dudalen we, yn ogystal ag unrhyw ymylon o gwmpas y tu allan a paddin ar y tu mewn. Ar gyfer y ddogfen hon, mae'r cynhwysydd yn 870px o led gyda chutter 20 picsel ar y chwith. Mae'r gutter wedi'i sefydlu gydag arddull ymyl, ond caiff y padio ar y cynhwysydd ei sero er mwyn atal unrhyw elfennau rhag bod mor eang â'r cynhwysydd. </p>
#container {lled: 870px; ymyl: 0 0 0 20px; / * ar y dde i'r chwith i'r chwith * / padio: 0; } <p> Os ydych chi'n arbed eich dogfen nawr, bydd yn anodd gweld y cynhwysydd oherwydd nad oes ganddo ddim ynddo. Os ydych yn ychwanegu testun lle i ddeiliad lle, fe welwch yr elfen gynhwysydd yn gliriach. </p>
<p> <strong>04 o 09</strong> </p>
<h3> Defnyddiwch Tag Pennawd ar gyfer y Pennawd </h3><p> Sut rydych chi'n penderfynu arddull y rhes pennawd yn dibynnu llawer ar yr hyn sydd ynddo. Os bydd y rhes pennawd yn mynd i gael logo graffig a phennawd, yna mae defnyddio tag pennawd (<h1>) yn gwneud mwy o synnwyr na defnyddio <div>. Gallwch arddull y pennawd yr un ffordd ag y byddwch chi'n arddull div, ac rydych chi'n osgoi tagiau anghyffredin. </p>
<p> Mae'r HTML ar gyfer y rhes pennawd yn mynd ar frig y cynhwysydd ac mae'n edrych fel hyn: </p>
<h1> Fy Mhennawd Row </ h1> <p> Yna, i osod yr arddulliau arno, ychwanegwyd ffin coch ar y gwaelod er mwyn i chi weld ble mae'n dod i ben, roedd yr ymylon a'r padlo wedi'u seroi, y lled wedi'i osod i 100% a'r uchder i 150px: </p>
#container h1 {ymyl: 0; padio: 0; lled: 100%; uchder: 150px; arnofio: chwith; border-bottom: # c00 solid 3px; } <p> Peidiwch ag anghofio i arnofio'r elfen hon gyda'r fflôt: chwith; eiddo. Yr allwedd i ysgrifennu gosodiadau CSS yw arnofio popeth - hyd yn oed bethau sydd yr un lled â'r cynhwysydd. Felly, rydych chi bob amser yn gwybod lle bydd yr elfennau ar y dudalen. </p>
<p> Mae <a href="https://cy.eyewated.com/beth-yw-dewisydd-syrthio-css/">detholydd CSS disgynyddion yn</a> defnyddio arddulliau H1 yn unig sydd o fewn yr elfen #container. </p>
<p> <strong>05 o 09</strong> </p>
<h3> I Brynu Tri Colofn, Dechreuwch gan Adeiladu Dau Golofn </h3><p> Pan fyddwch yn adeiladu cynllun tair-golofn gyda CSS, mae angen i chi rannu'ch cynllun yn grwpiau o ddau. Felly, ar gyfer y gosodiad tri-golofn hon, mae'r golofn ganol a'r dde a'i grwpio a'i osod wrth ochr y golofn chwith mewn cynllun dwy golofn lle mae'r golofn chwith yn 250px o led, ac mae'r golofn dde 610px o led (300 yr un ar gyfer y ddwy golofn , ynghyd â 10px ar gyfer y gutter rhyngddynt). </p>
<p> Mae'r HTML yn edrych fel hyn: </p>
<div id = "col1"> <p> Ut aliquip ex ea commodo consequat. Mae angen i chi fod yn fwy na thebyg ar gyfer yr un pryd, y gallwn ni ei wneud. Wrth ail-gynrychioli ym myd ymarfer corff mae eu ffug yn digwydd. </ P> </ div> <div id = "col2outer"> <p> Ut enim ad minim veniam, sed do eiusmod tempor incididunt ullamco laboris nisi. Mae llawer o waith ar gael. Velit esse cillum dolore eu fugiat nulla pariatur. </ P> </ div> <p> Mae testun y sawl sydd â diddordeb yn y colofnau yn eu gwneud yn fwy gweladwy wrth brofi. Mae'r CSS yn edrych fel hyn: </p>
#container # col1 {width: 250px; arnofio: chwith; } #container # col2outer {lled: 610px; arnofio: dde; ymyl: 0; padio: 0; } <p> Mae'r golofn ar y chwith wedi'i flodeuo i'r chwith, tra bod y llall yn flodeuo i'r dde. Gan fod cyfanswm lled y ddau golofn yn 860px, mae yna gutter 10px rhyngddynt. </p>
<p> <strong>06 o 09</strong> </p>
<h3> Ychwanegu Dau Golofn Y Tu Mewn i'r Ail Golofn Eang </h3><p> I greu'r tair colofn, ychwanegwch ddau divs y tu mewn i'r ail golofn ehangach, yn union fel y cawsoch 2 divs y tu mewn i'r golofn cynhwysydd yn y cam olaf. Mae'r HTML yn edrych fel hyn: </p>
<div id = "col2outer"> <div id = "col2mid"> <p> Ut enim ad minim veniam, sed do eiusmod tempor incididunt ullamco laboris nisi. Mae llawer o waith ar gael. Velit esse cillum dolore eu fugiat nulla pariatur. </ P> </ div> <div id = "col2side"> <p> Nam libero tempore, quia voluptas sit aspernatur dicta sunt explicabo. Mae Ullam Corporis yn ymgymryd â gwaith, ac mae angen llawer o bethau. Mae hyn yn golygu bod y cleientiaid yn dal i fod yn ddoethus, ond fel y gwelir y bydd pob amser yn mynd i mewn i weithio ac yn ddoeth. </ P> </ div> </ div> <p> Ac mae'r CSS yn edrych fel hyn: </p>
# col2outer # col2mid {lled: 300px; arnofio: chwith; } # col2outer # col2side {width: 300px; arnofio: dde; } <p> Gan fod y ddau flychau 300px o led hyn y tu mewn i flwch 610px o led, bydd yna gutter 10px rhyngddynt. </p>
<p> <strong>07 o 09</strong> </p>
<h3> Ychwanegwch yn y Footer </h3><p> Nawr bod gweddill y dudalen wedi'i styled, gallwch ychwanegu yn y troednod. Defnyddiwch dd olaf gyda rhif "footer", ac ychwanegu cynnwys fel y gallwch ei weld. Gallwch hefyd ychwanegu ffin ar y brig, felly byddwch chi'n gwybod ble mae'n dechrau. </p>
<p> Mae'r HTML: </p>
<div id = "footer"> <p> Hawlfraint © 2017 </ p> </ div> <p> Y CSS: </p>
#container #footer {arnofio: chwith; lled: 870px; border-top: # c00 solid 3px; } <p> <strong>08 o 09</strong> </p>
<h3> Ychwanegwch yn Eich Dulliau Personol a Chynnwys </h3><p> Nawr bod gennych chi'r cynllun wedi'i orffen, gallwch ddechrau ychwanegu eich arddulliau personol a'ch cynnwys eich hun. Cofiwch fod y ffiniau ar y pennawd a'r footer yn cael eu hychwanegu i ddangos yr adrannau cynllun, nid yn benodol ar gyfer dylunio. </p>
<p> <strong>09 o 09</strong> </p>
<h3> Y HTML / CSS Terfynol </h3><p> Dyma'r ddogfen gyfan, HTML a CSS: </p>
<! DOCTYPE html PUBLIC "- // W3C // DTD XHTML 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns = "http : //www.w3.org/1999/xhtml "> <head> <meta http-equiv =" Content-Type "content =" text / html; charset = utf-8 "/> <title> Untitled Document </ teitl> <style type = "text / css"> html, body {margin: 0px; padio: 0px; ffin: 0px; } #container {width: 870px; ymyl: 0 0 0 20px; / * ar y dde i'r chwith i'r chwith * / padio: 0; cefndir-liw: #fff; } #container h1 {ymyl: 0; padio: 0; lled: 100%; uchder: 150px; arnofio: chwith; border-bottom: # c00 solid 3px; } #container # col1 {width: 250px; arnofio: chwith; } #container # col2outer {lled: 610px; arnofio: dde; ymyl: 0; padio: 0; } # col2outer # col2mid {width: 300px; arnofio: chwith; } # col2outer # col2side {width: 300px; arnofio: dde; } #container #footer {arnofio: chwith; lled: 870px; border-top: # c00 solid 3px; } </ style> </ head> <body> <div id = "container"> <h1> My Header Row </ h1> <div id = "col1"> <p> Ut aliquip ex ea commodo consequat. </ p> </ div> <div id = "col2outer"> <div id = "col2mid"> <p> Ut enim ad minim veniam. </ p> </ div> <div id = "col2side"> <p> Nam libero tempore. </ P> </ div> </ div> <div id = "footer"> <p> Hawlfraint © 2008 </ p> </ div> </ div> </ body> </ html>
</div>
<div class="amp-related-wrapper">
<h2>Alike posts</h2>
<div class="amp-related-content">
<div class="amp-related-text">
<h3><a href="https://cy.eyewated.com/spacio-llinell-css/">Spacio Llinell CSS</a></h3>
<div class="amp-related-meta">
Dylunio Gwe & Dyfais </div>
</div>
</div>
<div class="amp-related-content">
<a href="https://cy.eyewated.com/deall-y-3-math-o-arddulliau-css/">
<amp-img src="https://exse.eyewated.com/pict/4623841739de33b0-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img>
</a>
<div class="amp-related-text">
<h3><a href="https://cy.eyewated.com/deall-y-3-math-o-arddulliau-css/">Deall y 3 math o arddulliau CSS</a></h3>
<div class="amp-related-meta">
Dylunio Gwe & Dyfais </div>
</div>
</div>
<div class="amp-related-content">
<a href="https://cy.eyewated.com/tudalen-web-styling-a-notepad-created-with-css/">
<amp-img src="https://exse.eyewated.com/pict/4b7ab57836bf3365-120x86.gif" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img>
</a>
<div class="amp-related-text">
<h3><a href="https://cy.eyewated.com/tudalen-web-styling-a-notepad-created-with-css/">Tudalen Web Styling a Notepad Created with CSS</a></h3>
<div class="amp-related-meta">
Dylunio Gwe & Dyfais </div>
</div>
</div>
<div class="amp-related-content">
<a href="https://cy.eyewated.com/beth-yw-dewisydd-syrthio-css/">
<amp-img src="https://exse.eyewated.com/pict/aa4897828e4c329a-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img>
</a>
<div class="amp-related-text">
<h3><a href="https://cy.eyewated.com/beth-yw-dewisydd-syrthio-css/">Beth yw Dewisydd Syrthio CSS?</a></h3>
<div class="amp-related-meta">
Dylunio Gwe & Dyfais </div>
</div>
</div>
<div class="amp-related-content">
<a href="https://cy.eyewated.com/sut-i-mewnosod-sylw-css/">
<amp-img src="https://exse.eyewated.com/pict/eb475c938ddb317f-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img>
</a>
<div class="amp-related-text">
<h3><a href="https://cy.eyewated.com/sut-i-mewnosod-sylw-css/">Sut i Mewnosod Sylw CSS</a></h3>
<div class="amp-related-meta">
Dylunio Gwe & Dyfais </div>
</div>
</div>
<div class="amp-related-content">
<a href="https://cy.eyewated.com/beth-ywr-gwahaniaeth-rhwng-import-a-dolen-i-css/">
<amp-img src="https://exse.eyewated.com/pict/e1ef7baeb7f72ff1-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img>
</a>
<div class="amp-related-text">
<h3><a href="https://cy.eyewated.com/beth-ywr-gwahaniaeth-rhwng-import-a-dolen-i-css/">Beth yw'r Gwahaniaeth Rhwng @import a dolen i CSS?</a></h3>
<div class="amp-related-meta">
Dylunio Gwe & Dyfais </div>
</div>
</div>
<div class="amp-related-content">
<a href="https://cy.eyewated.com/beth-yw-css-a-ble-yd-yn-ei-ddefnyddio/">
<amp-img src="https://exse.eyewated.com/pict/4494c19ed3012f92-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img>
</a>
<div class="amp-related-text">
<h3><a href="https://cy.eyewated.com/beth-yw-css-a-ble-yd-yn-ei-ddefnyddio/">Beth yw CSS a Ble Yd Yn Ei Ddefnyddio?</a></h3>
<div class="amp-related-meta">
Dylunio Gwe & Dyfais </div>
</div>
</div>
<div class="amp-related-content">
<div class="amp-related-text">
<h3><a href="https://cy.eyewated.com/sut-i-ddefnyddio-css-i-gosod-uchder-elfen-html-i-100/">Sut i DDEFNYDDIO CSS i Gosod Uchder Elfen HTML i 100%</a></h3>
<div class="amp-related-meta">
Dylunio Gwe & Dyfais </div>
</div>
</div>
<div class="amp-related-content">
<a href="https://cy.eyewated.com/sut-i-ychwanegu-llinellau-mewnol-borderi-mewn-tabl-gyda-css/">
<amp-img src="https://exse.eyewated.com/pict/7f87f6e4dd1c2fa7-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img>
</a>
<div class="amp-related-text">
<h3><a href="https://cy.eyewated.com/sut-i-ychwanegu-llinellau-mewnol-borderi-mewn-tabl-gyda-css/">Sut i Ychwanegu Llinellau Mewnol (Borderi) mewn Tabl Gyda CSS</a></h3>
<div class="amp-related-meta">
Dylunio Gwe & Dyfais </div>
</div>
</div>
</div>
<div class="amp-related-wrapper">
<h2>See Newest</h2>
<div class="amp-related-content">
<a href="https://cy.eyewated.com/jbl-ar-adolygiad-doc-siaradwyr-cam-3p-iphone-a-ipod/">
<amp-img src="https://exse.eyewated.com/pict/4ff16190956533b8-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img>
</a>
<div class="amp-related-text">
<h3><a href="https://cy.eyewated.com/jbl-ar-adolygiad-doc-siaradwyr-cam-3p-iphone-a-ipod/">JBL Ar Adolygiad Doc Siaradwyr Cam 3p iPhone a iPod</a></h3>
<div class="amp-related-meta">
Adolygiadau Cynnyrch </div>
</div>
</div>
<div class="amp-related-content">
<a href="https://cy.eyewated.com/dysgwch-yr-addewid-linux-vgdisplay/">
<amp-img src="https://exse.eyewated.com/pict/4897fea1201b339f-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img>
</a>
<div class="amp-related-text">
<h3><a href="https://cy.eyewated.com/dysgwch-yr-addewid-linux-vgdisplay/">Dysgwch yr Addewid Linux vgdisplay</a></h3>
<div class="amp-related-meta">
Linux </div>
</div>
</div>
<div class="amp-related-content">
<a href="https://cy.eyewated.com/nintendo-ds-lite-a-dsi-cheat-cod-entry/">
<amp-img src="https://exse.eyewated.com/pict/8bc1c2e2d5da2e85-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img>
</a>
<div class="amp-related-text">
<h3><a href="https://cy.eyewated.com/nintendo-ds-lite-a-dsi-cheat-cod-entry/">Nintendo DS, Lite, a DSi Cheat Cod Entry</a></h3>
<div class="amp-related-meta">
Hapchwarae </div>
</div>
</div>
<div class="amp-related-content">
<a href="https://cy.eyewated.com/allwch-chi-defnyddio-facetime-ar-windows/">
<amp-img src="https://exse.eyewated.com/pict/429e47d9bab3386b-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img>
</a>
<div class="amp-related-text">
<h3><a href="https://cy.eyewated.com/allwch-chi-defnyddio-facetime-ar-windows/">Allwch chi Defnyddio FaceTime ar Windows?</a></h3>
<div class="amp-related-meta">
IPhone a iPod </div>
</div>
</div>
<div class="amp-related-content">
<a href="https://cy.eyewated.com/atgyweirio-ac-ail-dynnu-hen-ffotograff-yn-photoshop/">
<amp-img src="https://exse.eyewated.com/pict/3327703412973304-120x86.png" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img>
</a>
<div class="amp-related-text">
<h3><a href="https://cy.eyewated.com/atgyweirio-ac-ail-dynnu-hen-ffotograff-yn-photoshop/">Atgyweirio ac Ail-dynnu Hen Ffotograff yn Photoshop</a></h3>
<div class="amp-related-meta">
Meddalwedd </div>
</div>
</div>
<div class="amp-related-content">
<a href="https://cy.eyewated.com/anrhegion-pc-i-blant/">
<amp-img src="https://exse.eyewated.com/pict/2afea350f9ab36a9-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img>
</a>
<div class="amp-related-text">
<h3><a href="https://cy.eyewated.com/anrhegion-pc-i-blant/">Anrhegion PC i Blant</a></h3>
<div class="amp-related-meta">
Prynu Canllawiau </div>
</div>
</div>
</div>
<div class="amp-related-wrapper">
<h2>Sapid posts</h2>
<div class="amp-related-content">
<a href="https://cy.eyewated.com/rhaglen-llysgennad-nintendo-3ds-yr-hyn-sydd-angen-i-chi-ei-wybod/">
<amp-img src="https://exse.eyewated.com/pict/16c97f22551939b1-120x86.png" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img>
</a>
<div class="amp-related-text">
<h3><a href="https://cy.eyewated.com/rhaglen-llysgennad-nintendo-3ds-yr-hyn-sydd-angen-i-chi-ei-wybod/">Rhaglen Llysgennad Nintendo 3DS: Yr hyn sydd angen i chi ei wybod</a></h3>
<div class="amp-related-meta">
Hapchwarae </div>
</div>
</div>
<div class="amp-related-content">
<a href="https://cy.eyewated.com/sut-i-dod-o-hyd-i-syniadau-cyfrif-parodi-twitter/">
<amp-img src="https://exse.eyewated.com/pict/00ac8d7210233377-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img>
</a>
<div class="amp-related-text">
<h3><a href="https://cy.eyewated.com/sut-i-dod-o-hyd-i-syniadau-cyfrif-parodi-twitter/">Sut i Dod o hyd i Syniadau Cyfrif Parodi Twitter</a></h3>
<div class="amp-related-meta">
Cyfryngau cymdeithasol </div>
</div>
</div>
<div class="amp-related-content">
<a href="https://cy.eyewated.com/perfformiwch-gorsedd-glan-o-os-x-mountain-lion-ar-gychwyn-cychwyn/">
<amp-img src="https://exse.eyewated.com/pict/2dadeb3dcbee3637-120x86.png" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img>
</a>
<div class="amp-related-text">
<h3><a href="https://cy.eyewated.com/perfformiwch-gorsedd-glan-o-os-x-mountain-lion-ar-gychwyn-cychwyn/">Perfformiwch Gorsedd Glân o OS X Mountain Lion ar Gychwyn Cychwyn</a></h3>
<div class="amp-related-meta">
Macs </div>
</div>
</div>
<div class="amp-related-content">
<a href="https://cy.eyewated.com/datblygiad-app-symudol-a-hyrwyddor-app-arferion-gorau/">
<amp-img src="https://exse.eyewated.com/pict/124c12baa9f432d3-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img>
</a>
<div class="amp-related-text">
<h3><a href="https://cy.eyewated.com/datblygiad-app-symudol-a-hyrwyddor-app-arferion-gorau/">Datblygiad App Symudol a Hyrwyddo'r App: Arferion Gorau</a></h3>
<div class="amp-related-meta">
Gwe & Chwilio </div>
</div>
</div>
<div class="amp-related-content">
<a href="https://cy.eyewated.com/technoleg-dolby-vision-ir-cinema-ar-home-theatre/">
<amp-img src="https://exse.eyewated.com/pict/372b735637753360-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img>
</a>
<div class="amp-related-text">
<h3><a href="https://cy.eyewated.com/technoleg-dolby-vision-ir-cinema-ar-home-theatre/">Technoleg Dolby Vision i'r Cinema a'r Home Theatre</a></h3>
<div class="amp-related-meta">
Adolygiadau Cynnyrch </div>
</div>
</div>
<div class="amp-related-content">
<a href="https://cy.eyewated.com/sut-i-ddiogelu-ffeiliau-microsoft-office/">
<amp-img src="https://exse.eyewated.com/pict/3b9f8cc7eac33524-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img>
</a>
<div class="amp-related-text">
<h3><a href="https://cy.eyewated.com/sut-i-ddiogelu-ffeiliau-microsoft-office/">Sut i Ddiogelu Ffeiliau Microsoft Office</a></h3>
<div class="amp-related-meta">
Gwe & Chwilio </div>
</div>
</div>
<div class="amp-related-content">
<a href="https://cy.eyewated.com/acer-aspire-axc-603-ur12/">
<amp-img src="https://exse.eyewated.com/pict/25fb1cec5c053547-120x86.png" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img>
</a>
<div class="amp-related-text">
<h3><a href="https://cy.eyewated.com/acer-aspire-axc-603-ur12/">Acer Aspire AXC-603-UR12</a></h3>
<div class="amp-related-meta">
Adolygiadau Cynnyrch </div>
</div>
</div>
<div class="amp-related-content">
<a href="https://cy.eyewated.com/tango-testun-llais-a-galwadau-fideo-am-ddim/">
<amp-img src="https://exse.eyewated.com/pict/bb83a25f6b99426d-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img>
</a>
<div class="amp-related-text">
<h3><a href="https://cy.eyewated.com/tango-testun-llais-a-galwadau-fideo-am-ddim/">Tango - Testun, Llais a Galwadau Fideo Am Ddim</a></h3>
<div class="amp-related-meta">
E-bost a negeseuon </div>
</div>
</div>
<div class="amp-related-content">
<a href="https://cy.eyewated.com/dos2unix-linux-command-unix-command/">
<amp-img src="https://exse.eyewated.com/pict/b11925d8da3c3d24-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img>
</a>
<div class="amp-related-text">
<h3><a href="https://cy.eyewated.com/dos2unix-linux-command-unix-command/">Dos2unix - Linux Command - Unix Command</a></h3>
<div class="amp-related-meta">
Linux </div>
</div>
</div>
<div class="amp-related-content">
<div class="amp-related-text">
<h3><a href="https://cy.eyewated.com/rhwydweithio-cyfrifiadur-decibel/">Rhwydweithio Cyfrifiadur Decibel</a></h3>
<div class="amp-related-meta">
Rhyngrwyd a Rhwydwaith </div>
</div>
</div>
<div class="amp-related-content">
<a href="https://cy.eyewated.com/sut-a-fyddech-chin-defnyddio-y-shlvl-amrywiol/">
<amp-img src="https://exse.eyewated.com/pict/a21ef0907ea7311e-120x86.png" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img>
</a>
<div class="amp-related-text">
<h3><a href="https://cy.eyewated.com/sut-a-fyddech-chin-defnyddio-y-shlvl-amrywiol/">Sut A Fyddech Chi'n Defnyddio Y $ SHLVL Amrywiol</a></h3>
<div class="amp-related-meta">
Linux </div>
</div>
</div>
<div class="amp-related-content">
<a href="https://cy.eyewated.com/sut-i-gwirio-maint-y-apps-ar-eich-iphone/">
<amp-img src="https://exse.eyewated.com/pict/469fba2d40a234f9-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img>
</a>
<div class="amp-related-text">
<h3><a href="https://cy.eyewated.com/sut-i-gwirio-maint-y-apps-ar-eich-iphone/">Sut i Gwirio Maint y Apps ar Eich iPhone</a></h3>
<div class="amp-related-meta">
IPhone a iPod </div>
</div>
</div>
<div class="amp-related-content">
<a href="https://cy.eyewated.com/yn-olaf-gallwch-nawr-defnyddio-data-a-llais-ar-iphone-verizon/">
<amp-img src="https://exse.eyewated.com/pict/27bbf466aea637ff-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img>
</a>
<div class="amp-related-text">
<h3><a href="https://cy.eyewated.com/yn-olaf-gallwch-nawr-defnyddio-data-a-llais-ar-iphone-verizon/">Yn olaf! Gallwch Nawr Defnyddio Data a Llais ar iPhone Verizon</a></h3>
<div class="amp-related-meta">
IPhone a iPod </div>
</div>
</div>
<div class="amp-related-content">
<a href="https://cy.eyewated.com/sut-i-ddefnyddio-cortana-yn-porwr-microsoft-edge/">
<amp-img src="https://exse.eyewated.com/pict/3c8f23601b93336d-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img>
</a>
<div class="amp-related-text">
<h3><a href="https://cy.eyewated.com/sut-i-ddefnyddio-cortana-yn-porwr-microsoft-edge/">Sut i Ddefnyddio Cortana yn Porwr Microsoft Edge</a></h3>
<div class="amp-related-meta">
Ffenestri </div>
</div>
</div>
<div class="amp-related-content">
<a href="https://cy.eyewated.com/cyfeiriad-ip-preifat/">
<amp-img src="https://exse.eyewated.com/pict/88839331759742bf-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img>
</a>
<div class="amp-related-text">
<h3><a href="https://cy.eyewated.com/cyfeiriad-ip-preifat/">Cyfeiriad IP Preifat</a></h3>
<div class="amp-related-meta">
</div>
</div>
</div>
<div class="amp-related-content">
<a href="https://cy.eyewated.com/pa-ipad-ddylech-chi-prynu/">
<amp-img src="https://exse.eyewated.com/pict/0255a964a77d388e-120x86.jpg" width="120" height="86" layout="responsive" class="amp-related-image"></amp-img>
</a>
<div class="amp-related-text">
<h3><a href="https://cy.eyewated.com/pa-ipad-ddylech-chi-prynu/">Pa iPad Ddylech Chi Prynu?</a></h3>
<div class="amp-related-meta">
Prynu Canllawiau </div>
</div>
</div>
</div></article>
<footer class="amp-wp-footer">
<div class="amp-wp-footer-inner">
<a href="#" class="back-to-top">Back to top</a>
<p class="copyright">
© 2024 cy.eyewated.com </p>
<div class="amp-wp-social-footer">
<a href="#" class="jeg_facebook"><i class="fa fa-facebook"></i> </a><a href="#" class="jeg_twitter"><i class="fa fa-twitter"></i> </a><a href="#" class="jeg_google-plus"><i class="fa fa-google-plus"></i> </a><a href="#" class="jeg_pinterest"><i class="fa fa-pinterest"></i> </a><a href="" class="jeg_rss"><i class="fa fa-rss"></i> </a>
</div>
</div>
</footer>
<div id="statcounter">
<amp-pixel src="https://c.statcounter.com/12022999/0/02d06b5d/1/">
</amp-pixel>
</div>
</body>
</html>
<!-- Dynamic page generated in 1.204 seconds. -->
<!-- Cached page generated by WP-Super-Cache on 2019-10-03 21:52:11 -->
<!-- 0.003 -->