Skip to main content

Posts

Showing posts with the label background

Bootstrap Project Study: Create A Nice Landing Page

I have learned how to create a image gallery, and now it's time to create a nice landing page. Add Bootstrap CSS and Java Script Links Firstly, we need to install Bootstrap CSS link in the <head> element and add the Java Script & J Query links at the bottom of the <body> . Create Major Content in Grid System I love coffee so much, so I would like to create a landing page named "Coffee Time". I want all my text in a container, so it will help to style them as a whole later. Since I only have two headline words, I want them to display in the full-size grid, which is 12 columns. Under the text, I add a large size bootstrap button, so users can click on it. The page looks like this: all the content is on the top left of the page, and I don't like it.  Style The Content I want all the content to be in the center of the page. Therefore, I add <div id="content"> tag outside the headers & button.  Then, I...

Intro to CSS: How To Add Border & Background To Your Web Page

When we open any web page, almost all of them have unique backgrounds. Background can let people feel the personality of the brand. For some website, the web page also include a few borders, which make the page content more organized. Today, I am going to show you how to add border and background to your web page. Step One: Create a simple HTML web page No matter what, you always have to create a web page first. Since I love cooking, so I build a Love Cooking and Food blog page. The HTML part is: In the <body> part, I add a page header, a search bar, a short navigation which include four parts:"Home", "Homemade Recipes", "Food Photos" and "Diet Style". Each part should has hyperlinks to another page, but I don't have another page yet, so I just keep them here. Then, I write some simple text about this site and use <div> tag to block all the paragraphs for the CSS purpose. The outcome is just a all...