# 页面设计初体验
# 1.设计思路
1.观察页面的组成,先将其分为几个版块。
2.由上到下,一个版块一个版块的进行分析设计。
1
2
2
# 2.工具介绍
1.本次使用的开发工具为webstorm,初学者可以在b站找到许多webstorm的功能介绍视频。
2.本次使用的语言为HTML以及CSS,本文最后会推荐几个学习网址。
3.CSDN、博客园。这两个是我经常访问的社区/交流平台,平时练习时有什么不明白的可以在这上面检索。
1
2
3
2
3
# 3.部分代码解析
<style type="text/css">
/*内部CSS,用于将CSS应用于单个文档或者页面,会影响页面所有元素,写在html头部的style标签中*/
.center{
/*class选择器;如果需要在HTML元素中设置CSS样式,则需要设置id或者class选择器*/
/*class选择器格式为“.xx”;id选择器格式为“#xx”*/
font-size: 16px; /*font-size规定文本的字体尺寸*/
text-align: center; /*text-align规定文本的水平对齐方式,此处为居中*/
}
.p1{
color: white;
line-height: 1px; /*设置段落间间距,但一般设置间距时不使用line-height*/
font-size: 12px;
}
.one{ /*这是我对CSS盒子模型的设置*/
width: 15%;
height: 120px;
text-align: center;
/*border: 1px solid salmon;*/ /*border为CSS边框属性,这里用来检测盒子的位置*/
margin: 140px; /*CSS外边距属性,用于设置所有外边距属性*/
display: inline-block;/*CSS定位属性display,用于规定元素生成框的类型*/
/*display常用的属性值:inline、block、inline-block,第三个是让盒子在一行里*/
}
.two {
width: 800px;
height: 300px;
margin: 0 auto;/*auto可表示两种情况,占用可用空间或0px*/
border: 2px solid white;
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<p class="center">front-end development</p>
/*
<p>段落标签</p>
,class="center"表示该段落中的元素具有".center"中的CSS样式*/
1
2
3
4
2
3
4
<div class="one">
/*
<div>盒子模型</div>
*/
<h3 style="color: lightgreen">Easy</h3>
/*内联CSS,用于单个行或元素,设置了该行文字的颜色*/ To use BEM,you only need
to employ BEM's naming convention
</div>
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
<p class="p1">
<u><i>semantic custom tags?</i></u>
</p>
<br />
<p style="color: white;font-size: 12px">
Look for answers in the awesome<u>FAQ list</u>
</p>
/*多个标签的叠用。同时使用了<u></u>下划线标签、<i></i>斜体标签还有
<p></p>
段落标签*/
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
<div class="two" style="background-color: indianred">
xxxxxxxxxx
</div>
/*一个盒子里面设计独有的CSS样式,也可以用“公用”的样式*/
1
2
3
4
2
3
4
# 4.困难与未实现的设想
1.未能成功插入图片,使了许多种方式,仍未成功。不知道是不是“.html”和图片存储的路径问题。
2.盒子里套盒子。不是简单的一个大盒子里面一个小盒子,是那种一个大盒子里很多个有序排列的小盒子。
3.一段话分为几行显示。盲猜是盒子的大小问题,但是没有完全弄明白,有些地方是一行字就用一个<p></p>显示的。
1
2
3
2
3
# 5.推荐学习网址
3.W3school