发表于： 2020-04-21 00:25:12
1 1594
今天完成的事情：
1.学习了元素边框百分比的运用，width 如果不设定的话，默认会铺满屏幕，heigt不能直接用百分比，高度由内容撑起。
2.学习了CSS的几种方式：行内样式，内嵌式，链接式，导入样式。暂时学会了前2种，后两种待实战训练。
3.初步了解float ，如果当元素向某个方向浮动时，会脱离文档流，直到它碰到包含框的边框或者另一个浮动元素边框，所以当浮动某个元素时，比如向左浮动，但是左边那里原本有一个元素了，为了不覆盖挡住原本在左边的元素，要怎么做呢？还请师兄解答。
4.完成任务一的九宫格自适应任务，但是正方形的边角用的是圆角，直角还不会，百度出 clip-path 这个可以做出直角，但是还学不会，数值不会设置。待继续研究。
明天要做的事情：
1.彻底完成任务1，了解任务2，重新回顾梳理一下HTML。
2.加强学习CSS的类选择器，这里还是有点理解不透。
遇到的问题：
1.大量CSS基础知识不会，需要多多学习记忆。主要都是通过百度解决的，比如基础代码语法不熟练，像嵌入CSS样式这样的。需要多百度，多看代码。
2.W3school 里的举例有点少，有些知识难点就不太好理解。需要多百度。
今天九宫格代码：
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<meta charset="UTF-8">
<title>九宫格作业</title>
<style type="text/css">
.wudi{
background: orange;
float:left;
padding-left:31%;
padding-bottom: 31%;
margin:1%;
border-radius: 10%;
}
</style>
</head>
<body>
<div class="wudi"></div>
<div class="wudi"></div>
<div class="wudi"></div>
<div class="wudi"></div>
<div class="wudi"></div>
<div class="wudi"></div>
<div class="wudi"></div>
<div class="wudi"></div>
<div class="wudi"></div>
</body>
</html>
返回列表
评论