为了账号安全,请及时绑定邮箱和手机立即绑定
首页 手记 [study ]网页简单布局

[study ]网页简单布局

2016.08.07 09:41 1574浏览
[study]网页简单布局

@(学习)[前端技术,css]

图片描述
结构与表现分离,这就是一种编程的思想。我一直搞不懂啥叫做思想,其实这个也就是一个思想。在开发的过程中,先不要去管样式,优先处理html结构化和语义化,这是一个基本的技能。

在制作中页面中,会考虑一个小细节:让主要内容优先加载出来,次要信息可以稍后加载。例如如下的设计中:
图片描述
主要信息是用户名、用户评论,次要信息是发布时间。利用html是从上到下加载的原理,可以将发布时间这个html结构定义在用户评论内容之下。这样页面首先展示出主要内容,是一个优化的小细节。

<!DOCTYPE html>
<html>
<head>
    <title>微博排行</title>
    <style type="text/css">
        /*reset*/
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{margin: 0;padding: 0;list-style: none;font:12px/1.5 "Arial", "sans-serif", "微软雅黑", "宋体", "Tahoma"}
    .container{width: 600px; position: relative; margin-top: 20px;}
    .left{float: left; margin-left: 10px;}
    .left img{padding: 6px; border: 1px solid #ccc;}        /*给图片设置的border,而不是给容器设置的border,否则会多出一块边距*/
    .right{width: 460px; float: right; padding: 10px 20px; background-color: blue; }
    .right p{font-size: 12px; line-height: 25px; text-indent: 2em;}
    .right span{position: absolute; top: 5px; right: 20px;}
    </style>
</head>
<body>
    <div class="container">
        <div class="left">
            <img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="images/head01.jpg">
        </div>
        <div class="right">
            <h6>昵称</h6>
            <p>奥鹏教育是由教育部高等教育司2001年12月批准立项试点,2005年4月正式批准运营的远程教育公共服务体系,为遍布全国的学员提供学历(专升本,高起专)和非学历教育咨询、报名、学习辅导、课程考试、交费等7X24小时学习支持服务400-810-6736。</p>            
            <span>10分钟前</span>          
        </div>
    </div>
</body>
</html>

要想实现网页换服这个功能,首先页面的结构要清晰,即使没有任何的样式,页面的结构也是清晰的,不至于布局混乱。然后通过css设置不同的样式。这里想到了css zen garden这个网站。就是一套换服的网站。


教程来源:

点击查看更多内容
0人点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
Web前端工程师
手记
粉丝
11
获赞与收藏
53

关注TA,一起探索更多经验知识

同主题相似文章浏览排行榜

风间影月说签约讲师

50篇手记,涉及Java、MySQL、Redis、Spring等方向

进入讨论

Tony Bai 说签约讲师

142篇手记,涉及Go、C、Java、Python等方向

进入讨论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消