发表于： 2018-11-01 23:41:32
1 906
编辑日报内容...
1.css叠层样式表：用来表现HTML）或XML等文件样式的计算机语言。可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。
2. 脚本（Script）是批处理文件的延伸，是一种纯文本保存的程序，一般来说的计算机脚本程序是确定的一系列控制计算机进行运算操作动作的组合，在其中可以实现一定的逻辑分支等
3.css特点：
1、丰富的样式定义：外观、边框、大小写
2、易于使用和修改：将相同样式的元素进行归类
3、多页面应用
4、叠层：对一个元素多次设置同一个样式，将使用最后一次设置的属性。
5、页面压缩
6、一些属性：
text-indent:2em设置缩进2字
4、盒模型：
1、内容content：可设置宽
2、补白padding：可设置宽高
3、边框border：可设置边框线属性，宽高
4、边界margin：可设置宽高
5.float浮动：浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。
看图：把框 1 向右浮动时，它脱离文档流并且向右移动，直到它的右边缘碰到包含框的右边缘
当框 1 向左浮动时，它脱离文档流并且向左移动，直到它的左边缘碰到包含框的左边缘。因为它不再处于文档流中，所以它不占据空间，实际上覆盖住了框 2，使框 2 从视图中消失。
如果把所有三个框都向左移动，那么框 1 向左浮动直到碰到包含框，另外两个框向左浮动直到碰到前一个浮动框
如果包含框太窄，无法容纳水平排列的三个浮动元素，那么其它浮动块向下移动，直到有足够的空间。如果浮动元素的高度不同，那么当它们向下移动时可能被其它浮动元素“卡住”：
 |
Float属性：left、right、none、inherit继承父元素浮动属性值
6.浮动行框和清理：clear属性，属性的值可以是 left、right、both 或 none，它表示框的哪些边不应该挨着浮动框。
例：图像的左侧和右侧均不允许出现浮动元素：img
{
float:left;
clear:both;
}
7.任务分析：
1、生成9个正方形，有背景颜色，无边框线
2、浮动布局正方形，确保每行有3个正方形，
3、大小随页面缩放改变
4、在移动端显示
5、方块圆角没有想法
第一次代码：
<head>
<meta charset="UTF-8">
<title>任务1</title>
<style type="text/css">
p {
width: 150px;
height: 150px;
float: left;
background-color: yellow;
margin: 10px ;
}
#hang1{float: left;}
#hang2{
float: left;
clear: left;
}
#hang3{float: left;
clear: left;
}
</style>
</head>
<body>
<div>
<div id="hang1">
<p ></p>
<p ></p>
<p ></p>
</div>
<div id="hang2">
<p ></p>
<p ></p>
<p ></p>
</div>
<div id="hang3">
<p ></p>
<p ></p>
<p ></p>
</div>
</div>
</body>
结果：可以实现九宫格样式，但放大网页时大小不随网页变化，网页缩小时九个方块排成一列，没有圆角，程序看起来很乱。
对策：尝试用div代替p
<head>
<meta charset="UTF-8">
<title>任务一</title>
<style type="text/css">
#total{width: 600px;
height: 600px;
}
.swag{
width: 30%;
height: 30%;
background-color: yellow;
margin: 1%;
float: left;
}
</style>
</head>
<body>
<div id="total">
<div class="swag"></div>
<div class="swag"></div>
<div class="swag"></div>
<div class="swag"></div>
<div class="swag"></div>
<div class="swag"></div>
<div class="swag"></div>
<div class="swag"></div>
<div class="swag"></div>
</div>
</body>
效果：应用了类，代码变得更简洁，给父div设置了固定宽度和高度，子类用百分比的形式设置尺寸。
结果：放大缩小页面九宫格不变形，但大小固定不能随页面变化
对策：可以设置div的父级宽度何高度为页面尺寸的高宽，在用百分比定义子div的尺寸
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>renwu1</title>
<style type="text/css">
.swag{background-color: orange;
padding:15% 15%;
margin: 1%;
border-radius: 10%;
float: left;
}
</style>
</head>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</body>
</html>
基本完成任务一的效果：但是如此设置参数的情况下会导致九宫格整体距左右页边距不等，一侧大一侧小。
用百分比设置宽度和高度，都是以父结构的宽度为基础。
Border-radius属性设置圆角边框。也可以单独设置一个角border-left-radius
8.viewport视区：用户网页中可视的区域。
一个常用的针对移动网页优化过的页面的 viewport meta 标签大致如下：
例：
<meta name="viewport" content="width=device-width, initial-scale=1.0">
1、width：控制 viewport 的大小，可以指定的一个值，如 600，或者特殊的值，如 device-2、width 为设备的宽度（单位为缩放为 100% 时的 CSS 的像素）。
3、height：和 width 相对应，指定高度。
4、initial-scale：初始缩放比例，也即是当页面第一次 load 的时候缩放比例。
5、maximum-scale：允许用户缩放到的最大比例。
6、minimum-scale：允许用户缩放到的最小比例。
7、user-scalable：用户是否可以手动缩放。
8、device-width指的是设备的物理宽度，width是页面宽度
疑问：1、九宫格的左右侧到页面的左右边距不相同
2、所有的css样式都要写在html文件中吗？实际工作中是放在那里的
3、添加了viewport属性：<meta name="viewport" content="width=device-width,initial-scale=1,minimun=0.5,maximum=2,user-scalable=yes" >后，将HTML文件直接发送到手机上点开，发现无法缩小页面，而且允许放大的比例也不是2倍，总之就和不加这句viewport一样，这是为什么？
返回列表
评论