作者:CYL
日期:2020-10-26
标签:HTML CSS 论命名的规范性
虽然第一次培训被我鸽了,但是还是开挂作弊,找专人问了问这个网页的界面布置怎么样才好。之前听人说让我不要用那么多div,后期会很麻烦,所以在第一次作业中我乱七八糟的罗列了一番。这次得到的建议却是:尽量用div这种不带默认属性的玩意嵌套堆叠,然后自己使用flex布局设置会简单很多。当然还有命名规范问题,像我上次就是first second…这种傻子才能懂的命名当时这次改成了nav、content、topic、footer、left、logo这种(以后肯定会用专有名词,这次先按语义来的)。
总之,这次的改进就是:1、改用div嵌套(划分盒子是一门艺术) 2、命名更加规范
题目再重新描述一次吧
ps1:上面的任务是递进的,如果觉得难度过大可以按照自己的能力完成前面的操作。
ps2:多在CSDN等网站上寻找别人的博客以及资料,有搜集资料使用的能力
ps3:最好做一步搞懂一步,到时候面试可能会询问你实现的细节
啦啦啦,屁话不说了,我就贴一下我的代码
(我知道阅读者没有里面的图片引用,所以没法复现,看别人代码也狗的要死,所以也不费劲具体打注释介绍了)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>高级任务</title>
<style type="text/css">
.nav{
display: flex;
flex-direction: row;
justify-content: space-between;
margin: 30px 30px 0px 30px;
}
.nav_left{
display: flex;
flex-direction: row;
font-size: 2.5em;
font-weight: 900;
flex-grow: 5;
align-items: center;
}
.Logo{
height: 40%;
margin-right: 15px;
}
.nav_right{
display: flex;
flex-direction: row;
font-size: 2em;
font-weight: 600;
flex-grow: 2;
justify-content: space-around;
align-items: center;
}
.header-title-box{
display: flex;
flex-direction: column;
height: 200px;
background: url("image_高级/background.png");
background-repeat: no-repeat;
background-position: center;
background-size: 100% 100%;
align-items: center;
margin: 100px 30% 0 30%;
}
.header-title{
font-size: 2em;
font-weight: 900;
margin-top: 50px
}
.header-content{
margin-top: 20px;
color:lightgray;
}
.content{
display: flex;
flex-direction: column;
margin: 60px 2% 30px 2%;
}
.content-UpAndDown{
display: flex;
flex-direction: row;
justify-content: space-around;
}
.content-boxs{
display: flex;
flex-direction: column;
margin: 1%;
box-shadow:0 0 50px 10px lightgray;
justify-content: space-around;
width:33%;
align-items: center;
}
.content-img{
justify-content: space-around;
width: 100%;
}
.content-name{
font-size: 2.5em;
font-weight: 900;
margin: 50px 0;
}
.content-discribe{
font-size: 1.2em;
color: lightgray;
margin-bottom: 60px;
}
.footer-Logo-box{
display: flex;
flex-direction: row;
justify-content: center;
}
.footer-Logo{
border: #E2E2E2 1px solid;
padding: 10px;
border-radius: 50%;
transform:translateY(60px);
background-color: white;
}
.footer-content{
display: flex;
flex-direction: column;
align-items: center;
margin: 80px 0 40px 0;
}
.footer-content-title{
font-size: 1.5em;
font-weight: 900;
margin: 10px;
}
.footer-content-discribe{
font-size: 1.2em;
color:#D8D8D8;
}
.footer-share{
display: flex;
position:relative;
flex-direction: row;
justify-content: space-around;
width:20%;
text-align: center;
margin: 0 auto;
}
</style>
</head>
<body>
<div class="nav">
<div class="nav_left">
<img class="Logo" src="image_高级/Logo.png">
<div>Gratia</div>
</div>
<div class="nav_right">
<div>About</div>
<div style="color:brown;">Menu</div>
<div>Gallery</div>
<div>Contact</div>
</div>
</div>
<hr>
<div class="header-title-box">
<div class="header-title">MENU</div>
<div class="header-content">Lorem ipsum dolor sit amet,consectetur adipiscing elit</div>
</div>
<div class="content">
<div class="content-UpAndDown">
<div class="content-boxs">
<img class="content-img" src="image_高级/Main Dishes.png">
<div class="content-name">MAIN DISHES</div>
<div class="content-discribe">lorem ipsum doloor sit amet,consectetur adipiscing elit</div>
</div>
<div class="content-boxs">
<img class="content-img" src="image_高级/Soups.png">
<div class="content-name">SOUPS</div>
<div class="content-discribe">Lorem ipsum dolor sit amet,consectetur adipiscing elit</div>
</div>
<div class="content-boxs">
<img class="content-img" src="image_高级/Hamburgers.png">
<div class="content-name">HAMBURGERS</div>
<div class="content-discribe">Lorem ipsum dolor sit amet,consectetur adipiscing elit</div>
</div>
</div>
<div class="content-UpAndDown">
<div class="content-boxs">
<img class="content-img" src="image_高级/Desserts.png">
<div class="content-name">DESSERTS</div>
<div class="content-discribe">Lorem ipsum dolor sit amet,consectetur adipiscing elit.</div>
</div>
<div class="content-boxs">
<img class="content-img" src="image_高级/Barbecue.png">
<div class="content-name">BARBECUE</div>
<div class="content-discribe">Lorem ipsum dolor sit amet,consectetur adipiscing elit.</div>
</div>
<div class="content-boxs">
<img class="content-img" src="image_高级/Salads.png">
<div class="content-name">SALADS</div>
<div class="content-discribe">Lorem ipsum dolor sit amet,consectetur adipiscing elit.</div>
</div>
</div>
</div>
<div class="footer-Logo-box">
<img class="footer-Logo" src="image_高级/Logo.png">
</div>
<hr color="#E2E2E2">
<div class="footer-content">
<div class="footer-content-title">Gratia Restaurant</div>
<div class="footer-content-discribe">Copyright 2016.All rights reserved by symu.</div>
</div>
<hr width="20%" color="#E2E2E2">
<div class="footer-share">
<img src="image_高级/FB.png">
<img src="image_高级/TR.png">
<img src="image_高级/IG.png">
</div>
</body>
</html>