[散修弟子]CSS-43|2016年01月29日的日报-技能树.IT修真院

发表于： 2016-01-29 22:29:01

1 2144

家里断网了，FUCK!但愿年前能修好..

服务器什么的等家里网好了再说吧：

今天完成的事情：task3（网吧撸一天，快撸哭了~~~~~~~~~~）

明天计划的事情：task4，task5页面制作部分。

收获：1.框框框框框框，一定要理解框框，各种各样的框框

2.绝对定位后形成框框，可以放在任何位置

3，PS的参考线使用（一开始我是拿计算器算百分百的，好傻- -！），切图

4.px，em，rem，PX是像素，用PS可以测量切片大小，单位是像素。

EM是相对于父框的单位，若没有往上找爷框的单位，层层上推。

REM是祖宗框的单位（通常是HTML，head中声明）

遇到的问题：好像遇到问题挺多，不然不会做一晚上，但现在又想不起什么问题来，再让我做一遍可能不到一小时就能完成，这是什么情况呢？？？

倒是有个问题还没解决就是如何让字体随图片成比例变化呢？

字体单位是REM，会随着浏览器不同变化，而图片使用的是width百分比控制，随着容器div.container而变化，由于屏幕大小不同，一定会导致图片变化比例与字体变化比例不同，那么字体图片就会分离，难道这就是自适应要解决的问题么？

PS不会用~~~~~~~~~~

以下是TASK3的成果，等有了服务器再弄上去

效果图：

代码：<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>无标题文档</title>
<style type="text/css">
html {
   font-size: 62.5%;
}
.container {
   width: 100%;
   max-width: 640px;
   margin: 0 auto;
}
div.head {
   border: 1px solid blue;
   position: relative;
   width: 100%;
   background: #22292c;
   padding-bottom: 14%;
}
.back {
   position: absolute;
   top: 27.2%;
   left: 2.6%;
   width: 3.44%;
}
a.fh {
   position: absolute;
   top: 34%;
   left: 8%;
   font-size: 2.5rem;
   color: #ffffff;
}
span.head {
   display: block;
   position: absolute;
   top: 25%;
   left: 44.7%;
   font-size: 3.5rem;
   color: #ffffff;
}
.menu {
   position: absolute;
   top: 43.1%;
   left: 91.4%;
   width: 6.1%
}
div.content {
   position: relative;
   width: 100%;
   background: blue;
   padding-bottom: 150%;
   background: #68cdd5;
}
img.exit {
   position: absolute;
   top: 2%;
   left: 5.5%;
   width: 8.75%;
}
img.logo {
   position: absolute;
   top: 11.5%;
   left: 31.1%;
   width: 10.8%;
}
a.ptt {
   position: absolute;
   top: 12%;
   left: 42.2%;
   font-size: 4rem;
   font-weight: 700;/*字体加粗*/
   color: #ffffff;
}
span.www {
   display: block;
   position: absolute;
   top: 17.1%;
   left: 42.2%;
   font-size: 1.4rem;
   font-weight: bold;
   color: #ffffff;
}
span+span {
   position: absolute;
   left: 14.2%;
   font-size: 3rem;
   font-weight: bold;
   color: #ffffff;
}
#a {
   position: absolute;
   top: 30.5%;
   left: 14.2%;
   font-size: 3rem;
   font-weight: bold;
   color: #ffffff;
}
#b {
   top: 35.8%;
}
#c {
   top: 41.1%;
}
#d {
   top: 46.4%;
}
.imgleft {
   position: absolute;
   top: 67%;
   left: 21.5%;
   width: 13.4%;
}
.imgright {
   position: absolute;
   top: 67%;
   left: 67.5%;
   width: 13.5%;
}
#e {
   position: absolute;
   top: 77.5%;
   left: 19.5%;
   font-size: 2.1rem;
   color: #ffffff;
}
#f {
   position: absolute;
   top: 77.5%;
   left: 66.6%;
   font-size: 2.1rem;
   color: #ffffff;
}
</style>
</head>
<body>
<div class="container">
<div class="head">