12-1.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>CSS博客</title>
<script language="javascript">
var number = new Date().getSeconds() % 3 + 1;        //随机数，从1到3
//随机选择CSS外部文件
document.write('<link href="0' + number.toString() + '/0' + number.toString() + '.css" rel="stylesheet" type="text/css">');
</script>
     </head>
<body>
<div id="container">
        <div id="globallink">
                <ul>
                        <li id="one"><a href="#">首页</a></li>
                        <li id="two"><a href="#">论坛</a></li>
                        <li id="three"><a href="#">推荐</a></li>
                        <li id="four"><a href="#">最新日志</a></li>
                        <li id="five"><a href="#">最新评论</a></li>
                        <li id="six"><a href="#">尚未登录</a></li>
                </ul>
                <br>
        </div>
        
        <div id="parameter">
                <div id="lstatistics">
                        <h3 class="statistics"><span>样式统计</span></h3>
                        <ul>
                                <li>用户: <b>893</b> 人</li>
                                <li>日志: <b>4397</b> 个</li>
                                <li>评论: <b>4596</b> 篇</li>
                        </ul>
                        <br>
                </div>
                <div id="lhotblog">
                        <h3 class="hotblog"><span>热门博客</span></h3>
                        <ul>
                                <li><a href="#">艾萨克</a> <<a class="author1" href="#">isaac</a>></li>
                                <li><a href="#">詹尼花儿</a> <<a class="author1" href="#">jennifer</a>></li>
                                <li><a href="#">流 觞</a> <<a class="author1" href="#">shenhuanyan</a>></li>
                                <li><a href="#">CYBERSPACE</a> <<a class="author1" href="#">cyber</a>></li>
                                <li><a href="#">小舔一下</a> <<a class="author1" href="#">LifeSucks</a>></li>
                                <li><a href="#">楚岑·洗心</a> <<a class="author1" href="#">popla</a>></li>
                                <li><a href="#">小孩儿</a> <<a class="author1" href="#">bazhuazhua</a>></li>
                                <li><a href="#">未名空间</a> <<a class="author1" href="#">sheva</a>></li>
                                <li><a href="#">Dark City</a> <<a class="author1" href="#">freax</a>></li>
                                <li><a href="#">E心E意&36</a> <<a class="author1" href="#">moonbow</a>></li>
                        </ul>
                        <br>
                        <span><a href="#">更多</a>
                        <a href="#">OPML</a></span>                </div>
                <div id="lrecent">
                        <h3 class="recent"><span>最近更新</span></h3>
                        <ul>
                                <li><a href="#"><span>托波索的小屋</span></a> <<a class="author1" href="#">quixote</a>></li>
                                <li><a href="#"><span>小孩儿</span></a> <<a class="author1" href="#">bazhuazhua</a>></li>
                                <li><a href="#"><span>詹尼花儿</span></a> <<a class="author1" href="#">jennifer</a>></li>
                                <li><a href="#"><span>E心E意&36</span></a> <<a class="author1" href="#">moonbow</a>></li>
                                <li><a href="#"><span>Beyond Paradise</span></a> <<a class="author1" href="#">sherrielin</a>></li>
                                <li><a href="#"><span>加州旅馆</span></a> <<a class="author1" href="#">zhanxiongfei</a>></li>
                                <li><a href="#"><span>星天的博客</span></a> <<a class="author1" href="#">starsky</a>></li>
                                <li><a href="#"><span>个人文集</span></a> <<a class="author1" href="#">sherry</a>></li>
                        </ul>
                        <br>
                        <span><a href="#">更多</a>
                        <a href="#">OPML</a></span>                </div>
                <div id="lapply">
                        <h3 class="apply"><span>最新申请</span></h3>
                        <ul>
                                <li><a href="#"><span>星天的博客</span></a> <<a class="author1" href="#">starsky</a>></li>
                                <li><a href="#"><span>蓝空霞彩</span></a> <<a class="author1" href="#">wcylester</a>></li>
                                <li><a href="#"><span>随 缘</span></a> <<a class="author1" href="#">matata</a>></li>
                                <li><a href="#"><span>大山的孩子</span></a> <<a class="author1" href="#">tuonene</a>></li>
                                <li><a href="#"><span>伊的四季</span></a> <<a class="author1" href="#">Ifishamm</a>></li>
                                <li><a href="#"><span>SONG, original</span></a> <<a class="author1" href="#">song</a>></li>
                                <li><a href="#"><span>买买提※温和的树</span></a> <<a class="author1" href="#">mimiti</a>></li>
                        </ul>
                        <br>
                        <span><a href="#">更多</a>
                        <a href="#">OPML</a></span>                </div>
        </div>
        
        <div id="mainsupport">
                <div id="recommendblog">
                        <h3><span>博客推荐</span></h3>
                        <span><a href="#">詹尼花儿</a>
                        <a class="author2" href="#">jennifer</a></span>
                        <ul>
                                <li><a href="#"><span>禅</span></a></li>
                                <li><a href="#"><span>又地震了</span></a></li>
                                <li><a href="#"><span>老李说</span></a></li>
                                <li><a href="#"><span>地铁发飙记</span></a></li>
                                <li><a href="#"><span>“王”者归来</span></a></li>
                        </ul>
                        <br>
                </div>
                <div id="currenttime">
                        <p class="p1"><script language=javascript src="date.js"></script></p>
                        <p class="p2"><script language=javascript src="lunar.js"></script></p>
                        <ul>
                                <li><a href="#" title="进入自己的博客">*</a></li>
                                <li><a href="#">A</a></li>
                                <li><a href="#">B</a></li>
                                <li><a href="#">C</a></li>
                                <li><a href="#">D</a></li>
                                <li><a href="#">E</a></li>
                                <li><a href="#">F</a></li>
                                <li><a href="#">G</a></li>
                                <li><a href="#">H</a></li>
                                <li><a href="#">I</a></li>
                                <li><a href="#">J</a></li>
                                <li><a href="#">K</a></li>
                                <li><a href="#">L</a></li>
                                <li><a href="#">M</a></li>
                                <li><a href="#">N</a></li>
                                <li><a href="#">O</a></li>
                                <li><a href="#">P</a></li>
                                <li><a href="#">Q</a></li>
                                <li><a href="#">R</a></li>
                                <li><a href="#">S</a></li>
                                <li><a href="#">T</a></li>
                                <li><a href="#">U</a></li>
                                <li><a href="#">V</a></li>
                                <li><a href="#">W</a></li>
                                <li><a href="#">X</a></li>
                                <li><a href="#">Y</a></li>
                                <li><a href="#">Z</a></li>
                        </ul>
                        <br>
                </div>
                <div id="blogsearch">
                        <ul>
                        <form>
                                <li id="sear1">博客搜索:<input name="keyword" type="text" size="13" onMouseOver="this.focus();" onFocus="this.select();"></li>
                                <li id="sear2"><input type="hidden" name="exact" value="0"></li>
                                <li id="sear3"><input type="radio" name="key" value="u" checked>ID</li>
                                <li id="sear4"><input type="radio" name="key" value="c">名称</li>
                                <li id="sear5"><input type="radio" name="key" value="d">描述</li>
                                <li id="sear6"><input type="submit" value="GO"></li>
                        </form>
                        </ul>
                        <br>
                </div>
                <div id="logoin">
                        <ul id="per">
                        <form name="form1">
                                <li id="per1">用户名:
                                <input type="text" class="textinput1" onMouseOver="this.focus()" onFocus="this.select()" name="id" maxlength="12" tabindex="1">
                                <input type="submit" value="登录" tabindex="3"></li>
                                <li id="per2">密  码:
                                <input type="password" class="textinput2" name="passwd" maxlength="39" tabindex="2">
                                <input type="button" value="注册" onClick="window.location='/bbsreg0.html';return false;" tabindex="4"></li>
                        </form>
                        </ul>
                        <br class="br2">
                </div>
                <div id="recommendart">
                        <h3><span><a class="middle" href="#">文章推荐</a></span></h3>
                        <ul>
                                <li><a href="#"><span>突厥系列之一_突厥,突厥人</span></a> <a class="author2" href="#">vivids</a></li>
                                <li><a href="#"><span>姐姐说 坚强的就是快乐的...</span></a> <a class="author2" href="#">cyber</a></li>
                                <li><a href="#"><span>在linux下使用NOR flash存...</span></a> <a class="author2" href="#">alvin</a></li>
                                <li><a href="#"><span>景致南浔</span></a> <a class="author2" href="#">amandavela</a></li>
                                <li><a href="#"><span>Windows快捷键大全</span></a> <a class="author2" href="#">inming</a></li>
                                <li><a href="#"><span>地铁发飙记</span></a> <a class="author2" href="#">jennifer</a></li>
                                <li><a href="#"><span>2006发生的事</span></a> <a class="author2" href="#">xfavorx</a></li>
                                <li><a href="#"><span>姐姐说 坚强的就是快乐的...</span></a> <a class="author2" href="#">cyber</a></li>
                                <li><a href="#"><span>突厥系列之一_突厥,突厥人</span></a> <a class="author2" href="#">vivids</a></li>
                                <li><a href="#"><span>在linux下使用NOR flash存...</span></a> <a class="author2" href="#">alvin</a></li>
                                <li><a href="#"><span>姐姐说 坚强的就是快乐的...</span></a> <a class="author2" href="#">cyber</a></li>
                        </ul>
                        <br>
                </div>
                <div id="newnode">
                        <h3><span>最新日志</span></h3>
                        <ul>
                                <li>[<span><a href="#">托波索的小屋</a></span>] <a href="#"><span>等我考完试了</span></a></li>
                                <li>[<span><a href="#">长不大的小孩儿</a></span>] <a href="#"><span>上完了最后一节严宣申老师...</span></a></li>
                                <li>[<span><a href="#">詹尼花儿</a></span>] <a href="#"><span>一句话</span></a></li>
                                <li>[<span><a href="#">长不大的小孩儿</a></span>] <a href="#"><span>看了一个比较崇拜的ss师兄...</span></a></li>
                                <li>[<span><a href="#">长不大的小孩儿</a></span>] <a href="#"><span>突然想起了鲁迅的一句话</span></a></li>
                                <li>[<span><a href="#">E心E意W36</a></span>] <a href="#"><span>呵呵，做版主被弹劾了</span></a></li>
                                <li>[<span><a href="#">Beyond Paradise</a></span>] <a href="#"><span>偶尔也要更新一下～</span></a></li>
                                <li>[<span><a href="#">詹尼花儿</a></span>] <a href="#"><span>痛苦啊</span></a></li>
                                <li>[<span><a href="#">加州旅馆</a></span>] <a href="#"><span>寻找局部最优</span></a></li>
                                <li>[<span><a href="#">星天的博客</a></span>] <a href="#"><span>冒着大风出去自习</span></a></li>
                                <li>[<span><a href="#">星天的博客</a></span>] <a href="#"><span>卷首语</span></a></li>
                                <li>[<span><a href="#">个人文集</a></span>] <a href="#"><span>发篇文章真难</span></a></li>
                                <li>[<span><a href="#">E心E意W36</a></span>] <a href="#"><span>假期将至！</span></a></li>
                                <li>[<span><a href="#">长不大的小孩儿</a></span>] <a href="#"><span>今天……</span></a></li>
                                <li>[<span><a href="#">蓝色天际/blueheaven</a></span>] <a href="#"><span>没课了</span></a></li>
                                <li>[<span><a href="#">长不大的小孩儿</a></span>] <a href="#"><span>才看到有意思的东西</span></a></li>
                                <li>[<span><a href="#">长不大的小孩儿</a></span>] <a href="#"><span>又要放假了</span></a></li>
                                <li>[<span><a href="#">蓝空霞彩</a></span>] <a href="#"><span>读书人的出世与入世1</span></a></li>
                                <li>[<span><a href="#">倏忽一年，花开两边</a></span>] <a href="#"><span>期末临近</span></a></li>
                                <li>[<span><a href="#">倏忽一年，花开两边</a></span>] <a href="#"><span>小小学术之winpcap(自力更...</span></a></li>
                        </ul>
                        <br>
                </div>
        </div>
        
        <div id="footer">
                <a href="#" class="article">博客首页</a> |
                <a href="#" class="article">博客论坛</a> |
                <a href="#" class="article">用户列表</a> |
                <a href="#" class="article">自由推荐</a> |
                <a href="#" class="article">最新日志</a> |
                <a href="#" class="article">最新评论</a> |
                <a href="#" class="article">热门排行</a> |
                <a href="#" class="article">日志搜索</a> |
                <a href="#" class="article">立即申请</a>
                <p class="p3">版权所有 ©艾萨克</p>
        </div>
</div>
</body>
</html>

来源：《精通CSS+DIV网页样式与布局》

转载于:https://blog.51cto.com/zhangjingqiang/185147

CSS+DIV-网页变幻（HTML篇）相关推荐

  1. CSS/DIV网页设计视频教程目录【转】

    CSS/DIV网页设计视频教程目录 欢迎您来到前沿视频教室,下面列出的是CSS/DIV网页设计视频教程列表.这组视频教程是配合<精通CSS+DIV网页样式与布局>图书制作的,每一课对应于图 ...

  2. html+css+布局从入门到精通,CSS+DIV网页样式布局实战从入门到精通 中文pdf扫描版[48MB]...

    CSS+DIV网页样式布局实战从入门到精通通过精选案例引导读者深入学习,系统地介绍了利用CSS和DIV进行网页样式布局的相关知识和操作方法. 全书共21章.第1-5章主要介绍网页样式布局的基础知识,包 ...

  3. CSS+DIV 网页重构技术之基础

    DIV+CSS是网站标准(或称"WEB标准")中常用术语之一,通常为了说明与HTML网页设计语言中的表格(table)定位方式的区别,因为XHTML网站设计标准中,不再使用表格定位 ...

  4. 精通CSS.DIV网页样式与布局（五） ——设置表格与表单样式

    原文地址为: 精通CSS.DIV网页样式与布局(五) --设置表格与表单样式 表格和表单是网页中非常重要的两个元素,我们这次来说说CSS如何设置表格和表单样式.我们先来看看CSS如何控制表格. 首先表 ...

  5. html div将页面划分,css+div网页布局

    div+css排版是最新的网页排版理念,完全有别旧的排版方式(比如说table排版).首先在页面整体上进行div标签划分内容区域,然后再用css进行定位,最后再对相应的区域添加内容.div+css这种 ...

  6. CSS+DIV网页布局

    从1990年代初HTML被发明开始样式表就以各种形式出现了,不同的浏览器结合了它们各自的样式语言,读者可以使用这些样式语言来调节网页的显示方式.一开始样式表是给读者用的,最初的HTML版本只含有很少的 ...

  7. 读CSS DIV网页样式与布局心得体会

    一.首先根据网页设计图拆分网页的整体结构 二.在html页面用DIV划分出结构块 三.再根据设计图在各个大<DIV>块中加入对应的小<DIV>块或者段落<P>,表单 ...

  8. 精通CSS+DIV网页样式与布局--页面背景

    上篇博客,我们主要简单的总结了CSS的图片效果,我们这回来讲讲CSS如何对网页的背景进行设置,网页的背景是整个网页的重要组成部分,她直接决定了整个网页的风格和色调.这篇博客简单的总结一下如何用CSS来 ...

  9. 精通 CSS+DIV 网页样式与布局 62

    式并允许将样式信息与网页内容分离的一种标记性语言.CSS 是 1996 年由 W3C 审核通过,并且推荐使用的.简单的说 CSS 的引入就是为了使得 HTML 能够更 好的适应页面的美工设计.它以 H ...

  10. 结合html和css制作页面的布局结构,CSS Div网页布局中的结构与表现

    在Web标准中一个很重要的概念就是强调页面的结构与表现分离.说的通俗一点就是XHTML中应该没有样式化的东西,而且Web在浏览器中除内容外都应该由CSS表现,这包括布局与其它样式.一旦一个标准的XHT ...

最新文章

  1. 社交网络图挖掘1--将社交网络看作图及其聚类
  2. 微信小程序---系统信息-位置信息-定位信息
  3. 0x68111002_关于迪兰R9 270显卡ID68111002终于可以驱动了
  4. oracle查询字段有list,java读取oracle表字段信息存到列表（LIST）中
  5. 打印100-200之间的素数
  6. 17张动图，带你了解不一样的数学
  7. 【Python爬虫】requests与urllib库的区别
  8. 黑马出品代码生成器,超级好用,推荐
  9. idea使用过程中的坑
  10. Keil/MDK(2)：STM32堆栈使用情况分析
  11. FindBugs插件的安装与使用
  12. 西门子estop指令_西门子6RA80直流调速器调试步骤和参数设置
  13. 经典按键java手机游戏_菜鸟也能轻松吃鸡的神器——莱仕达P30S手机游戏手柄体验...
  14. ArcGIS使用DEM数据划定汇水区具体步骤过程
  15. FPGA零基础学习：UART协议驱动设计
  16. java 实现将Object类型转换为int类型
  17. App Store榜单优化：App出海必须掌握的ASO技巧
  18. matlab心电显示,请问如何在GUI界面中打开并显示心电信号
  19. 电脑提示Wtautoreg.exe无法找到入口怎么解决？
  20. 帝国cms怎么发布php,帝国cms如何投稿

热门文章

  1. python读取grd数据_Matlab读取grd格式的文件
  2. python处理grd格式文件_Surfer的grd文件格式说明
  3. php性格属于哪类,狗狗性格分为6大类，你家是属哪一类？快来是看聪明型还是粘人型...
  4. windows提示“为了对电脑进行保护，已经阻止此应用”的解决方案 mmc.exe
  5. 什么是Apache？Apache是什么意思？
  6. 掌握企业邮箱3个好用的技巧，商务沟通安全又轻松！
  7. linux on galaxy 教程,三星 'Linux on DeX' 进入 Beta 版，该文章告诉您如何参与其中
  8. 生产环境实战spark （10）分布式集群 5台设备 SPARK集群 HistoryServer WEBUI不能打开问题解决 File file:/tmp/spark-events does not
  9. 调研分析-全球与中国工业电源插头和插座市场现状及未来发展趋势
  10. VMware9 绿色破解版 下载地址