2016-06-21 60 views
0

請參考發佈的圖片。我想在第一張圖片上添加margin-left,然後在其他圖片中添加我不想要的圖片。我可以使用兒童選擇器來達到這個目的嗎?還是有其他方法?如何在這裏使用兒童選擇器?

我可以製作圖像,overflow: scroll就像我們在文字的情況下一樣嗎?因爲我現在不知道jquery/javascript。

* { 
 
\t box-sizing: border-box; 
 
} 
 

 
body { 
 
\t background:gray; 
 
\t 
 
\t /*border: 2px solid yellow;*/ 
 
} 
 

 
.wrapper { 
 
\t width: 93%; 
 
\t height: auto; 
 
\t margin: auto; 
 
} 
 

 
.headwrap { 
 
\t 
 
\t padding-top: 70px; 
 
} 
 

 
.logo { 
 
\t margin: 0; 
 
\t float: left; 
 
} 
 

 
.socialbuttons { 
 
\t float: right; 
 
\t 
 
\t 
 
} 
 

 
.socialbuttons ul { 
 
\t list-style: none; 
 
\t float: right; 
 
\t 
 
} 
 

 
.socialbuttons ul li { 
 
\t float: left; 
 
\t width:50px; 
 
\t height:50px; 
 
\t padding:0; 
 
\t margin-right: 30px; 
 
\t background: #000; 
 
\t border-radius:30px; \t 
 
} 
 
.socialbuttons ul li img{ 
 
\t margin-left:20px; 
 
\t margin-top:20px; 
 
} 
 

 
.navbar { 
 
\t margin-top: 40px; 
 
\t width: 100%; 
 
\t background: #db3636; 
 
\t float: left; /* this and see changes */ 
 
} 
 

 
.navbar ul { 
 
\t list-style: none; 
 
\t margin: 0; 
 
\t padding: 0 5px; /* the 0 helps with making the borders span full height of navbar*/ 
 
\t /* float producing wrong results */ 
 
} 
 

 
.navbar ul li { 
 
\t float: left; /* height of menu bar increases when float is defined */ 
 
\t display: inline; /* does it have any use ? */ 
 
\t padding: 25px 10px; 
 
\t border-right: 1px solid black; 
 
\t border-left: 1px solid black; 
 
\t color: white; 
 
\t font-size: 14px; 
 
\t font-weight: bold; 
 
\t font-family: sans-serif; 
 
\t text-align: center; 
 
\t width: 15%; 
 
} 
 

 
.navbar ul li:first-child { 
 
\t border-left: none; 
 
} 
 

 

 
.navbar ul li:last-child { 
 
\t border-right: none; 
 
} 
 

 
.clearfix { 
 
\t *zoom: 1; 
 
} 
 

 
.clearfix:before, 
 
.clearfix:after { 
 
\t display: table; 
 
\t content: ""; 
 
\t line-height: 0; 
 
} 
 

 
.clearfix:after { 
 
\t clear: both; 
 
} 
 

 
.slider img { 
 
\t float:left; 
 
\t width:100%; 
 
} 
 
.text{ 
 
\t color:white; 
 
\t margin-top:-35%; 
 
\t float:left; 
 
\t margin-left: 80px; 
 
\t font-weight: bold; 
 
\t font-family: Helvetica, Arial, Sans-Serif; 
 
\t font-size : 50px; 
 
\t line-height: .5; 
 
} 
 

 
#project { 
 
\t background-color: #555653; 
 
\t width: 100%; 
 
\t margin-top: 10px; 
 
\t float: left; 
 
} 
 

 
.head { 
 
\t float: left; 
 
\t background-color: #1D1D1C; 
 
\t width: 100%; 
 
} 
 

 
.head h3 { 
 
\t color: white; 
 
\t font-family: Arial , sans-serif; 
 
\t font-weight: lighter; 
 
\t margin-left: 20px; 
 
} 
 

 
.imgContainer img { 
 
\t margin-top: 20px; 
 
\t padding-left: 40px 
 
}
<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<title>Industrial Website demo</title> 
 
<meta charset="UTF-8"> 
 
<meta name="viewport" content="width=device-width, initial scale=1.0"> 
 
<link href="damion.css" rel="stylesheet" type="text/css"> 
 
</head> 
 
<body> 
 
\t <div class="wrapper"> 
 
\t \t <header class="headwrap"> 
 
\t \t \t <div class="logo"> 
 
\t \t \t \t <img src="logo.png" alt="Damion max"> 
 
\t \t \t </div> 
 
\t \t \t <div class="socialbuttons"> 
 
\t \t \t \t <ul> 
 
\t \t \t \t \t <li><img src="facebook.png"></img></li> 
 
\t \t \t \t \t <li><img src="twitter.png"></img> </li> 
 
\t \t \t \t \t <li><img src="feed.png"></img></li> 
 
\t \t \t \t \t <li><img src="google.png"></img></li> 
 
\t \t \t \t </ul> 
 
\t \t \t </div> 
 
\t \t \t <nav class="navbar"> 
 
\t \t \t \t <ul class="clearfix"> 
 
\t \t \t \t \t <li style="width:5%;"><img src="home.png"></li> 
 
\t \t \t \t \t <li>ABOUT US</li> 
 
\t \t \t \t \t <li>GALLERY</li> 
 
\t \t \t \t \t <li>EVENTS</li> 
 
\t \t \t \t \t <li>BLOG</li> 
 
\t \t \t \t \t <li>CONTACTS</li> 
 
\t \t \t \t \t <li style="padding:0; width:20%;"><input type="text" style="background:black; height:30px; width:90%; margin:20px 0 0 20px; border:0; border-radius:10px;"></li> 
 
\t \t \t \t </ul> 
 
\t \t \t </nav> 
 
\t \t </header> 
 
\t \t <div class="slider"> 
 
\t \t \t <img src="industrial.jpg" /> 
 
\t \t <div class="text">WE ARE PROFESSIONAL,<p><span style="font-weight:lighter; line-height:100%; color: yellow ;">COMPETITIVE AND COMPETENT</span></p></P></div> 
 
\t \t </div> 
 
\t \t <div id="project"> 
 
\t \t \t <div class="head"> 
 
\t \t \t \t <h3>FEATURED PROJECTS</h3> 
 
\t \t \t </div> 
 
\t \t \t <div class="imgContainer"> 
 
\t \t \t \t <img src="1.jpg"/> 
 
\t \t \t \t <img src="2.jpg"/> 
 
\t \t \t \t <img src="3.jpg"/> 
 
\t \t \t \t <img src="4.jpg"/> 
 
\t \t \t \t <img src="5.jpg"/> 
 
\t \t \t \t <!--<img src="6.jpg"/>--> 
 
\t \t \t </div> 
 
\t \t </div> 
 
\t \t 
 
\t \t 
 
\t \t 
 
\t \t 
 
\t \t 
 
\t \t 
 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 
\t </div> 
 
</body> 
 
</html>

i want to make it like this

+1

選擇:第一,孩子{風格..}您可以使用此 –

+0

是:)非常感謝你 – Tarique

+0

歡迎:)...... –

回答

2

使用:first-child選擇這個:

.imgContainer img:first-child{ 
     margin-left:10px; 
    } 
+0

謝謝:)我沒想到這方式 – Tarique

+0

很高興幫助你:) –

+0

我有一個更多的查詢。有沒有聊天選項在這裏:/ – Tarique

2

可以使用這個CSS

.imageContainer img:first-child 
{ 
    margin-left:20px; 
} 
輕鬆實現這

.imgContainer img:first-of-type 
.imgContainer img:first-child 
.imgContainer img:nth-child(1) 

如果你想要某種溢出的設置爲你的圖片,你需要將它們包裝在另一個元素,如:

+0

謝謝:)這並沒有出現在我的腦海裏:D – Tarique

0

你可以用下面的任何給定的選擇中選擇了第一個孩子通用div並將您的溢出規則設置爲此元素,標準溢出規則將不會直接應用於img元素。
CSS Tricks - overflow

+0

謝謝你:)會嘗試 – Tarique