為什么圖片沒有靠邊
不知道為啥 這么改都弄不了。
還有奇偶選擇器 ?按老師的講 選出來的背景是純白色,然后我通過審查元素,選出來的這個顏色.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);}