มาต่อตอนที่ 3.4 กันครับ
/*
Theme Name: 4life SEO
Version: 1.0
Description: Designed by <a href="http://www.arus-group.com">Arus Group</a> (c)
Author: Arusgroup
Author URI: http://www.arus-group.com
Theme URI: http://www.arus-group.com
Tags: minimalistic, simple, widgets, sidebar, elegant
*/
/*----------------------------------------------*/
/* Global Reset */
/*----------------------------------------------*/
body, html { height: 100%; }
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
}
body { line-height: 1; }
ol, ul { list-style: none; }
body {
background:#fff;
font-family:Arial, Helvetica, sans-serif;
font-size:13px;
line-height:1.4em;
min-width:1000px}
ใส่ส่วนนี้ที่ styles.css ครับ
การเปิดด้วย
/*----------------------------------------------*/
/* Global Reset */
/*----------------------------------------------*/
เราจะใว้เวลาเราแก้เเราจะจัดโคทให้เป็นระเบียบนะครับ
ในช่วงนี้ ผมจะใช่เทคนิคแบบเฉพาะตัวนะครับไม่รู้ว่าท่านอื่นจะทำเหมือนผมหรือป่าวครับ
ถ้าใครเป็นcss อยู่แล้วก็สามารถกำหนดค่าลงไปได้เลยครับผม
แต่ถ้าใครไม่เป็นก็ทำตามวิธีผมง่ายสุดครับ
เพราะผมไม่ค่อยแม่นในส่วนของcss ดังนั้นผมจึงใช้ google chrome ในการสร้างครับ
เพราะchromeจะมีส่วนที่สามารถแก้cssให้เราเห็นได้เลยในโมท inspect element เพื่อนๆสามารถใช้โมทนี้ได้โดยการกด คลิกขวาในส่วนที่เราต้องการแล้วกด inspect element นะครับ
เราจะมาเริ่มในส่วนของ header ก่อนครับ
ก่อนอื่นเราก็กำหนดค่าลงไปที่ css ก่อนตามนี้ครับ
/*----------------------------------------------*/
/* header */
/*----------------------------------------------*/
#header {
}
.logo {
}
.logo img {
}
.nav {
}
#header ul {
}
#header li {
}
.nav a {
}
.nav a:active {
}
.nav a:hover {
}
แล้ว save ครับผม ที่นี้กลับมาที่ chrome
เลือกไปที่ #header กดคลิก2 ที่แล้วเราจะสามารถแก้ไขcssได้ครับตามรูป
แต่เจ้าตัวchrome จะมีตัวช่วยเวลาเราพิมพ์จะได้ค่าที่ถูกครับ
Thanks: ฝากรูป หลังจากนั้นเราก็พิมพ์ตามนี้ครับ
Thanks: ฝากรูป อย่าลืมไปทำรูป bg ด้วยนะครับ
แล้วเราก็จะได้ตามนี้ครับ
Thanks: ฝากรูป หลังจากนั้นเราก็กอปโคทที่เราแก้บน chrome มาลงที่ css ของเราตามid และ class ที่แก้ครับ
ก็จะได้code cssแบบนี้ครับ
#header {
position: relative;
margin: 0 auto;
height: 118px;
background: url(img/headerbg.png);
}เราก็มามำไล่ๆกันไปที่ละตัวนะครับ
ตอนนี้ผมจะขอลงรูปแค่ตอน ที่แก้บน chrome นะครับจะได้ไม่ยาวมากทำคล้ายกันหมดครับผม
Thanks: ฝากรูป แก้แล้วกอปไปลง css เรื่อยๆครับ
Thanks: ฝากรูป แล้วเราก็จะได้css ตามนี้มาครับผม
/*----------------------------------------------*/
/* header */
/*----------------------------------------------*/
#header {
position: relative;
margin: 0 auto;
height: 118px;
background: url(img/headerbg.png);
}
.logo {
width: 980px;
margin: 0 auto;
padding-top: 20px;
padding-bottom: 20px;
}
.logo img {
}
.nav {
width: 980px;
margin: 0 auto;
}
#header ul {
padding-top: 6px;
}
#header li:first-child {
background:none;
}
#header li {
float: left;
padding-left: 20px;
padding-right: 20px;
background: url(img/line.png) no-repeat;
padding-top: 8px;
cursor: pointer;
z-index: 100;
height: 15px;
padding-bottom: 18px;
}
.nav a {
font-size: 14px;
text-transform: uppercase;
text-decoration: none;
color: #ffffff;
}
.nav a:active {
font-weight: bold;
}
.nav a:hover {
font-weight: bold;
}
หน้าตาก็ประมาณนี้ครับผม
Thanks: ฝากรูป ไว้มาต่อพรุ่งนี้ครับ ไปเรียนภาษาอังกฤษก่อนครับผม
เพื่อนๆที่ไม่รู้css ก็สามารถดูจากตัวอย่างแล้วลองเอามาแก้ที่ chrome ไห้พอใจได้เลยครับ ใครพอจับทางได้ก็มั่วๆกันได้เลยครับผม
ผมก็มั่วๆเอาจนเป็น
เพิ่มเติมครับเนื่องจากที่ผมออกแบบนั้นมีส่วนของลูกศรด้านล่างของ หน้าที่เรากดเลือกครับ
ผมเลยต้องแก้ในส่วนของhtmlและcss ตามนี้ครับ
Html
<!-- header start -->
<div id="header">
<div class="logo">
<img src="img/logo.png" alt="seo.com">
</div>
<div class="nav">
<ul>
<li><a href="index.html" class="active">home</a></li>
<li><a href="#">about us</a></li>
<li><a href="#">service</a></li>
<li><a href="#">portfolio</a></li>
<li><a href="#">faq's</a></li>
<li><a href="#">contact</a></li>
</ul>
</div>
</div>
<!-- header end -->
Css
/*----------------------------------------------*/
/* header */
/*----------------------------------------------*/
#header {
position: relative;
margin: 0 auto;
height: 118px;
background: url(img/headerbg.png);
}
.logo {
width: 980px;
margin: 0 auto;
padding-top: 20px;
padding-bottom: 20px;
}
.logo img {
}
.nav {
width: 980px;
margin: 0 auto;
}
#header ul {
padding-top: 6px;
}
#header li:first-child {
background:none;
}
#header li {
float: left;
padding-left: 20px;
padding-right: 20px;
background: url(img/line.png) no-repeat;
padding-top: 8px;
cursor: pointer;
z-index: 100;
height: 15px;
padding-bottom: 18px;
}
.nav a {
font-size: 14px;
text-transform: uppercase;
text-decoration: none;
color: #ffffff;
padding-bottom: 20px;
}
.nav a.active {
font-weight: bold;
background: url(img/nav-arrow.png) no-repeat center;
background-position-y: 24px;
padding-bottom: 20px;
}
.nav a:hover {
font-weight: bold;
background: url(img/nav-harrow.png) no-repeat center;
background-position-y: 24px;
padding-bottom: 20px;
}
สังเกตุจะมี background: url(img/nav-arrow.png) no-repeat center เข้ามาเพื่อให้แสดงลูกศรครับ
และ.nav a.active นะครับไม่ใช่ .nav a:active
เราเพิ่มclass เข้าไปครับเพื่อให้แสดงผลตามที่สั่งครับ
พัฒนาเว็บไซต์
