Html+css写企业及⽹页头部前端⾃学day1-笔记css鼠标点击样式
HTML 知识点
<link rel="stylesheet" type="text/css"  href="css/main.css">
写⼊css⽂件 指定关系/类型/位置
<script src="js/setHomeSetFav.js" type="text/javascript" charset="gb2312">
</script>
写⼊Javascript⽂件 ⽂件名/类型/字符集（防乱码）
<li><a href="#" onClick="AddFavorite(window.location,document.title)">我的推荐</a></li>
<li><a href="#" onClick="SetHome(window.location)">关注我们</a></li>
空连接，⿏标点击之后为Javascript内定义效果
css知识点
.
top
{
width: 100%;
height: 27px;
background: url("../images/top_bg.jpg") repeat-x;
}
repeat-x为x轴重复
.top_content
{
width: 1000px;
margin:0 auto;
}
margin：0 auto设置对象上下间距为0，左右⾃动
.top_content a:link,.top_content a:visited
{
color: aqua;
text-decoration: none;
}
链接静态样式
.top_content a:hover,.top_content a:active
{
color: burlywood;
text-decoration: none;
}
链接滑过和点击样式
HTML代码
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css"  href="css/main.css">
<script src="js/setHomeSetFav.js" type="text/javascript" charset="gb2312">
</script>
</head>
<body>
<div class="top">
<div class="top_content">
<ul>
<li><a href="#">我的收藏</a></li>
<li><a href="#" onClick="AddFavorite(window.location,document.title)">我的推荐</a></li>    <li><a href="#" onClick="SetHome(window.location)">关注我们</a></li>
</ul>
</div>
</div>
</body>
</html>
css代码
/* CSS Document */
*
{
margin: 0;
padding: 0;
font-size: 12px;
}
body
{
background-color: cornflowerblue;
}
.top
{
width: 100%;
height: 27px;
background: url("../images/top_bg.jpg") repeat-x; }
.top_content
{
width: 1000px;
margin:0 auto;
}
.top_content li
{
float: right;
list-style-image: url("../images/li_bg.gif");
width: 70px;
line-height: 27px;
}
.top_content a:link,.top_content a:visited
{
color: aqua;
text-decoration: none;
}
.top_content a:hover,.top_content a:active
{
color: burlywood;
text-decoration: none;
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。