您的位置：首页 > 其它

南大软院二十一天成神计划

2015-11-24 21:42 274 查看
网页简单布局之结构与表现原则，老师一直强调两者要相互分离，不要让一个去适应另外一个，要能独立存在。老师运用三个小例子来做讲解，分别是微博用户发言信息，电话号码布局以及排行榜。

分别从初学者的思想、中级者的思想以及高级开发者思想来教授我们一步一步的简化代码，减少赘述。

下面就是编程代码挑战中自己补充后的代码：

<style type="text/css">

body{ margin:0;}

div{background:#460E29;width:700px;padding:20px}

img{width:95px;height:95px;background:url(http://img.mukewang.com/5385ac820001905201440133.jpg);

padding:1px 20px 37px 30px;margin-right:10px;}

</style>

</head>

<body>

<div>

<img src="http://img.mukewang.com/5385acb000013b0d00950095.jpg" />

<img src="http://img.mukewang.com/5385acb000013b0d00950095.jpg" />

<img src="http://img.mukewang.com/5385acb000013b0d00950095.jpg" />

<img src="http://img.mukewang.com/5385acb000013b0d00950095.jpg" />

</div>

</body>

关于网页换肤就是同样的HTML，但是用不同的CSS样式表，就如同我们QQ的主题，无论你换各种主题，功能依旧不变，主题的风格样式就可以类比成我们QQ的主题，CSS样式表为了方便引用，我们可以单独写几个不同的外部样式表，就可以达到我们想要的效果，根据需求来引用。

CSS Sprite雪碧图主要应用于导航一类或者登录框的实现，运用雪碧图可以减少image标签的使用以及请求服务器的次数，比如淘宝的首页边栏，如果使用雪碧图需要具备几个条件：

1、静态图片，不随用户信息变化而变化。

2、小图片，容量较小（2k——5k）

3、适用于加载量较大的小图片拼接出的东

注意：大图不建议拼成雪碧图，因为会适得其反，不仅不会减少速度，反而会加大工作量，增加对服务器请求的次数，因为我们使用雪碧图想达到的效果是减少http请求数量，加速内容显示。

在使用ul标签时，如果想要去除前面的点，需要使用list-style:none，同时height与line-height也要设置同样的像素，为了达到文字垂直居中的效果。

今天暂时就这些咯~明天继续努力咯~


内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航