HTML與CSS實戰
阿新 • • 發佈：2018-12-23
看完了《Head first HTML and CSS》總覺的要做點東西才算學完，就看了十八哥的實戰視訊簡單地模仿了一個網站。做個總結。
實戰結果
HTML程式碼
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>謝斌實戰</title>
<link rel="stylesheet" type="text/css" href="image/reset.css">
<link CSS程式碼
.clr {
clear:both;
width:0px;
height: 0px;
}
#container{
margin:0 auto;
width:1002px;
}
#header{
height:128px;
background: gray url(top_bg.jpg);
background-repeat:no-repeat;
}
#nav li {
width:90px;
margin-right: 1px;
float:left;
}
#nav a {
font-size:16px;
line-height: 37px;
font-family:'微軟雅黑';
color:#363636;
display:block;
width:90px;
height:37px;
text-align:center;
}
#nav a:hover{
color:white;
background: url(nav_on.gif);
}
#banner{
margin: 6px 0;
}
#main{
}
#lside{
height:482px;
width:694px;
border: 1px solid #EEE;
border-top:none;
/*background:blue;*/
float:left;
}
.subtitle{
height:37px;
background:gray url(index_main_top_bg.gif);
}
.subtitle img{
margin:5px 0px 0px 10px;
float: left;
}
.subtitle h1{
float:left;
margin-left:10px;
font-size:16px;
line-height: 37px;
font-family:'Microsoft Yahei',SimHei;
}
.subtitle a{
font-size:12px;
line-height: 37px;
color:gray;
float:right;
}
.four{
width:326px;
height:200px;
background:#EEEEEE;
margin:10px;
float:left;
}
.four img{
float:left;
margin-left:10px;
padding:6px;
background:white;
}
.four ul{
float:left;
margin-left:10px;
}
.four li{
background: url(service_intro_bg.gif) no-repeat;
padding-left:10px;
height:20px;
}
.four a{
color:gray;
}
.four a:visited{
color:gray;
}
.four a:hover{
color:orange;
}
.four h2{
margin:6px 0px 6px 10px;
font-size:16px;
font-family:'Microsoft Yahei',SimHei;
}
#rside{
height:482px;
width:294px;
float:right;
}
#art{
background:#EEE;
margin-top:1px;
padding-top:10px;
}
#art a{
display: block;
line-height: 29px;
height:29px;
/*padding-top:5px;*/
padding-left: 30px;
background: url(article_head.gif) no-repeat;
}
#art a:hover{
background: url(article_on_bg.gif);
}
#contact {
height:227px;
background: #EEE;
margin-top:1px;
}
#footer{
height:120px;
margin-top:15px
}
#footer ul{
height:40px;
padding-top:15px;
background:#EEE;
}
#footer li{
float:left;
padding-right:20px;
}
#footer address{
font-family:'微軟雅黑',sans-serif;
}
雅虎工程師CSS初始化程式碼
/*css reset code */
/**** 文字大小初始化,使1em=10px *****/
body {
font-size:62.5%;
} /* for IE/Win */
html>body {
font-size:10px;
} /* for everything else */
/*字型邊框等初始化*/
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {
padding: 0;
margin: 0;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
fieldset,img {
border: 0;
}
img {
display:block;
}
address,caption,cite,code,dfn,th,var {
font-weight: normal;
font-style: normal;
}
ol,ul {
list-style: none;
}
caption,th {
text-align: left;
}
h1,h2,h3,h4,h5,h6 {
font-weight: normal;
font-size: 100%;
}
q:before,q:after {
content:'';
}
abbr,acronym { border: 0;
}
a {
text-decoration:none;
}網頁圖片
搜8小時完成HTML網頁開發