Chinaunix首页 | 论坛 | 博客

SIMPLESlego.blog.chinaunix.net

首页　| 　博文目录　| 　关于我

HuangLei_LEGO

  • 博客访问： 2630922
  • 博文数量： 315
  • 博客积分： 3901
  • 博客等级： 少校
  • 技术积分： 3640
  • 用 户 组： 普通用户
  • 注册时间： 2011-05-08 15:32
个人简介

知乎：https://www.zhihu.com/people/monkey.d.luffy Android高级开发交流群2: 752871516

文章分类

全部博文（315）

文章存档

2019年（2）

2018年（1）

2016年（7）

2015年（32）

2014年（39）

2013年（109）

2012年（81）

2011年（44）

我的朋友
最近访客
推荐博文
相关博文
HTML_CSS_JS学习篇++++盒子模型仿YOUKU【不仅仅是模仿】

分类： Web开发

2015-07-12 14:24:36

    课程已经学习到15课了，不知不觉已经看了这么多课程，看完视频后也是自己进行了一些简单练习；本次盒子模型的练习就打算仿youku牛人的页面，同时加入自己想象的一些元素，我想还是挺有意思的。
    同时github.io的个人网站也稍微做一些简单修改。。。。就这样。。

    仿的效果如下： />
    

    基本的最小化什么的倒是不会影响布局，不过最后发现鼠标滚轮缩放就不行了，以后再说【后来利用百分比做了下简单适配，不过应该还有其它问题】，毕竟才学到这；

    内部主要是用到div、表格【左侧部分是表格】、div嵌套；css主要是就是类选择器、父子选择器【居多】。。。

    thankfull.html
    

点击(此处)折叠或打开

  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  2. <html>
  3.   <head>
  4.     <title>box.html</title>
  5.     
  6.     <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
  7.     <meta http-equiv="description" content="this is my page">
  8.     <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  9.     
  10.     <link rel="stylesheet" type="text/css" href="./box.css">
  11.   </head>
  12.   
  13.   <body>
  14.       <span><img src="img/yk_title.png" width="100%" style="CURSOR: hand" onclick='window.open(")'/></span>
  15.       <span><MARQUEE scrollAmount=2 direction=left>感谢家人的鼓励、陪伴、养育。。。感谢一路走来陪伴过的你！感谢小学老师黄老师，感谢兰老师，感谢陈老师，感谢某某老师，名字太多了，记不太清楚了。感谢小学同学一起走过美好的时光
  16.       感谢初中同学，感谢初中班主任黄老师，甚老师，魏老师，刘老师等等。感谢高中老师李老师，黄老师，谢老师，感谢高中的同学，感谢好哥们！感谢大学老师和大学同学，感谢各位基友。 感谢每年回家还一起玩耍的伙伴，有些做的不对的地方就原谅了
  17.       。希望我认识的每一个人都健康、幸福、一切OK。我在此祝福你们。。。</MARQUEE></span>
  18.       <div class="container">
  19.          <div class="superstart_left">
  20.              <span>这不是优酷..</span></br>
  21.              <span>只是记录点点滴滴....</span>
  22.              <table>
  23.                  <tr>
  24.                      <td rowspan=4><img src="img/timeline.png" id="timelineImg"/></td>
  25.                      <td><img src="img/daxue.png" id="timecontentImg"/></td>
  26.                  </tr>
  27.                  <tr>
  28.                      <td><img src="img/chuanxing.png" id="timecontentImg"/></td>
  29.                  </tr>
  30.                  <tr>
  31.                      <td><img src="img/yuehuamiddle.png" id="timecontentImg"/></td>
  32.                  </tr>
  33.                  <tr>
  34.                      <td><img src="img/yuehua.png" id="timecontentImg"/></td>
  35.                  </tr>
  36.              </table>
  37.          </div>
  38.      <div class="superstart">
  39.          <span>优酷牛人<span><a href=" target="_blank">更多牛人</a></span></span>
  40.          <ul class="faceul">
  41.              <li><img src="img/a.png"/><a href="#">Michal</a><img src="img/q.png" id="imgspecial"/></li>
  42.              <li><img src="img/b.png"/><a href="#">DouDou</a><img src="img/q.png" id="imgspecial"/></li>
  43.              <li><img src="img/c.png"/><a href="#">Lei</a><img src="img/q.png" id="imgspecial"/></li>
  44.              <li><img src="img/d.png"/><a href="#">bubby</a><img src="img/q.png" id="imgspecial"/></li>
  45.          </ul>
  46.          <span>明星空间<span><a href=" target="_blank">更多空间</a></span></span>
  47.          <ul class="faceul">
  48.              <li><img src="img/e.png"/><a href="#">sunny</a><img src="img/q.png" id="imgspecial"/></li>
  49.              <li><img src="img/f.png"/><a href="#">幻风儿</a><img src="img/q.png" id="imgspecial"/></li>
  50.              <li><img src="img/a.png"/><a href="#">QQ号</a><img src="img/q.png" id="imgspecial"/></li>
  51.              <li><img src="img/b.png"/><a href="#">给我电话</a><img src="img/q.png" id="imgspecial"/></li>
  52.          </ul>
  53.          <span>优酷日记<span><a href="http://lego.blog.chinaunix.net" target="_blank">更多日记</a></span></span>
  54.          <ul class="faceul">
  55.              <li><img src="img/c.png"/><a href="#">日记1</a><img src="img/q.png" id="imgspecial"/></li>
  56.              <li><img src="img/d.png"/><a href="#">表白</a><img src="img/q.png" id="imgspecial"/></li>
  57.              <li><img src="img/e.png"/><a href="#">求包养</a><img src="img/q.png" id="imgspecial"/></li>
  58.              <li><img src="img/f.png"/><a href="#">小bai</a><img src="img/q.png" id="imgspecial"/></li>
  59.          </ul>
  60.      </div>
  61.     </div>
  62.   </body>
  63. </html>
    box.css
   

点击(此处)折叠或打开

  1. /*****大的div包裹起来： 包裹superstart_left 和 superstart【右侧的】****/
  2. .container
  3. {
  4.     width: 1280px;
  5.     margin : auto;
  6. }


  9. /***div块选择器 - 让整个布局靠页面右边***/
  10. .superstart
  11. {
  12.     width : 46%;
  13.     height : 630;
  14.     border : 1px solid gray;
  15.     margin-top : 20px;
  16.     float : right;
  17. }
  18. /***设置无序列表的布局，清空布局，这样可以方便重新设置布局;
  19.     text-align : center;设置内容居中 - 父子选择器***/
  20. .faceul
  21. {
  22.     padding : 0;
  23.     margin-left : 20px;
  24.     margin-top : 20px;
  25.     width : 560;
  26.     height : 140;
  27.     border : 1px solid green;
  28.     
  29.     text-align : center;
  30. }
  31. /***控制无序列表元素的是否换行等风格【主要是浮动】 - 父子选择器***/
  32. .faceul li
  33. {
  34.     width : 120px;
  35.     height: 110px;
  36.     border : 1px solid blue;
  37.     float : left;
  38.     margin-left : 15px;
  39.     margin-top : 15px;
  40. }
  41. /**控制图片的父子选择器*/
  42. .faceul img
  43. {
  44.     width : 110px;
  45.     height: 80px;
  46.     margin-top : 5px;
  47. }
  48. /**特殊图片的格式的id选择器 - 主要目的就死在图片名称右边标注等级*/
  49. #imgspecial
  50. {
  51.     width : 13px;
  52.     height: 13px;
  53. }
  54. /**控制文本布局**/
  55. .faceul a
  56. {
  57.     margin-left : 20px;
  58.     color : black;
  59. }
  60. /****完善布局-添加分割栏标识 - 主要采用父子选择器****/
  61. .superstart span
  62. {
  63.     font-size : 30px;
  64.     font-weight : bold;
  65. }
  66. .superstart span span
  67. {
  68.     font-size : 25px;
  69.     float : right;
  70.     color : blue;
  71.     font-style : italic;
  72.     text-decoration : underline;
  73.     margin-right : 30px;
  74. }
  75. /**鼠标悬停***/
  76. a:hover
  77. {
  78.     color: #FF0000;
  79. }


  82. /****开始制作左侧区域****/
  83. .superstart_left
  84. {
  85.     width : 51%;
  86.     height : 630;
  87.     border : 1px solid gray;
  88.     margin-top : 20px;
  89.     margin-left : 20px;
  90.     float : left;
  91.     
  92.     text-align : center;
  93. }
  94. /***父子选择器*控制文本****/
  95. .superstart_left span
  96. {
  97.     font-size : 50px;
  98. }
  99. /**父子选择器*控制表格***/
  100. .superstart_left table
  101. {
  102.     width : 648px;
  103.     height : 515px;
  104.     border : 1px solid gray;    
  105. }
  106. .superstart_left table td
  107. {
  108.     border : 1px solid silver;
  109. }
  110. /****控制图片*(**/
  111. #timelineImg
  112. {
  113.     width : 100px;
  114.     height : 500px;
  115.     margin-left : 10px;
  116. }
  117. #timecontentImg
  118. {
  119.     width : 520px;
  120.     height : 100px;
  121.     margin-left : 5px;
  122. }
  123. .suofang
  124. {
  125.     MARGIN: auto;WIDTH: 200px;
  126. }
  127. .suofang img
  128. {
  129.     MAX-WIDTH: 100%!important;HEIGHT: auto!important;width:expression(this.width > 200 ? "200px" : this.width)!important;
  130. }


    感谢chuanzhiboke教程.....
    
阅读(2087) | 评论(0) | 转发(0) |
0

上一篇：HeyClock-一个简单的重复闹钟程序源代码

下一篇： Big Bang If you 中韩【中文发音】对照表

给主人留下些什么吧！~~
关于我们 | 关于IT168 | 联系方式 | 广告合作 | 法律声明 | 免费注册

Copyright 2001-2010 ChinaUnix.net All Rights Reserved 北京皓辰网域网络信息技术有限公司. 版权所有

感谢所有关心和支持过ChinaUnix的朋友们

16024965号-6