<!--[if (gte IE 9)|!(IE)]><!--><html lang="en"><!--<![endif]-->
<head>
<!-- Basic Page Needs
================================================== -->
<meta charset="utf-8">
<title>zBabyCare</title>
<meta name="description" content="Free Responsive Html5 Css3 Templates ">
<!-- Mobile Specific Metas
================================================== -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<!-- CSS
================================================== -->
<link rel="stylesheet" href="css/zerogrid.css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/lightbox.css">
<!-- Custom Fonts -->
<link href="font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="css/menu.css">
<script src="js/jquery1111.min.js" type="text/javascript"></script>
<script src="js/script.js"></script>
</head>
<body>
<div class="wrap-body">
<div class="header">
<div id='cssmenu' >
<ul>
<li><a href='index.html'><span>zBabyCare</span></a></li>
<li class=' has-sub'><a href='#'><span>Category</span></a>
<ul>
<li class='has-sub'><a href='#'><span>Item 1</span></a>
<ul>
<li><a href='#'><span>Sub Item</span></a></li>
<li class='last'><a href='#'><span>Sub Item</span></a></li>
</ul>
</li>
<li class='has-sub'><a href='#'><span>Item 2</span></a>
<ul>
<li><a href='#'><span>Sub Item</span></a></li>
<li class='last'><a href='#'><span>Sub Item</span></a></li>
</ul>
</li>
</ul>
</li>
<li><a href='gallery.html'><span>Gallery</span></a></li>
<li><a href='single.html'><span>About</span></a></li>
<li class='last active'><a href='contact.html'><span>Contact</span></a></li>
</ul>
</div>
</div>
<!--Container-->
<section id="container">
<div class="wrap-container">
<div class="zerogrid">
<div class="row">
<h1 class="color-red" style="margin: 20px 0">Contact</h1>
<div class="col-full">
</div>
<div class="col-1-3">
<div class="wrap-col">
<h3 class="color-blue" style="margin: 20px 0">Contact Info</h3>
<span>SED UT PERSPICIATIS UNDE OMNIS ISTE NATUS ERROR SIT VOLUPTATEM ACCUSANTIUM DOLOREMQUE LAUDANTIUM, TOTAM REM APERIAM.</span>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque la udantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia.</p>
<p>JL.Kemacetan timur no.23. block.Q3<br>
Jakarta-Indonesia</p>
<p>+6221 888 888 90 <br>
+6221 888 88891</p>
<p>info@yourdomain.com</p>
</div>
</div>
<div class="col-2-3">
<div class="wrap-col">
<div class="contact">
<h3 class="color-green" style="margin: 20px 0 20px 30px">Contact Form</h3>
<div id="contact_form">
<form name="form1" id="ff" method="post" action="contact.php">
<label class="row">
<div class="col-1-2">
<div class="wrap-col">
<input type="text" name="name" id="name" placeholder="Enter name" required="required" />
</div>
</div>
<div class="col-1-2">
<div class="wrap-col">
<input type="email" name="email" id="email" placeholder="Enter email" required="required" />
</div>
</div>
</label>
<label class="row">
<div class="col-2-4">
<div class="wrap-col">
<input type="text" name="subject" id="subject" placeholder="Subject" required="required" />
</div>
</div>
<div class="col-1-4">
<div class="wrap-col">
<input type="date" name="date" id="date" placeholder="Date"/>
</div>
</div>
<div class="col-1-4">
<div class="wrap-col">
<input type="time" name="time" id="time" placeholder="Time"/>
</div>
</div>
</label>
<label class="row">
<div class="wrap-col">
<textarea name="message" id="message" class="form-control" rows="4" cols="25" required
placeholder="Message"></textarea>
</div>
</label>
<center><input class="sendButton" type="submit" name="Submit" value="Submit"></center>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<hr class="line">
<!--/Footer-->
<footer>
<div class="wrap-footer">
<div class="zerogrid">
<div class="row">
<div class="col-1-3">
<div class="wrap-col">
<p>Copyright ©2019.Company name All rights reserved.<a target="_blank" href="http://www.programb.com/">网页模板</a></p>
</div>
</div>
<div class="col-1-3">
<div class="wrap-col">
<ul class="social-buttons">
<li><a href="#"><i class="fa fa-twitter"></i></a>
</li>
<li><a href="#"><i class="fa fa-facebook"></i></a>
</li>
<li><a href="#"><i class="fa fa-linkedin"></i></a>
</li>
</ul>
</div>
</div>
<div class="col-1-3">
<div class="wrap-col">
<ul class="quick-link">
<li><a href="#">Privacy Policy</a></li>
<li><a href="#">Terms of Use</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</footer>
</div>
</body>
</html>
通过以下方式来改变el-table标签下的表格偶数行的样式。 注意：这个样式必须是全局的才会生效，即style标签不能加scoped,为了...选择器来限制样式，如 2.更复杂的情况，我们可以在使用标签后，在浏览器中打开页面，进入开发者模式（F12），查看该标签对应的class(浏览器会把组件都解析成html标签）规范如此。先说解决方案：删了#main中的 border:solid 1px没事
方案1.给#main加overflow:hidden
方案2.把.block_2的margin:20px替换为#main的padding:20px
方案3.给.block_2加position: absolute
有兴趣再往下看
1.在常规文档流中，2个或以上的块级盒模型相邻的垂直margin会被折叠。最终的margin值计算方法如下：
a、全部都为正值，取最大者；
b、不全是正值，则都取绝对值，然后用正值减去最大值；
c、没有正值，则都取绝对值，然后用0减去最大值。注意：相邻的盒模型可能由DOM元素动态产生并没有相邻或继承关系。
2.相邻的盒模型中，如果其中的一个是浮动的（floated），垂直margin不会被折叠，甚至一个浮动的盒模型和它的子元素之间也是这样。
3.设置了overflow属性的元素和它的子元素之间的margin不会被折叠（overflow取值为visible除 外）。
4.设置了绝对定位（position:absolute）的盒模型，垂直margin不会被折叠，甚至和他们的子元素之间也是一样。
5.设置了display:inline-block的元素，垂直margin不会被折叠，甚至和他们的子元素之间也是一样。
6.如果一个盒模型的上下margin相邻，这时它的margin可能折叠覆盖（collapse through）它。在这种情况下，元素的位置（position）取决于它的相邻元素的margin是否被折叠。
a、如果元素的margin和它的父元素的margin-top折叠在一起，盒模型border-top的边界定义和它的父元素相同。
b、另外，任意元素的父元素不参与margin的折叠，或者说只有父元素的margin-bottom是参与计算的。如果元素的border-top非零，那么元素的border-top边界位置和原来一样。一个应用了清除操作的元素的margin-top绝不会和它的块级父元素的margin-bottom折叠。
注意，那些已经被折叠覆盖的元素的位置对其他已经被折叠的元素的位置没有任何影响；只有在对这些元素的子元素定位时，border-top边界位置才是必需的。
7.根元素的垂直margin不会被折叠。
