发表于： 2016-06-14 21:43:57
1 1398
今天完成的事情：
- 1. 完成九宫格布局（由于有部分HTML以及CSS基础，九宫格布局比较快就完成了）
2. 下载并简单配置了nginx，成功实现了直接通过电脑以及手机浏览器访问
3. 通过添加代码段<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">使网页在手机端自动布局
4. 本来想在此基础上实现一个简单的抽奖效果，后来发现所学到的CSS内容还没办法实现，此次主要想先通过实践巩固CSS知识，所以暂且放下
明天计划的事情：
明天要上一整天的课，就先定为初步开始任务2吧
遇到的问题：
1. 一开始布局九宫格的时候在安排每行三个方格的时候出现了一个小插曲，后来仔细推算了一下才发现每个方格间的margin值2px（margin全部设为1px）
2. 之前有了解过用CSS实现hover效果，但是没有使用过，今天一开始使用的时候不能实现想要的效果，后来经过查找资料跟自己动手尝试对每个选择器单独添加hover，实现了效果
收获：
1. 巩固了CSS知识
2. 学会简答配置nginx，能够实现在手机端访问页面
HTML代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>Sudoku</title>
<link type="text/css" rel="stylesheet" href="Sudoku.css" />
</head>
<body>
<div id="box">
<div id="box1"><p>10元优惠券</p></div>
<div id="box2"><p>佳能相机</p></div>
<div id="box3"><p>iPhone6s</p></div>
<div id="box4"><p>ipad mini</p></div>
<div id="box5"><p>谢谢惠顾</p></div>
<div id="box6"><p>50元充值卡</p></div>
<div id="box7"><p>再来一次</p></div>
<div id="box8"><p>山地车一辆</p></div>
<div id="box9"><p>MAC Air</p></div>
</div>
</body>
</html>
CSS代码：
@charset "utf-8";
#box{
width:312px;
height:312px;
margin:auto;
background-color:#0F0;
}
#box1,#box2,#box3,#box4,#box5,#box6,#box7,#box8,#box9{
width:100px;
height:100px;
background-color:orange;
float:left;
border:1px solid #000; /*中间部分是2px*/
margin:1px;
border-radius:10px;
text-align:center;
/*line-height:50px;*/
position:relative;
}
p{
display:none;
position:absolute;
top: 50%;
left: 40%;
height: 30%;
width: 70%;
margin: -15% 0 0 -25%;
}
#box1:hover p,#box2:hover p,#box3:hover p,#box4:hover p,#box5:hover p,#box6:hover p,#box7:hover p,#box8:hover p,#box9:hover p{
display:block;
}
返回列表
评论