响应式布局页面css代码

最新推荐文章于 2024-07-24 20:44:42 发布

小飞侠-2

最新推荐文章于 2024-07-24 20:44:42 发布

阅读量1.5k

点赞数

本文链接：https://blog.csdn.net/qq_26562641/article/details/87168518

版权

/* ===============
照着老师视频敲的页面样式
================*/

html{
font-size: 62.5%;
color:#222;
}

/*被选中的颜色*/
::selection{
background-color: #b3d4fc;
text-shadow: none;
}

/*无序列表*/
ul{
margin: 0;
padding:0;
}

/*清除圆点*/
li{
list-style: none;
}

/* ===============
工具样式
================*/

/*居中显示*/
.center-block {
display: block;
margin-right: auto;
margin-left: auto;
}

.pull-right {
float: right !important;
}

.pull-left {
float: left !important;
}

.text-right {
text-align: right !important;
}

.text-left {
text-align: left !important;
}

.text-center {
text-align: center !important;
}

/*空间消失*/
.hide {
display: none !important;
}

.show {
display:block !important;
}

/*占位*/
.invisible {
visibility: hidden;
}

/*隐藏文本*/
.text-hide {
font: 0/0 a;
color: transparent;
text-shadow: none;
background-color: transparent;
border: 0;
}

/*清除浮动*/
.clearfix:before,
.clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}

/* ＝＝＝＝＝＝＝
浏览器更新提示样式
＝＝＝＝＝＝＝ */

.browserupgrade {
margin: 0;
padding: 1rem;
background: #ccc;
}

/* ＝＝＝＝＝＝＝
自定义页面样式
＝＝＝＝＝＝＝ */

body {
font-size: 1.2rem;
/*行间距*/
line-height: 1.5;
/*背景色*/
background: #f7f7f7;
}

a {
/*超链接的默认颜色*/
color: #666;
/*默认没有下划线*/
text-decoration: none;
}

a:hover, a:active {
/*鼠标悬浮的颜色*/
color: #0ae;
/*增加下划线*/
text-decoration: underline;
}

/* ======================== 第一部分：页眉 ===========================*/

header {
width: 100%;
}

/* ======================== 1.1 ：页眉第一部分 ===========================*/
header .top {
line-height: 3rem;
padding: 0 1.5rem;
color: #fff;
background: #555;
border-bottom: 1px #ecc000 solid;
}

header .top .tel {
/*靠左*/
float: left;
}

header .top ul {
/*无序列表靠右排列*/
text-align: right;
}

header .top ul li {
display: inline-block;
}

header .top ul li + li {
/*左边的竖线*/
border-left: 1px solid #999;
/*去除空白间隙*/
margin-left: -3px;
}

header .top ul li a {
display: inline-block;
padding: 0 1.5rem;
color: #fff;
}

@media only screen and (max-width: 50em){
header .top ul li a {
padding: 0 1rem;
}
}

@media only screen and(min-width: 30.0625em) and (max-width: 50em){

}

@media only screen and (max-width: 30em){
header .top .tel,
/*选择第三个和第四个*/
header .top ul li:nth-child(3),
header .top ul li:nth-child(4) {
display: none;
}
}

/* ======================== 1.1 ：页眉第二部分 ===========================*/

header .main {
padding: 0;
}

header .main .brand {
float: left;
padding: 1rem 1.5rem 0;
}

header ul {
text-align: right;
}

header .main ul li {
display: inline-block;
border-left: 1px solid #f0ede9;
}

header .main ul li a {
display: inline-block;
padding: 0 1.5rem;
line-height: 5.5rem;
font-size: 1.6rem;
font-weight: bold;
color: #7c7a65;
text-decoration: none;
}

header .main ul li a:hover,
header .main ul li a:active,
header .main ul li a.active {
color: #ffb300;
background-color: #f8f6f1;
}

@media only screen and (max-width: 50em){
header .main .brand {
float: none;
display: block;
padding: 0;
margin: 1.5rem auto 0.5rem;
text-align: center;
}
header .main ul {
text-align: center;
}
header .main ul li {
border:none;
}
header.main ul li a {
padding: 0 1.3rem;
}
}

@media only screen and(min-width: 30.0625em) and (max-width: 49em){

}

@media only screen and (max-width: 30em){
header .main ul li {
line-height: 3rem;
}
header .main ul li:first-child {
display: none;
}
header .main ul li a {
font-weight: normal;
padding: 0 0.8rem;
font-size: 1.4rem;
}
}

/* ======================== 第二部分：网站内容 ===========================*/

.container {
width: 100%;
}

/* ======================== 2.1 ：交易 ===========================*/
.transaction {
width: 100%;
background-color: #7c7365;
}

.trans-content {
max-width: 90%;
margin: 0 auto;
font-size: 1.5rem;
}

.trans-data {
float: left;
padding: 1rem;
text-align: left;
}

.trans-data span {
display: inline-block;
line-height: 3rem;
color: #fff;
}

.trans-data span.trans-money {
font-size: 2.2rem;
color: #ff9988;
letter-spacing: 3px;/** 字符间距**/
margin: 0 1rem;/** 内陷写法**/
padding: 0 1rem;
border-radius: 3px;
background-color: rgba(255, 255, 255, 0.9);
box-shadow: 1px 2px 1px #333 inset;/**内阴影 **/
}

.trans-report {
text-align: right;/** 右对齐**/
}

.trans-report a {
display: inline-block;
padding: 1rem;
line-height: 3rem;
color: #fff;
}
/** 当设置内部元素行高时候外部高度可以不设置 */

@media only screen and (max-width: 50em){
.trans-data{
padding: 1rem 0.4rem;
}
.trans-data span {
font-size: 1rem;
}
.trans-data span.trans-money {
font-size: 1.24rem;
margin: 0;
padding: 0;
letter-spacing: inherit;
box-shadow: none;
background: transparent;
}
.trans-report a {
font-size: 1rem;
}
}

@media only screen and(min-width: 30.0625em) and (max-width: 50em){

}

@media only screen and (max-width: 30em){
.transaction {
padding: 0.7rem 0;
}
.trans-data, .trans-report {
float: none;
text-align: center;
}
.trans-data, .trans-report a {
padding: 0;
}
}

/* ======================== 2.2 ：滚动广告 =========================== */
.ad{
display: block;
}

/* ======================== 2.3 ：平台公告 =========================== */
.feature {
width: 90%;
margin: 2rem auto;
/*去除间隙*/
font-size: 0;
}

.feature .item {
box-sizing: border-box;/**将制定内边距和边框在规定宽高内绘制 */
/*一排*/
display: inline-block;
/*等宽排列*/
width: calc(33.33333% - 1rem);/**宽度等分这里算下面margin-left */
padding: 1rem;
font-size: 1.3rem;
background-color: #fff;
box-shadow: 0 0 4px #ccc;/**添加阴影 */
}

.feature .item + .item {/**选中除第一个元素其他 */
margin-left: 1.5rem;
}

.feature .item h3 {
display: inline-block;
width: 40%;
margin: 0;
padding: 0;
vertical-align: top; /** 顶部为基线*/
font-size: 3.3rem;
text-align: center;
color: #ff9900;
}

.feature .item p {
display: inline-block;
width: 55%;
margin: 0;
padding: 0;
color: #999;
}

@media only screen and (max-width: 50em){
.feature .item h3,
.feature .item p {
display: block;
width: 100%;
font-size: 2.6rem;
text-align: center;
}
.feature .item p {
font-size: 1.2rem;
}
}

@media only screen and(min-width: 30.0625em) and (max-width: 50em){

}

@media only screen and (max-width: 30em){

.feature {
width: 96%;
margin: 1rem auto;
}
.feature .item {
display: block;
width: auto;
}
.feature .item + .item {
margin: 1rem 0 0;
}

.feature .item h3 {
display: inline-block;
width: 40%;
margin: 0;
padding-top: 0.3rem;
vertical-align: top;
font-size: 3rem;
text-align: center;
}

.feature .item p {
display: inline-block;
width: 55%;
margin: 0;
padding: 0;
}

}

/* ======================== 2.4 ：最新公告 =========================== */

.notice {
width: 90%;
margin: 2rem auto;
font-size: 1.4rem;
line-height: 3rem;
background-color: #fff;
box-shadow: 0 0 4px #ccc;
}

.notice a {
float: left;
display: inline-block;
width: 70%;
margin-left: 2rem;
text-decoration: none;/**去除下划线*/
}

.notice a:first-child {
text-overflow: ellipsis;/**超出隐藏*/
overflow: hidden;
white-space: nowrap;
}

.notice a:first-child:before {/**添加字体*/
/*空白字符*/
content: '最新公告: \00a0\00a0';
color: #aaa;
}

.notice a span {
color: #999;
font-size: 1.2rem;
margin-right: 1rem;
}

.notice a.more {
float: right;
width: auto;
margin-right: 2rem;
color: #ff9900;
}

@media only screen and (max-width: 50em){

}

@media only screen and(min-width: 30.0625em) and (max-width: 50em){

}

@media only screen and (max-width: 30em){

.notice {
width: 96%;
margin: 1rem auto;
font-size: 1.2rem;
}
.notice a {
margin-left: 1rem;
}

.notice a span {
display: none;
}

}

/* ======================== 2.5 ：产品介绍 =========================== */

.product {
width: 90%;
margin: 2rem auto;
font-size: 1.4rem;
background-color: #f5f9fa;
border-top: 2px solid #ff9900;
box-shadow: 0 0 4px #ccc;
}

.product h2 {
float:left;
width: 20%;
margin-top: 3rem;
text-align: center;
font-size: 2.4rem;
font-weight: normal;
color: #635c51;
}

.product h2 em {
display: block;
margin-top: 1rem;
font-size: 1.6rem;
}

.product h2 em:first-child {/**先设置通用外边距在单独设置第一个 */
margin-top: 4rem;
}

.product .product-content {
float: right;
width: 79.5%;
border-left: 1px solid #eee;
background-color: #fff;
}

.product .product-content .item {
width: 100%;
}

.product .product-content .item + .item {
border-top: 1px solid #eee;
}

.product .product-content .item h3 {/**从上到下从做到右从大到小 */
float: left;
width: 30%;
margin-top: 2.5rem;
margin-bottom: 2.0rem;
font-size: 1.4rem;
font-weight: normal;
text-align: center;
}

.product .product-content .item h3 em {
margin-right: 0.5rem;
font-size: 3.6rem;
font-style: normal;
color: #8b999d;
}

.product .product-content .item h3 i {
display: block;
font-size: 1.2rem;
font-style: normal;
color: #999;
}

.product .product-content .item .info {
float: left;
width: 48%;
padding: 1rem;
border-left: 1px solid #eee;
border-right: 1px solid #eee;
font-size: 14px;
}

.product .product-content .item .info p {/**浮动父节点清除浮动*/
float: left;
display: inline-block;
text-align: center;
width: 56%
}

.product .product-content .item .info p:last-child {
width: 40%;
}

.product .product-content .item .info p span {
display: block;
font-size: 2.4rem;
color: #ff9900;
}

.product .product-content .item .info p span i {
font-size: 1.2rem;
font-style: normal;
color: #999;
}

.product .product-content .item .buy {
float: left;
width: calc(22% - 4.4rem);
padding: 1rem;
}

.product .product-content .item .buy a {
display: block;
width: 90%;
margin: 1.5rem auto;
max-width: 12rem;
line-height: 4rem;
text-align: center;
text-decoration: none;
color: #fff;
background-color: #ff9900;
border-radius: 5px;
}

.product .product-content .item .buy a:hover,
.product .product-content .item .buy a:active {
background-color: #ffc468;
}

.product .product-content .item .buy a.disabled {
background-color: #ccc !important;
cursor: not-allowed;
}

@media only screen and (max-width: 50em){
.product h2 {
float: none;/**取消浮动*/
width: 100%;
margin-top: 2rem;
font-size: 2.2rem;
}
.product h2 em:first-child {
margin-top: 0;
}
.product h2 em {
display: inline;
font-size: 1.2rem;
}
.product .product-content {
float: none;
width: 100%;
}
.product .product-content .item h3 {
margin-bottom: 0;
}
.product .product-content .item h3 em {
font-size: 2.4rem;
}
.product .product-content .item .info {
padding: 1rem 1rem 0;
font-size: 1.2rem;
}
.product .product-content .item .info p span{
font-size: 2rem;
}
.product .product-content .item .buy a {
margin: 0.5rem auto;
}
}

@media only screen and(min-width: 30.0625em) and (max-width: 50em){

}

@media only screen and (max-width: 30em){

.product h2 em:first-child:before {
content: '';
display: table;
}

.product .product-content .item h3 {
font-size: 0.5rem;
padding-left: 1rem;
width: 28%;
}

.product .product-content .item h3 em {

font-size: 2rem;
margin-right: 0;
}

.product .product-content .item .info {
float: right;
width: 66%;
padding: 1rem 0rem 0rem 0;
border: none;
}
.product .product-content .item .info p span{
font-size: 1.8rem;
}
.product .product-content .item .buy {
clear: both;
float: none;
width: 100%;
padding: 0rem 0 1rem ;
}
.product .product-content .item .buy a {
margin-top: 0;
max-width: 26rem;
}
}

/* ======================== 2.6 ：底部导航 =========================== */

.footer {/**直接在最外设置内边距不需要设置高*/
padding: 3rem 0;
background-color: #fff;
border-top: 2px solid #eee;
}

.footer-content {
width: 90%;
margin: 0 auto;
text-align: center;
}

.footer-content .brand {
float: left;
display: block;
-webkit-filter: grayscale(100%);/**开启滤镜*/
width: 20%;
height: 35px;
background: url('../img/logo@1x.png') no-repeat left;
background-size: 150px 35px;/**设置图片尺寸*/
}

.footer-content ul {
float: left;
width: 15%;
}

.footer-content ul li {
font-size: 1.4rem; /**设置字号和行高来设置上下文间隙*/
line-height: 2.4rem;
}

.footer-content ul li.title {
font-size: 1.6rem;
line-height: 3rem;
}

@media only screen and (max-width: 50em){
.footer-content .brand {
display: none;
}
.footer-content ul {
width: 20%;
}
.footer-content ul li {
font-size: 1.2rem;
line-height: 2rem;
}
.footer-content ul li.title {
font-size: 1.4rem;
line-height: 2.5rem;
}
}

@media only screen and(min-width: 30.0625em) and (max-width: 50em){

}

@media only screen and (max-width: 30em){
.footer-content {
width: 98%;
}
.footer-content ul li.title {
font-size: 1.2rem;
line-height: 2rem;
}
}

/* ======================== 第三部分：页脚 ===========================*/
footer {
width: 100%;
padding: 3rem 0.5rem;
background-color: #ededed;
}

footer ul {
text-align: center;
}

footer ul li {
display: inline-block;
}

footer ul li .icon {/**引入雪碧图*/
display: inline-block;
text-indent: -999rem;/**隐藏把标签文字移除到外面看不到*/
margin-right: 1.5rem;/**设置间隔*/
background: url(https://i.alipayobjects.com/e/201307/jebmKcbrh.png) no-repeat;
background-size: 466px 447px;
overflow: hidden;/**隐藏把标签文字移除到外面看不到*/
}

/*精确定位每个图片的位置和宽高*/
footer ul li .icon-zfywxkz {
width: 38px;
height: 27px;
background-position: -369px -45px;
}

footer ul li .icon-pcirz {
width: 78px;
height: 27px;
background-position: -118px -96px;
}

footer ul li .icon-visayz {
width: 36px;
height: 27px;
background-position: -426px -90px;
}

footer ul li .icon-vsjmfw {
width: 63px;
height: 27px;
background-position: -401px -186px;
}

footer ul li .icon-wlgs {
width: 22px;
height: 27px;
background-position: -48px -48px;
}

footer ul li .icon-rzcx {
width: 75px;
height: 27px;
background-position: 0 -320px;
}

footer ul li .icon-gs {
width: 30px;
height: 30px;
background: url(https://os.alipayobjects.com/rmsportal/lybcjqloSPjMAFg.png) no-repeat;
background-size: 30px;
}

footer p {
text-align: center;
color: #999;
}

/*＝＝＝＝＝＝＝
打印样式
＝＝＝＝＝＝＝*/

@media print {
*,
*:before,
*:after {
background: transparent !important;
color: #000 !important;
box-shadow: none !important;
text-shadow: none !important;
}
a,
a:visited {
text-decoration: underline;
}
a[href]:after {
content:"(" attr(href) ")";
}
/*
* 使用＃和javascript的超链接不打印href
*/
abbr[title]:after,
a[href="javascript:"]:after {
content: "";
}