CSS(二）

今天的培训，主要是讲了上次布置的作业。当我第一次看到这份作业时，我感到了不知所措。面对复杂的网页，我不知道该从何下手。冷静下来，我将文件分成了三个块，第一个为top,第二个为center,第三个为bottom。随后，在将每个块中的元素进行细分，添加上不同的文字和图片，网页的大致就完成了。最后，使用F12键，调节具体尺寸大小。
在这次作业中，我学到了很多新的东西。用margin改变边距，可以是页面更美观；border可以设置中轴线；<div>元素可以框起来图片和文字；利用PS导出图片，查看字体颜色等......
这次作业一个不小的挑战，但我喜欢这种挑战，并且期待下一次挑战。


<!DOCTYPE html>

FOOD

Graria

About Menu Gallery Contact

Lorem ipsum dolor sit amet,consectetur adipiscing elit.

BARBECUE

Lorem ipsum dolor sit amet,consectetur adipiscing elit.

DESSERTS

Lorem ipsum dolor sit amet,consectetur adipiscing elit.

HAMBURGERS

Lorem ipsum dolor sit amet,consectetur adipiscing elit.

MAIN DISHES

Lorem ipsum dolor sit amet,consectetur adipiscing elit.

SALADS

Lorem ipsum dolor sit amet,consectetur adipiscing elit.

SOUPS

Lorem ipsum dolor sit amet,consectetur adipiscing elit.

Gratia Restaurant

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;
}

猜你喜欢