-
结构和表现分离查看全部
-
学习完成查看全部
-
一开始在头标签设置了overflow：hidden清除了所有浮动，导致demo3,溢出的头像写不出来，，，，看来浮动也不能随意清除查看全部
-
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>编程挑战-图片背景</title> <style type="text/css"> body{ margin:0;} div{background:#460E29;width:700px;padding:20px} img{padding:1px 25px 37px 25px;margin-right:10px;background:url(http://img1.sycdn.imooc.com//5385ac820001905201440133.jpg);} </style> </head> <!-- 存在img标签，并且img标签设置了底图，底图为自动铺满 通过分析得知：img标签本身src的图片尺寸小于底图的图片尺寸，这就导致底图被img本身的图片压住了，而图片是没透明度的 所以底图无法显示。底图是带边框花纹的，边框内部大小跟img图片大小相同，所以我们对img标签设置padding属性，给img内部4个方向填充一个边框花纹的距离，这样底图的边框花纹就能显示出来。我们要知道，填充区域是空白的距离。 盒子模型五个层次的上下关系，从上到下依次为border content&padding background-image background-color margin 由于没有为content设置内边距，所以content覆盖了盒子内部，当设置了padding之后，就露出了部分被遮挡的内容 --> <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>查看全部
-
在网页制作中，面对设计图，网页制作人员一般遵循原则: 先考虑设计图中的文字内容和内容模块之间的关系，重点放在编写html结构和语义化，然后考虑布局和表现形式。查看全部
-
结构和表现分离个人理解： 通过案例感觉 这个不仅仅是指将结构和对应的表现通过html和单独的css样式进行拆分设计这么简单，更重要的是，我们能够通过页面的圆形设计图，提炼出尽可能少的结构和恰当的表现配合使用，从而达到减少访问的资源，优化代码的目的。 一句话，能用表现的，就不要使用不必要的机构。查看全部
-
html：结构 css：表现 javascript：行为查看全部
-
这个。。。不明白啊。。。查看全部
-
所以在做设计图的时候，也可以先单纯的考虑需要搭建的主要内容，以及放的位置，然后再想他的样式风格。力求在不改变html结构的情况下用css调整想要的效果查看全部
-
借鉴： 1、拿到一个网页的设计图时，首先关注网页的文字内容及内容模块之间的关系，把重点放在编写html语义化的代码上，而不要过多的考虑设计图上的布局样式，等html按内容编写完以后再考虑样式如何实现，力求不改变样式结构的基础上完成要求的视觉效果。语义化的主要目的就是让大家直观的认识标签(markup)和属性(attribute)的用途和作用！ 2、利用margin属性来移动设置html结构.margin可以是负值，通过负值，可以使该内容进行移动！实现四个方向的移动。在结构（HTML）和样式（css）中，可以先把内容通过HTML写出来，再利用margin移动位置，实现排版，降低样式和结构的耦合，并且减少代码。 排行榜制作 <div class="rank" <h5>排行榜</h5> <h6>根据网络投票</h6> 设置<h5>背景图标 在之后设置<h6> margin:25px 0 0 50px(根据右外边距移到 排行榜下margin值设置为负值，可使元素往反方向位移）查看全部
-
结构与表现的分离： text-indent：使文本缩进到想要的位置。 只是一行简短文字数字，可以用段落排版的思路来“定位”，即用text-indent：**px 缩进来达到目的。 如果设置一个极小的负值，则可以在浏览器上隐藏文本，却又能被搜索引擎搜索到查看全部
-
初级思路：div.main -> div.left{float:left;} -> img -> div.right{float:left;} -> h3+p 中级思路：div.main -> img{float:left;} -> div.right{float:left;} -> h3+p 高级思路：div.main{margin-left:100px;} -> img{margin-left:-100px;float:left;} -> h3 -> p 高级思路：先按结构和语义编写代码，然后进行css样式设置，减少HTML与CSS契合度（层数越少越好）查看全部
-
在网页制作中，面对设计图，网页制作人员一般遵循原则: 先考虑设计图中的文字内容和内容模块之间的关系，重点放在编写html结构和语义化，然后考虑布局和表现形式。查看全部
-
所以在做设计图的时候，也可以先单纯的考虑需要搭建的主要内容，以及放的位置，然后再想他的样式风格。力求在不改变html结构的情况下用css调整想要的效果查看全部
-
text-indent文本缩进查看全部
举报
0/150
提交
取消