H5实例移动端页面练习

最新推荐文章于 2025-03-20 19:57:43 发布

苦涩2020

最新推荐文章于 2025-03-20 19:57:43 发布

阅读量1.8k

点赞数 2

文章标签： html5

本文链接：https://blog.youkuaiyun.com/UserPython/article/details/104162516

版权

本文介绍了移动端H5页面的布局技巧，重点关注了`viewport`属性的设置，包括禁止用户缩放、设置屏幕宽度，以及如何通过`float`实现元素水平排列。同时，讲解了如何利用`margin`、`overflow`、`text-decoration`和`padding`属性来调整元素的边距、滚动条和链接样式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文章目录

标签知识点

标签知识点

name = “viewport”；屏幕设定
maximum-scale = 1.0, minimum-scale = 1.0, initial-scale = 1.0；最大最小缩放比例为1，其实就是不允许点击缩放
user-scalable = 0, width = device-width；设定内容和设备的屏幕等宽等高
float：left；浮动；作用就是可以让块元素不换行，而是从左向右排列
margin：0px；设置外边框，可以去掉body和内容的白边
overflow：auto；内容超出父标签容器后，自动加滚动条
text-decoration：none；给a标签去掉下划线
padding：0px；四边统一内边距

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>综合应用 移动端练习</title>
    <meta name="viewport" content="maximum-scale=1.0, minimum-scale=1.0, user-scalable=0,
    width=device-width, initial-scale=1.0">
    <style type="text/css">
        body{
    margin: 0px;}
        h3{
    display: inline;}
        header{
    width:100%; height: 50px; background: #aaffdd;}
        aside{
    width: 20%; height: 540px; background: #ddc660; float: left;}
        section{
    width: 80%; height: 540px; background: #5bb4e4; float: left; overflow: auto;}
        footer{
    width: 100%; height: 50px; background: #28f1f1; clear: left;}
        figure