归零——CSS学习-第五天
2020-02-26 本文已影响0人
夏沫雪殇
CSS学习
1、1em=1font-size，em单位是相对的，当你的字体是16px时，1em就相当于16px。
2、规范统一：当html的功能与css的功能相冲突时，一般以工作要求为准，只用一种
3、文件打包压缩到服务器二种方法：
▶︎将标签字母缩短
▶︎去除空格、回车
标签分类
1.行级元素（内联/inline-display：inline）
feature（特点）：内容决定元素所占位置，不可以通过CSS改变宽高
span，strong，em，a，del
2.块级元素（block-display：block）
feature：独占一行，可以通过CSS改变宽高
div，p，ul，li，ol，form，address
3.行级块元素（diaplay：inline-block）
feature：内容决定大小，可以改变宽高
img
凡是带有inline的元素都有文字特性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#news{
border: 1px solid black;
/*对齐方式*/
text-align: center;
height: 200px;
line-height: 200px;
}
#newcon{
border: 1px solid black;
text-align: left;
height: 200px;
/*行高1.2倍*/
line-height: 1.2em;
/*文本缩进*/
text-indent: 2em;
}
div>del{
/*除去删除线*/
text-decoration: none;
}
/*模仿a标签*/
div.a{
/*添加下划线:overline上滑线*/
text-decoration: underline;
color: rgb(0,0,238);
/*cursor: pointer小手，help问号，copy➕，等;*/
cursor: w-resize;
}
/*伪类选择器之一*/
a:hover{
color: green;
font-size: 18px;
text-decoration: none;
}
/*一般开发上传到服务器时会压缩,导
* 致显示样式与预期的不一样,这是由于压缩时去掉了回车,导致开始的图片排列改变了*/
#img img{
width: 200px;
margin-left: 6px;
}
</style>
</head>
<body>
<div id="news">新闻信息</div>
<div id="newcon">
百度新闻是包含海量资讯的新闻服务平台,真实反映每时每刻的新闻热点。
您可以搜索新闻事件、热点话题、人物动态、产品资讯等,快速了解它们的最新进展。
</div>
<div id="">
<del>原价50元</del>
<span>原价50元</span>
<br />
<a href="">www.baidu.com</a>
<span class="a">www.baidu.com</span>
</div>
<div id="img">
<img src="http://b-ssl.duitang.com/uploads
/item/201704/23/20170423162212_TrzFZ.thumb.700_0.jpeg" alt="" /><img src="http://b-ssl.duitang.com/uploads
/item/201704/23/20170423162212_TrzFZ.thumb.700_0.jpeg" alt="" /><img src="http://b-ssl.duitang.com/uploads
/item/201704/23/20170423162212_TrzFZ.thumb.700_0.jpeg" alt="" /><img src="http://b-ssl.duitang.com/uploads
/item/201704/23/20170423162212_TrzFZ.thumb.700_0.jpeg" alt="" />
</div>
</body>
</html>
效果展示
效果图.gif
