基数使用nth-child(odd)没有效果，谁有这个课程代码
基数使用nth-child(odd)没有效果，谁有这个课程代码
cym01494
2017-10-06
2 回答
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="css/index.css" />
<link rel="stylesheet" href="css/reset.css" />
</head>
<body>
<div class="main-wrapper">
<header>
<nav>
<ul>
<li class="logo"><a href="#">张小我</a></li>
<li><a href="#">博客</a></li>
<li><a href="#">博客</a></li>
<li><a href="#">博客</a></li>
<li><a href="#">博客</a></li>
</ul>
</nav>
<div id="banner">
<div class="inner">
<h1>张小窝</h1>
<p class="sub-heading">today i am at home ,i am typing the boring program ,yes,i am a programer</p>
<button>了解我</button>
<div class="more">更多</div>
</div>
</div>
</header><!--页头-->
<div class="content">
<section class="green-section">
<div class="wrapper">
<div>
<h2>一个标题</h2>
<div class="hr"></div>
<p>please translate this centence.Outside of children are so noisy</p>
</div>
<div class="icongroup">
<div class="icon">item1</div>
<div class="icon">item2</div>
<div class="icon">item3</div>
</div>
</div>
</section>
<section class="gray-section">
<div class="article-preview">
<div class="img-section"><img src="img/pic01.jpg" alt="" ></div>
<div class="text-section">
<h2>两个人在打架</h2>
<div class="sub-heading">这是副标题</div>
<p>怎么办啊，我的天啊，来人啊开来就过呢啦的 我的人的啊的热呢伤痕 都人呢了斗鸡反对垃圾了经理</p>
</div>
</div>
<div class="article-preview">
<div class="text-section">
<h2>两个人在打架</h2>
<div class="sub-heading">这是副标题</div>
<p>If the centence is too longer,I have to devision it to two parts,如果这个句子太长，我不得不把它分成两部分the river divide into two branches
</p>
</div>
<div class="img-section"><img src="img/pic02.jpg" alt="" ></div>
</div>
<div class="article-preview">
<div class="img-section"><img src="img/pic03.jpg" alt="" ></div>
<div class="text-section">
<h2>两个人在打架</h2>
<div class="sub-heading">这是副标题</div>
<p>怎么办啊，我的天啊，来人啊开来就过呢啦的 我的人的啊的热呢伤痕 都人呢了斗鸡反对垃圾了经理</p>
</div>
</div>
</section>
<section class="purple-section">
<div class="wrapper">
<div class="heading-wrapper">
<h2>这是purple-section的h2标题</h2>
<div class="hr"></div>
<div class="sub-heading">this is the h2'spart2 content,and the content is divide to two big parts,the first is text,and the second is image sequence</div>
</div>
<div class="card-group clearfix">
<div class="card">
<h3>标题3</h3>
<p>Will you be?Of course,I will,看看我怎么收拾呃逆</p>
<p>我拿到距离撒娇浪费垃圾股</p>
</div>
<div class="card">
<h3>标题3</h3>
<p>Will you be?Of course,I will,看看我怎么收拾呃逆</p>
</div>
<div class="card">
<h3>标题3</h3>
<p>Will you be?Of course,I will,看看我怎么收拾呃逆</p>
<p>我拿到距离撒娇浪费垃圾股</p>
</div>
<div class="card">
<h3>标题3</h3>
<p>Will you be?Of course,I will,看看我怎么收拾呃逆</p>
</div>
</div>
</div>
</section>
</div><!--内容-->
<footer>
<ul class="share-group">
<li>item1</li>
<li>item1</li>
<li>item1</li>
<li>item1</li>
<li>item1</li>
</ul>
<div class="copy">
&wnagixaowo zhe shi dhye jao
</div>
</footer><!--页脚-->
</div>
</body>
</html>
nav{
background: #ccc;
height: 50px;
}
hearder{
background: rgba(0,0,0,0.4);
}
#banner{
background:transparent;
height: 700px;
}
nav ul{
list-style: none;
margin: 0;
background: transparent;
}
nav ul li{
display: inline-block;
line-height: 50px;
float:right;
margin-right: 20px;
}
nav ul li a{
line-height:50px;
text-decoration: none;
color: #333;
height: 50px;
}
nav ul li.logo{
float: left;
}
#banner .inner{
margin:0 auto;
text-align: center;
width: 300px;
position:relative;
top:160px;
}
#banner .inner .sub-heading{
line-height: 30px;
margin:30px;
}
button{
border: none;
background: #333;
color:#fff;
padding:10px;
border-radius: 4px;
}
#banner .inner button{
padding:14px 40px;
background: red;
}
#banner .inner h1{
font-size: 36px;
}
#banner .inner .more{
margin-top:280px;
}
.logo{
font-weight: 700;
font-size: 20px;
letter-spacing:1px;
}
.logo a{
color:#fff;
}
.green-section{
background:#089db0;
color: #fff;
text-align: center;
padding: 100px 0;
line-height: 4em;
}
.green-section .hr{
width: 60%;
height: 1px;
background: #fff;
margin: 20px auto;
}
.green-section h2{
font-size:32px;
font-weight: bold;
}
.wrapper{
max-width: 1080px;
margin:0 auto;
}
.wrapper p{
width:60%;
display: inline-block;
margin:0 auto;
}
.wrapper .icongroup{
margin-top:60px;
}
.wrapper .icongroup .icon{
width:80px;
height: 80px;
display: inline-block;
transform:rotate(45deg);
border: 3px solid #0d6f7c;
margin: 20px;
}
.gray-section{
background: #252f34;
color:#fff;
}
.gray-section h2{
font-size:24px;
font-weight: bold;
line-height: 4em;
}
.gray-section .img-section{
width: 45%;
}
.gray-section .img-section img{
width: 100%;
}
.gray-section .text-section{
width: 55%;
}
.article-preview > div{
float: left;
}
.article-preview:after{
content: '';
display: block;
clear: both;
}
.text-section{
position: relative;
top:30px;
left:30px;
line-height: 2em;
}
.text-section .sub-heading{
font-size: 20px;
font-weight: bold;
line-height: 2em;
}
.text-section > *{
max-width: 90%;
}
.article-preview:nth-child(odd){
background: red;
rgba(255,255,255,0.05);
}
.purple-section{
background:#3f396f;
color: #fff;
line-height: 2em;
padding: 80px;
height: 1000px;
}
.purple-section h2{
font-size: 2em;
line-height: 4em;
}
.purple-section .heading-wrapper{
text-align: center;
}
.purple-section .hr{
background:#373259;
width:60%;
height: 2px;
margin: 0 auto;
}
.card{
float: left;
width: 50%;
min-height: 300px;
padding: 50px;
box-sizing:border-box;
-moz-box-sizing:border-box; /* Firefox */
-webkit-box-sizing:border-box; /* Safari */
/*border: 1px solid #fff;*/
}
.card:first-child{
background:rgba(0,0,0,0.05);
}
.card:nth-child(2){
background: rgba(0,0,0,0.09);
}
.card:nth-child(3){
background: rgba(0,0,0,0.13);
}
.card:nth-child(4){
background: rgba(0,0,0,0.16);
}
.clearfix{
content:'';
display: block;
clear:both;
}
.box p{
font-size: 18px;
}
footer{
background: #333;
color:#fff;
min-height: 200px;
text-align: center;
}
ul.share-group{
display: block;
width: 1080px;
margin: 0 auto;
padding: 50px;
}
ul li{
display: inline-block;
padding:10px;
}
.copy{
text-align: center;
}
.main-wrapper{
background: #444 url(../img/banner.jpg);
background-attachment: fixed;
background-repeat:no-repeat;
background-size:cover;
background-position: center center;
}
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
font-family: "微软雅黑";
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
举报
0/150
提交
取消
