发表于： 2018-12-18 09:57:26
2 772
今天完成的事情：
1. 九宫格重新调整，并重新提交任务一
1.1 删除文字，id统一改为class
1.2 重新取色，保证和设计图颜色一致
1.3 效果
1.4 代码如下
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="UTF-8">
<title>CSS</title>
<style type="text/css">
html,
body {
width: 100%;
margin: 0;
padding: 0;
text-align: center;
}
.yellow {
position:relative;
width:31%;
border: 0 solid yellow;
padding-top: 31%;
margin: 1%;
background-color:#fea500;
float:left;
border-radius: 5%;
}
</style>
<head>
<body>
<div class="y">
<div class="yellow">
</div>
<div class="yellow">
</div>
<div class="yellow">
</div>
<div class="yellow">
</div>
<div class="yellow">
</div>
<div class="yellow">
</div>
<div class="yellow">
</div>
<div class="yellow">
</div>
<div class="yellow">
</div>
</div>
</body>
</html>
2. 学习CSS样式表-三种
2.1 行内样式表
直接写在标签内的样式，type里面可以写任何属性，侵入性最强，尽量不使用
<p style="color: red; margin-left: 20px">
This is a paragraph
</p>2.2 内部样式表
写在head中的样式，我现在写的都是写在head中的，样式不可以复用
<head><style type="text/css">
body {background-color: red}
p {margin-left: 20px}
</style></head>2.3 外部样式表
直接在head中调用外部CSS文件，用link标签导入到当前页面，可以复用
<head><link rel="stylesheet" type="text/css" href="mystyle.css"></head>明天计划的事情：
任务三调整细节
遇到的问题：
暂无
收获：
1. 按设计图做效果
2. 学习CSS三种样式表
返回列表
评论