您的位置：首页 > Web前端 > CSS

韩顺平_php从入门到精通_视频教程_第16讲_div-css作业评讲②_学习笔记_源代码图解_PPT文档整理

2012-11-15 09:54 1491 查看

文西马龙：http://blog.csdn.net/wenximalong/

案列一

home1.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<link rel="stylesheet" type="text/css" href="home1.css" />
<title>作业1</title>
</head>
<body>
<div class="div1">
<ul class="faceul">
<li><img src="m4.jpg" /></li>
</ul>
</div>
</body>
</html>

home1.css

.div1{
width: 500px;
height: 300px;
border: 1px solid red;
}

.faceul{
width: 200px;
height: 200px;
border: 1px solid blue;
margin-left: 10px;
padding-left: 10px;
}

.faceul img{
margin-top: 10px;
margin-left: 10px;
border: 1px solid black;
}

.faceul li{
list-style-type: none;
}

案例二

分析思路：

建议：具体的写页面顺序

1.先写html搞定页面内容

2.写css文件来控制样式

浏览器兼容问题

可以参考：别具光芒 div+css讲解兼容问题
http://www.verycd.com/topics/2845472/
除非是专业前端开发，不需要深入研究，但是要知道

半成品（将在第17讲完成）

素材

==========

home2.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<link rel="stylesheet" type="text/css" href="home2.css" />
<title>home2</title>
</head>
<body>
<!--这是最外层的div-->
<div class="div1">
<!--这是第一个单元-->
<div class="div2">
<span class="span1"><font class="font1">优酷牛人</font><a href="#">更多牛人</a></span>
<ul class="faceul">
<li><img src="m4.jpg" /><br/><a href="#">小猫</a></li>
<li><img src="m4.jpg" /><br/><a href="#">小猫</a></li>
<li><img src="m4.jpg" /><br/><a href="#">小猫</a></li>
</ul>
</div>
</div>
</body>
</html>

home2.css

body{
margin: 0 auto;
width: 800px;
height: 800px;
border: 1px solid blue;
font-size: 12px;
}
.div1{
width: 300px;
height: 250px;
border: 1px solid silver;
}
/*定义几个常用的字体样式*/
.font1{
font-weight: bold;
font-size:20px;
margin: 2px 0 0 2px;
}
.span1{
background-color: pink;
display: block;
}
.span1 a{
margin-top: 4px;
float: right;
}

/*盒子的外观样式*/

.faceul{
width: 300px;
height: 65px;
background-color: green;
list-style-type: none;
/*ul和li间距*/
padding: 0;
}
.faceul li{
float: left;
}

.faceul li img{
width: 60px;
height: 60px;
}

韩顺平_php从入门到精通_视频教程_学习笔记_源代码图解_PPT文档整理_目录

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航