网页布局与响应式设计-优快云博客

本文链接：https://blog.youkuaiyun.com/Yesterdayw/article/details/108604407

index.js

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title></title>
		<link rel="stylesheet" href="css/index.css">
		<!-- //<link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"> -->
	</head>
	<body>
		<div class="header mb-3">
			<div class="head_box container">
				<div class="logo">
					<a>首页</a>		
				</div>
				<label class="sv" for="click_lable">
						<i class="iconfont icon-tasks" aria-hidden="true"> </i>
				</label>
				<input type="checkbox" class="i_input" id="click_lable">
				<div class="tabs_item">
					<div class="item_list">
						<ul>
							<li><a>在线教育</a></li>
							<li><a>社区讨论</a></li>
							<li><a>八点直播</a></li>
							<li><a>实战课程</a></li>
						</ul>
					</div>
					<div class="login_registe">
						<a href="" class="login">登录</a>
						<a href="" class="registe">注册</a>
					</div>
				</div>  	
			</div>
		</div>
		<div class="container">
			<div class="rows">
				<div class="col-9 col-sx-12">
					<div class="card">
						<div class="card_head">
							<h2>最近更新</h2>
						</div>
						<div class="card_body">
							<ul class="list_group">
								<li><a>在线教育在线教育在线教育在线教育在线教育</a><span>2020-09-15</span></li>
								<li><a>在线教育在线教育在线教育在线教育在线教育</a><span>2020-09-15</span></li>
								<li><a>在线教育在线教育在线教育在线教育在线教育</a><span>2020-09-15</span></li>
								<li><a>在线教育在线教育在线教育在线教育在线教育</a><span>2020-09-15</span></li>
								<li><a>在线教育在线教育在线教育在线教育在线教育</a><span>2020-09-15</span></li>
								<li><a>在线教育在线教育在线教育在线教育在线教育</a><span>2020-09-15</span></li>
								<li><a>在线教育在线教育在线教育在线教育在线教育</a><span>2020-09-15</span></li>
							</ul>
						</div>
						<div class="card_foot">
							<div class="page">
								<a href=""><</a>
								<a href="" class="current">1</a>
								<a href="">2</a>
								<a href="">3</a>
								<a href="">4</a>
								<a href="">5</a>
								<a href="">></a>
							</div>
						</div>
					</div>
				</div>
				<div class="col-3 col-sx-12">
					<div class="card">
						<div class="card_head">
							<h2>社区小贴士</h2>
						</div>
					</div>
				</div>
			</div>
		</div>
	</body>
</html>

index.css

@import url(navbar.css);
@import url(commen.css);
@import url(card.css);
@import url(margin.css);
@import url(small-x.css) only screen and (max-width:768px);
@import url(small.css) only screen and (min-width:768px);
@import url(medium.css) only screen and (min-width:960px);
@import url(big.css) only screen and (min-width:1200px);
@font-face {font-family: "iconfont";
    src: url('//at.alicdn.com/t/font_2068703_ae7gvxjbmud.eot?t=1600136428553'); /* IE9 */
    src: url('//at.alicdn.com/t/font_2068703_ae7gvxjbmud.eot?t=1600136428553#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAKsAAsAAAAABqQAAAJgAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCCcAqBMIE3ATYCJAMICwYABCAFhG0HLxvcBcgekiQlKiRQFCEqGQbwjuBjv//tufZVkmpUzSpNlEgoRJVQrdMYUiBEXiW/q7nclElvQT7LVyVSTza4l/DloOTK41slqgzbJ+GaSQP/Ps/l9CbQ0dld9YFynpvGmjQxDOOAAtsTo0VQQD3PqWF6+QIH4jKBal0KjM3jyxZMyehZgXgS+jZMFYIyGctUCkXDxizinVxl8jz5BN5Gn49/ajFFIk/pmp2bIw92S0OT03353kVACBHQ9hwpJoCMOGhMbhkVjBtVnRzTB45VGZSGHzjEUf88UdDltaADpoLS0Cke9ZsJyFBgEVib5KPINNH4W/h81B4tRv3lbFTfw/23maUXPwzj2c/Z5ZffR4s1p2fZedbtgkOTXl9/Z+etob34yykibuO9nl/42NDq1lrveh3sAuUyWaQzDARfW/5+mw2L/ytnM/D39agEVcPcoPJ8ruC/2bPoUAmlTiYZUGMgsWjifuqqVaMMeZsNp5rabjIbKrXdqrtCZ4ZUpQEyYyeQqzGJQqUVVBt3sr1GC2lUZFUY8wIQGn0gUe8PUo2+yIwdINfuH4XGGEW1o2g5sMZQhDMbkmxNHjp3GLo8Y9apZ+LKBvlXiS3zykjokFRhBKulSjlzQhnJJZaoa7+mNUMmeYrH4DpKEo655BG5uhRondfLZdZ0p5LLU5ixQSI2jXiQ4w4KubgMC3prM5X3NxDflYRNdrTl8h1EUsLBUVVJZQB5ossGtT3KLco1X42mMYiRuBQ6BuNIIsGhvHlchLi0kmBCPFdXNp3YUF1pe0P6d/ugmjYnYUak8qe2ihUA') format('woff2'),
    url('//at.alicdn.com/t/font_2068703_ae7gvxjbmud.woff?t=1600136428553') format('woff'),
    url('//at.alicdn.com/t/font_2068703_ae7gvxjbmud.ttf?t=1600136428553') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
    url('//at.alicdn.com/t/font_2068703_ae7gvxjbmud.svg?t=1600136428553#iconfont') format('svg'); /* iOS 4.1- */
  }
  
  .iconfont {
    font-family: "iconfont" !important;
    font-size: 16px;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  
  .icon-tasks:before {
    content: "\ecde";
  }

commen.css

*{
    margin: 0;
    padding: 0;
}
/* 等价于：html */
:root{
    font-size: 15px;
}
a{
    text-decoration: none;
}
ul{
    list-style: none;
}
.col-12{
    grid-column: span 12;
}
.col-11{
    grid-column: span 11;
}
.col-10{
    grid-column: span 10;
}
.col-9{
    grid-column: span 9;
}
.col-8{
    grid-column: span 8;
}

.col-7{
    grid-column: span 7;
}
.col-6{
    grid-column: span 6;
}
.col-5{
    grid-column: span 5;
}
.col-4{
    grid-column: span 4;
}

.col-3{
    grid-column: span 3;
}
.col-2{
    grid-column: span 2;
}
.col-1{
    grid-column: span 1;
}

navbar.css

.header{
    border-bottom: 3px solid#5CACEE;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
}
div.head_box {
    display: flex;
    align-items: center;
    padding: 1rem 0;
    div.logo {
        font-size: 1.3rem;
        color: 	#7EC0EE;
        padding-left: 30px;
    }
    label.sv{
     margin-left:4rem;
     padding: .4rem .6rem;
     cursor: pointer;
     display: none;
    }
    input{
      display: none;
    }
    .tabs_item{
        display: flex;
        padding-left: 20px; 
        flex-grow: 1;//只给一个子项目设置，表示此子项目沾满剩余空间
        div.item_list {     
            margin-right: auto;//使ul沾满空白
          ul {
            display: flex;    
            li {
              a {
                  margin: 0 10px;
                  color: #777;
                  line-height: 31px;
                  &:hover{
                      color: #333;
                  }
                }
            }
          }
        }  
        div.login_registe {
            display: flex;
            padding-right: 20px;
          a.registe {
            margin-left: 10px;
            background-color:#16a085 ;
            color: white;
          }
          a{
              border: 1px solid #16a085;
              border-radius: .4rem;
              padding: .3rem 1rem;
              color: #16a085;
          }
        }
      }

  }

.rows{
  display: grid;//表示栅格布局
  grid-template-columns: repeat(12,1fr);//设置每列为重复的12/1
  gap: 10px;//每个模块间设置距离
  .a{ border: 1px solid #16a085;}
}
  //当视口宽度小于960时，隐藏导航
  @media only screen and (max-width:960px){
    .header{
      .head_box{
        flex-flow: row wrap;
        .logo{
          margin-right: auto;
        }
        .sv{
            display:inline-block;
          }
        input:checked{
            &+.tabs_item{
              display: block;
            }
        }
        .tabs_item{
          display: none;
          width: 100%;
          flex-direction: column;
          ul{
            flex-direction: column;
            li{
              margin: .5rem 0;
            }
          }
          .login_registe{margin-top: 20px;}
        }
        
      }
    }
  }

small-x.css

body{
    // background-color: rebeccapurple;
}
.container{
    width: 500px;
    margin: 0 auto;
}
:root{
    font-size: 13px;
}
.col-sx-12{
    grid-column: span 12;
}
.col-sx-11{
    grid-column: span 11;
}
.col-sx-10{
    grid-column: span 10;
}
.col-sx-9{
    grid-column: span 9;
}
.col-sx-8{
    grid-column: span 8;
}

.col-sx-7{
    grid-column: span 7;
}
.col-sx-6{
    grid-column: span 6;
}
.col-sx-5{
    grid-column: span 5;
}
.col-sx-4{
    grid-column: span 4;
}

.col-sx-3{
    grid-column: span 3;
}
.col-sx-2{
    grid-column: span 2;
}
.col-sx-1{
    grid-column: span 1;
}