-
先考虑设计图中的文字内容和内容模块之间的关系，重点放在编写html结构和语义化，然后考虑布局和表现形式。
查看全部 -
结构 表现 分离
先编写html结构布局样式，不用管css样式。布局完成之后再考虑css样式。
先不用管样式
查看全部 -
网页原则：先考虑设计图中的文字内容和内容模块之间的关系，重点放在编写html结构和语义化，然后考虑布局和表现形式。
查看全部 -
1.先按结构和语意编写。
2.再进行样式设定。
3.最终减少html 和css的契合度。
查看全部 -
3-3编程挑战
完整代码：
<!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>
<style type="text/css">
body{ margin:0;}
div{background:#460E29;width:700px;padding:20px}
img{width:95px;height:95px;background:url(http://img1.sycdn.imooc.com//5385ac820001905201440133.jpg); padding:1px 20px 37px 30px;margin-right:10px;}
</style>
</head>
<body>
<div><img src="http://img1.sycdn.imooc.com//5385acb000013b0d00950095.jpg" />
<img src="http://img1.sycdn.imooc.com//5385acb000013b0d00950095.jpg" />
<img src="http://img1.sycdn.imooc.com//5385acb000013b0d00950095.jpg" />
<img src="http://img1.sycdn.imooc.com//5385acb000013b0d00950095.jpg" /> </div>
</body>
</html>
查看全部 -
增加样式3
查看全部 -
增加样式2
查看全部 -
增加样式２
查看全部 -
增加样式１
查看全部 -
原始样式２
查看全部 -
原始样式１
查看全部 -
设计思路
结构语义
减少html和css契合度
css样式设计
查看全部 -
先不考虑样式，只考虑内容；
写完结构，再使用css调整。
减少div的使用
查看全部 -
利用margin:-25px 0 50px 0;来移动h6
查看全部 -
文字部分，少用html代码，多用css进行处理
text-indent:100px; 文字后退100px
text-align:right; 文字居右对齐；
line-height:30px; 文字居中对齐；
查看全部
举报