Java學習第二天
前言:
今天老師說需要學一點前端的知識,於是乎,我們花了一天的時間學了一點前端,今天的故事由此開啟!!!
web中的HTML CSS
HTML
HTML: HyperText Markup Language(全稱) 中文名是:超文字標記語言
頁面的結構為:首行宣告文件型別(<!DOCTYPE html>)-->根標記(<html></html>)>頭部標記/主體標記<body></body>
標籤-->div 是web中最常用,最重要的一個標籤,往往一個高階前端工程師,可以非常靈活的運用div標籤
span-->是一個塊級標籤不會自動換行,不能設定寬高用來存放文字資訊
br-->換行標籤
style-->風格/樣式 經常寫於title標籤下,用作內聯樣式.
meta-->元 元資料 設定字元編碼集
屬性-->標籤中內部的id class type charset style等
CSS
CSS-->Cascading Style Sheets的縮寫 , 中文名 : 層疊樣式表
選擇器
三種基本選擇器-->ID選擇器,類選擇器,標籤選擇器
ID選擇器的語法: #ID名{}
類選擇器的語法: .class名{}
標籤選擇器的語法: 標籤名{}
樣式
height-->高度
width-->寬度
background-image-->背景圖片 這裡邊的"url"表示的是圖片的路徑
background-color-->背景顏色 顏色的表達方式有很多種,這裡的#ffffff是其中一種,代表白色
background-size-->背景圖片的尺寸 我這裡使用了百分比(%),還可以使用畫素(px)
background-repeat-->屬性設定是否及如何重複背景影象,這個如果不設定的話,背景圖片會重複平鋪在元素中
font-size-->設定不同的 HTML 元素的尺寸 我這裡設定的是文字的大小
font-weight-->設定字型的粗細
font-family-->設定字型 這裡直接把字型的名稱放在最後的雙引號裡就行
margin-->間距
margin-bottom-->下間距
display-->使段落生出行內框
position-->定位元素 這裡就是相對定位
relative-->相對定位
absolute-->絕對定位 這裡就是絕對定位
left-->元素與父元素左邊的距離
top-->元素與父元素上邊的距離
border-radius-->向元素新增圓角邊框 當設定的值為50%時,所表現出來的圖形為圓形
overflow-->清除浮動
這裡需要注意的是,當子元素設定了相對定位,並且用百分比表示時,父元素必須設定寬和高
總結:
在快捷鍵 Ctrl+c 與Ctrl+v 的幫助下 成功寫出了一張名片
附圖:
程式碼如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>長安店小二</title>
<style>
html{
height: 100%;
}
body{
background-image: url("jingcheng.jpg");
background-repeat: no-repeat;
background-size: 100% 100%;
height: 100%;
}
.beijing{
height: 300px;
width: 500px;
background-image: url("2011081415393399015.jpg");
background-repeat: no-repeat;
background-size: 100% 100%;
position: relative;
top: 25%;
left: 25%;
border-radius: 20px;
}
.logo{
color: darkorange;
font-size: 50px;
font-family: "宋體";
position: absolute;
left: 30px;
top: 8px;
}
.herder{
background-image: url(dianxiaoer.jpg);
height: 200px;
width: 200px;
background-size: 100% 100%;
position: absolute;
right: 50px;
top: 80px;
border-radius: 50%;
}
.wenben{
position: absolute;
left: 12px;
top: 100px;
color: white;
}
</style>
</head>
<body>
<div class="beijing">
<div class="logo">
長安雲來客棧
</div>
<div class="herder"></div>
<div class="wenben">
<p><h3>姓名:店小二</h3></p>
<p>職業:服務員</p>
<p>手機:***********</p>
<p>QQ:*********</p>
<p>郵箱:*********@qq.com</p>
</div>
</div>
</body>
至此,第二天的學習告一段落
ps:週末休息!!!!!!!! 靠靠靠靠靠靠靠靠靠!!!!!!! 耶耶耶耶耶耶耶耶耶!!!!!!!!!