一、导航菜单的实现
1. HTML中的3个新标签:图片标签<img>、超链接标签<a>、列表标签<ul><li>
(1)超链接标签<a>:
成对出现<a></a>、用于从一个页面跳转到另一个页面
<a>最重要的属性href,跳转的连接目标。若没有目标,可用#表示空链接
<a href=“http://www.baidu.com”>去百度</a>
<a href=“#”>哪也不去</a>
(2)列表标签<ul><li>:成对出现<ul></ul>、<li></li>、<ol></ol>
列表分为无序列表和有序列表。无需列表用粗体圆点对项目标记,有序用数字。
例如:
<div id="menu">
<!--ol是有序列表1,2,3 ul为无序列表-->
<ul>
<li><a href="http://www.baidu.com" target="_blank">首页</a></li>
<li><a href="#">相册</a></li>
<li><a href="#">阳光生活</a></li>
<li><a href="#">释放梦想</a></li>
<li><a href="#">留言</a></li>
</ul>
</div>
2. CSS样式中的:背景色、超链接样式、列表样式的写法
a:link - 正常,未访问过的链接
a:visited - 用户已访问过的链接
a:hover - 当用户鼠标放在链接上时
a:active - 链接被点击的那一刻
例如:
#menu{
background-color:#328048;/*用吸管颜色取色器取的*/
height:50px;
}
/*修改id为menu的html标签下面的ul标签的样式*/
#menu ul{
list-style:none;/*去掉点*/
float:right;/*靠右*/
height:50px;
line-height:50px;/*设置行居中*/
width:450px;
}
#menu li{
line-height:50px;/*设置行居中*/
float:left;/*可以使列表竖着变横着*/
margin-left:20px;/*li距离左边那个li的距离*/
}
#menu a{
color:#FFF;/*字体颜色*/
text-decoration:none;/*去掉下划线*/
font-size:16px;/*字体大小*/
font-family:"微软雅黑";/*word中的常见字体*/
}
#menu a:hover{/*当鼠标滑过超链接标签时的样式*/
color:#F60;
}
二、左侧列表的实现
分为三部分,如图:
1. HTML中的标签:块标签div、图片<img>、行内标签<span>、h5标题、列表标签<ul>、<li>
(1)“作者”这个div里是包含图片和文本。
(2)<img />单标签、有src和alt两个属性,
(3)<span></span>成对、没有语义的标签,主要是为了方便对文本添加样式的
例如:
<div id="left">
<!--分为三部分-->
<div id="zuozhe">
<img src="images/baby.jpg" alt="我的照片"/>
<!--文字,span方便对文字的样式修改 一行 不会换行-->
<span>linda zhaoqi</span>
</div>
<div id="huoli">
6个列表项
</div>
<div id="list">
分类和列表div
</div>
</div>
2. CSS样式中的属性
对图片需要设置:
内边距padding:一圈都是15px;
设置绿色的、实线的边border:1px solid #999
例如:
#zuozhe{
padding-top:15px;
padding-left:15px;/*上边和左边留点空*/
text-align:center;/*整个内容水平居中*/
}
#zuozhe img{
border:1px solid #999;/*加边 solid 实线*/
padding:8px;/*边与图片有个空白 类似相框*/
border-radius:20px;/* 圆角 值越大 角越圆*/
}