CSS开头模板

最新推荐文章于 2022-02-27 16:55:11 发布

HarryHY

最新推荐文章于 2022-02-27 16:55:11 发布

阅读量865

点赞数

CC 4.0 BY-SA版权

分类专栏： # CSS

本文链接：https://blog.youkuaiyun.com/HarryHY/article/details/97126321

CSS 专栏收录该内容

25 篇文章

订阅专栏

本文介绍了一套全面的CSS布局技巧，包括元素间距、图片显示、文本样式等，并提供了适用于不同屏幕尺寸的响应式设计解决方案。

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

CSS万金油模板开头

@charset "UTF-8";
body,h1,h2,h3,h4,h5,h6,p ,ul,ol,dd,table,input,textarea,dl{padding: 0;margin:0;}
a{text-decoration: none;}
img{vertical-align: top;border: 0;}
ul,li{list-style: none;}
input:focus,textarea:focus,select:focus{outline: none;}
textarea{resize:none;}
.cl:after{content: "";display: block;clear: both;height: 0;overflow: hidden;visibility: hidden;}
.cl{zoom:1;}
html,body{height: 100%;}
html{font-size:calc(100vw/7.5);}//移动端配置无则删除
body{display: flex;flex-direction:column;font-size: .24rem}
.left{
    float: left;
}
.right{
    float: right;
}
.centerimg{
    display: flex;
    justify-content: center;
    align-items: center;
}
.ov {
    overflow: hidden; /*超出部分隐藏*/
    text-overflow: ellipsis; /* 超出部分显示省略号 */
    white-space: nowrap;
}

响应式开头模板

@media screen and (min-width:320px) and (max-width: 767px){body{background-color:#f00;}}
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

移动端自适应变化模板

@charset "UTF-8";
body,h1,h2,h3,h4,h5,h6,p ,ul,ol,dd,table,input,textarea,dl{padding: 0;margin:0;}
a{text-decoration: none;}
img{vertical-align: top;border: 0;}
li{list-style: none;}
input:focus,textarea:focus,select:focus{outline: none;}
textarea{resize:none;}
.cl:after{content: "";display: block;clear: both;height: 0;overflow: hidden;visibility: hidden;}
.cl{zoom:1;}
html,body{height: 100%;}
html{font-size:calc(100vw/7.5);}
body{display: flex;flex-direction:column;font-size: .24rem}
.left{
    float: left;
}
.right{
    float: right;
}