CSS Website Layout

粉丝

1小时前1小时

行政经理

CSS Website Layout

A website is often divided into multiple sections, like a top header, navigation menu, main content, and a footer:

Content

Main Content

Content

There are tons of different layout designs to choose from. However, the structure above, is one of the most common, and we will take a closer look at it in this tutorial.

CSS Header

A header is usually located at the top of the website, and often contains a logo or the website name:

Example

header {
background-color: #f1f1f1;
text-align: center;
padding: 10px;
}

Result

My Header

Try it Yourself »

CSS Navigation Bar

A navigation bar contains a list of links to help visitors navigate through your website:

Example

/* Style the topnav */
ul.topnav {
display: flex;
list-style-type: none;
margin: 0;
padding: 0;
background-color: #333333;
}

/* Style links in topnav */
ul.topnav li a {
display: block;
color: #f1f1f1;
padding: 14px 16px;
text-decoration: none;
}

/* Change color on hover */
ul.topnav li a:hover {
background-color: #dddddd;
color: black;
}

Result

Link1 Link2 Link3 Link4

Try it Yourself »

CSS Layout Content

How the content of a website should be shown, often depends on the device of the users. The most common layouts are:

1-column layout (often used for mobile browsers)
2-columns layout (often used for tablets and laptops)
3-columns layout (only used for desktops)

1-column:

2-column:

3-column:

Here we will create a 3-column layout, and change it to a 1-column layout when the width of the screen is less than 600px:

Example

div.flex-container {
display: flex;
/* Show the flex items horizontally */
flex-direction: row;
}

div.flex-container > div {
margin: 10px;
}

/* Use media query and show the flex items vertically if screen width is less than 600px */
@media screen and (max-width:600px) {
div.flex-container {
flex-direction: column;
}
}

Result

Column

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique.

Column

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique.

Column

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique.

Try it Yourself »

Tip: Learn more about the CSS @media rule in our CSS Media Queries chapter.

Tip: Learn more about CSS Flexbox in our CSS Flexbox chapter.

CSS Basic and Fixed Footer

The footer is placed at the bottom of a webpage. It often contains information like copyright and contact info.

The following example shows a basic footer styling:

Example

footer {
background-color: #f1f1f1;
text-align: center;
padding: 8px;
}

Result

Footer

Try it Yourself »

The following example shows a fixed footer that is always visible at the bottom of the page, regardless of scrolling:

Example

footer {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
background-color: #f1f1f1;
padding: 8px;
text-align: center;
z-index: 1000;
}

Try it Yourself »

CSS Responsive Website

In this example, we use media queries together with flexbox to create a responsive website, containing a flexible navigation bar and flexible content.

Example

Try it Yourself »

Ever heard about W3Schools Spaces? Here you can create your website from scratch or use a template.

Get started for free ❯

* no credit card required

★ +1

引用

参与讨论

你可立刻发布并稍后注册。如果你有帐户，立刻登录发布帖子。

粉丝

转到主题列表

CSS Functions Reference
CSS Functions Reference

Cavalry发布主题在教程

CSS Functions Reference CSS Functions CSS functions can be used to calculate values, manipulate strings or colors, create complex gradients and shapes, and more. CSS functions are typically used as values for various CSS properties. Function Description acos() Returns the inverse cosine of a number between -1 and 1 asin() Returns the inverse sine of a number between -1 and 1 atan() Returns the inverse tangent of a number between -∞ and ∞ atan2() Returns the inverse tangent of two values between -infinity and infinity attr() Returns the value of an attribute of the selected element blur() Applies a blur effect to an element brightness() Adjusts the brightness of an element (brighter or darker) calc() Allows you to perform calculations to determine CSS property values circle() Defines a circle clamp() Sets a value that will adjust responsively between a minimum value and a maximum value depending on the size of the viewport color() Allows a color to be specified in a particular, specified color space color-mix() Mixes two color values in a given color space, by a given amount conic-gradient() Creates a conic gradient contrast() Adjusts the contrast of an element cos() Returns the cosine of an angle counter() Returns the current value of the named counter counters() Returns the current values of the named and nested counters cubic-bezier() Defines a Cubic Bezier curve drop-shadow() Applies a drop shadow effect to an image ellipse() Defines an ellipse exp() Returns E raised to the power of the specified number x (Ex) fit-content() Allows you to size an element based on its content grayscale() Converts an image to grayscale hsl() / hsla() Defines a color using the Hue-Saturation-Lightness model (HSL); with an optional alpha component hue-rotate() Applies a color rotation to an element hwb() Defines a color using the Hue-Whiteness-Blackness model (HWB); with an optional alpha component hypot() Returns the square root of the sum of squares of its parameters inset() Defines a rectangle at the specified inset distances from each side of the reference box invert() Inverts the color of an image lab() Specifies a color in the CIE L*a*b color space lch() Specifies a color in the LCH (Lightness-Chroma-Hue) color space light-dark() Enables two color-value settings, and returns the first value if the user has set a light color theme, and the second value if the user has set a dark color theme linear-gradient() Creates a linear gradient log() Returns the natural logarithm (base E) of a specified number, or the logarithm of the number to the specified base matrix() Defines a 2D transformation, using a matrix of six values matrix3d() Defines a 3D transformation, using a 4x4 matrix of 16 values max() Uses the largest value, from a comma-separated list of values, as the property value min() Uses the smallest value, from a comma-separated list of values, as the property value minmax() Defines a size range greater than or equal to a min value and less than or equal to a max value (used with CSS grids) mod() Returns the remainder left over when a number is divided by another number oklab() Specifies a color in the OKLAB color space oklch() Specifies a color in the OKLCH color space opacity() Applies an opacity effect to an element perspective() Defines a perspective view for a 3D transformed element polygon() Defines a polygon pow() Returns the value of a number (x) raised to the power of another number (y) radial-gradient() Creates a radial gradient ray() Defines the offset-path line segment that an animated element should follow rem() Returns the remainder left over when a number is divided by another number repeat() Repeats a set of columns or rows in a grid repeating-conic-gradient() Repeats a conic gradient repeating-linear-gradient() Repeats a linear gradient repeating-radial-gradient() Repeats a radial gradient rgb() / rgba() Defines colors using the Red-Green-Blue model (RGB); with an optional alpha component rotate() Defines a 2D rotation of an element rotate3d() Defines a 3D rotation of an element rotateX() Defines a 3D rotation of an element around the x-axis (horizontal) rotateY() Defines a 3D rotation of an element around the y-axis (vertical) rotateZ() Defines a 3D rotation of an element around the z-axis round() Rounds a number according to the specified rounding-strategy saturate() Adjusts the saturation (color intensity) of an element scale() Defines a 2D scaling of an element scale3d() Defines a 3D scaling of an element scaleX() Scales an element horizontally (the width) scaleY() Scales an element vertically (the height) sepia() Converts an image to sepia sin() Returns the sine of a number (angle) skew() Skews an element along the x- and y-axis skewX() Skews an element along the x-axis skewY() Skews an element along the y-axis sqrt() Returns the square root of a number steps() Creates a stepped timing function for animations tan() Returns the tangent of a number translate() Allows you to re-position an element along the x- and y-axis translateX() Allows you to re-position an element along the x-axis translateY() Allows you to re-position an element along the y-axis url() Allows you to include a file in the stylesheet var() Inserts the value of a custom property ★ +1 Sign in to track progress
- 9分钟前9分钟
- 0篇回复
CSS At-rules Reference
CSS At-rules Reference

Cavalry发布主题在教程

CSS At-rules Reference CSS At-rules CSS at-rules are statements that instruct CSS on how to behave. Each at-rule begins with an @ followed by a name. The table below shows the different at-rules in CSS: At-rule Description @charset Specifies the character encoding used in the style sheet @container Define styles for elements in container, depending on the container's size or style @counter-style Lets you define your own counter styles @font-face Specifies a custom font with which to display text @font-palette-values Allows you to customize the default values of a font-palette @import Allows you to import a style sheet into another style sheet @keyframes Controls the steps in an animation by defining styles for points along the animation sequence @layer Used to control how the CSS cascade layers evaluates the order of styles @media Applies parts of a style sheet based on the result of one or more media queries @namespace Defines an XML namespace to be used in the style sheet @page Customizes the dimension, orientation, and margins of printed pages @property Allows you to define custom CSS properties directly in the stylesheet without having to run any JavaScript. This at-rule has data type checking and constraining, sets default values, and defines whether the property can inherit values or not @scope Allows you to select elements in specific DOM subtrees and target elements precisely without writing overly-specific selectors @starting-style Defines an element's starting styles before the element gets its first style update @supports Used to test whether a browser supports a CSS feature ★ +1 Sign in to track progress
- 9分钟前9分钟
- 0篇回复
CSS Pseudo-elements Reference
CSS Pseudo-elements Reference

Cavalry发布主题在教程

CSS Pseudo-elements Reference CSS Pseudo-elements A CSS pseudo-element is used to style specific parts of an element. For example, it can be used to: Style the first letter or line, of an element Insert content before or after an element Style the markers of list items Style the viewbox behind a dialog box The table below shows the different pseudo-elements in CSS: Pseudo-element Example Example description ::after p::after div::after Inserts something after the content of the specified element ::backdrop dialog::backdrop Styles the viewbox behind a dialog box or popover element ::before p::before div::before Inserts something before the content of the specified element ::file-selector-button ::file-selector-button Selects any button of type <input type="file"> ::first-letter p::first-letter Selects the first letter of every <p> element ::first-line p::first-line Selects the first line of every <p> element ::grammar-error ::grammar-error Styles a text that the browser has flagged as grammatically incorrect ::highlight() ::highlight(custom-name) Selects a custom highlight ::marker ::marker Selects the markers of list items ::placeholder input::placeholder textarea::placeholder Styles the placeholder text of <input> or <textarea> elements ::selection ::selection Styles the user-selected text ::spelling-error ::spelling-error Styles a text that the browser has flagged as incorrectly spelled ::view-transition ::view-transition Represents the root of the view transitions overlay, which contains all view transition on the page ::view-transition-group ::view-transition-group Represents a single view transition snapshot group ::view-transition-image-pair ::view-transition-image-pair Represents a container for a view transition's "old" and "new" view states - before and after the transition ::view-transition-new ::view-transition-new Represents the "new" view state of a view transition ::view-transition-old ::view-transition-old Represents the "old" view state of a view transition ★ +1 Sign in to track progress
- 10分钟前10分钟
- 0篇回复

CSS Website Layout

推荐的帖子

CSS Website Layout