Многие друзья, которые только что вступили в контакт с мобильным телефоном, могут испытывать некоторые сомнения по поводу маршрутов щелчка и прыжков, особенно с использованием маршрутов Vue. Поэтому эта статья заставляет друзей попытаться использовать CSS для прыжка страниц.
Эффект, как показано на рисунке. Поскольку это мобильный терминал, я выбираю мобильный симулятор предварительного просмотра:
HTML<body> <main> <div id = shouye> shouye </div> <div id = zhanlan> zhanlan </div> <div id = geren> geren </div> </main> <av> <a href =#shouye class = link> shouye </a> <href =#zhanlan class = link> zhan href =#geren class = link> geren </a> </nav> </body>
В основном он разделен на две части: Main и Nav. Три DOV, содержащиеся в основном, представляют три разных страница, а соответствующие три разных A в NAV одновременно. Особенно важно отметить, что HREF в теге A соответствует идентификаторам трех DOV, содержащихся в основном.
CSS *{Padding: 0; Margin: 0;} Body {Height: 100VH; ширина: 100VW; дисплей: гибкий; сгиб-направление: столбец; позиция: относительно;} Body :: After {/*Фон по умолчанию*/Содержание: это мой текст; Перевод (-50%,-50%);} Main {ширина: 100%; Flex: 1; позиция: относительно;} Nav {фоновый цвет: #2C3E50; Высота: 8VH; отображение: гибкость; usitify-content: space-between; align-items: center;} Nav. Нет; Текст-трансформация: uppercare; непрозрачность: .8;} vav .alink: nth-child (2) {border-left: solid 1px #e9e9; граница правая: твердый 1px #e9e9e9;} main> div {позиция: абсолютная; 1s;}main>div:target{/*: target pseudo-class is the div that is clicked after the a link is set*/transform: translateY(0);z-index: 2;}main>div:nth-child(1):target{background-color: #008000;}main>div:nth-child(2):target{background-color: #495a80;} main> div: nth-child (3): target {foangy-color: #fff00;}Выше всего содержание этой статьи. Я надеюсь, что это будет полезно для каждого обучения, и я надеюсь, что все будут поддерживать Wulin.com больше.