Mehrere Layoutbeispiele für CSS-Webseiten-CSS-Tutorial-php.cn

In diesem Artikel werden hauptsächlich relevante Informationen zu verschiedenen Layouts von CSS-Webseiten vorgestellt. Der Herausgeber findet ihn recht gut, daher werde ich ihn jetzt mit Ihnen teilen und als Referenz verwenden. Folgen wir dem Herausgeber und schauen wir uns das an. Ich hoffe, es kann allen helfen.

Eine Woche ist im Jahr 2018 vergangen. Lassen Sie mich das Wissen über CSS-Layout zusammenfassen, das ich 2017 im Firmen-Wiki geschrieben habe. Damals habe ich auch aus dem CSS-Layout-Wissen gelernt, das von mehreren Meistern geschrieben wurde, und bin auf das gestoßen Probleme, auf die ich im Projekt gestoßen bin. Kein Unsinn mehr. Bitte beachten Sie die folgenden nützlichen Informationen.

1. Zwei Implementierungsmethoden für festes linkes und adaptives Layout auf der rechten Seite

Die Darstellungen sind wie folgt:

Große Bildschirmanzeige:

Kleine Bildschirmanzeige:

Die erste Implementierungsmethode erreicht die linke Fixierung durch negative Ränder und Floating , adaptives Layout rechts. Der Hauptcode lautet wie folgt:

<style type="text/css">
	.left{
		float: left;
		width: 100%;
		height: 200px;
		background-color: red;
	}
	.left-content{
		margin-left: 30%;
	}
	.right{
		float: left;
		width: 30%;
		margin-left: -100%;
		height: 200px;
		background-color: green;
	}
	.layout0{
		clear: both;
		width: 100px;
		height: 100px;
		background-color: yellow;
	}
</style>
<body>
	<p id="body">
		<p class="left">
			<p class="left-content">
				设置子元素的margin,然后父元素必须浮动。
				用父元素包裹，主要是因为right会覆盖left，从而导致left内容不可以看到，如果直接在left上设置margin或者padding会导致布局变化，因此只能再用一个p包裹内容，并且去除right覆盖的宽度。
			</p>
		</p>
		<p class="right">-margin必须大于或等于自身的宽度才会上移</p>
		<p class="layout0"></p>
	</p>
</body>

Nach dem Login kopieren

Während des Implementierungsprozesses sind folgende Dinge zu beachten:

1 Der adaptive Container muss umschlossen werden des Containers, andernfalls wird der Containerinhalt überschrieben.

2. Der negative Rand des rechten Containers muss größer oder gleich seiner eigenen Breite sein, bevor er nach oben verschoben werden kann.

3. Wenn der negative Rand des rechten Containers gleich seiner eigenen Breite ist, wird er nach rechts ausgerichtet. Wenn der negative Rand gleich -100 % ist, wird er nach links ausgerichtet.

Der zweite Typ verwendet ein schwebendes Layout, um ein festes linkes und ein adaptives Layout auf der rechten Seite zu erreichen

Der Hauptcode lautet wie folgt:

<style type="text/css">
	.left{
		float: left;
		width: 200px;
		height: 200px;
		background-color: yellow;
	}
	.right{
		padding-left: 200px;
		height: 200px;
		background-color: red;
	}
	@media (min-width: 650px) and (max-width: 1000px){
		.left{
			width: 150px;
		}
		.right{
			margin-left: 150px;
		}
	}
	@media (max-width: 640px){
		.left{
			width: 100px;
		}
		.right{
			margin-left: 100px;
		}
	}
</style>
<body>
	<p id="main">
		<p class="left">左边固定宽度，右边自适应</p>
		<p class="right"></p>
	</p>
</body>

Nach dem Login kopieren

Während des Implementierungsprozesses sind folgende Dinge zu beachten: 1. Die linke Seite muss vom Dokumentenfluss getrennt werden, während die rechte Seite nur normal angezeigt werden muss.

2.left deckt nur die rechte Seite ab. Wenn Sie also möchten, dass der rechte Inhalt vollständig angezeigt wird, müssen Sie right padding-left oder margin-left angeben.

Große Bildschirmanzeige:

Kleine Bildschirmanzeige:

Der Hauptcode ist wie folgt:

<style type="text/css">
	#head{
		height: 200px;
		background-color: yellow;
	}
	#body{
		width: 100%;
		float: left;
	}
	.main{
		background-color: green;
		min-height: 200px;
		margin: 0 210px;
	}
	.left{
		float: left;
		background-color: red;
		width: 200px;
		height: 200px;
		margin-left: -100%;
	}
	.right{
		float: right;
		background-color: blue;
		width: 200px;
		height: 200px;
		margin-left: -200px;
	}
	#footer{
		clear: both;
		height: 200px;
		background-color: orange;
	}
</style>
<body>
	<p id="head">即左右固定，中间自适应，它可以利用margin-left为负数来实现，它的实现原理就是margin为负值可以改变float元素的排列位置</p>
	<p id="body">
		<p class="main">当多个元素同时从标准流中脱离开来时，如果前一个元素的宽度为100%宽度，后面的元素通过负边距可以实现上移。当负的边距超过自身的宽度将上移，只要没有超过自身宽度就不会上移</p>
	</p>
	<p class="left"></p>
	<p class="right"></p>
	<p id="footer"></p>
</body>

Nach dem Login kopieren

Muss während des Implementierungsprozesses beachtet werden:

1 Das mittlere adaptive p muss davor platziert werden Der linke und der rechte Container und der Inhalt p müssen

mit dem übergeordneten Container 2 umschlossen werden. Der linke und der rechte Container schweben in die gleiche Richtung.

Der Hauptcode lautet wie folgt:

<style type="text/css">
	#head{
		height: 200px;
		background-color: yellow;
	}
	#body{
		overflow: hidden;
	}
	.left{
		float: left;
		background-color: red;
		width: 200px;
		height: 200px;
	}
	.right{
		float: right;
		background-color: blue;
		width: 200px;
		height: 200px;
	}
	.main{
		background-color: green;
		height: 200px;
		margin: 0 210px;
	}
	#footer{
		clear: both;
		height: 200px;
		background-color: orange;
	}
</style>
<body>
	<p id="head">左右固定宽度并且向两边浮动，中间的p设置两边的margin</p>
	<p id="body">
		<p class="left"></p>
		<p class="right"></p>
		<p class="main">该方案有一个缺陷，在小屏幕情况下回导致right被挤下去，main没有了</p>
	</p>
	<p id="footer"></p>
</body>

Nach dem Login kopieren

Muss während des Implementierungsprozesses beachtet werden:

1 Die Methode muss nur auf die Zwischenanpassung achten. Das p muss hinter dem linken und rechten Container platziert werden.

2. Der linke und der rechte Behälter schweben zu beiden Seiten.

Der Hauptcode lautet wie folgt:

<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head>
	<title>使用flex 实现“双飞翼布局”</title>
</head>
<style type="text/css">
	#main{
		display: flex;
		display: -webkit-flex;//谷歌浏览器加前缀
		flex-flow: row nowrap;
		justify-content: flex-start;
		align-items: center;
	}
	.left{
		flex: 0 0 auto;
		width:100px;
		height: 200px;
		background-color: red;
		word-wrap: break-word; 
		overflow: hidden;
	}
	.main{
		flex: 1 1 auto;
		height: 200px;
		background-color: green;
	}
	.right{
		flex: 0 0 auto;
		width: 100px;
		height: 200px;
		background-color: yellow;
	}
</style>
<body>
	<p id="main">
		<p class="left">flex 语法我参照了阮一峰关于flex语法介绍 http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html</p>
		<p class="main"></p>
		<p class="right"></p>
	</p>
</body>
</html>

Nach dem Login kopieren

Wenn Sie nichts über Flex-Layout gelernt haben, gehen Sie bitte zum Ende des Artikels und klicken Sie Klicken Sie auf den Link, um die von Ruan Yifeng geschriebene Flex-Syntax anzuzeigen Wenn Sie nicht wissen, wie es geht, schauen Sie sich bitte die offizielle Website von w3c an. Ich werde hauptsächlich die Fallstricke erläutern, auf die Sie bei der Arbeit stoßen. Damit andere nicht in die gleiche Falle tappen wie ich.

Erstens: Wenn Sie mehrere feste Elemente verwenden, achten Sie darauf, auf welcher Positionierung Sie basieren müssen, denn wenn das übergeordnete Element über ein Transformationsattribut verfügt, kann dies dazu führen, dass das feste Element des untergeordneten Elements basierend auf dem übergeordneten Element positioniert wird Behälter anstelle des Körpers. Der Effekt ist wie folgt:

Im Bild oben kann ich feststellen, dass das kleine schwarze Kästchen in der Mitte basierend auf dem übergeordneten Element positioniert ist und die Breite ebenfalls basiert auf 50 % des übergeordneten Containers. Weitere Informationen finden Sie im folgenden Code:

Wenn wir versuchen, das Transformationsattribut im übergeordneten Container zu entfernen, können wir feststellen, dass der untergeordnete Container nicht basierend positioniert ist auf dem übergeordneten Container, aber Es wird basierend auf dem Körper positioniert, und die Breite basiert auch auf der vom Körper angegebenen 50 %-Breite. Das Rendering ist wie folgt:

<!DOCTYPE html>
<html>
<head>
    <title>关于position的定位的坑</title>
</head>
<style type="text/css">
    body{
        margin: 0;
        padding: 0;
    }
    i{
        font-style: normal;
        cursor: pointer;
    }
    #delete-button{
        position: absolute;
        left: 45%;
        top: 45%;
        text-align: center;
        vertical-align: middle;
        height: 50px;
        margin: auto;
        cursor: pointer;
    }
    #delete-button > i{
        display: inline-block;
        width: 32px;
        height: 32px;
        border-radius: 16px;
        background-color: orange;
        color: red;
        font-size: 32px;
        vertical-align: middle;
        line-height: 28px;
    }
    /*第一个模态框的样式*/
    #layout{
        display: none;
        width: 100%;
        height: 100%;
    }
    /*使用flex布局水平竖直居中*/
    /*#layout-box{
        position: fixed;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        display: flex;
        display: -webkit-flex;
        flex-flow: column nowrap;
        justify-content: center;
        align-items: center;
        background-color: rgba(0,0,0,0.3);
    }*/
    /*使用postion 和 transform 水平垂直居中*/
    #layout-box{
        position: fixed;
        width: 100%;
        height: 100%;
        background-color: rgba(0,0,0,0.3);
    }
    .modal-dialog{
        position: absolute;
        left: 50%;
        top: 50%;
        width: 500px;
        height: 200px;
        border-radius: 10px;
        transform: translate(-50%, -50%);
        -webkit-transform: translate(-50%, -50%);
        -moz-transform: translate(-50%, -50%);
        -o-transform: translate(-50%, -50%);
        background-color: #fff;
    }
    .dialog-title{
        text-align: center;
        color: #333;
        font-size: 28px;
        margin-bottom: 10px;
    }
    .dialog-content{
        text-align: center;
        color: #666;
        font-size: 18px;
    }
    .dialog-button{
        margin-top: 20px;
        width: 100%;
        color: #333;
    }
    .dialog-button >.button-box{
        display: inline-block;
        width: 48%;
        text-align: center;
    }
    .button-box span{
        display: inline-block;
        padding: 10px;
        color: #fff;
        border-radius: 6px;
        cursor: pointer;
    }
    #confirm{
        background-color: #27ad9a;
    }
    #cancel{
        background-color: red;
    }
    /*添加按钮的样式*/
    #add-button > i{
        display: inline-block;
        width: 32px;
        height: 32px;
        border-radius: 16px;
        background-color: #27ad9a;
        color: #fff;
        font-size: 32px;
        vertical-align: middle;
        line-height: 28px;
        text-align: center;
    }
    #add-button{
        display: inline-block;
        cursor: pointer;
    }
    /*第二个模态框的样式*/
    .layout2{
        display: none;
        position: fixed;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        background-color: rgba(0,0,0,0.2);
    }
    .modal-dialog2{
        position: fixed;
        left: 50%;
        top: 50%;
        width: 50%;
        height: 50%;
        border-radius: 10px;
        transform: translate(-50%, -50%);
        -webkit-transform: translate(-50%, -50%);
        -moz-transform: translate(-50%, -50%);
        -o-transform: translate(-50%, -50%);
        background-color: rgba(0,0,0,0.2);
    }
    .modal-dialog2 > span{
        display: block;
    }
    .modal-text{
        float: left;
    }
    #close{
        color: red;
        font-size: 24px;
        float: right;
        cursor: pointer;
    }
</style>
<body>
    <p id="delete-button"><i>-</i>删除</p>
    <p id="layout">
        <p id="layout-box">
            <p class="modal-dialog">
                <p class="dialog-title">提示</p>
                <p class="dialog-content">是否删除该项,点击确定</p>
                <p class="dialog-button">
                    <p class="button-box">
                        <span id="confirm">确定</span>
                    </p>
                    <p class="button-box">
                        <span id="cancel">取消</span>
                    </p>
                </p>
                <p id="add-button"><i>+</i>添加</p>
                <p class="layout2">
                    <p class="modal-dialog2">
                        <span class="modal-text">你是我的小可爱</span>
                        <span id="close">关闭</span>
                    </p>
                </p>
            </p>
        </p>
    </p>
</body>
<script type="text/javascript">
    document.getElementById("delete-button").onclick= function(){
        var layout = document.getElementById("layout")
        layout.style.display = "block"
    }
    document.getElementById("confirm").onclick=function(){
        var layout = document.getElementById("layout")
        layout.style.display = "none"
    }
    document.getElementById("cancel").onclick=function(){
        var layout = document.getElementById("layout")
        layout.style.display = "none"
    }
    document.getElementById("add-button").onclick=function(){
        var layout = document.getElementsByClassName("layout2")
        layout[0].style.display = "block"
    }
    document.getElementById("close").onclick=function(){
        var layout = document.getElementsByClassName("layout2")
        layout[0].style.display = "none"
    }
</script>
</html>

Nach dem Login kopieren

Weitere Informationen finden Sie im Code:

Zweitens: Lösen Sie das Problem auf Mobiltelefonen Jitter-Problem (PS: Ich verweise auf einen Blog, der von einem Online-Master für dieses Problem geschrieben wurde, bitte gehen Sie zum Ende des Artikels, um ihn anzusehen)

**1 **Anti-Shake hinzufügen Stil im Webkit-Kernel-Browser festgelegt - Webkit - transform: TranslateZ(0);

**2. **Festlegen des CSS von HTML und Body {height:100%;overflow:auto;margin:0 ;} Dies wirkt sich auf den globalen Stil aus und wird nicht empfohlen.

<!DOCTYPE html>
<html>
<head>
    <title>关于position的定位的坑</title>
</head>
<style type="text/css">
    body{
        margin: 0;
        padding: 0;
    }
    i{
        font-style: normal;
        cursor: pointer;
    }
    #delete-button{
        position: absolute;
        left: 45%;
        top: 45%;
        text-align: center;
        vertical-align: middle;
        height: 50px;
        margin: auto;
        cursor: pointer;
    }
    #delete-button > i{
        display: inline-block;
        width: 32px;
        height: 32px;
        border-radius: 16px;
        background-color: orange;
        color: red;
        font-size: 32px;
        vertical-align: middle;
        line-height: 28px;
    }
    /*第一个模态框的样式*/
    #layout{
        display: none;
        width: 100%;
        height: 100%;
    }
    /*使用flex布局水平竖直居中*/
    #layout-box{
        position: fixed;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        display: flex;
        display: -webkit-flex;
        flex-flow: column nowrap;
        justify-content: center;
        align-items: center;
        background-color: rgba(0,0,0,0.3);
    }
    /*使用postion 和 transform 水平垂直居中*/
    .modal-dialog{
        width: 500px;
        height: 200px;
        border-radius: 10px;
        background-color: #fff;
    }
    .dialog-title{
        text-align: center;
        color: #333;
        font-size: 28px;
        margin-bottom: 10px;
    }
    .dialog-content{
        text-align: center;
        color: #666;
        font-size: 18px;
    }
    .dialog-button{
        margin-top: 20px;
        width: 100%;
        color: #333;
    }
    .dialog-button >.button-box{
        display: inline-block;
        width: 48%;
        text-align: center;
    }
    .button-box span{
        display: inline-block;
        padding: 10px;
        color: #fff;
        border-radius: 6px;
        cursor: pointer;
    }
    #confirm{
        background-color: #27ad9a;
    }
    #cancel{
        background-color: red;
    }
    /*添加按钮的样式*/
    #add-button > i{
        display: inline-block;
        width: 32px;
        height: 32px;
        border-radius: 16px;
        background-color: #27ad9a;
        color: #fff;
        font-size: 32px;
        vertical-align: middle;
        line-height: 28px;
        text-align: center;
    }
    #add-button{
        display: inline-block;
        cursor: pointer;
    }
    /*第二个模态框的样式*/
    .layout2{
        display: none;
        position: fixed;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        background-color: rgba(0,0,0,0.2);
    }
    .modal-dialog2{
        position: fixed;
        left: 50%;
        top: 50%;
        width: 50%;
        height: 50%;
        border-radius: 10px;
        transform: translate(-50%, -50%);
        -webkit-transform: translate(-50%, -50%);
        -moz-transform: translate(-50%, -50%);
        -o-transform: translate(-50%, -50%);
        background-color: rgba(0,0,0,0.2);
    }
    .modal-dialog2 > span{
        display: block;
    }
    .modal-text{
        float: left;
    }
    #close{
        color: red;
        font-size: 24px;
        float: right;
        cursor: pointer;
    }
</style>
<body>
    <p id="delete-button"><i>-</i>删除</p>
    <p id="layout">
        <p id="layout-box">
            <p class="modal-dialog">
                <p class="dialog-title">提示</p>
                <p class="dialog-content">是否删除该项,点击确定</p>
                <p class="dialog-button">
                    <p class="button-box">
                        <span id="confirm">确定</span>
                    </p>
                    <p class="button-box">
                        <span id="cancel">取消</span>
                    </p>
                </p>
                <p id="add-button"><i>+</i>添加</p>
                <p class="layout2">
                    <p class="modal-dialog2">
                        <span class="modal-text">你是我的小可爱</span>
                        <span id="close">关闭</span>
                    </p>
                </p>
            </p>
        </p>
    </p>
</body>
<script type="text/javascript">
    document.getElementById("delete-button").onclick= function(){
        var layout = document.getElementById("layout")
        layout.style.display = "block"
    }
    document.getElementById("confirm").onclick=function(){
        var layout = document.getElementById("layout")
        layout.style.display = "none"
    }
    document.getElementById("cancel").onclick=function(){
        var layout = document.getElementById("layout")
        layout.style.display = "none"
    }
    document.getElementById("add-button").onclick=function(){
        var layout = document.getElementsByClassName("layout2")
        layout[0].style.display = "block"
    }
    document.getElementById("close").onclick=function(){
        var layout = document.getElementsByClassName("layout2")
        layout[0].style.display = "none"
    }
</script>
</html>

Nach dem Login kopieren

3. Position:absolut in fiexd einstellen, wie folgt:

4 Layout Indem Sie die Breite des Elements als Prozentsatz oder seine Höhe als Prozentsatz festlegen. Zum Beispiel: width:50%; height:50%; Diese Schreibweise.

<p style="position:fiexd;bottom:0px;">
  <p style="position:absolute;">
  </p>
</p>

Nach dem Login kopieren

5. Responsives Layout (hauptsächlich Verwendung von Medienabfragen, um responsives Design zu erreichen) Hauptsächlich Verwendung von CSS3 @media, um responsives Design für verschiedene Terminals zu erstellen

Hauptsächlich in CSS-Dateien schreiben

@media screen and (max-width:600px){
    写入当屏幕小于或等于600px时的样式
}
@media screen and (min-width:900px){
    写入当屏幕大于或等于900px时的样式
}
@media screen and (min-width:600px) and (max-width:900px){
    写入当屏幕在600px-900px之间的样式
}
@media screen and (max-device-width: 480px){
    写入最大设备宽度为480px，比如说iPhone上的显示，这里的max-device-width所指的是设备的实际分辨率，也就是指可视面积分辨率
}
@media only screen and (-webkit-min-device-pixel-ratio: 2){
    写入专门针对iPhone4的移动设备样式
}
@media all and (orientation:portrait){
    写入设备在纵向时的样式
}
@media all and (orientation:landscape){
    写入设备在横向时的样式
}
@media not print and (max-width: 1200px){
    not是用来排除某种制定的媒体类型
    写入在除打印设备和设备宽度小于1200px下的所有设备的样式
}
@media only screen and (max-device-width:240px){
    only用来定某种特定的媒体类型,可以用来排除不支持媒体查询的浏览器。
    写入只能在最大设备宽度为240px的屏幕下使用的样式
}

Nach dem Login kopieren