为什么图片没有靠边
不知道为啥 这么改都弄不了。
还有奇偶选择器 按老师的讲 选出来的背景是纯白色,然后我通过审查元素,选出来的这个颜色.article-preview:nth-child(odd){background-color: rgba(0,0,0,0.59);}
下面是我的CSS样式,望大神们帮帮忙
/*公用*/
.b_text{font-size: 18px;}
h2{font-size: 30px;}
.fl{float: left;}
.fr{float: right;}
/*页头*/
nav{ height: 50px; background:#ccc;}
nav ul{ list-style: none; margin: 0;float: right;}
nav ul li,nav .logo{ display: inline-block; line-height: 50px; margin-right: 20px;}
a{text-decoration: none;}
nav ul li a{ line-height: 50px; display: inline-block; height:inherit; /*继承母元素属性*/ color: #fff;}
nav .logo{ float: left; line-height: 50px; height: 50px; margin-left: 20px;}
#banner{ background: #777; height: 700px; color: #fff;}
#banner .inner{ max-width: 300px;/*最大宽度*/ text-align: center;/*文字居中*/ margin: 0 auto; position: relative;top: 160px;}
#banner .inner h1{ margin: 0; line-height: 60px;}
button{ border:none; background: #333; color: #eee; padding: 10px;}
#banner button{ padding: 14px 60px;}
#banner .inner .more{ margin-top: 180px;}
#banner .inner .b_text{ line-height: 30px; margin: 50px; }
.logo{ font-size: 20px; font-weight: 700;/*字重,加粗的感觉*/ letter-spacing: 2px;/*文字之间的间距,字距*/ }
.logo a{color: #fff;}
.title1{ border-top: 5px solid #fff; border-bottom: 5px solid #fff; height: 60px;}
/*内容*/
.green-section{ text-align: center; background: #0FD097; margin-top: -20px; padding: 100px 0;}
.wrapper{max-width: 1080px; margin: 0 auto;}
.hr{width: 60%; height: 2px; }
.wrapper .hr{ margin:20px; background: #1D6F35; margin: 0 auto;}
.green-section .icon-group{margin-top: 60px;}
.green-section .icon-group .icon{ display: inline-block; width: 80px; height: 80px; border: 1px solid #FFF; transform: rotate(45deg);/*transform: 形变 rotate旋转 deg单位度数*/margin: 20px; }
.gray-section .article-preview{background: #565A5a; color: #fff; }
.gray-section .img-section{width: 40%; }
.img-section img{width: 100%; /*必须先设定盒子宽度才才能更改插入图片的大小不然盒子会被图片撑开*/}
.article-preview > div/*父集向下一级 也就是说只包含div而不包含img*/{float: left; font-size: 0; width: 100%}
.article-preview:after{content: ''; display: block; clear: both;}/*所有子集浮动会影响到父集,这时我们需要给父集清浮动,clear:both清除所有的浮动,content:'';意思是父集内容为空,但不是没有,需要子集填充*/
.text-section{position: relative;top: 0; left:100px; max-width: 30%;}
.text-section h2{margin-bottom: 20px; }
.text-section p{letter-spacing: 1px; font-size: 15px;}
.sub_heading{ font-size: 20px; margin-top: 0;}
.article-preview:nth-child(odd){background-color: rgba(0,0,0,0.59);}