CSS--例子：小型工作室

朱雀 2021-09-27 05:32 287阅读 0赞

*  排版分析
 *  CSS代码
 *  HTML代码
 *  效果展示
    
     *  主界面效果
     *  从界面效果
 *  end

# 排版分析 #

![这里写图片描述][70]

# CSS代码 #

body{ font-family:Arial, Helvetica, sans-serif; font-size:12px; margin:0px; padding:0px; text-align:center; /* 居中且宽度固定的版式，参考11.2节 */ background-color:#000000; }
    #container{ position:relative; margin:1px auto 0px auto; width:760px; text-align:left; background-color:#FFFFFF; border-left:1px dashed #AAAAAA; /* 添加虚线框 */ border-right:1px dashed #AAAAAA; border-bottom:1px dashed #AAAAAA; }
    #globallink{ width:760px; height:163px; /* 设置块的尺寸，高度大于banner图片 */ margin:0px; padding:0px; /* 再设置背景颜色，作为导航菜单的背景色 */ background: #daeeff url(banner.jpg) no-repeat top; font-size:12px; }
    #globallink ul{ list-style-type:none; position:absolute; /* 绝对定位 */ width:417px; left:400px; top:145px; /* 具体位置 */ padding:0px; margin:0px; }
    #globallink li{ float:left; text-align:center; padding:0px 6px 0px 6px; /* 链接之间的距离 */ }
    #globallink a:link, #globallink a:visited{ color:#004a87; text-decoration:none; }
    #globallink a:hover{ color:#FFFFFF; text-decoration:underline; }
    
    #parameter{ position:relative; float:left; width:210px; padding:0px; margin:0px; }
    #parameter div#author{ text-align:center; background:url(mypic_bg.gif) no-repeat; /* 设置一个背景图片 */ margin-top:5px; }
    div#author p{ margin:0px 10px 0px 10px; padding:3px 0px 3px 0px; border-bottom:1px dashed #999999; border-top:1px dashed #999999; }
    div#author p.mypic{ border:none; padding:15px 0px 0px 0px; margin:0px 0px 8px 0px; }
    div#author p.mypic img{ border:1px solid #444444; padding:2px; margin:0px; }
    #parameter div{ clear:both; margin-top:25px; position:relative; }
    #parameter div h4{ /* 统一设置 */ background:url(leftbg.jpg) no-repeat; font-size:12px; padding: 6px 0px 5px 27px; margin:0px; }
    #parameter div ul{ list-style:none; margin:5px 15px 0px 15px; padding:0px; }
    #parameter div ul li{ padding:2px 3px 2px 15px; background:url(icon1.gif) no-repeat 8px 7px; border-bottom:1px dashed #999999; /* 虚线作为下划线 */ }
    #parameter br{ display:none; }
    #parameter div ul li a:link, #parameter div ul li a:visited{ color:#000000; text-decoration:none; }
    #parameter div ul li a:hover{ color:#008cff; text-decoration:underline; }
    div#llinks ul{ /* 单独设置该项目列表 */ list-style:none; padding:0px; margin:5px 5px 0px 25px; }
    div#llinks ul li{ float:left; /* 显示为同一行 */ width:80px; /* 指定每一项的宽度 */ background:none; padding:0px; border:none; }
    div#lcategory{ position:relative; top:10px; margin-bottom:35px; }
    
    #main{ float:left; position:relative; font-size:12px; margin:0px 20px 5px 20px; width:510px; }
    #main div{ position:relative; margin:20px 0px 30px 0px; }
    #main div h3{ font-size:15px; margin:0px; padding:0px 0px 3px 0px; border-bottom:1px dotted #999999; /* 下划淡色虚线 */ }
    #main div h3 a:link, #main div h3 a:visited{ color:#662900; text-decoration:none; }
    #main div h3 a:hover{ color:#0072ff; }
    #main p.author{ margin:0px; text-align:right; color:#888888; padding:2px 5px 2px 0px; }
    #main p.content{ margin:0px; padding:10px 0px 10px 0px; }
    #footer{ clear:both; /* 消除float的影响，排版相关的章节已经大量涉及 */ text-align:center; background-color:#daeeff; margin:0px; padding:0px; color:#004a87; }
    #footer p{ margin:0px; padding:2px; }

# HTML代码 #

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
    <head>
    <title>我的博客</title>
    <link href="16.css" type="text/css" rel="stylesheet">
       </head>
    <body>
    <div id="container">
        <div id="globallink">
            <ul>
                <li><a href="#">个人首页</a></li>
                <li><a href="#">控制面板</a></li>
                <li><a href="#">我的文章</a></li>
                <li><a href="#">我的相册</a></li>
                <li><a href="#">我的圈子</a></li>
                <li><a href="#">给我留言</a></li>
            </ul>
            <br>
        </div>
        <div id="parameter">
            <div id="author">
                <p class="mypic"><img src="mypic.jpg"></p>
                <p>艾萨克的BLOG</p>
            </div>
            <div id="llinks">
                <h4 class="links"><span>活力地带</span></h4>
                <ul>
                    <li><img src="1.gif"> <a href="#">个人首页</a></li>
                    <li><img src="3.gif"> <a href="#">控制面板</a></li>
                    <li><img src="4.gif"> <a href="#">我的文章</a></li>
                    <li><img src="5.gif"> <a href="#">我的相册</a></li>
                    <li><img src="6.gif"> <a href="#">我的圈子</a></li>
                    <li><img src="2.gif"> <a href="#">给我留言</a></li>
                </ul>
                <br>
            </div>
            <div id="lcategory">
                <h4 class="category"><span>我的文章分类</span></h4>
                <ul>
                    <li><a href="#">个人随笔</a></li>
                    <li><a href="#">美术设计</a></li>
                    <li><a href="#">CSS样式风格</a></li>
                    <li><a href="#">Ajax学习心得</a></li>
                    <li><a href="#">新疆甘肃游记</a></li>
                    <li><a href="#">学生节</a></li>
                    <li><a href="#">职业生涯</a></li>
                </ul>
                <br>
            </div>
            <div id="llatest">
                <h4 class="latest"><span>最新文章列表</span></h4>
                <ul>
                    <li><a href="#">学生节(6)_释放天性</a></li>
                    <li><a href="#">学生节(5)_beep的越洋电话</a></li>
                    <li><a href="#">学生节(4)_主持人选拔</a></li>
                    <li><a href="#">学生节(3)_十届的电子人</a></li>
                    <li><a href="#">学生节(2)_5秒定律永不倒</a></li>
                    <li><a href="#">学生节(1)_综述</a></li>
                    <li><a href="#">吃住在新疆</a></li>
                    <li><a href="#">Ajax实现可拖动的页面</a></li>
                    <li><a href="#">巧学巧用Flash</a></li>
                </ul>
                <br>
            </div>
            <div id="lcomment">
                <h4 class="comment"><span>最新评论</span></h4>
                <ul>
                    <li><a href="#">[isaac] 关于beep的话题</a></li>
                    <li><a href="#">[tastestory] 哈哈</a></li>
                    <li><a href="#">[moonbow] 还是露天，真的吗？</li>
                    <li><a href="#">[isaac] zan :)</a></li>
                    <li><a href="#">[bingri] 来总导这里挖坑~~</a></li>
                    <li><a href="#">[inming] 博士加油</a></li>
                </ul>
                <br>
            </div>
            <div id="lfriend">
                <h4 class="friend"><span>友情链接</span></h4>
                <ul>
                    <li><a href="#">闪客帝国</a></li>
                    <li><a href="#">自由空间</a></li>
                    <li><a href="#">一起走到</a></li>
                    <li><a href="#">从明天起</a></li>
                    <li><a href="#">纸飞机</a></li>
                    <li><a href="#">下一站</a></li>
                </ul>
                <br>
            </div>
        </div>
        <div id="main">
            <div class="article">
                <h3><a href="#">学生节(6)_释放天性</a></h3>
                <p class="author">isaac @ 2006-12-20 16:54:07</p>
                <p class="content">
    释放天性是一件很有意思的事情，也是电子系节目本身能够nb的很重要原因。主持人、各个节目都要求演员释放天性，下面是一些筹备组常用的手段 :)<br>
    <br>
    1. 一个人在阳台对着外面大声喊“爸爸妈妈我爱你们”等等，演员一般到最后就会喊一些自己的东西了 :)<br>
    2. 男女主角相隔50米，在人多的地方大声呼喊“你能听见吗”“听见了吗？”“我爱你”<br>
    3. 还是露天，男女主角站在一个小圈子里面，对视3分钟。然后互相说50遍“我爱你”<br>
    4. 男1号跟男2号拥抱在一起说台词，直到想吐都吐不出（《包青天》里面ws和wc据说就在小树林抱了好几个晚上...上台的表演彻底放开了）<br>
    5. 每天晚上11点后露天排练，放开声音<br>
    ……<br>
    <br>
    每次学生节，导演组的导演们都要求入选的各个剧组进行这方面的强化训练，为的就是在台上能更好的表现自己，入戏。这些训练事后的影响自然也是多方面的 :)<br>
    <br>
    1. 很多演员学生节以后性格更开朗了，参加各种面试更加放得开了<br>
    2. 男生越来越ws了..... 胆子越来越大<br>
    3. 女生嘛，更加活泼了，朋友圈子扩大了<br>
    4. 很多男女主角真的成了一对，娃哈哈~~~<br>
    ……<br>
    <br>
    释放天性，魅力无穷!!
                </p>
                <p class="show">浏览[1051] | 评论[5]</p>
            </div>
            <div class="article">
                <h3><a href="#">学生节(5)_beep的越洋电话</a></h3>
                <p class="author">isaac @ 2006-12-14 10:48:16</p>
                <p class="content">
    12月7日下午，我正在后台跟主持人们闲聊的时候，接到了来自美国伯克利的电话。beep，8字班师兄，胖乎乎圆溜溜的，当年的山西高考状元，考前一个礼拜从零开始学习就拿到微所NO.1，中文名字看上去跟linear是两口子，硕士阶段修完了所有社会学课程去了伯克利读社会学，自由空间前任站长，站规的起草者，电子系nb的学生节创始人之一，在今年学生节开始前从遥远的大洋彼岸给我送来了第一时间的祝福。<br>
    <br>
    电话的信号并不是特别清晰，但他雌性的声音很快穿透了整个后台 :) “哎呀呀，你们今年真是辛苦啊，我看不到啦...”，我也嘻嘻笑笑的跟他扯皮了一阵，当时的确让我很惊喜。想想电子的学生节能走到今天，linear和beep应该算头功，当年《一起走到》就是他们首先以非学生会的身份介入的，元老级人物啊。<br>
    <br>
    现在仔细想想，筹备组这票人还真是个个nb啊，学生节作为业余爱好，平时都忙着各自的学习、事业、生活，每年到这个时候大家都聚到一起，为了这温暖、忙碌的舞台而奋斗。或许就像reconzansp说的，电子学生节nb这么多年了，平时自己都在外面忙碌，每到这个时候，就是希望跟大伙见见，聊聊天，所以一块努力做好这台晚会。<br>
    <br>
    也许将来，当我作为观众在台下，看着周围一个个熟悉而又渐渐苍老的面孔，兴奋、喜悦、怀念......
                </p>
                <p class="show">浏览[750] | 评论[2]</p>
            </div>
            <div class="article">
                <h3><a href="#">学生节(4)_主持人选拔</a></h3>
                <p class="author">isaac @ 2006-12-12 02:03:12</p>
                <p class="content">
    今年主持人上面，筹备组第一次采用了大规模的全系海选，报名的人数多达50+，远远超出了我们的估计。因此在一审的第二天，我们安排了整整一天的时间进行评选，每人10分钟左右。事实证明，这样的选拔是正确的，应该继续发扬下去。<br>
    <br>
    首先从海选主持的第一题，我们收集到了很多观众对于电子学生节的反馈。其次从报名表上参选者的个人信息，我们了解到了很多电子的相关人才，太牛了，电子系真的人才辈出，这话一点都不假。再次通过选拔主持人，相当于让更多观众提前参与到学生节中，同时在系里渲染了学生节的氛围。<br>
    <br>
    我记得当时讨论的时候，我们首先一致咬定今年用4位，在具体人选上则产生了较大的分歧，经过大家1个多小时的投票、辩论、再投票、再辩论，最终才确定下来。shanghen、venessawj、winidea、clshlmch在跟我和ttt单独面谈后最终成为了今年的主持。然后就是设计各个主持段子，主要思路就是绝对不能报幕，必须融入到节目中。4个人很容易做简单的小话剧，ttt挑起了文案组的大梁，加上AR的全心投入，今年的主持得到了观众的认可，至少目前我看到的网上评论是这样的，不光是stage和特快上的，一些班板，就是那些网友认为大多数人不会关心，可以畅所欲言的版面也有类似的赞扬~~，让我很欣慰，估计ttt比我更乐，呵呵。<br>
    <br>
    在今年的主持段子中，我个人很喜欢蒲公英前面... <br>
    ......
                </p>
                <p class="show">浏览[879] | 评论[0]</p>
            </div>
            <div class="article">
                <h3><a href="#">学生节(3)_十届电子人</a></h3>
                <p class="author">isaac @ 2006-11-26 02:21:56</p>
                <p class="content">
    今天三审，偶然听ss数了一下在场的评委，一共有十届的人。筹备组的电子系从7字班到现在的6字班都有人，真是壮观又令人感慨。<br>
    <br>
    7字班：qiangwei<br>
    8字班：ss、linear...<br>
    9字班：ArthurRivers、MeggieRivers...<br>
    0字班：fudinan、reconzansp...<br>
    1字班：isaac、whaler...<br>
    2字班：girlwing、warmer、tuonene...<br>
    3字班：主席、tritri...<br>
    4字班：shanghen、venessawj、文艺部无数小弟...<br>
    5字班：文艺部无数小弟、liwei...<br>
    6字班：liyao<br>
    <br>
    目前时间非常的紧，真不知道这种电子的文化能否代代相传。
                </p>
                <p class="show">浏览[1073] | 评论[4]</p>
            </div>
        </div>
        <div id="footer">
            <p>更新时间: 2007-06-24 23:17:07 ©All Rights Reserved </p>
        </div>
    </div>
    </body>
    </html>

# 效果展示 #

## 主界面效果 ##

![这里写图片描述][70 1]

## 从界面效果 ##

![这里写图片描述][70 2]

# end #

谢谢您的阅读！

[70]: /images/20210923/4df559263697464c93a606ecc52976e7.png
[70 1]: /images/20210923/9afa91f6f30f4ba6b21df4f142cf6775.png
[70 2]: /images/20210923/1091455d75fb42bfb48f11e0a0d9c746.png