代码实现
- 开始我的真的以为语言是相通的,以为google首页真的很简单,结果真的很简单,只是对于我很难.
- 图片是直接在google首页截取的图片
- 实现的效果如图:
屏幕快照 2017-07-25 14.18.20.png
- 实现的代码块:
<!DOCTYPE html>
<html>
<head>
<title>google</title>
<style type="text/css">
/*是让div中的子级元素居中 而不能在视图的本身让其居中*/
body {
text-align: center;
}
.img {
margin-top: 3cm;
width: 200px;
height: 100px;
/*text-align: 不能再视图中使其居中 css里只能识别这种星号的注释 */
}
.search {
margin-top: 1cm;
padding-top: 5px;
padding-bottom: 5px;
padding-left: 5px;
border-color: blue;
width: 50%;
}
</style>
</head>
<body>
<!-- 要把img 和input做成两个不同的块级元素 否则会视为一个整体 -->
<!--当是两个块级元素下一个自动以上一个为尺寸-->
<div>
<!--同一目录之下不能加斜杠 -->
<img class="img" src="googleImage.png">
</div>
<input class="search" type="text" name="search" placeholder="在Google上搜索或输入网址">
</body>
</html>
知识点小结
- css里面只能识别星号的注释: (/注释/),而HTML也只能识别感叹号:
- 图片在同一目录下,不用添加斜杠(/)就可以直接引用了
- 如果想要图片居中,不能在图片里面直接设置text-align:center,这样是让它的子级元素居中,应该设置的是它装载的块级元素居中
- 两个展示的视图如果要相对布局,是不能放在同一个块级元素之中的
- 别急,慢慢来......
