zoukankan      html  css  js  c++  java
  • 项目3_相对长度单位以及列表

    1. 相对长度主要分为三种:

        此页面主要内容设置边距,页面的上面和左边是默认留有边距的,当我们不需要间距的时候可以使用margin 0px 0px; 表示上下相对长度0px,左右0px;

        相对长度单位有 :(1)px-表示像素,屏幕分辨率越大,相同像素的网页元素就越小。

                                        (2)%-以父元素的百分比来定义当前文字或其他网页元素的大小,如果没有设定父元素的大小,则相对于浏览器默认字体大小的百分比,一般情况下,浏览器默认字体为16px;

                                        (3)em-表示以父元素字体大小的倍数来定义字体大小;若父元素字体大小为12px,则1em就表示12px,2em就表示12*2为24px。

    参考代码:

    <!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=gb2312" />
    <title>无标题文档</title>
    <style type="text/css">
    body{ background-color:#cccccc; margin:0px 30px; font-size:18px;}
    h1{ font-family: "黑体"; font-weight:bolder; color: #FFFFFF; letter-spacing:1em; background-color:#ff0000; padding:10px;}
    h3{ font-weight:bolder; color:#FF0000;}
    h4{ text-align:right; color: #FFFFFF; font-family: "华文新魏"; font-style:oblique;}
    .zw{ font-family:"宋体";}
    </style>
    </head>

    <body>
    <h1>日志</h1>
    <hr />
    <h4>分类:心情点滴 </h4>
    <h3>女性的魅力 </h3>
    <p class="zw">摘要:魅力女性是美丽的.她使世界变得温馨,使世界永远保持青春和活力,使世界永远充满迷人和浪漫。魅力是什么?字典上的解释是,能吸引人的力量.常听有人这么评价某个女人:她不漂亮,可她很有魅力.魅力是一种深层次的美,比一切外在的美都更富有生命力,让人一见难以忘怀....... 查看全文 </p>
    <p>2007.3.8 13:27 作者:诗香雅韵 引用:6 | 收藏 | 评论:56 </p>
    <h4>分类:情感驿站 </h4>
    <h3>情感解析:写给三十左右男人的一些密语 </h3>
    <p class="zw">摘要:一、不放弃理想,不放弃梦想。有梦的生活,才会有颜色;二、有一套顶级的西服,或者一只经典的手表,或者有一个奢华的打火机,或者。总之,有一个可以传给自己孩子的并值得讲述历史的东西;三、重新甄选自己的朋友。留一两个知己,用一生去维护;四、三十岁。知道很多的细节。包括穿西服的时候... 查看全文 </p>
    <p class="zw">2011.11.9 00:17 作者:诗香雅韵 引用:0 | 收藏 | 评论:1 </p>
    <h4>分类:精品赏析 </h4>
    <h3>美丽如画!世界海洋摄影佳作揭晓(组图) </h3>
    <p class="zw">摘要:据国外媒体报道,近日世界优秀海洋摄影照片揭晓,从中我们可以欣赏到美丽的海洋景色、认识许多奇特的海洋生物,此外摄影师精湛的摄影技术也令人赞叹。以下就是2010年海洋摄影优秀作品。摄影师评价:“在晚上,小巴哈马海岸的斑点海豚会潜入深海寻找乌贼... </p>
    <p class="zw">查看全文

    2011.10.28 23:53 作者:诗香雅韵 引用:1 | 收藏 | 评论:1 </p>
    </body>
    </html>

    2.  个人博客子页

    参考代码:

    <!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=gb2312" />
    <title>无标题文档</title>
    <style type="text/css">
    body{ background-color:#cccccc; font-size: 12px; margin: 0px 20px;}
    h1{ font-family:"黑体"; font-weight:bolder; color:#FFFFFF; letter-spacing:1em; background-color:#FF0000; padding:10px;}
    h2{ font-family:"黑体"; text-align:center; color:#FF0000; font-weight:bolder; text-decoration:underline;}
    p{ text-indent:2em; line-height:3em;}
    #cap{ text-transform:capitalize; color:#996600;}
    #right{ text-align: right;}
    </style>
    </head>

    <body>
    <h1>日志</h1>
    <hr />
    <h2>《十面埋伏》:一部青春与成长的备忘录</h2>
    <p> 路 晴</p>
    <p>一位颇具才情的青年诗人与中学女生段美丽倾心相爱,但由于双方的特殊身份,这段不无病态的爱情不得不面对现实的严厉拷问——它遭到了来自女方父母的反对,在一次阴差阳错的病态“约会”后,女方父亲对男主人公作出了控告,于是浪漫的爱情突然置入严峻的考验之中。</p>
    <p>西风烈精品书系最新推出的长篇小说《十面埋伏》,讲述了一个匪夷所思的爱情故事。</p>
    <p>没有三角或多角的复杂关系,没有台前幕后、斗智斗勇的激烈角逐,没有刀光剑影、充满动感的宏大场面,只有爱和被爱,然后被考验和确证。初看也许并无新奇之处,展读之下却每每摇动了人的心旌,原因何在?我想最根本的一条是真——真是这部长篇留给我的一个突出印象。真的人物,真的青春,真的爱,真的困难,真的人物境遇,真的炼狱之火的烧烤。唯其日常,更见真实,唯其真实,决不夸张和故作姿态,保证了艺术的节制,平常的生活便获得了动人心魄的艺术力量。在这里,青春美丽而危险,激情与焦虎并存,信心十足而又四顾茫然;爱情美丽却又充满困难和变数,在爱情看上去无比甘美的浆果之下所潜藏的困难和风险,远远超出了他们的预料也远非他们所能承受,以至于在不经意间改写了两位主人公的命运。小说摆脱了一般青春成长小说以展示隐私为旨趣的现成套路,以怀旧的笔调和克制的笔墨,在监狱日常生活的苍凉背景上,镂刻出一对青年男女出生入死、至死不渝的凄美恋情,绘制出一幅浓墨重彩的青春与成长的都市生活长卷,表达出对性与爱、生命与自由、个人与时代的复杂感受与深邃思考,其间充满了过目不忘的精彩细节</p>
    <p id="cap">West wind fine book series latest novel, &quot;House of Flying Daggers&quot;, the story of a bizarre love story.</p>
    <p id="right">阅读(46)| 评论(10)| 引用 (0) |举报</p>
    </body>
    </html>

    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=gb2312" />
    <title>list</title>
    <style type="text/css">
    body{ background-color:#0000FF;}
    h3,ul{ padding: 0px; margin:0px;}
    #div1{ 400px; background-color:#FF0000; font-size:12px; padding:10px;}
    # div1 ul{ padding:0px; margin:0px; list-style-position:inside;}
    #div1 li{ margin:5px 15px;}
    #div1 span{ color:#999999; margin-left:20px;}
    #div2{ 400px; background-color:#FFFF00; font-size:12px; padding: 10px; margin-top:20px;}
    #div2 ul{ list-style-type:none; list-style-image:url(icon1.gif); list-style-position:inside;}
    #div2 li{ margin:12px 0px; border-bottom: 1px dashed #666666;}
    </style>
    </head>

    <body>
    <div id="div1">
    <h1>个人博客排行榜</h1>
    <hr />

    <ul>
    <li>女大学生应聘宅男私家女仆的背后很可怕<span>2011-12-21</span></li>
    <li>丢了公职也无所谓,是喊给谁听的?<span>2011-12-21</span> </li>
    <li>解开富豪代孕8胞胎的“三大谜”? <span>2011-12-21</span> </li>
    <li>留守妇女为赚零花钱廉价卖身暴露啥? <span>2011-12-21</span> </li>
    <li>扶正传言何以让“副处”敛财更疯狂?<span>2011-12-21</span> </li>
    <li>富豪“八胞胎”奇迹的背后实是利益链怪胎<span>2011-12-21</span> </li>
    <li>成多余的人了?拆迁就是把老人送桥洞送终<span>2011-12-21</span> </li>
    <li>一秒钟变残疾的乞丐伤了谁的善心?<span>2011-12-21</span> </li>
    <li>23岁女白领之死是一种社会的警醒!<span>2011-12-21</span> </li>
    <li>再胡说就扣你们低保,低保成了官员打压工具?<span>2011-12-21</span> </li>
    </ul>
    </div>
    <div id="div2">
    <h3>精华区 </h3>
    <hr />

    <ul>
    <li>气候变暖 北极熊残杀幼子 </li>
    <li>植物人听唤“三缺一”苏醒 </li>
    <li>时光机烟草专家当选院士是不是科学界耻辱 </li>
    <li>醉酒押运员抢市民香烟 </li>
    <li>Green追逐那十年最美的红月亮 </li>
    <li>你了解自己的阴历生日吗? </li>
    </ul>
    </div>
    </body>
    </html>

  • 相关阅读:
    Git常用命令大全
    前端开发常用正则表达式
    如何让360、遨游、猎豹等双核浏览器默认以webkit内核渲染网页?
    IE如何兼容placeholder属性
    利用sublime的snippet功能快速创建代码段
    浏览器内核总结
    display:inline-block引发的间隙问题解决办法
    常用的CSSreset整理
    input输入框的border-radius属性在IE8下的完美兼容
    详细讲解Android中的AbsListView的源码
  • 原文地址:https://www.cnblogs.com/Treying/p/9266189.html
Copyright © 2011-2022 走看看