发表于： 2018-11-30 23:24:21
4 850
今天完成的事情
html文件编写
新建html文件及css文件夹
写出html框架，在头部引用style.css,并设置自适应
1. <head>
2. <meta charset="UTF-8">
3. <meta name="viewport" content="width=device-width,initial-scale=1.0">
4. <title>魔镜介绍页</title>
5. <link rel="stylesheet" type="text/css" href="css/style.css">
6. </head>
根据设计图将页面分为top logo content icons四个部分
在html文件中写出框架
1. <body>
2. <div class="page-container">
3. <div class="top"></div>
4. <div class="logo"></div>
5. <div class="content"></div>
6. <div class="icons"></div>
7. </div>
8. </body>
在css文件中为page-container设置宽度和背景色
1. .page-container{
2. width: 100%;
3. background:#68cdd5;
4. }
盒子与浏览器边缘有空隙，是由于浏览器的默认的填充和边界造成的。
为了消除空隙在css文件中为body设置样式
1. html, body{
2. margin:0;
3. padding:0;
4. }
分别为各模块添加元素，
通过<img src="images/back.png" alt="back" />载入图标，其中src为路径，alt为注释文字。
用<b>标签为文字加粗
1. <body>
2. <div class="page-container">
3. <div class="top">
4. <a><img src="images/back.png" alt="back" /></a>
5. </div>
6. <div class="logo">
7. <img src="images/logo.png" alt="logo"/>
8. </div>
9. <div class="content">
10. <b>葡萄藤轻游戏专注于桌游领域，提供在线杀人游戏，捉鬼，炸狼堡等多种聚会游戏，以线下聚会桌游道具为主。</b>
11. </div>
12. <div class="icons">
13. <div class="icon1">
14. <img src="images/icon1.png"/><br/>
15. 290560933
16. </div>
17. <div class="icon2">
18. <img src="images/icon2.png"/><br/>
19. BJPTTeng
20. </div>
21. <div class="clear"></div>
22. </div>
23. </div>
24. </body>
在css文件中对各元素设置样式
为icon1、2添加浮动，为了使背景显示全，再加入一个div清除浮动
text-align: center;设置居中
.content及.icons用margin-left:auto; margin-right:auto;设置居中
明天计划的事情
继续任务3，了解常用属性及样式
遇到的问题
高度怎么保持和设备一致，使纵向没有下拉框切背景色填满屏幕？
按昨天两种切图步骤切的图在页面里显示都有白边，是哪的问题？我下载的psd图在github文件夹里有，师姐可以帮忙看下么？
收获
对div排布进一步了解
返回列表
评论