div:after{
content:""; display:block;
positioin:absolute;
width height
}
二、 li里有多个图片float:left排版时(每个小图片本身没有什么特效),可以吧图片都集成在一个图片上,当每个小图上有文字时,可以定位文字,存放文字的ul相对图片定位,文字li设定宽高与小图相同(完全覆盖小图,便于点击小图时显示文字,实际上是点击的li),float:left;在li里放一个元素来存真实的文字,这个大小可以根据文字决定,
<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>
三、 不会的特效先想是否有库可用,比如鼠标悬停文字下划线出现方式可用hover.css</div></div><li><dl class="hover-font"><dt>具有供电设备</dt><dd>无需忧虑停电</dd></dl></li></ul>
<li><dl class="hover-font"><dt>尖端实时监测设备</dt><dd>手术到苏醒,实时掌握患者情况</dd></dl></li>
<li><dl class="hover-font"><dt>A-LINE检测设备</dt><dd>实时监测动脉、动脉内管、动脉内压</dd></dl></li>
<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>
<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.csshtmlcsseg2:
效果图: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都不支持,所以竖排版文字用图片来代替}
<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>
.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;} 这样布局不变,但是文字的层级高于图片
十二、pc端居中:1. 图片除背景需要透明外其他保存为.jpg(较小) (不一定,主要看哪个格式更小一些)2. .jpg图片保存为wap(ctrl+shift+alt+s) 品质为60,压缩品质为高(如果清晰度区别不大的话)3. 图片压缩在200KB以内
定死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="">
联系客服