怎么将网页设置成横向的啊？
1、用Dreamweaver新建一个HTML文件。
2、修改title为html+css实现横向导航。
3、新建一个div id为“a”，添加ul li标签。
4、在li中添加自己想要的文字 并调整好文字间距,按F12预览。
5、首先去掉字体前面的小黑点。
6、接下来，使文字横向排列，设置代码如下，给li设置左浮动效果。
7、按F12预览，效果如下。
这是我写的一个导航，你自己看吧。li并列应该定义其float属性为left。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 40 Transitional//EN">
<HTML>
<HEAD>
<TITLE> menu </TITLE>
</HEAD>
<style>
body{
padding-top:200px;
text-align:center;
font-size:13px;
}
#content{
margin:0 auto;
text-align:left;
width:720px;
background:orange;
background-color:black;
}
ul{
margin-top:1px;
list-style:none;
}
#father li{
float:left;
position:relative;
margin-right:10px;
width:120px;
text-align:center;
border:1px solid black;
border-bottom:none;
}
#father li a:link,#father li a:visited{
line-height:30px;
color:darkred;
font-weight:bold;
}
#father li ul {
float:none;
margin-right:0px;
padding:0;
color:none;
width:90px;
background-color:orange;
border:none;
}
child{
position:absolute ;
top:29px;
right:0px;
display:none;
}
#father li ul li a:link,#father li ul li a:visited{
margin:1px;
color:blue;
text-decoration:none;
font-weight:normal;
line-height:20px;
}
#father li ul li a:hover{
background-color:white;
}
</style>
<script>
function showMenu(emt,id1,id2){
documentgetElementById(id1)styletextDecoration = "none";
documentgetElementById(id1)stylecolor = "white";
documentgetElementById(id2)styledisplay = "block";
emtstylebackgroundColor = "orange";
emtstyleborderColor = "white";
}
function hiddenMenu(emt,id1,id2){
documentgetElementById(id1)styletextDecoration = "underline";
documentgetElementById(id1)stylecolor = "darkred";
documentgetElementById(id2)styledisplay = "none";
emtstylebackgroundColor = "black";
emtstyleborderColor = "black";
}
</script>
<BODY>
</table>
<div id="content">
<ul id="father">
<li onmouseover="showMenu(this,'a1','ul1')" onmouseout="hiddenMenu(this,'a1','ul1')">
<a id="a1" href="#">主页</a>
<ul id="ul1" class="child">
<li><a href="#">文字测试</a></li>
<li><a href="#">使用中文字符</a></li>
<li><a href="#">你看可以吗</a></li>
<li><a href="#">Item 4</a></li>
<li><a href="#">Item 5</a></li>
<li><a href="#">Item 6</a></li>
<li><a href="#">Item 7</a></li>
</ul>
</li>
<li onmouseover="showMenu(this,'a2','ul2')" onmouseout="hiddenMenu(this,'a2','ul2')">
<a id="a2" href="#">程序设计</a>
<ul id="ul2" class="child">
<li><a href="#">JAVA</a></li>
<li><a href="#">C/C++</a></li>
<li><a href="#">C#NET</a></li>
<li><a href="#">游戏开发</a></li>
<li><a href="#">汇编</a></li>
</ul>
</li>
<li onmouseover="showMenu(this,'a3','ul3')" onmouseout="hiddenMenu(this,'a3','ul3')">
<a id="a3" href="#">网页技术</a>
<ul id="ul3" class="child">
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">JavaScript</a></li>
<li><a href="#">XML</a></li>
<li><a href="#">ASP</a></li>
<li><a href="#">JSP</a></li>
<li><a href="#">PHP</a></li>
<li><a href="#">Perl</a></li>
</ul>
</li>
<li onmouseover="showMenu(this,'a4','ul4')" onmouseout="hiddenMenu(this,'a4','ul4')">
<a id="a4" href="#">动态网页</a>
<ul id="ul4" class="child">
<li><a href="#">ASP</a></li>
<li><a href="#">JSP</a></li>
<li><a href="#">PHP</a></li>
<li><a href="#">Perl</a></li>
</ul>
</li>
<li onmouseover="showMenu(this,'a5','ul5')" onmouseout="hiddenMenu(this,'a5','ul5')">
<a id="a5" href="#">关于我</a>
<ul id="ul5" class="child">
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Item 3</a></li>
<li><a href="#">Item 4</a></li>
<li><a href="#">Item 5</a></li>
</ul>
</li>
</ul>
<div>
</BODY>
</HTML>
怎么将网页设置成横向的啊？
本文2023-11-21 17:01:08发表“资讯”栏目。
本文链接：https://www.lezaizhuan.com/article/523574.html
相关文章
