{"id":1320,"date":"2025-02-13T02:38:37","date_gmt":"2025-02-13T02:38:37","guid":{"rendered":"https:\/\/mytribu.fr\/cmopc\/?p=1320"},"modified":"2025-02-13T02:44:00","modified_gmt":"2025-02-13T02:44:00","slug":"one-page","status":"publish","type":"post","link":"http:\/\/mytribu.fr\/cmopc\/one-page\/","title":{"rendered":"one page !"},"content":{"rendered":"\n

Les liens internes<\/strong> en HTML se font avec <a href=\"#id\"><\/mark><\/strong><\/code>, o\u00f9 id<\/code> <\/mark>correspond \u00e0 l’identifiant de la section <\/mark>cibl\u00e9e. <\/p>\n\n\n\n

La propri\u00e9t\u00e9 scroll-behavior: smooth;<\/code><\/strong> en CSS permet d\u2019avoir une navigation fluide entre les sections.<\/strong> <\/p>\n\n\n\n

Une barre de navigation fixe<\/strong> se fait avec position: fixed;<\/code> en CSS.<\/p>\n\n\n\n

\u00e0 vous de jouer !!<\/p>\n\n\n\n

Code HTML de la page<\/p>\n\n\n\n

<!DOCTYPE html>\n<html lang=\"fr\">\n<head>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <title>Navigation Verticale<\/title>\n    <link rel=\"stylesheet\" href=\"styles.css\">\n<\/head>\n<body>\n\n    <!-- Barre de navigation -->\n    <nav>\n        <a href=\"#section1<\/mark><\/strong>\">Section 1<\/a>\n        <a href=\"#section2<\/mark><\/strong>\">Section 2<\/a>\n        <a href=\"#section3<\/mark><\/strong>\">Section 3<\/a>\n    <\/nav>\n\n    <!-- Sections -->\n    <div id=\"section1<\/strong><\/mark>\" class=\"section\">\n        <h2>Section 1<\/h2>\n        <p>Cliquez ci-dessous pour descendre :<\/p>\n        <a href=\"#section2\" class=\"btn\">Aller \u00e0 la section 2<\/a>\n    <\/div>\n\n    <div id=\"section2<\/mark><\/strong>\" class=\"section\">\n        <h2>Section 2<\/h2>\n        <p>Cliquez ci-dessous pour descendre :<\/p>\n        <a href=\"#section3\" class=\"btn\">Aller \u00e0 la section 3<\/a>\n        <br>\n        <p>Ou remonter :<\/p>\n        <a href=\"#section1\" class=\"btn\">Retour \u00e0 la section 1<\/a>\n    <\/div>\n\n    <div id=\"section3<\/mark><\/strong>\" class=\"section\">\n        <h2>Section 3<\/h2>\n        <p>Cliquez ci-dessous pour remonter :<\/p>\n        <a href=\"#section1\" class=\"btn\">Retour en haut<\/a>\n    <\/div>\n\n<\/body>\n<\/html>\n<\/code><\/pre>\n\n\n\n
code CSS de la page<\/p>\n\n\n\n
\/* Styles de base *\/\nbody {\n    font-family: Arial, sans-serif;\n    margin: 0;\n    padding: 0;\n    scroll-behavior: smooth; \/* Animation de d\u00e9filement fluide *\/\n}\n\n\/* Barre de navigation *\/\nnav {\n    position: fixed;\n    top: 0;\n    width: 100%;\n    background: rgba(0, 0, 0, 0.8);\n    padding: 10px 0;\n    text-align: center;\n}\n\nnav a {\n    color: white;\n    text-decoration: none;\n    margin: 0 15px;\n    font-size: 18px;\n}\n\nnav a:hover {\n    text-decoration: underline;\n}\n\n\/* Sections *\/\n.section {\n    height: 100vh;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    flex-direction: column;\n    text-align: center;\n}\n\n\/* Diff\u00e9renciation visuelle des sections *\/\n#section1 { background: #f8b400; }\n#section2 { background: #6a0572; color: white; }\n#section3 { background: #056676; color: white; }\n\n\/* Boutons internes *\/\n.btn {\n    display: inline-block;\n    margin-top: 15px;\n    padding: 10px 20px;\n    background: white;\n    color: black;\n    text-decoration: none;\n    border-radius: 5px;\n    font-weight: bold;\n    transition: 0.3s;\n}\n\n.btn:hover {\n    background: #ddd;\n}<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"
Les liens internes en HTML se font avec <a href=\u00a0\u00bb#id\u00a0\u00bb>, o\u00f9 id correspond \u00e0 l’identifiant de la section cibl\u00e9e. La<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"footnotes":""},"categories":[1],"tags":[],"class_list":["post-1320","post","type-post","status-publish","format-standard","hentry","category-non-classe","comments-off"],"_links":{"self":[{"href":"http:\/\/mytribu.fr\/cmopc\/wp-json\/wp\/v2\/posts\/1320","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/mytribu.fr\/cmopc\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/mytribu.fr\/cmopc\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/mytribu.fr\/cmopc\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/mytribu.fr\/cmopc\/wp-json\/wp\/v2\/comments?post=1320"}],"version-history":[{"count":3,"href":"http:\/\/mytribu.fr\/cmopc\/wp-json\/wp\/v2\/posts\/1320\/revisions"}],"predecessor-version":[{"id":1325,"href":"http:\/\/mytribu.fr\/cmopc\/wp-json\/wp\/v2\/posts\/1320\/revisions\/1325"}],"wp:attachment":[{"href":"http:\/\/mytribu.fr\/cmopc\/wp-json\/wp\/v2\/media?parent=1320"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/mytribu.fr\/cmopc\/wp-json\/wp\/v2\/categories?post=1320"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/mytribu.fr\/cmopc\/wp-json\/wp\/v2\/tags?post=1320"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}