①html的一般格式:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>**********</title>
<style type="text/css">
body{
font-family:verdana,san-serif;
font-size:small;
}
#navigation{
margin:20px;
}
.......
</style>
<script type="text/javascript">
function.......
</script>
</head>
<body>
<ul id="**">
<li>
<a href="#">****</a>
<ul>
<li><a href="*">********</a></li>
</ul>
</li>
</ul>
</body>
</html>
总结来说,就是html大框架包含着head,body两个中框架,head包含style和script两个小框架,body包含页面结构代码;
②js代码:控制下拉子菜单显示
<script type="text/javascript">
function displaySubMenu(li) {
var subMenu = li.getElementsByTagName("ul")[0];
subMenu.style.display = "block";
}
function hideSubMenu(li) {
var subMenu = li.getElementsByTagName("ul")[0];
subMenu.style.display = "none";
}
</script>
然后body中通过<li οnmοuseοver="displaySubMenu(this)" οnmοuseοut="hideSubMenu(this)"> 控制
两个函数:隐藏菜单函数,展示菜单函数。利用getElementsByTagName("ul")返回带有ul标签的对象的数组,然后[0]表示返回这个数组的第一个元素;
注意:getElementsByTagName() 方法返回元素的顺序是它们在文档中的顺序。问题:【0】为什么只对第一个进行操作??????
③<style>...</style>的小结:
<style type="text/css">
* {
padding:0;
margin:0;
}
body {
font-family:verdana, sans-serif;
font-size:small;
}
#navigation, #navigation li ul {
list-style-type:none;
}
#navigation {
margin:20px;
}
#navigation li {
float:left;
text-align:center;
position:relative;
}
#navigation li a:link, #navigation li a:visited {
display:block;
text-decoration:none;
color:#000;
width:120px;
height:40px;
line-height:40px;
border:1px solid #fff;
border-width:1px 1px 0 0;
background:#c5dbf2;
padding-left:10px;
}
#navigation li a:hover {
color:#fff;
background:#2687eb;
}
#navigation li ul li a:hover {
color:#fff;
background:#6b839c;
}
#navigation li ul {
display:none;
position:absolute;
top:40px;
left:0;
margin-top:1px;
width:120px;
}
#navigation li ul li ul {
display:none;
position:absolute;
top:0px;
left:130px;
margin-top:0;
margin-left:1px;
width:120px;
}
</style>
1.
*表示全局声明div的边框外部和元素距离为0。作用就是重置样式(RESET),在不同浏览器中样式一致,较为暴力,可能会降低效率;可以使用Normalize来清除默认样式,这个方法相比之下通用性和可维护性较好。
2.
字体属性包括五种常见属性:字体系列font-family、字体样式/字体风格font-style、字体大小font-size、字体粗细font-weight、字体变量font-variant;
其中字体系列font-family支持按照优先级顺序列出各种要指派使用的字体,当用户系统没有安装首选字体时候,向后搜索,选用下一个指派的字体解析显示。
3.
font-style属性:normal、italic和 oblique。
normal:默认样式。标准的字体。
italic:斜体的字体。
oblique:倾斜的字体。
4.
font-size:
字体大小的度量单位包括很多,常用的有像素px、磅pt、em、百分比。
5.
font-weight:设定字体的浓淡粗细程度,可能的值:normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | inherit
font-variant 属性:小写字母均会被转换为大写
6.
<style>
#a{font-size:20px;}
.b{font-size:20px;}
</style>
<div>无样式</div>
<div id=a>id标识定义方法;id定义用 # 号声明</div>
<div class="b">类别定义方法;类别定义用 . 声明</a>
7.
.navigation li a:link是navigation类下li的a标签未访问的链接样式,故名思义.navigation li a.selected:link表示a标签下selected类的未访问的链接样式。
同理visited表示已访问的链接样式