今天完成的事情
CSS任务三：ui图的还原
html代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
<title>任务三</title>
<link rel="stylesheet" type="text/css" href="Task03.css">
</head>
<body>
<img src="1.png" class="top" alt="image">
<img src="2.png" class="center" alt="image">
<div class="p1">
葡萄藤轻游戏专注于桌游领域，提供在线杀人游戏，捉鬼，
炸狼堡等多种聚会游戏，以线下聚会桌游道具为主。</div>
</div>
<div class="box1">
<img src="3.png" class="left" alt="image">
<div class="p2">290560933</div>
<!-- 由于left元素和p2元素是上下垂直放置，所以此处在他们外面再套一个盒子 -->
</div>
<div class="box2">
<img src="4.png" class="right" alt="image">
<div class="p3">BJPTTeng</div>
<!-- 由于right元素和p3元素是上下垂直放置，所以此处在他们外面再套一个盒子 -->
</div>
</body>
</html>
<div>
CSS样式如下
body{
background-color: rgb(104, 205, 213); /* 背景颜色可在ps软件中取得rgb值 */
margin:0px; /* 设置所有边距为0，子元素就会贴边靠 */
text-align:center
}
.top{
height:27px;
width:27px;
margin-top:10px;
margin-left: 17.5px;
display:block; /* 改变为块状元素，从而可以靠在左上角，设置宽高值从而还原ui图 */
}
.center{
height:35px;
width:90.5px;
margin-top:21px;
/* 此处只需要设置宽度高度以及测量出来的margin-top， */
/* 而父元素中设置了center属性来居中所以不设置左右边距 */
}
.p1{
height: 72px;
font-size: 13.3px;
color: white;
margin-top:63px;
margin-left: 45.6px;
margin-right: 50.8px;
/* 此元素和上面的center元素同理，只是多了字体大小和颜色 */
}
.box1{/* 此盒子为left和p2外面的盒子 */
height: 100px;
width: 100px;
margin-top:87px;
text-align: center; /* 设置居中从而让盒子内部的图像和数字能居中放置 */
float:left;
}
.left{
height:42.5px;
width:42px;
display: inline-block;
/* 注意：此处inline-block是行内块状元素，不是独占一行的， */
/* 所以会受到父元素box1的center参数影响而居中; */
/* 如果此处设置为block块状元素的话，那么left元素不会和下方数字同列显示， */
/* 因为块状元素默认会向左靠齐 */
}
.p2{
font-size: 9.5px;
color: white;
}
.box2{
height: 100px;
width: 100px;
margin-top:87px;
text-align: center;
float:right;
/* 此盒子为right和p3外面的盒子 */
/* box2盒子原理同box1，只不过box2盒子由于要和box1同行排列， */
/* 所以此处设置为 右浮动 */
}
.right{
height:42.5px;
width:42px;
display: inline-block;
}
.p3{
font-size: 9.5px;
color: white;
}
PC网页显示如下，已初步完成自适应
手机端网页显示如下
今天遇到的问题
还原ui图过程中遇到的问题以及解读：
问题：开始时候下方代码设置出错，导致在浏览器调试界面模拟手机访问时，图片以及字体非常小，看不清楚
错误代码： <meta name="viewport" content="width=device-width,initial-scale=0,maxium-scale=1.0,user-scalable=0">
正确代码： <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
解读：原因在于viewport参数设置错误，以下是viewport参数解释
width=device-width ：表示宽度是设备屏幕的宽度
initial-scale=1.0：表示初始的缩放比例
minimum-scale=0.5：表示最小的缩放比例
maximum-scale=2.0：表示最大的缩放比例
user-scalable=yes：表示用户是否可以调整缩放比例
问题：为image图片设置盒子模型
解读：img图像本身就是盒模型，无需再为其套一个盒子模型，只需为其命令，然后设置css样式即可，例如
<img src="1.png" class="top" alt="image">
css样式
.top{
height:27px;
width:27px;
margin-top:10px;
margin-left: 17.5px;
display:block;
问题：为葡萄藤字样设置居中失败
解读：为葡萄藤父元素设置居中 text-aline: center;即可，
注意：当在一个元素内设置居中属性时，居中的是该元素内部的子元素，而不是该元素相对于其父元素居中
问题：如何让ui图在pc端和移动端显示比例是一样的
解读：目前的做法是pc端的元素参数值除以2，具体原因目前没开始学习，先记住
问题：块状元素和行内块状元素的区别
解读：块状元素的特点是独占一行，且能设置宽度高度以及边距，块状元素若不设置宽度，则宽度默认是其父元素的100%;
行内块状元素的特点是和其他元素共处一行，且能设置宽度高度以及边距；
今天在CSS样式中.left样式中出错，具体见注释
今天的收获
1.任务三的ui图基本还原了，盒子模型进一步理解了，不过现在的理解还是太表面了，不够深入
明天的计划
2.任务三的回顾
3.准备开始任务四
返回列表
评论