发表于： 2019-10-29 11:11:17
4 1005
今日完成：
首先，学习一下盒子模型。
所谓盒子模型，就是浏览器为页面中每个html元素生成的矩形盒子。这些盒子都要按照可见版式模型在浏览器上排布。
可见的页面版式主要由三个属性控制：position、display和float。
- position : 控制页面上元素的位置关系
- display : 控制元素是堆叠、并排还是不在页面出现
- float : 提供控制的方式，以便把元素组成多栏布局
- 元素盒子的属性可以分为三种：
- 边框 (border) : 可以设置边框的宽窄、样式和颜色
- 外边距（margin）：可以设置盒子与相邻元素的间距
- 内边距(padding) ： 可以设置盒子内容区与边框的间距
修改样式，使九宫格大小可以随屏幕宽度改变，并适配移动设备：
html:
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,,maximum-scale=1,user-scale=no">
<title>Sudoku</title>
<link rel="stylesheet" type="text/css" href="../css/sudoku.css">
</head>
<body id="outer">
<div class="one"></div>
<div class="one"></div>
<div class="one"></div>
<div class="one"></div>
<div class="one"></div>
<div class="one"></div>
<div class="one"></div>
<div class="one"></div>
<div class="one"></div>
</body>
</html>
- css:
* {margin: 0; padding: 0}
.one {
width: 30%;
background-color: orange;
border-radius: 10%;
margin: 1%;
border:1px solid transparent;
padding-bottom:30%;
float: right;
}
#outer{
width: 70%;
padding-top: 10%;
padding-bottom: 30%;
padding-left: 10%;
border: 1px solid transparent;
}
任务一的内容基本就完了。
接下来在云服务器上配置Nginx
server {
listen 8000;
server_name somename alias another.alias;
location / {
root /usr/local/webserver/data/www;
}
}
配置好8000端口，将文件上传对应的路径下。
在电脑上访问：
在手机上访问：
遇到的问题：
复现昨天的那个问题：
突然发现，我没法复现这个问题了。css修改半天也搞不出来。。。
昨天解决这个问题的方法是给它加内容1，今天去掉1之后div块也没有重叠的现象呀，很奇怪。
哈哈，最后还是给复现出来了：
<body>
<div class="one"/>
<div class="one"/>
<div class="one"/>
<div class="one"/>
<div class="one"/>
<div class="one"/>
<div class="one"/>
<div class="one"/>
<div class="one"/>
</body>
所以只要将div标签展开，就不会重叠了。
这是为什么呢？
明日计划：
完成任务二
收获：
学习了盒子模型与布局自适应。
学习了Nginx的配置。
返回列表
评论