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

来源：互联网发布：拓牛网络是培训机构吗编辑：程序博客网时间：2024/04/29 03:59

文西马龙：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文档整理_目录