程式設計雜筆

[程設雜筆] codecademy 小project練習心得

最近在練習codecademy裡面的make a website project。這篇是練習broadway和innovation cloud時所到的一些CSS用法。

https://www.codecademy.com/en/courses/html-css-prj

background image

http://www.w3schools.com/css/css3_backgrounds.asp

http://www.w3schools.com/cssref/css3_pr_background-size.asp

http://css-tricks.com/perfect-full-page-background-image/


.jumbotron {
 height: 800px;
 background:url(http://s3.amazonaws.com/codecademy-content/projects/broadway/bg.jpg);
 background-size:cover;
 background-repeat: no-repeat;
background-position: center center;
}

用background-size:cover 可以讓圖片隨著視窗而放大縮小。

橫向無壓縮

否則原本如果寫死


background-size: 100% 800px;

會造成橫向圖片縮放

圖片橫向壓縮


 

border

http://www.1keydata.com/css-tutorial/tw/border.php

http://www.w3schools.com/cssref/pr_border-color.asp

.btn-main {
background-color: #333;
color: #fff;
font-family: 'Raleway', sans-serif;
font-weight: 600;
font-size: 18px;
letter-spacing: 1.3px;
padding: 16px 40px;
text-decoration:none;
text-transform: uppercase;
}

.btn-default {
background-color: #FFFFFF;
color: #000000;
font-family: 'Raleway', sans-serif;
font-weight:600;
font-size: 10px;
padding: 8px 20px;
text-decoration:none;
text-transform: uppercase;
border-color:#333333;
border-style: solid;
border-width: 1px;
}

.btn:hover {
background: #117bff;
cursor: pointer;
transition: background .5s;
}

當鼠標滑過元件時對應的特徵

發表迴響

在下方填入你的資料或按右方圖示以社群網站登入:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / 變更 )

Twitter picture

You are commenting using your Twitter account. Log Out / 變更 )

Facebook照片

You are commenting using your Facebook account. Log Out / 變更 )

Google+ photo

You are commenting using your Google+ account. Log Out / 變更 )

連結到 %s