急求一个网页设计作业用div标签和css,做一个主页和分页,简单的就可以...
发布网友
发布时间：2022-04-26 10:39
共3个回答
热心网友
时间：2022-04-06 15:10
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style type="text/css">
/*浏览器默认设置*/
*{
padding: 0;margin: 0;font-size: 12px;font-family: Verdana,Arial,'宋体';
}
a{
text-decoration: none;color: black;
}
a:hover{
text-decoration: underline;
}
img{
border: 1px solid #e7e7e7;
}
li{
list-style-type: none;
}
/*设置显示主窗体*/
.wrap{
width: 1129px;margin: 0 auto;
border-left: 2px solid #e7e7e7;
border-right: 2px solid #e7e7e7;
text-align:left;
}
.content,.head,.footer{
margin-left: 12px;
margin-right: 12px;
}
/*设置顶部*/
.head{
text-align: center;
}
.header ul{
width: 1100px;
position: relative;
height: 50px;
}
.header ul li{
position:absolute;
height: 50px;
top:0;
}
.header ul li a{
font-size: 14px;
line-height: 50px;
}
.header ul li a:hover{
border-bottom: 3px solid #cc0000;
text-decoration: none;
}
#nav1{
left: 0;width: 155px;
}
#nav2{
left: 155px;width: 157px;
}
#nav3{
left: 312px;width: 167px;
}
#nav4{
left: 479px;width: 158px;
}
#nav5{
left: 637px;width: 101px;
}
#nav6{
left: 738px;width: 185px;
}
#nav7{
left: 923px;width: 177px;
}
/*设置正文左部*/
.contentleft{
float: left;
width: 180px;
background-color: #f9f9f9;
}
.contentleft h2{
font-size: 20px;
text-align: center;
background-color: #bebebe;
color: white;
font-weight: normal;
height: 50px;
line-height: 50px;
}
#optional{
margin-top: 10px;
}
.contentleft ul li{
padding-left: 5px;
}
.contentleft h3{
margin-top: 10px;
margin-bottom: 5px;
}
/*设置正文右半部分*/
.contentright{
float: left;
width: 720px;
margin: 15px 0 0 10px;
}
/*清除浮动*/
.content{
width: 100%;
overflow: hidden;
}
.htmlcourse{
font-size: 25px;
border-bottom: 1px solid #aaa;
}
/*设置侧边栏*/
.contentprofile{
float: left;
width: 180px;
margin-left: 10px;
overflow: hidden;
}
.chs a:hover{
color: red;
}
.ch,.chs{
border-bottom: 2px solid #aaa;
line-height: 30px;
}
.contentright h2{
line-height: 50px;
}
.names{
background-color: #f88e8b;
color: white;
width: 100px;
height: 30px;
margin-bottom: 10px;
}
.name{
margin-bottom: 10px;
margin-left: 20px;
}
/*设置页底*/
.footer{
background-color: #b6b6b6;
margin-top: 30px;
margin-bottom: 10px;
}
</style>
<title>HTML教程</title>
</head>
<body>
<div class="wrap">
<div class="head">
<head>
<img src="images/header.png" alt="这里是w3school!">
</head>
<nav>
<div class="header">
<ul>
<li id="nav1"><a href="#" title="HTML系列教程">HTML/CSS</a></li>
<li id="nav2"><a href="#" title="浏览器脚本教程">JavaScript</a></li>
<li id="nav3"><a href="#" title="服务器脚本教程">Server Side</a></li>
<li id="nav4"><a href="#" title="ASP.NET教程">ASP.NET</a></li>
<li id="nav5"><a href="#" title="XML系列教程">XML</a></li>
<li id="nav6"><a href="#" title="Web Services 系列教程">Web Services</a></li>
<li id="nav7"><a href="#" title="建站手册">Web Building</a></li>
</ul>
</div>
</nav>
</div>
<div class="content">
<div class="contentleft">
<h2>课程表</h2>
<ul><h3>HTML 基础教程</h3>
<li><a href="#">HTML简介</a></li>
<li><a href="#">HTML基础</a></li>
<li><a href="#">HTML元素</a></li>
</ul>
<ul><h3>HTML 高级教程</h3>
<li><a href="#">HTML头部</a></li>
<li><a href="#">HTML脚本</a></li>
<li><a href="#">HTML实体</a></li>
</ul>
<ul><h3>HTML 媒体</h3>
<li><a href="#">HTML媒体</a></li>
<li><a href="#">HTML对象</a></li>
<li><a href="#">HTML音频</a></li>
</ul>
<ul><h3>HTML XHTML</h3>
<li><a href="#">XHTML简介</a></li>
<li><a href="#">XHTML元素</a></li>
<li><a href="#">XHTML属性</a></li>
</ul>
<ul><h3>HTML5</h3>
<li><a href="#">HTML5教程</a></li>
<li><a href="#">HTML5参考手册</a></li>
</ul>
</li>
<h2 id="optional">选修课</h2>
<ul><h3>建站手册</h3>
<li><a href="#">万维网联盟（W3C）</a></li>
<li><a href="#">浏览器信息</a></li>
<li><a href="#">语义网</a></li>
</ul>
</li>
</div>
<div class="contentright">
<article>
<div class="htmlcourse">HTML教程</div>
<div class="ch">
<input type="button" name="name" class="name" value="上一节">
<input type="button" name="name" class="name" value="下一节">
</div>
<div class="chs">
<h2>HTML 教程</h2>
在本教程中，你将学习如何使用 HTML 来创建站点。<br>
HTML 很容易学习！你会喜欢它的！<br>
<a href="#">现在开始学习HTML</a>
</div>
<div class="chs">
<h2>HTML 实例</h2>
学习 100 个实例！使用我们的编辑器，你可以编辑 HTML，然后点击测试按钮来查看结果。<br>
<input type="button" class="names" name="names" value="亲自来试一试吧">
</div>
<div class="chs">
<h2>HTML 测验</h2>
在 W3School 测试你的 HTML 技能！<br>
<a href="#">开始 HTML 测验！</a>
</div>
<div class="chs">
<h2>HTML 参考手册</h2>
在 W3School，我们提供完整的 HTML 参考手册，其中包括标签、属性、颜色、实体等等。<br>
<a href="#">HTML 4.01 参考手册</a>
</div>
<div class="ch">
<input type="button" name="name" class="name" value="上一节">
<input type="button" name="name" class="name" value="下一节">
</div>
</article>
</div>
<div class="contentprofile">
<img src="./images/profile.png" alt="我是侧边栏">
</div>
</div>
<footer>
<div class="footer">
<p>W3School 提供的内容仅用于培训。我们不保证内容的正确性。通过使用本站内容随之而来的风险与本站无关。W3School 简体中文版的所有内容仅供测试，对任何法律问题及风险不承担任何责任。</p>
<p>当使用本站时，代表您已接受了本站的<a href="#" title="关于使用">使用条款</a>和<a href="#"title="关于隐私">隐私条款</a>。版权所有，保留一切权利。 赞助商：<a href="#" title="上海赢科投资有限公司">上海赢科投资有限公司</a>。 蒙ICP备06004630号</p>
</div>
</footer>
</div>
</body>
</html>追答这我以前做的
热心网友
时间：2022-04-06 16:28
热心网友
时间：2022-04-06 18:02
追答Axure RP 是一个专业的快速原型设计软件，简单好用，你下个试试就知道了
