Web Development Presentation
Parent: 86d082d4 | Patch | Commit | ignore whitespace
Sascha Schulz
2023-01-31 4554c516a0fd57ac61ed4fef55a23428e3235495 
finish css basics
2 Dateien geändert
83 ■■■■■ Geänderte Dateien
assets/html/css-menu.html 37 ●●●●● Patch | Ansicht | Raw | Blame | Historie
index.html 46 ●●●●● Patch | Ansicht | Raw | Blame | Historie 
 assets/html/css-menu.html


@@ -2,27 +2,40 @@


<html lang="en">



    <head>



        <meta charset="UTF-8">



        <title>Box Model</title>



        <title>Menu</title>



        <style>



            div {



            html {



                color: white;



                border: 3px solid red;



                padding: 10px;



                width: 100px;



                margin-bottom: 10px;



            }







            .border-box {



                box-sizing: border-box;



            .menu-item {



                display: inline-block;







                position: relative;



            }







            .content-box {



                box-sizing: content-box;



            .menu-item .children {



                display: none;







                position: absolute;



            }







            .menu-item:hover .children {



                display: block;



            }



        </style>



    </head>



    <body>



        <div class="content-box">content-box</div>



        <div class="border-box">border-box</div>



        <div class="menu">



            <div class="menu-item">Eins</div>



            <div class="menu-item">



                Hover Me!



                <div class="children">



                    <div>Item 1</div>



                    <div>Item 2</div>



                </div>



            </div>



            <div class="menu-item">Drei</div>



        </div>



    </body>



</html>





 index.html


@@ -267,7 +267,9 @@


                                #my-id /* ID */


                                html, body /* Mehrfachselektion */


                                div > p /* p die direkt unterhalb eines div sind */


                                div  p /* p die irgendwo unterhalb eines div sind */


                                a:visited /* besuchte Links */


                                div:hover /* divs über die man mit der Maus fährt */


                                span.important /* span mit der Klasse "important" */


                            </code>


                        </pre>


@@ -404,6 +406,50 @@


                            </code>


                        </pre>


                    </section>


                    <section>


                        <h3>Beispiel Menü</h3>


                        <iframe data-src="/assets/html/css-menu.html"></iframe>


                    </section>


                    <section>


                        <pre>


                            <code class="css" data-trim data-line-numbers>


                                .menu-item {


                                    display: inline-block;




                                    position: relative;


                                }




                                .menu-item .children {


                                    display: none;




                                    position: absolute;


                                }




                                .menu-item:hover .children {


                                    display: block;


                                }


                            </code>


                        </pre>


                    </section>


                    <section>


                        <pre>


                            <code class="html" data-trim data-line-numbers>


                                <script type="text/template">


                                    <div class="menu">


                                        <div class="menu-item">Eins</div>


                                        <div class="menu-item">


                                            Hover Me!


                                            <div class="children">


                                                <div>Item 1</div>


                                                <div>Item 2</div>


                                            </div>


                                        </div>


                                        <div class="menu-item">Drei</div>


                                    </div>


                                </script>


                            </code>


                        </pre>


                    </section>


                </section>


            </div>


        </div>