Shulou(Shulou.com)06/01 Report--

This article mainly shows you "how to use HTML5 to achieve website in windows8 stick", the content is simple and easy to understand, organized clearly, I hope to help you solve doubts, let Xiaobian lead you to study and learn "how to use HTML5 to achieve website in windows8 stick" this article bar.

The code is as follows:

.nav {

padding: 5px 0px 5px 0px;

margin: 0px;

width: 100%;

list-style-type: none;

background-color: #cddcd6;

height: 28px;

}

.nav li {

margin: 0px 1px 0px 0px;

float: left;

background-color: #0094ff;

padding: 5px 10px 5px 10px;

}

.dvItem {

width: 100%;

height: 400px;

background-color: #b6ff00;

clear: both;

}

.main {

width: 960px;

margin: 0px auto 0px auto;

}

Home

Item1

Item2

Item3

Item4

How to modify it? In a traditional page like this, we just need to write a CSS based on the close feature of windows 8, so that our page can be laid out and displayed at a width of 320 pixels.

The implementation code is as follows: Add the following style code to the original page

@media screen and (max-width: 320px) {

@-ms-viewport { width: 320px; }

.nav {

padding: 5px 0px 5px 0px;

margin: 0px;

width: 100%; background-color:#fff;

}

.nav li {

width: 300px;

clear: both;

margin: 0px 0px 1px 0px;

background-color: #0094ff;

padding: 5px 0px 5px 0px;

}

.dvItem {

width: 95%;

height: 600px;

background-color: #ff00a4;

clear: both;

}

.main {

width: 320px;

margin: 0px auto 0px auto;

}

}

The above is "how to use HTML5 to achieve a website in windows 8 close to" all the content of this article, thank you for reading! I believe that everyone has a certain understanding, hope to share the content to help everyone, if you still want to learn more knowledge, welcome to pay attention to the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.