|
一、 图片上面的一些文字定位，文字前后的小竖杠 可以用div:before div:after来存放 div:after{
content:""; display:block;
positioin:absolute;
width height
}
二、 li里有多个图片float：left排版时（每个小图片本身没有什么特效），可以吧图片都集成在一个图片上，当每个小图上有文字时，可以定位文字，存放文字的ul相对图片定位，文字li设定宽高与小图相同(完全覆盖小图，便于点击小图时显示文字，实际上是点击的li)，float:left;在li里放一个元素来存真实的文字，这个大小可以根据文字决定，在li上：hover可显示文字 <div class="slideImg">
<img src="images/box4-2.jpg" alt=""> // 6张图
<div class="slidehover">
<ul> // 定位
<li> // float:left; width = 每个小图的width height = 每个小图的height
<dl class="hover-font"> // width = 文字效果 height = 文字效果
<dt>具有供电设备</dt>
<dd>无需忧虑停电</dd>
</dl>
</li>
<li><dl class="hover-font"><dt>尖端实时监测设备</dt><dd>手术到苏醒，实时掌握患者情况</dd></dl></li>
<li><dl class="hover-font"><dt>A-LINE检测设备</dt><dd>实时监测动脉、动脉内管、动脉内压</dd></dl></li>
<li><dl class="hover-font"><dt>具有供电设备</dt><dd>无需忧虑停电</dd></dl></li>
<li><dl class="hover-font"><dt>尖端实时监测设备</dt><dd>手术到苏醒，实时掌握患者情况</dd></dl></li>
<li><dl class="hover-font"><dt>A-LINE检测设备</dt><dd>实时监测动脉、动脉内管、动脉内压</dd></dl></li> </ul>
</div>
</div>
三、 不会的特效先想是否有库可用，比如鼠标悬停文字下划线出现方式可用hover.css
四、 点击查看大图 就是a的href设置为该图的链接images/1.jpg， <a href="images/1-2.jpg"><img src="images/1-2.jpg" alt=""></a>
五、 图片水平居中 要想图片水平居中，div加text-align:center; 当图片也指定了width时，给图片加margin: 0 auto; <div class="yhq"><img src="images/yhq.png" alt=""></div>
六、wow中想要图片一个接一个出现 可用 data-wow-delay=".6s"
七、wap <meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1,user-scalable=no"> 最好的效果还是切图，不存在距离的调整， 切图最好的是640 的图，不用设置width的%； 默认设置img{width:100%;display:block;} 文字最好都加line-height或者margin，以免文字堆叠。
base.css @charset "utf-8";
html {font-size:62.5%;}
@media screen and (min-width:360px) and (max-width:409px){
html {font-size:35%;} /* 0.56 */
}
@media screen and (min-width:410px) and (max-width:479px){
html {font-size:40%;} /* 0.64 */
}
@media screen and (min-width:480px) and (max-width:639px){
html {font-size:47%;} /* 0.75 */
}
@media screen and (min-width:320px) and (max-width:359px){
html {font-size:32%;} /* 0.56 */
}
body{
font-family: "微软雅黑";font-size: 62.5%;
max-width:640px;margin:0 auto;
position: relative;
}
图片:
大图：img { width: 100%;display: block; } //640px
小图：img { max-width: 图片大小.px; width: %;margin: 0 auto; }
文字:
h2{ font-size: 5.2rem; line-height: .8; } span{ font-size: 3.4rem; line-height: 1.3; } p{ margin-top: 4.2%; font-size: 12px; line-height: 1.2;text-transform: uppercase; }//太小的字到12px;所以太小的字就不建议font，切图比较好 eg1：
效果图： 
base.css 
html 
css 
eg2：
效果图： 
html：
<a href="javascript:;" class="zixun"><span>点击咨询GO></span></a>
css：
.zixun{
color: #fff;text-align: center; display: block;margin:0 auto; background: #920; width: 32%;height: 12%; border-radius: 22px;
} .zixun span{
font-size: 2.6rem;display: block;padding-top: 3%;
}
八、竖排版文字在手机端和ie都不支持，所以竖排版文字用图片来代替
九、保证内容中间布局 文字在整个布局的中间及右边 /* pp的width=p1+p2+p3 p3=p2 保证p1在中间位置而无需任何定位 */ html： <div class="pp">
<div class="p3"></div> <div class="p1">
<p>丁晓东医生从事皮肤美容临床研究工作，在皮肤美容、抗衰老领域有着极深的造诣，结合中医深层治疗理念与西方的多层次治疗。是我国极具影响力的年轻皮肤美容专家。</p>
</div> <div class="p2">
<ul>
<li><span>15年</span>丰富皮肤临床经验</li> <li><span>多次</span>皮肤专科海外进修</li> <li><span>11篇</span>医学美肤学术论文</li> <li><span>独特</span>美肤抗衰特殊技术</li>
</ul>
</div>
</div>
css： /* pp的width=p1+p2+p3 p3=p2 保证p1在中间位置而无需任何定位 */ .pp{ // 外框
margin:85px auto 0; width: 948px; width: calc(339px * 2 + 270px); height: auto; overflow: hidden;
} .p1{ // 中间部分
width: 140px;height: 210px; background: #fe5a1b; opacity: .6; color: #fff; padding: 95px 65px; text-align: justify;float: left;
}
.p1 p{
width: 140px;height: 210px;line-height: 26px;
}
.p3{ // 和p2相同的空框，用来占左边位
width: 339px;height: 412px;float: left;
}
.p2{ // 右边部分 float: left;padding-left: 120px;
} .p2 li{ line-height: 76px;font-size: 16px; color: #666666;margin-bottom: 30px;
} .p2 li span{ color: #fe5a1b;font-size: 22px; display: block;letter-spacing: 0; width: 76px; height: 76px;line-height: 76px; float: left; margin-right: 15px; background: url("../images/zt-box2-1.png") no-repeat center;
} .p2 li:nth-child(2) span{ background: url("../images/zt-box2-2.png") no-repeat center; } .p2 li:nth-child(3) span{ background: url("../images/zt-box2-3.png") no-repeat center; } .p2 li:nth-child(4) span{ background: url("../images/zt-box2-4.png") no-repeat center; }
十、图片遮住文字当图片为 .jpg (就是背景为白色而不是透明色，这样会容易遮住文字或其他附近的内容) ， 例如：左上角这块本应该有一段文字，但被图片遮住了 将文字设置为{ position: relative; z-index:1;} 这样布局不变，但是文字的层级高于图片
十一、图片问题 1. 图片除背景需要透明外其他保存为.jpg（较小） （不一定，主要看哪个格式更小一些） 2. .jpg图片保存为wap（ctrl+shift+alt+s） 品质为60，压缩品质为高（如果清晰度区别不大的话） 3. 图片压缩在200KB以内
十二、pc端居中：定死width（比如width: 1100px; margin: 0 auto; ） 而不是width: 70%;
<link rel="stylesheet" href="css/style.css?v=1.1"> <img class="box1-img" src="images/box1.jpg?5225" alt="">
|
