CSS自融入合理布局思路

2021-03-18 08:05 jianzhan

近期在做1个自融入合理布局的新项目,因此学了下自融入,下面是总结。此总结只做实际效果,不关心高效率和编码提升。

1.css3

html中加上

拷贝编码
编码以下:
<meta name="viewport" content="width=device-width,target-densitydpi=high-dpi,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>

css中的总体合理布局

CSS Code拷贝內容到剪贴板
  1. @media  screen and (min-width0px) {公共性css能够写在这里,还可以独立写出来,公共性css}   
  2.   
  3. @media screen and (min-width380px){超过380px,包含>413,>768,>1200}   
  4.   
  5. @media screen and (min-width413px){}   
  6.   
  7. @media  screen and  (min-width768px){}   
  8.   
  9. @media  screen and  (min-width1200px) {}   
  10.   

1般先写挪动端css min-width: 0px,

随后再写大1点的显示屏的css min-width: 380px,根据重新写过css遮盖以前的css做到自融入显示屏的实际效果。

2.总体思路

0⑺68px,显示信息挪动端实际效果。width:100%,自融入显示屏宽度。

768⑴200px;显示信息pc端实际效果,包含ipad。显示屏宽度为固定不动1200px;

>1200px;显示信息pc端实际效果,显示屏行为主体宽度为1200px,垂直居中显示信息,两侧banner情况以渐变色拓宽。

3.banner自融入

pc端banner分3层,

1层为1200px,banner内的题目文本,小照片等內容放在这个div中。

第2层为width:100%,垂直居中显示信息,banner图带有1定全透明度,设为这1层的情况图,情况图垂直居中,不反复。当显示屏超出1200px两侧情况会无尽拓宽,直至做到最大。

第3层也为width:100%,拉1条渐变色做情况 background-size:100% 100%,当显示屏超出第2层情况照片时,渐变色无尽拓宽,切相互配合第2层做为banner图行为主体照片(第2层是半全透明的)。

4.两边对齐

拷贝编码
编码以下:
<div class="welcome1" style="text-align:justify;text-align-last:justify;padding:0 34px;"></p> <p>text-align:justify;text-align-last:justify;

现如今可用于大多数数的访问器,可是1些较为原生态的访问器会沒有实际效果。听闻是由于最终1行沒有两边对齐实际效果,如1段文本的最终1行沒有必要两边对齐。因此能够选用以下方法:

CSS Code拷贝內容到剪贴板
  1. .welcome1:after{   
  2.         display:inline-block;   
  3.         content:'';   
  4.         width:100%;   
  5.         height:0;   
  6.         overflow:hidden;   
  7.         }   
  8.   

:after 伪类 在特定元素以后加上內容。

content:'' 表明要加上的內容。

width:100%。加上1行的宽度。

height:0 这1行的高宽比为0;

overflow:这1行不容易被撑大,height:0;

以上便是本文的所有內容,期待对大伙儿的学习培训有一定的协助。