响应式九宫格图片（长宽自适应）

最新推荐文章于 2024-01-27 21:11:36 发布

Vivianluolita

最新推荐文章于 2024-01-27 21:11:36 发布

阅读量6.7k

点赞数

分类专栏： HTML5+CSS3

本文链接：https://blog.csdn.net/Vivianluolita/article/details/52882584

版权

HTML5+CSS3 专栏收录该内容

45 篇文章 0 订阅

订阅专栏

HTML

<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
<title>挑选电子书制作工具</title>
 
<link rel="stylesheet" type="text/css" href="../css/main.css">
<link rel="stylesheet" type="text/css" href="../css/ebookMaker/wxPictureSdTrain.css">
<link href="../css/ebookMaker/wxPictureSdTrain2.css" rel="stylesheet" type="text/css" media="(min-width:700px)">
<script src="../js/jquery.min.js"></script>
</head>
<body>
<div class="Top"> 
<a href="wxPictureCutpicAdd.html" class="BtnBack"></a>
  <h1>军训</h1>
</div>
<div class="Container">
<div class="BtnContainer">
      <a href="javascript:void(0)" class="DldNow">立即添加</a>
</div></div>
<!-- ChooseTools 公共样式 -->
<div class="ChooseTools">
<!-- 添加文字样式 NavLinks 已经更改背景颜色-->
    <!-- NavLinks：内容显示区域 -->

  <div class="NavLinks">
  <!-- 列表项 Item：图片加文字 -->
    <a class="ItemLink" href="javascript:void(0)"> 
    <!-- 整个a标签内嵌套文字加图片内容 ItemLink -->
    <img src="../css/images/Mobile_bg0266.png">
  </a>
</div>


<div class="NavLinks">
  <!-- 列表项 Item：图片加文字 -->
    <a class="ItemLink" href="javascript:void(0)"> 
    <!-- 整个a标签内嵌套文字加图片内容 ItemLink -->
    <img src="../css/images/Mobile_bg0267.png">
  </a>
</div>

<div class="NavLinks">
  <!-- 列表项 Item：图片加文字 -->
    <a class="ItemLink" href="javascript:void(0)"> 
    <!-- 整个a标签内嵌套文字加图片内容 ItemLink -->
    <img src="../css/images/Mobile_bg0268.png">
  </a>
</div>

<div class="NavLinks">
  <!-- 列表项 Item：图片加文字 -->
    <a class="ItemLink" href="javascript:void(0)"> 
    <!-- 整个a标签内嵌套文字加图片内容 ItemLink -->
    <img src="../css/images/Mobile_bg0269.png">
  </a>
</div>

<div class="NavLinks">
  <!-- 列表项 Item：图片加文字 -->
   <a class="ItemLink" href="javascript:void(0)"> 
    <!-- 整个a标签内嵌套文字加图片内容 ItemLink -->
    <img src="../css/images/Mobile_bg0270.png">
  </a>
</div>

<div class="NavLinks">
  <!-- 列表项 Item：图片加文字 -->
    <a class="ItemLink" href="javascript:void(0)"> 
    <!-- 整个a标签内嵌套文字加图片内容 ItemLink -->
    <img src="../css/images/Mobile_bg0271.png">
  </a>
</div>

<div class="NavLinks">
  <!-- 列表项 Item：图片加文字 -->
    <a class="ItemLink" href="javascript:void(0)"> 
    <!-- 整个a标签内嵌套文字加图片内容 ItemLink -->
    <img src="../css/images/Mobile_bg0272.png">
  </a>
</div>

<div class="NavLinks">
  <!-- 列表项 Item：图片加文字 -->
    <a class="ItemLink" href="javascript:void(0)"> 
    <!-- 整个a标签内嵌套文字加图片内容 ItemLink -->
    <img src="../css/images/Mobile_bg0273.png">
  </a>
</div>

<div class="NavLinks">
  <!-- 列表项 Item：图片加文字 -->
   <a class="ItemLink" href="javascript:void(0)"> 
    <!-- 整个a标签内嵌套文字加图片内容 ItemLink -->
    <img src="../css/images/Mobile_bg0274.png">
  </a>
</div>

</div>



<script type="text/javascript">
$(function(){ 
  /*移除元素*/
  $(".GotoDld").click(function(){
    $(this).parent().parent().remove();    
    /*排序功能*/ 
  })
  $(".EditOrd").click(function() {
    $(".EditOrd").text("完成");
    $(".GotoOrd").css("display","block");
    $(".GotoDld").css("display","none");
  })



})







</script>



</body>
</html>

css

body{
	margin:0px auto;
	padding:44px 0px 64px 0px;
	background:#efeff4;
	position:relative;
	display:block;
}
.Container{
	height:60px;
	background:#ffffff;
	position:absolute;
	left:0px;
	top:44px;
	width:100%;
	border-bottom: 1px solid #dedee0; 
}
.Container .DldNow{
	display: block;
    height: 38px;
    line-height: 38px;
    text-align: center;
    vertical-align: middle;
    color: #ffffff;
    background: #04be02;
    border: 1px solid rgba(0,0,0,0.2);
    padding: 0px 8px;
    border-radius: 4px;
    font-size: 16px;
	left: 16px;
	right: 16px;
	top:10px;
	position: absolute;
}
.DldNow:before{
    content:" ";
    position:absolute;
    top:0px;
    right:0px;
    border-top:1px solid #d9d9d9;
    color:#d9d9d9;
    background-color: #d9d9d9;
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    -webkit-transform: scaleY(0.5);
    transform: scaleY(0.5);
    z-index:5;
}

 .ChooseTools{
	margin-top:60px;
	padding: 5px;
	overflow:hidden;
	zoom:1;
}

.NavLinks{
	position:relative;
	width:33.33%;
	float: left;
	overflow: hidden;
	
}
.NavLinks .ItemLink{
	display:block;
	background-color: #ffffff;
	margin: 5px;
	position: relative;
}
.NavLinks .ItemLink:before{
	content:"";
	display: block;
	position: relative;
	padding-top: 100%;

}
/*  */
.NavLinks .ItemLink img{
	left: 0px;
	top: 0px;
	position: absolute;
	display: block;
	width: 100%;
	height: 100%;
}



/* Test 10.18 */