Div+CSS页面开发
页面布局与规划
1.顶部部分：通常包括logo、menu、banner图片
2.内容部分：侧边栏 主体内容
3.底部：一些版权信息
写入div结构与css
html的基本框架如下
<html >
<head>
<meta charset="utf-8" />
<title></title>
<link href="css.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container"><!--页面层容器-->
<div id="Header"><!--页面头部-->
</div>
<div id="PageBody"><!--页面主体-->
<div id="Sidebar"><!--侧边栏-->
</div>
<div id="MainBody"><!--主体内容-->
</div>
</div>
<div id="Footer"><!--页面底部-->
</div>
</div>
</body>
</html>css的基本框架
/*基本信息*/
body {...}
/*页面层容器*/
#container {...}
/*页面头部*/
#Header {...}
/*页面主体*/
#PageBody {...}
/*页面底部*/
#Footer {...}页面顶部导航栏制作
一些难点：
a:link,a:visited {font-size:12px;text-decoration:none;} a:hover {}:这两项分别是控制页面中超链接的样式，表示鼠标经过超链接时的样式。
<li class="menuDiv"></li>:插入这一段代码是可以方便地对菜单选项之间插入一些分隔样式，例如预览图中的竖线
页面主体制作
一些难点：
clear:both，表示清除左、右所有的浮动，在接下来的布局中我们还会用这个属性：clear:left/right。在这里添加 clear:both 是由于之前的 ul、li 元素 设置了浮动，如果不清除则会影响 banner 层位置的设定
一些网页在载入时，由于图片太大，导致布局被撑开，直到页面下载完成才恢复正常，通过添加 overflow:hidden 就可以解决这个问题
代码实现
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link href="css.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div id="container"><!--页面层容器-->
<div id="Header"><!--页面头部-->
<div id="menu">
<ul>
<li><a href="#">首页</a></li>
<li class="menuDiv"></li>
<li><a href="#">博客</a></li>
<li class="menuDiv"></li>
<li><a href="#">设计</a></li>
<li class="menuDiv"></li>
<li><a href="#">相册</a></li>
<li class="menuDiv"></li>
<li><a href="#">论坛</a></li>
<li class="menuDiv"></li>
<li><a href="#">关于</a></li>
<li class="menuDiv"></li>
</ul>
</div>
<div id="banner">
</div>
</div>
<div id="PageBody"><!--页面主题-->
<div id="Sidebar"><!--侧边栏-->
<div id="search">
<input class="input type="text" name=""searcher"/>
<input type="submit" value="站内搜索"/>
</div>
<div id="leftmenu">
<div id="biaoti">>◆ 文章分类</div>
<div>
<ul>
<li>IT技术</li>
<li>个人心情</li>
<li>天下调侃</li>
</ul>
</div>
</div>
<div id="allartcles">
<div id="biaoti">>◆ 最新发表</div>
<div>
<ul>
<li>发表内容</li>
<li>正在学习</li>
<li>页面实训</li>
<li>爱拼敢赢</li>
</ul>
</div>
</div>
</div>
<div id="MainBody"><!--主题内容-->
<div id="title1">
<strong>标题：最新发表</strong>
<div class="news">
<img src="../imgs/img5.png" height="80px">
业界越来越关注DIV+CSS的标准化设计，大到各大门户网
站，小到不计其数的个人网站，在DIV+CSS标准化的影响下网页设计人员已经把这一要求作为行
业标准。那么什么是DIV+CSS标准？DIV+CSS的标准化设计到底有什么好处？
</div>
</div>
<div id="title1">
<strong>标题: 我正在学习DIV+CSS...</strong>
<div class="news">
<!-- </div> -->
<!-- <div id="news"> -->
<img src="../imgs/img3.jpg" height="80px"/>
<!-- </div> -->
<!-- <div id="news"> -->
CSS全称Cascading style Sheets,中文为：“层叠样式
表”，在页面制作时采用css技术，可以有效的对页面的布局、字体、颜色、背景和其它效果实
现更加精确的控制，只要对相应的代码做一些简单的修改，就可以改变同一页面的不同部
分......
<!-- </div> -->
</div>
</div>
</div>
</div>
<div id="Footer"><!--页面底部-->
>Copyright @ 2022-2023 AllRight Reserved <br/>瞧一乔 NetJava.com 版
权所有</
</div>
</div>
</body>
</html>-css.css
/*基本信息*/
body{
font: 12px Tahoma;
margin:0px;
text-align:center;
background: #2882ac;
a:link,a:visited{
font-size:12px;
text-decoration:none;
}
a:hover{}
}
/*页面层容器*/
#container{
width:800px;
margin:10px auto;
background:#fff;
}
/*页面头部*/
#Header{
width:800px;
margin:0 auto;
height:290px;
background:#ffcc99;
}
#menu {padding:20px 20px 0 0}
#menu ul{
float:right;
list-style:none;
margin:0px;
}
#menu ul li{
float:left;
display:block;
line-height:30px;
margin:0 10px;
}
#menu ul li a:link,#menu ul li a:visited{
font-weight:bold;
color:#666;
}
#menu ul li a:hover{}
#banner{
background-image: url("../imgs/banner.jpg");
width:800px;
margin:auto;
height:240px;
border-bottom:5px solid #efefef;
clear:both;
}
.menuDiv{
width:1px;
height:28px;
background:#999;
}
/*页面主题*/
#PageBody{
width:730px;
height:500px;
margin:8px 10px;
}
#Sidebar{
width:200px;
text-align:left;
float:left;
clear:left;
margin-left:0px;
overflow:hidden;
border:1px solid #e00;
height:300px;
}
#MainBody{
width:515px;
text-align:left;
float:left;
margin-left:10px;
overflow:hidden;
border:1px solid #e00;
height:300px;
}
#search{
width:200px;
overflow:hidden;
height:30px;
background:white;
line-height:180px;
padding:5px 0px 5px 5px;
}
#leftmenu{
width:198px;
overflow:hidden;
height:80px;
border:1px solid #2882ac;
margin-top:5px;
}
#leftmenu ul{float:left;line-height:150%;margin:2px;}
#leftmenu ul li{list-style-type:none;padding-left:0px;}
#allartcles{
width:198px;
overflow:hidden;
border:1px solid #2882ac;
margin-top:5px;
height:100px;
}
#allartcles ul{float:left;line-height:150%;margin: 2px;}
#allartcles ul li{list-style-type: none;padding-left: 0px;}
#title1{
border:1px solid #2882ac;
height:110px;
margin-top: 5px;
padding:2px 2px 2px 2px;
}
#biaoti{height:20px;margin:1px;background:#2882ac;line-height: 20px;padding-left: 3px;font-weight: bold;color:#fff;}
.news{
background-color:gray;
border:solid 1px black;
}
.news img {float:left;margin:1px;}
.news p{float:right;}
.input{width: 100px;height:16px;margin:5px;}
/*页面底部*/
#Footer{
width:800px;
margin:0 auto;
height:50px;
background:#efefef;
line-height: 180%;
}页面设计结果
2325
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
