代碼實現(xiàn)
- 開始我的真的以為語言是相通的,以為google首頁真的很簡單,結(jié)果真的很簡單,只是對于我很難.
- 圖片是直接在google首頁截取的圖片
- 實現(xiàn)的效果如圖:
屏幕快照 2017-07-25 14.18.20.png
- 實現(xiàn)的代碼塊:
<!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做成兩個不同的塊級元素 否則會視為一個整體 -->
<!--當(dāng)是兩個塊級元素下一個自動以上一個為尺寸-->
<div>
<!--同一目錄之下不能加斜杠 -->
<img class="img" src="googleImage.png">
</div>
<input class="search" type="text" name="search" placeholder="在Google上搜索或輸入網(wǎng)址">
</body>
</html>
知識點小結(jié)
- css里面只能識別星號的注釋: (/注釋/),而HTML也只能識別感嘆號:
- 圖片在同一目錄下,不用添加斜杠(/)就可以直接引用了
- 如果想要圖片居中,不能在圖片里面直接設(shè)置text-align:center,這樣是讓它的子級元素居中,應(yīng)該設(shè)置的是它裝載的塊級元素居中
- 兩個展示的視圖如果要相對布局,是不能放在同一個塊級元素之中的
- 別急,慢慢來......
