div css合理布局处理访问器适配及提升等好用技能

日期:2021-01-20 类型:科技新闻 

关键词:小程序如何制作,预约小程序,微信小程序怎么做,微信抽奖小程序,小程序外包

DIV 左右垂直居中用 line-height
Html编码

拷贝编码
编码以下:

<style type="text/css">
div.v-align {line-height: 200px;height: 200px;border: 1px solid red;}
</style>
<div class="v-align">竖直垂直居中</div>

消除访问器默认设置款式
1.用别的着名的库来消除(如:YUI)
2.自已消除 如:
* {padding: 0;margin:0;}

让A适用全部访问器
Html编码

拷贝编码
编码以下:

<style type="text/css">
a.agideo:link, a.agideo:visited {font-weight: bold;text-decoration: none;color: green;}
a.agideo:hover, a.agideo:active {font-weight: bold;text-decoration: none;color: red;}
</style>
<a href="http://www.agideo.com" class="agideo">捷道数码</a>
<style type="text/css">
a.google:hover, a.google:active {font-weight: bold;text-decoration: none;color: red;}
a.google:link, a.google:visited {font-weight: bold;text-decoration: none;color: green;}
</style>
<a href="http://www.google.com" class="google">Google</a>

A 伪类界定次序记忆力法
LoVe:HAte(爱恨)
IMG vertical-align
vertical-align : auto | baseline | sub | super | top | text-top | middle | bottom | text-bottom | length
baseline :默认设置值。将适用 valign 特点的目标的內容与基准线对齐
sub 竖直对齐文字的下标
super 竖直对齐文字的上标
top : 将适用 valign 特点的目标的內容目标顶端对齐
text-top : 将适用 valign 特点的目标的文字与目标顶端对齐
middle : 将适用 valign 特点的目标的內容与目标中部对齐
bottom : 将适用 valign 特点的目标的內容与目标底端对齐
text-bottom : 将适用 valign 特点的目标的文字与目标顶端对齐
length : 由浮点数据和企业标志符构成的长度值 | 百分数。可为负数。界定由基准线算起的偏位量。基准线针对标值来讲为0,针对百分数来讲便是0%。请参考 长度企业。现阶段IE并未完成此主要参数
Html编码 

拷贝编码
编码以下:

<style type="text/css">
div.v-align {border: 1px solid red;line-height: 40px;float: left;font-size: 11px;height: 40px;}
div.v-align img.only-img {float:left;}
div.v-align.has-img {padding-top: 10px;height: 30px;}
div.v-align.has-img-and-text img.has-text {
vertical-align: ⑷px !important;vertical-align: middle;margin-top: ⑶px !important;margin-top: 0px;}
div.v-align.has-img-and-text {
padding-top: 0px !important;padding-top: 10px;height: 40px !important;height: 30px;}
</style>
<div class="v-align">一切正常</div>
<div class="v-align has-img"><img src="http://dl.iteye.com/upload/attachment/162320/1f89f269⑸80c⑶04b⑼75a-e6004b9893ce.png" class="only-img" /></div>
<div class="v-align has-img-and-text"><img src="./accept.png" align="absmiddle" class="has-text" />有照片有字</div>

竖直Margin 叠加
Html编码

拷贝编码
编码以下:

<style tyep="text/css">
body, div {padding:0;margin:0;}
div, span {padding: 10px;margin: 10px;border: 10px solid #000;}
#div1 {background-color: red;}
#div2 {background-color: green;}
#div3 {background-color: blue;}
</style>
<div id="div1"><div>div1</div></div>
<div id="div2"><div>div2</div></div>
<div id="div3"><span>span1</span><span>span2</span></div>

Background position
Html编码

拷贝编码
编码以下:

<style tyep="text/css">
body, div {padding:0;margin:0;}
div {border:1px solid #ccc;height: 200px;width: 300px;}
#div1 {background: url(http://dl.iteye.com/upload/attachment/162316/eee477c8⑴fcc⑶a41⑻74f-065f0d65a422.jpg) no-repeat 20px 20px;}
#div2 {background: urlhttp://dl.iteye.com/upload/attachment/162316/eee477c8⑴fcc⑶a41⑻74f-065f0d65a422.jpg) no-repeat 20% 20%;}
#div3 {background: url(http://dl.iteye.com/upload/attachment/162318/8be0e495⑵d0a⑶ec2⑼f5f⑺465eb8c23ae.jpg) no-repeat 20% 20%;}
</style>
<div id="div1">20px</div><br/>
<div id="div2">20%</div><br/>
<div id="div3">20%</div>

Float 占地难题
1.父子TAG都Float以父能包括子
Html编码

拷贝编码
编码以下:

<style type="text/css">
div.parent {border: 1px solid red;width: 600px;float: left; }
div.child {border: 1px solid green;float: left;}
</style>
<div class="parent">
<div class="child">child</div>
<div class="child">child</div>
<div class="child">child</div>
</div>

Html编码

拷贝编码
编码以下:

<style type="text/css">
div.parent {border: 1px solid red;width: 600px;float: left; }
div.child {border: 1px solid green;float: left;}
</style>
<div class="parent">
<div class="child">child</div>
<div class="child">child</div>
<div class="child">child</div>
</div>

2.最终1个子TAG后加1clear的无词义tag
Html编码

拷贝编码
编码以下:

<style type="text/css">
div.parent {border: 1px solid red;width: 600px;}
div.child {border: 1px solid green;float: left;}
div.clear {clear: both;}
</style>
<div class="parent">
<div class="child">child</div>
<div class="child">child</div>
<div class="child">child</div>
<div class="clear"></div>
</div>

事例7:
Html编码

拷贝编码
编码以下:

<style type="text/css">
div.parent {border: 1px solid red;width: 600px;}
div.child {border: 1px solid green;float: left;}
div.clear {clear: both;}
</style>
<div class="parent">
<div class="child">child</div>
<div class="child">child</div>
<div class="child">child</div>
<div class="clear"></div>
</div>