div、css入门练习

来源：互联网发布：淘宝网店域名怎么改编辑：程序博客网时间：2024/05/22 09:02

index.html文件

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"> <head>代码比较简单，只是为了以后直接当做模板使用。<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> </head><link rel="stylesheet" type="text/css" href="css/index.css"/> <body> <div class="logo"> <div class="bculogo"><img src="images/bculogo.jpg"width="300" height="96" alt="bculogo" /></div> <div class="ad"><img src="images/ad.jpg"width="690" height="96" alt="ad" /></div> </div> <div class="nav">此处显示 class "nav" 的内容 </div> <div class="fn"> <div class="flash">此处显示 class "flash" 的内容</div> <div class="news">此处显示 class "news" 的内容</div> </div> <div class="pic">此处显示 class "pic" 的内容</div> <div class="nav2">此处显示 class "nav2" 的内容</div> <div class="copy"> <p>CopyRight © 2014-2016 All Rights Reservered . Powered by Woo.</p> <p>版权所有：北京城市学院艺术系 201405040103 梁士伟 </p> </div>index.css文件</html>/*logo*/
.logo {background-color: #C3C;height: 96px;width: 990px; margin:0 auto;}
.bculogo {height: 96px;width: 300px;float: left;}
.ad {float: right;height: 96px;width: 690px;}

/*dav*/
.nav {background-color: #6F6;height: 30px;width: 990px; margin:5px auto;}
.fn {background-color: #F00;height: 320px;width: 990px; margin:5px auto;}

.flash {background-color: #00F;float: left;height: 320px;width: 655px;}
.news {background-color: #906;float: right;height: 320px;width: 320px;}
.pic {background-color: #F66;height: 250px;width: 990px; margin:5px auto;}
.nav2 {background-color: #0FF;height: 40px;width: 990px; margin:5px auto;}
.copy {background-color: #FCF;height: 50px;width: 990px; margin:5px auto; border-top:solid #930 2px; background:url(../images/logo-blue.gif) no-repeat right center; padding-top:12px;}

.copy p { font-size: 12px; line-height: 10px;text-indent: 24px;}

{ margin:0; padding:0;}//css.css用于

url必须为站点文件内的图片；images

0 0