Google主页初学者项目
Google主页初学者项目
提问于 2019-08-09 21:03:08
我希望得到一些反馈，我的基本娱乐谷歌主页。我正在做Odin项目学习课程，这是第一个尝试使用HTML/CSS基础的项目
HTML文件：
<!DOCTYPE html>
<html>
<head>
<title>Google</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<div class="left">
<a href="#">About</a>
<a href="#">Store</a>
</div>
<div class="right">
<a href="#">Gmail</a>
<a href="#">Images</a>
<a href="#">Apps</a>
<button type="button" name="button" id="signin">Sign In</button>
</div>
</header>
<div class="middle">
<img src= "https://www.gstatic.com/images/branding/googlelogo/2x/googlelogo_color_284x96dp.png"
alt="Google Logo" width="360" height="100">
<br>
<input type="text" name="userinput" id="userinput">
<br>
<button type="button" id="searchbutton">Google Search</button>
<button type="button" id="searchbutton">Im Feeling Lucky</button>
</div>
<footer>
<div class="left">
<a href="#">Advertising</a>
<a href="#">Business</a>
</div>
<div class="right">
<a href="#">Privacy</a>
<a href="#">Terms</a>
<a href="#">Settings</a>
</div>
</footer>
</body>
</html>CSS文件：
#userinput{
height: 30px;
width: 500px;
border-radius: 24px;
box-shadow:5px 10ox;
}
#signin{
background-color: blue;
color: white;
border-radius: 3px;
border: 1px solid blue;
}
#searchbutton{
margin-top: 20px;
opacity: .60;
padding: 0 12px;
}
.right{
float: right;
}
.left{
float: left;
}
.middle{
margin-left: 130px;
padding-top: 200px;
}
button{
line-height: 28px;
}
body{
position: relative;
text-align: center;
font-size: 14px;
}
footer{
padding-top: 200px;
}
a{
color: black;
text-decoration: none;
}
div{
word-spacing: 40px;
display: inline-block;
}回答 2
Code Review用户
发布于 2020-06-02 03:49:46
您的代码很好，但是我有一些改进的建议。
您对页眉和页脚使用了语义html，但是对于主要内容，您没有使用任何语义HTML。如果您将语义HTML标记用于您的主要内容(如main标记和section标记)，那么它将更加有趣。
在下面的图片中，您可以看到除了主要内容之外，您所遵循的所有内容。
CSS
您可以订购您的CSS代码。我会按布局排序，首先是你的正文CSS，然后是你的页眉CSS，最后是你的页脚CSS。另外，你也可以按字母之类的东西来订购。
body{
position: relative;
text-align: center;
font-size: 14px;
}
a{
color: black;
text-decoration: none;
}
div{
word-spacing: 40px;
display: inline-block;
}
.right{
float: right;
}
.left{
float: left;
}
#signin{
background-color: blue;
color: white;
border-radius: 3px;
border: 1px solid blue;
}
.middle{
margin-left: 130px;
padding-top: 200px;
}
#userinput{
height: 30px;
width: 500px;
border-radius: 24px;
box-shadow:5px 10ox;
}
button{
line-height: 28px;
}
#searchbutton{
margin-top: 20px;
opacity: .60;
padding: 0 12px;
}
footer{
padding-top: 200px;
}Code Review用户
发布于 2019-08-17 15:28:56
Html必须是每个元素的唯一值，如果您希望用相同的名称命名事物，则应该使用类。
在Css内部
#userinput > Box Shadow has a spelling mistake. of 10ox instead of 10px.
background-color: Can be shortened to just background:YourColor;
Opacity Property should be between 0 & 1, 0.60 => The 0 is redundant and can be removed在您的页脚Css中，我会交换div & a，因为a在div中。同样，默认的颜色也是黑色。所以这可能会被移除。我注意到你使用填充-顶部，它似乎设置了页脚的高度，这是可以的，但只是‘高度’是4个少字符。所以稍微缩短你的代码。
此外，如果你刚刚开始，试着进入使用'vw'，'vh'，'vmin‘和'vmax’单位的习惯在任何宽度和高度。
他们代表；
'vh' => viewport Height,
'vw' => viewport Width,
'vmin' => viewport Minimum,
'vmax' => viewport Maximum.它们响应于页面正在被浏览的设备，因为px、rem、em等并不是真正的响应。希望这些帮助:)
页面原文内容由Code Review提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://codereview.stackexchange.com/questions/225854
复制相关文章
相似问题
腾讯云开发者
