basics of web design html5 and css3

Mobile micro-station, HTML5+CSS3 (REM) +jquery+zepto+iscroll+swipe Comprehensive Development Mobile website , Mobile Web site (mobile website), mobile website template, HTML5 websiteHTML5 development Framework for mobile phones There are many, how to find a suitable for their own? 1. JQuery Mobilejquery Mobile is a ver

, some functional operation of the page, users generally do not operate on the mobile side of the demand, there is no need for responsive design. Step two: Make Wireframe prototypesIn order to determine the size of a number of different types of wireframe prototype, you need to consider the different sizes, how the layout of the page changes, how the size of the content is scaled, the function, the content of the deletion, and even for the special e

1. Meta Viewport:Prevent mobile browser from automatically resizing pages: The 2. Media query: Media inquiries can only provide us with adaptive design effect, can not really realize the responsive design. For responsive design, media queries are required and require a streaming layout. @media screen and (max-width:380px) {body{background-color:red;}}, @media scr

1. How to create a CSS style sheet2.CSS3 's outstanding features3. Media query based on device attribute change style4. How to create a more beautiful mobile page using attribute change meta tagsCascading style sheets are an important part of mobile web development, and this share will learn how to write CSS and use it to customize styles for mobile pages, including media queries that customize style sheets

(px), but only relative size (EM).Body {Font:normal 100% Helvetica, Arial, Sans-serif;}The above code specifies that the font size is 100% of the default size of the page, which is 16 pixels.H1 {Font-size:1.5em;}Then, the size of the H1 is 1.5 times times the default size, which is 24 pixels (24/16=1.5).Small {Font-size:0.875em;}The size of the small element is 0.875 times times the default size, which is 14 pixels (14/16=0.875).V. Flow layout (fluid grid) or waterfall flowThe meaning of "flow

(px), but only relative size (EM).Body {Font:normal 100% Helvetica, Arial, Sans-serif;}The above code specifies that the font size is 100% of the default size of the page, which is 16 pixels.H1 {Font-size:1.5em;}Then, the size of the H1 is 1.5 times times the default size, which is 24 pixels (24/16=1.5).Small {Font-size:0.875em;}The size of the small element is 0.875 times times the default size, which is 14 pixels (14/16=0.875).V. Flow layout (fluid grid) or waterfall flowThe meaning of "flow

are used in the first line of the picture. Firefox renders Border-radius directly on the image element, but does not render inset Box-shadow. Chrome/safari are neither rendered. Solution To make Border-radius and inset Box-shadow work, the solution is to change the actual picture to Background-image. Dynamic method For dynamic implementation, you can simply use jquery to wrap a background picture outside of each picture element. The following jquery code will wrap all the pictures outsi

% H2 = "Chapter 6 mobile Web interface style css3"% Section % P = "selector" % P % Article % Lable = "attribute selector" % Lable. zrticle = "completely [class = article]" % Lable. ddzrticless = "contains [class * = article]" % Lable. abbddd = "first letter [class = A]" % Lable. aaaaae = "letter [class = E]" % Article % Lable = "pseudo class selector" % Div. Before = "% Div. Before content: Text" % Lable. A

Today to bring a more dazzling progress bar, the progress bar in a time-consuming operation to give users a better experience, will not let the user feel blindly waiting, for no progress bar long wait, the user will be the task of the crash, do not hesitate to switch off the application; commonly used for download tasks, delete a large number of tasks, page loading, etc. If you use HTML5 for mobile phone layout, it can also be used in the phone.：1. HT

Today's screen resolution, as small as 320px (IPhone), large to 2560px or even higher (large display), the range is great. In addition to the use of traditional desktops, users will increasingly be on mobile phones, netbooks, ipad-type tablet devices to browse the page. In this case, the fixed width of the design will appear more unreasonable. The page needs to be more adaptable, and its layout structure should be adjusted to respond to different devi

Today's screen resolution is as small as 320px (iPhone), as large as 2560px or even higher (large display), and the change range is extremely large. In addition to traditional desktops, more and more users will browse the pages through tablet devices such as mobile phones, netbooks, and iPad. In this case, the fixed-width design scheme will become increasingly unreasonable. The page must have better adaptability, and its layout structure should be adj

replaced! Layer Shadow CSS3 introduces a layer shadow, so it's easy to add a projection. But also support the text! As with the gradient, there is no need to modify the picture effect, directly with the use of CSS can be easily implemented. Multiple backgrounds CSS3 the introduction of multiple backgrounds provides a highly layered background effect, extremely wonderful. Opacity (RGBA) I

-animation-name:person-normal;-webkit-animation-duration:800ms;}. Slow. charector{/* slow */-webkit-animation-name:person-slow;-webkit-animation-duration:950ms;}Pause running: Use animation-play-state:paused to pause the animation in progress and stay on the current action, then Add the function class to stop the animation when the user stops the operationCss:/* Pause animation */.paused. charector{-webkit-animation-play-state:paused;}Finally, through the JS control different running speed.Jquer

Comments: At present, with IE 9 and a large number of browsers gradually supporting the HTML 5 standard, HTML5 is growing faster and faster, and to some extent, it forms a competition with FLASH HTML5 in the page structure, multimedia Processing is significantly different from HTML in the past. In this tutorial, We will guide you through HTML5,