HTML,CSS工具
6.图片代替文字
前言:当你的网速降低到10kb/s时,网页只会显示最基础的html,且屏蔽css,js,大公司(或者现在的公司)会让你在网速不好的时候,那个网站还能正常点击,浏览(国际性公司兼容策略)
第一种:(使用单行文本溢出处理)
语法:使用a标签先将网速不好时的html文字展示出来,然后在css中给a标签添加背景图片等属性,刺客显示文字会压到图片上,我们不需要文字,所以先将文字顶出这个图片容器,然后使用单行文本溢出处理,不打点
html代码:
<a href="https://www.taobao.com">淘宝网</a>
css代码:
*{
margin:0;
padding:0;
list-style:none;
text-decoration:none;
}
a{
width:190px;
height:90px;
color:#424242;
display:inline-block;
border:1px solid black;
background-image:url('img/taobaowang.png');
background-size:190px 90px;
}
执行结果:
淘宝网这三个字他在图片上,我们首先要将这三个字顶出容器,使用首行缩进text-indent属性,让text-indent的值大于容器的宽,此时我们在a标签里加text-indent:200px;执行结果:
会发现只有"淘"出去了,为了让"宝网"也跟着出去,我们使用white-space:nowrap;执行结果
这时候我们让"淘宝网"隐藏就行了,使用overflow:hidden,此时执行结果
我们测试一下,当网速不好时,屏蔽css,这时候只有<a href="https://www.taobao.com">淘宝网</a>,执行结果
第二种:
语法:根据背景图片能加到padding上,content(标签的内容不能加到padding上),我们得到了这种办法,让容器的高度设置为0,如果不设置height为0,标签的文字还是不会从容器中出去的,用padding-top代替容器的高度,使用overflow:hidden将标签的内容消失
html代码:
<a href="https://www.taobao.com">淘宝网</a>
css代码:
a{
width:190px;
color:#424242;
display:inline-block;
border:1px solid black;
background-image:url('img/taobaowang.png');
background-size:190px 90px;
height:0px;
padding-top:90px;
overflow:hidden;
}
执行结果:
7.自适应
前提:必须是父子级,父子元素而且都是块级元素
html代码:
<div class="wrapper">
<div class="content"></div>
</div>
css代码:
*{
margin:0;
padding:0;
list-style:none;
text-decoration:none;
}
.wrapper{
height:30px;
background-color:#123;
}
.content{
margin:0 auto;
width:1200px;
height:30px;
background-color:#f40;
}
执行结果:
这个自适应的作用是浏览器缩小时,两边先消失
8.底对齐
一.一行文本是底对齐
html代码:
<div>
今天真好<span>好心情!</span>
</div>
css代码:
*{
margin:0;
padding:0;
list-style:none;
text-decoration:none;
}
span{
font-size:60px;
}
执行结果:
二.图片和文字也是底对齐
html代码:
<img src="img/tbewm.png" alt="哈哈哈">4554556
css代码:
*{
margin:0;
padding:0;
list-style:none;
text-decoration:none;
}
img{
width:100px;
height:100px;
}
执行结果:
是不是现在很想知道如果后面加个宽高为100px,背景颜色为淘宝红,
加一个
<div style ="width:100px;height:100px;background-color:#f40;"></div>
执行结果:
对于以上两种,有个特殊的
html代码:
<span>123</span>456
css代码:
*{
margin:0;
padding:0;
list-style:none;
text-decoration:none;
}
span{
display:inline-block;
width:100px;
height:100px;
background-color:#f00;
font-size:50px;
}
执行结果:
456会跟着span里面的文字对齐,不过通过vertical-align改变456的位置,如果加一个vertical-align:text--top,执行结果:
说明:该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。允许指定负长度值和百分比值。这会使元素降低而不是升高。在表单元格中，这个属性会设置单元格框中的单元格内容的对齐方式。
如果设置了vertical-align的值为middle(记住没有text-middle,只有middle),执行结果
如果设置了vertical-align为text-bottom,执行结果:
9.导航栏
使用ul(无序列表)制作
html代码:
<ul class="nav">
<li class="list-item"><a href="#">亲,请登录</a></li>
<li class="list-item"><a href="#">免费注册</a></li>
<li class="list-item"><a href="#">购物车</a></li>
<li class="list-item"><a href="#">商品分类</a></li>
<li class="list-item"><a href="#">联系客服</a></li>
</ul>
css代码:
* {
margin: 0;
padding: 0;
list-style: none;
text-decoration: none;
}
.nav .list-item{
float:left;
margin:0 10px;
height:30px;
line-height:30px;
/* border:1px solid black; */
}
.nav::after{
content:"";
display:block;
clear:both;
}
.nav .list-item a{
color:#f40;
font-weight:bold;
height:30px;
display:inline-block;
border-radius:15px;
}
.nav .list-item a:hover{
background-color:#f40;
color:#fff;
}
执行结果:
如果给每个li标签和a标签加个border:1px solid black;执行结果
