ហើយខាងក្រោមនេះជាកូដក្នុងបង្កើតវា។
HTML
<!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" />
<meta name="description" content="News Web Developer">
<meta name="keywords" content="HTML,CSS,XML,JavaScript">
<meta name="author" content="Hege Refsnes">
<link rel="stylesheet" type="text/css" href="CSS/Content.css" />
<link rel="stylesheet" type="text/css" href="CSS/Footer.css" />
<link rel="stylesheet" type="text/css" href="CSS/Head.css" />
<link rel="stylesheet" type="text/css" href="CSS/style.css" />
<title>News Web Developer</title>
</head>
<body>
<div id="head">
<div class="និមិត្ដសញ្ញា">
<h1>NWD</h1>
<p>News Web Developer of cambodia</p>
</div><!-- logo place -->
<div class="search">
<form method="post" action="#">
<input type="text" placeholder="Search Engine Optimization" class="input" />
<input type="submit" value="Inter" />
</form>
</div><!-- search -->
<div class="menu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Web Element</a></li>
<li><a href="#">Web Design</a></li>
<li><a href="#">Coding</a></li>
<li><a href="#">Demo code</a></li>
<li><a href="#">Demo code</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div><!-- menu -->
</div><!-- this place for close div id head ------------------>
<div id="content">
<div id="left" class="left">one is good in the world</div>
<div id="right" class="right">hurry all</div>
</div><!-- this place for close div id content ------------------>
<div id="footer"></div><!-- this place for close div id footer ------------------>
</body>
</html>
Header of CSS
@charset "utf-8";
/* CSS Document */
#head{
margin:1px auto;
width:900px;
height:140px;
border:1px solid #999;
background: #a90329; /* Old browsers */
background: -moz-linear-gradient(top, #a90329 0%, #8f0222 44%, #6d0019 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a90329), color-stop(44%,#8f0222), color-stop(100%,#6d0019)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #a90329 0%,#8f0222 44%,#6d0019 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #a90329 0%,#8f0222 44%,#6d0019 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #a90329 0%,#8f0222 44%,#6d0019 100%); /* IE10+ */
background: linear-gradient(to bottom, #a90329 0%,#8f0222 44%,#6d0019 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a90329', endColorstr='#6d0019',GradientType=0 ); /* IE6-9 */
}
#head .និមិត្ដសញ្ញា{
margin-top:10px;
width:300px;
height:auto;
float:left;
border:0px solid #666;
padding:10px;}
#head .និមិត្ដសញ្ញា h1,#head .និមិត្ដសញ្ញា p{
text-align:left;
color:#FFF;
font-size:18px;
}
#head .និមិត្ដសញ្ញា h1 {font-size:60px;
background:url(file:///C|/Users/mom/Desktop/Images%20design/Chrismast%20images/1.jpg);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
}
/* edit code search*/
#head .search{
margin-top:40px;
width:300px;
height:40px;
float:right;
border:0px solid #FFF;
}
#head .search input{width:80px;height:25px;}
#head .search .input{width:180px;height:25px;}
/* edit code menu*/
.menu{
width:auto;
height:auto;
border:0px solid;
float:left;}
.menu ul{
list-style:none;
padding-left:60px;
}
.menu ul li{
position:relative;
float:left;
width:100px;
padding:5px;
border-left:1px solid #FFF;
background:#000;
text-align:center; }
.menu ul li a{
text-decoration:none;
font-family:Georgia, "Times New Roman", Times, serif;
font-size:16px;color:#FFF;
border:0px solid;}
.menu ul li:hover{
background:#900;
}
CSS of Content
@charset "utf-8";
/* CSS Document */
#content{
margin:10px auto;
width:900px;
height:800px;
border:1px solid #999;
}
/*Edit content left*/
.left{
margin:5px 2px 5px 5px;
width:400px;
height:500px;
border:2px solid #000;
float:left;
}
.right{
margin:5px 2px 5px 5px;
width:400px;
height:500px;
border:2px solid #000;
float:right;
}
CSS of Footer
@charset "utf-8";
/* CSS Document */
#footer{
margin:10px auto;
width:900px;
height:150px;
border:1px solid #999;}
CSS of style
@charset "utf-8";
/* CSS Document */
*{margin:0;padding:0;}
0 សូមធ្វើការតំលៃផង:
Post a Comment