Tag: HTML

Categories
不学无术 木有技术

百度前端技术学院 任务四：定位和居中问题

任务：

http://ife.baidu.com/task/detail?taskId=4

效果图：

屏幕快照 2016-04-03 下午5.54.13

有用的参考资料：

思路：

灰色矩形使用relative定位，然后设定left与top为50%，由于已经知道框的大小，用margin把长款的一半距离补回来就行了。
两个扇形在矩形的div内部，使用绝对定位，用border-radius做圆角，clip:rect剪切。

代码：

CodePen: http://codepen.io/idailylife/full/QNqJXe/

<div class="rectangle">
  <div id="left_top" class="qcircle">
  </div>
  <div id="right_bottom" class="qcircle">
  </div>
</div>

 

.rectangle{
  position: absolute;
  width: 400px;
  height: 200px;
  top: 50%;
  left: 50%;
  margin-left: -200px;
  margin-top:-100px;
  background-color: #ccc;
}
.qcircle{
  position:absolute;
  width:100px;
  height:100px;
  border-radius:50px;
  background-color:#fc0;
}
#left_top{
  top: -50px;
  left: -50px;
  clip:rect(50px, 100px, 100px, 50px);
}
#right_bottom{
  right: -50px;
  bottom: -50px;
  clip:rect(0, 50px, 50px, 0);
}

 

Categories
不学无术 木有技术

百度前端技术学院 任务三 HTML、CSS布局入门，三栏式布局的实践

恩，很遗憾没有赶上报名，因为是事后好几天才知道的。好在他们公开了练习题已经微信通知，所以还是可以跟着练一练哒！就是得不到别人的评论了，很忧伤，但是可以看每一队提交的作业，挺好。
给出我自己的实现吧，作为“对于有过页面实践，但没做过太复杂页面的同学”，我先选了第三题。
效果图：
屏幕快照 2016-04-02 下午6.42.20
实现：
三栏布局使用的是float，没有用到相对定位。文字在框里的垂直居中，找到的是这里的方法。
前端团队提供的有关清除浮动的信息很给力：http://zh.learnlayout.com/clearfix.html，里面还有些很实用的技巧。
目前的缺陷是，强制设置了min-width，移动界面不适配，我还要慢慢学习啊！
代码：
CodePen: https://codepen.io/idailylife/pen/pyWLvq
HTML

<div class="container">
  <div id="group" class="nav sub container">
    <div id="group_logo" class="smallbox container">
      团队LOGO</br>80x80
    </div>
    <div id="group_name">
      团队名称
    </div>
  </div>
  <div id="right" class="right sub container">
    <div class="plogo smallbox container withvmargin">
      <p>个人LOGO</p>
    </div>
    <div class="plogo smallbox container withvmargin">
      <p>个人LOGO</p>
    </div>
    <div class="plogo smallbox container withvmargin">
      <p>个人LOGO</p>
    </div>
    <div class="plogo smallbox container">
      <p>个人LOGO</p>
    </div>
  </div>
  <div id="middle" class="sub container">
    <p>团队介绍</p>
    <p>《金刚般若波罗蜜经》来自印度的初期大乘佛教。因其包含根本般若的重要思想，在般若系大乘经中被视为一个略本；本经说“无相”而不说“空”，保持了原始般若的古风。本经六种译本中，通常流通的是鸠摩罗什的初译。如印顺法师所说，此后的五译是同一唯识系的诵本，比如菩提流支、达摩笈多等，都是依无著、世亲的释本译出；只有罗什所译为中观家（般若系）的诵本。又如吕澂说，罗什传龙树的般若学，所以能“心知其意”；到玄奘新译般若经，《金刚经》其实已“面目全非”了。
《金刚经》在印度有唯识家（无著、世亲）的论释。传入中国，三论、天台、贤首、唯识各宗都有注疏；然而中国佛教深受真常系大乘的影响，各宗表面上阐扬《金刚经》，实际上阐扬常住佛性和如来藏。又在三教合流环境下，明清以来，三教九流都来注解《金刚经》，杂合浓厚的真常理论和儒道信仰。又受到密教影响，《金刚经》被附上密咒形成读诵仪轨。此外，民间还出现各种离奇的灵验记和感应录。般若经典《金刚经》被真常化、儒道化、迷信化之中，在中国特别的盛行起来。
本经文义次第的艰深为古印度学者所公认，如无著说：“金刚难坏句义聚，一切圣人不能入”。依龙树所示《般若经》的“两番嘱累”，《金刚经》的“初问初答”即宣说“般若道”，“再问再答”宣说“方便道”。本经侧重广观万法（《心经》则侧重观身心五蕴），阐扬发菩提心，行无我的大乘菩萨道；彻始彻终归宗於般若无住的离相法门，以此明示阿耨多罗三藐三菩提。</p>
  </div>
</div>

CSS

body{
  min-width:540px;
}
.container{
    padding: 20px;
    background-color: #eee;
    border: 1px solid #999;
    overflow: auto;
    zoom: 1;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.sub{
  background-color: #fff;
}
.nav{
  float:left;
  width:200px;
}
.right{
  width:120px;
  float:right;
}
.smallbox{
  width:80px;
  height:80px;
  float:left;
  overflow:hidden；
}
.withvmargin{
  margin-bottom:20px;
}
.plogo{
  padding:20px 0;
  font-size: 12px;
  text-align:center;
}
#group_name{
  margin: 0px auto;
  width: 78px;
  font-size: 16px;
  float: left;
  text-align:right;
}
#group_logo{
  font-size: 12px;
  padding: 0 auto;
}
#middle{
  margin-left: 220px;
  margin-right: 140px;
}