Forum | Neueste Web-Entwicklung Tutorials
 

Pure.CSS Lernprogramm


Pure ist ein Cascading Style Sheet (CSS) , entwickelt von YAHOO . Es hilft bei der Schaffung schneller, schöner und reaktions Websites. Es ist sehr platz versierte und ist sehr klein in der Größe vergleichbar mit 4 KB.


Publikum

Dieses Tutorial ist für Profis gedacht, die die Grundlagen der reinen lernen möchten und wie es verwenden, um schneller, schön zu erstellen, und reaktions Websites. Dieses Tutorial erklärt alle grundlegenden Konzepte der reinen.


Voraussetzungen

Bevor Sie mit dieser Übung fortfahren, sollten Sie ein grundlegendes Verständnis von HTML, CSS, JavaScript, Document Object Model haben (DOM) und einem beliebigen Texteditor. Darüber hinaus wird es helfen, wenn Sie wissen, wie Web-basierten Anwendungen arbeiten.


Execute Reine Online

Für die meisten der Beispiele in diesem Tutorial gegeben, werden Sie einen finden Try-it - Option. Verwenden Sie diese Option, um Ihre reinen Programme vor Ort auszuführen und Ihren Lern ​​zu genießen.

Versuchen Sie das folgende Beispiel mit der Try-it - Option verfügbar in der oberen rechten Ecke des folgenden Beispielcode box -

<html>
   <head>
      <title>The PURE.CSS Example</title>
	  <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.6.0/pure-min.css">
	  
	  <style>
		.grids-example {
            background: rgb(250, 250, 250);
            margin: 2em auto;
            border-top: 1px solid #ddd;
            border-bottom: 1px solid #ddd;			
            font-family: Consolas, 'Liberation Mono', Courier, monospace;
            text-align: center;					
		 }
	  </style>
	  
  </head>
  
  
  <body>
      <div class="grids-example">
         <div class="pure-g">
            <div class="pure-u-1-3"><p>First Column</p></div>
            <div class="pure-u-1-3"><p>Second Column</p></div>
            <div class="pure-u-1-3"><p>Third Column</p></div>
         </div>
      </div>
   </body>
</html>