发表于： 2018-10-31 23:05:40
2 833
今天完成的事：
1.下载并使用Webstorm。
<head>
<body>
文档的内容
</body>
</html>
3.CSS:层叠样式表. 作用：html是网页的骨架，而CSS是对骨架内容的修饰。使用CSS可以单独的将样式抽离出来可以提高开发效率。抽离出来的CSS可以单独加载，能够实现多个页面的共享，节约网站的带宽，就是节约成本。
CSS的引入方式
a.行内样式表： 通过标签的style属性设置。
b.内联样式表： 通过style标签实现。
c.外联样式表：通过link标签引入外部CSS文件
CSS语法特点
1.样式必须写在{ }中。
2.所有的样式都是以键值对的形式出现的。
3.样式与值之间通过':'进行连接。
4.每个属性的结尾使用分号，最好一行一个属性。
5.注释使用：/* 注释 */
6.CSS文件中不需要使用style标签。
4.盒子模型：所有HTML元素可以看作盒子。CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。
盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。不同部分的说明：
Margin(外边距) - 清除边框外的区域，外边距是透明的。
Border(边框) - 围绕在内边距和内容外的边框。
Padding(内边距) - 清除内容周围的区域，内边距是透明的。
Content(内容) - 盒子的内容，显示文本和图像。
为了正确设置元素在所有浏览器中的宽度和高度，你需要知道的盒模型是如何工作的。5.进行了任务一，用html创建九宫格，并用css对 html就行修饰；具体代码如下
<!DOCTYPE html>
<heml>
<head>
<title>九宫格<titl>
<meta charset="utf-8">
<body>
<div class="box">1</div>
<div class="box">1</div>
<div class="box">1</div>
<div class="box">1</div>
<div class="box">1</div>
<div class="box">1</div>
<div class="box">1</div>
<div class="box">1</div>
<div class="box">1</div>
</html>
创建一个CSS,命名为： 九宫格.css 代码如下：
.box {
width：30vw;
height：30vw;
background：orange;
margin-left：20px;
margin-botton:20px;
border-radius:20px;
float:left;
}
6.使用chrome的开发工具调试页面，修改样式，使九宫格大小可以随屏幕宽度改变.7.学习了viewport，并使用viewport对html进行优化，适配移动设备，模拟手机访问.
明天计划的事：完成任务一20—25项内容，对任务一从头再过一遍，加深印象，再开始任务二。
遇到的问题：
1.使用viewport对html进行优化，适配移动设备的时候，九宫格不能随屏幕大小同步改变，请教师兄后修改了width属性值为百分比后解决了这个问题。
2.修改nginx配置文件的时候找不到根目录，最后由师姐帮助解决。
收获：完成了九宫格的设计，并进行了优化处理，适配移动设备.模拟手机访问网页。
返回列表
评论