分类目录

统计信息

  • 日志总数:59篇
  • 评论总数:2条
  • 分类总数:9个
  • 标签总数:51个
  • 友情链接:3个
  • 网站运行:2871天

2018 年十月
« 七    
1234567
891011121314
15161718192021
22232425262728
293031  
现在位置:    首页 > 课堂回顾 > 正文
第六周课程
课堂回顾 评论关闭

这周在测试代码的时候我也犯了一个低级错误,超链接标签少写了一个结束</a>标签,为此我忙活了一下午。代码多了很容易出错,不少检查出来,所以要用专用记事本,彩色字符显示。(文中引用图片,自己按需自行剪裁)

据说一下是一段经典的初始化脚本:

/*字体边框等初始化代码有一位雅虎工程师编写*/
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;
}

首页代码:

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>
<html>
<head>
<title> 数字多媒体技术 </title>
<link rel=”stylesheet” type=”text/css” href=”style.css” />  /*外链接样式表*/
</head>

<body>
<div id=”header”><img src=”logo.png” alt=”logo” ></div>  /*图片标签,src源,alt说明图片*/
<div id=”navgi”>
<ul>                 /*无序列表*/
<li><a href=”http://www.hsnc.cn”>课程首页</a></li>       /*列表项*/
<li><a href=”#”>Html+css</a></li>
<li><a href=”#”>网站套装</a></li>
<li><a href=”#”>Dede+WP</a></li>
<li><a href=”#”>博客研究</a></li>
<li><a href=”#”>联系我们</a></li>
</ul>
</div>
<div id=”main”>
<div id=”mleft”></div>
<div class=”mright”></div>
<div class=”mright”></div>
<div class=”mright”></div>
<div class=”mright”></div>
</div>
<div id=”footer”></div>
</body>
</html>

样式表:

#header {
width:980px;
height:200px;
margin:5px auto;
background:orange url(aaaa.jpg);         /*url统一资源定位符*/
}
#header img {                      /*logo大小168*76*/
padding:62px 780px 62px 32px;
float:left;
}
#navgi {
width:980px;
height:45px;
margin:5px auto;
background:purple url(navBg.jpg) repeat-x;
}
#navgi li {
width:76px;
height:43px;
margin-right:1px;
list-style:none;
background:yellowgreen;
float:left;
}
#navgi li a {
display:block;         /*内联元素转化为块状元素*/
color:green;
width:75px;
height:45px;
background:url(navBg.jpg);
text-decoration:none;
}
#navgi li a:hover {      /*l(ist)v(isited)h(over)a(ctive)一定要按顺序写*/
width:75px;
height:45px;
background:url(nav_on.jpg)
}
#main {
width:980px;
height:400px;
margin:5px auto;
background:pink;
}
#mleft {
width:320px;
height:380px;
margin:10px 6px;
float:left;
background:gray;
}
.mright {
width:310px;
height:180px;
margin:10px 6px;
float:right;
background:gray;
}
#footer {
width:980px;
height:90px;
margin:5px auto;
background:yellow;
}

本文版权归不读书的读书人所有,转载引用请完整注明以下信息:
本文作者:雾忍一望岳
本文地址:第六周课程 | 不读书的读书人

抱歉!评论已关闭.