为了账号安全,请及时绑定邮箱和手机立即绑定

为什么图片没有靠边

http://img1.sycdn.imooc.com//5715d2ad0001280c19140686.jpg

不知道为啥 这么改都弄不了。

还有奇偶选择器  按老师的讲 选出来的背景是纯白色,然后我通过审查元素,选出来的这个颜色.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);}


正在回答

举报

0/150
提交
取消
HTML5和CSS3扁平化风格博客
  • 参与学习       86786    人
  • 解答问题       406    个

HTML5与CSS3搭建超酷扁平化风格博客

进入课程

为什么图片没有靠边

我要回答 关注问题
微信客服

购课补贴
联系客服咨询优惠详情

帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

公众号

扫描二维码
关注慕课网微信公众号