今天的培训,主要是讲了上次布置的作业。当我第一次看到这份作业时,我感到了不知所措。面对复杂的网页,我不知道该从何下手。冷静下来,我将文件分成了三个块,第一个为top,第二个为center,第三个为bottom。随后,在将每个块中的元素进行细分,添加上不同的文字和图片,网页的大致就完成了。最后,使用F12键,调节具体尺寸大小。
在这次作业中,我学到了很多新的东西。用margin改变边距,可以是页面更美观;border可以设置中轴线;<div>元素可以框起来图片和文字;利用PS导出图片,查看字体颜色等......
这次作业一个不小的挑战,但我喜欢这种挑战,并且期待下一次挑战。
<!DOCTYPE html>
Lorem ipsum dolor sit amet,consectetur adipiscing elit.
![](image/Barbecue.png)
BARBECUE
Lorem ipsum dolor sit amet,consectetur adipiscing elit.
![](image/Desserts.png)
DESSERTS
Lorem ipsum dolor sit amet,consectetur adipiscing elit.
![](image/Hamburgers.png)
HAMBURGERS
Lorem ipsum dolor sit amet,consectetur adipiscing elit.
![](image/Main Dishes.png)
MAIN DISHES
Lorem ipsum dolor sit amet,consectetur adipiscing elit.
![](image/Salads.png)
SALADS
Lorem ipsum dolor sit amet,consectetur adipiscing elit.
![](image/Soups.png)
SOUPS
Lorem ipsum dolor sit amet,consectetur adipiscing elit.
![](image/Logo.png)
Gratia Restaurant
Copyright 2016.All rights reserved by symu
![](image/FB.png)
![](image/IG.png)
![](image/TR.png)
body
{
margin: 0;
background-color: #eeeef2;
text-align: center;
-webkit-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
user-select:none;
}
.top
{
display: inline-block;
width: 90%;
height: 50px;
}
.logo
{
float: left;
height: 100%;
color: black;
}
.logo img
{
margin-top: 2px;
height: 100%;
vertical-align: middle;
}
.logo span
{
font-family: Montserrat;
font-weight: 600;
vertical-align: middle;
line-height: 100%;
}
.more
{
float: right;
height: 100%;
}
.more a
{
font-family: Montserrat;
font-weight: 600;
text-decoration: none;
color: black;
vertical-align: middle;
margin-left: 50px;
}
.more a:hover
{
color: #d89b64;
}
.under_logo
{
width: 600px;
display: inline-block;
margin-top: 120px;
background-size: 600px;
background-repeat: no-repeat;
background-position: 50% 115%;
}
.MENU
{
font-family: Montserrat;
font-size: 120%;
margin-top: 160px;
}
.under_MENU
{
font-family: Crimson Text;
font-size: 80%;
margin-bottom: 40px;
}
.gratia
{
background-repeat: no-repeat;
background-position: 50% 115%;
width: 600px;
display: inline-block;
background-size: 600px;
}
.main
{
display: inline-block;
width: 90%;
margin-top: 50px;
min-width: 972px;
}
.detail
{
display: inline-block;
width: 26%;
margin: 2%;
height: 440px;
text-align: center;
background-color: white;
}
.detail img
{
width: 100%;
}
.under_img
{
font-family: Montserrat;
font-weight: 600;
font-size: 160%;
margin-top: 50px;
}
.under_soup
{
font-family: Crimson Text;
font-size: 80%;
color: #8b909d;
}
.bottom
{
margin-top: 200px;
width: 100%;
border-top-style: solid;
border-top-color: rgba(0,0,0,0.2);
border-top-width: 1px;
height: 500px;
text-align: center;
}
.circle
{
display: inline-block;
width: 110px;
height: 110px;
border-radius: 50%;
border: 1px solid rgba(0,0,0,0.2);
margin-top: -55px;
background-color: #eeeef2;
}
.circle img
{
width: 80%;
margin-top: 11px;
}