HTML
HTML是Hypertext markup language(超文本标记语言),你可以理解为网页的结构。
<!DOCTYPE html>
<html>
<head>
<title>Profile Page</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
<div class="navbar-brand">Catbook</div>
<div class="navbar-nav" id="nav-item-container">
<a class="nav-item nav-link disabled">Home</a>
<a class="nav-item nav-link active" href="">Profile</a>
</div>
</nav>
<div class="container text-center" id="profile-container">
<div class="large-profile-container text-center my-4">
<div class="circle-avatar" id="profile-image"></div>
</div>
<hr>
<div id="name-container">
<h1 id="profile-name">Some User</h1>
</div>
<div class="row mt-4">
<div class="col">
<h4>About Me</h4>
<br>
<div class="text" id="profile-description">
I am an avid cat-lover. I have 9 different cats: Aberforth, Belinda, Carmen, Darsh, Evelyn, Francis II, Gottfried, Hamilton, and Irma.
</div>
</div>
<div class="col-6">
<div class="card">
<div class="card-header">
<h4>My Latest Post</h4>
</div>
<div class="card-body" id="latest-post-card">
<p class="story-content card-text" id="profile-status">Today was a great day! I made a home-made sushi banquet for me and my family of cats ^_^</p>
</div>
</div>
</div>
<div class="col">
<h4>My Favorite Type of Cat</h4>
<br>
<h3 id="favorite-cat">Russian Blue</h3>
</div>
</div>
</div>
</body>
</html>
注意<span>和<div>的区别，前者是inline,而后者是独占一行。
ID和class的区别在于ID是唯一辨识label但是class是类，可能包括多个label
CSS
Cascading Style Sheets是一种用来为结构化文档（如HTML文档或XML应用）添加样式（字体、间距和颜色等）的计算机语言
@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,600');
body {
font-family: 'Open Sans', sans-serif;
font-weight: 300;
}
.story {
margin: 10px 0px;
}
.story-creator {
font-size: 20px;
font-weight: 600;
}
.story-content {
font-size: 40px;
}
.story-comments {
}
.comment-creator {
font-weight: 600;
}
.feed-container {
padding: 1rem 0;
}
div.circle-avatar{
/* make it responsive */
max-width: 100%;
width:100%;
height:auto;
display:block;
/* div height to be the same as width*/
padding-top:100%;
/* make it a circle */
border-radius:50%;
/* Centering on image`s center*/
background-position-y: center;
background-position-x: center;
background-repeat: no-repeat;
/* it makes the clue thing, takes smaller dimension to fill div */
background-size: cover;
/* it is optional, for making this div centered in parent*/
margin: 0 auto;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.large-profile-container {
padding: 0 35%;
}
#profile-image {
background-image:url(https://i.pinimg.com/736x/98/e0/7d/98e07decc7c1ca58236995de3567e46a--cat-shirts-kitties-cutest.jpg);
}
ID使用#而class使用.classname