发表于： 2019-11-29 20:51:19
2 1137
开始领到这个任务确定了大概思路
一个背景块，一个后退键块，3个LOGO块，还有一个文本块
然而在切图的时候，莫名保存不了切图的那部分，导出的是整个，所以我先把各组件所在图层里的单一内容导出，“葡萄藤”LOGO导不出来，采用了裁剪
然后利用浮动还原各组件位置。
文档如图所示是居中对齐，但是文字换行是左对齐，所以先定义块居中，然后定义块内文字左对齐。
演示代码却没有背景颜色，百度原因后是父元素没有被撑开，采用overflow：hidden可以解决。
最后调试阶段发现背景旁有白边，调试许久后选择直接定义body标签，颜色用网上的颜色识别器，得到颜色编码。
1、px 是一张图片最小的一个点
2、em 参考物是父元素的font-size，具有继承的特点。如果自身定义了font-size按自身来计算（浏览器默认字体是16px），整个页面内1em不是一个固定的值。
3、rem css3新单位，相对于根元素html（网页）的font-size，不会像em那样，依赖于父元素的字体大小，而造成混乱
4、% 一般宽泛的讲是相对于父元素，但是并不是十分准确。 1、对于普通定位元素就是我们理解的父元素 2、对于position: absolute;的元素是相对于已定位的父元素 3、对于position: fixed;的元素是相对于ViewPort（可视窗口）
5、vw ：视窗宽度，1vw等于视窗宽度的1%。
6、vh 视窗高度，1vh等于视窗高度的1%。
7、vm 相对于视口的宽度或高度中较小的那个。其中最小的那个被均分为100单位的vm
解决自适应网页可以采用加入viewport，不用绝对宽度等方法
选择器优先级参考了这篇文章学习
https://developer.mozilla.org/zh-CN/docs/Web/CSS/Specificity
使用margin值的情况：
需要在border外侧添加空白时。
空白处不需要背景（色）时。
上下相连的两个盒子之间的空白，需要相互抵消时。
需要使用负值对页面布局时(margin值可以取负，padding不行)。
使用padding时的情况：
需要在border内测添加空白时。
空白处需要背景（色）时。
上下相连的两个盒子之间的空白，希望等于两者之和时。
因为DPI的关系手机分辨率和PX并不等同
<!DOCTYPE HTML>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
<head>
<title>
任务3
</title>
<style type="text/css">
body{
background-color:#68cdd5;
overflow:hidden;
text-align:center;
}
.logo_1{
margin:5%;
text-align:center;
}
.article{
width: 80%;
border: 1% solid ##68cdd5;
margin-left:18%;
font-weight:bold;
text-align:center;
}
.article p{
color:white;
font-weight:bold;
dispaly:inline-block;
text-align:left;
}
.back{
text-align:left;
}
.logo_2{
float:left;
margin-left: 5%;
margin-top: 20%;
}
.logo_3{
float:right;
margin-right:5%;
margin-top: 20%;
}
</style>
</head>
<body>
<div class="back">
<img src="images/退出键.png">
</div>
<div class="logo_1">
<img src="images/葡萄藤.png">
<div class="article">
<p>葡萄藤轻游戏专注于桌游领域，提供在线杀人游戏，捉鬼，炸狼堡等多种聚会游戏，以下线下聚会桌游道具
</div>
<div class="logo_2">
<img src="images/椭圆1.png">
</div>
<div class="logo_3">
<img src="images/椭圆2.png">
</div>
</div>
</body>
</html>
返回列表
评论