Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
1.1k views
in Technique[技术] by (71.8m points)

html - Three horizontal stripes in CSS

I've created three horizontal stripes to create an extended flag that will run at the top of my page:

CSS

#main1 div{
width: auto;
height: 20px;
margin: 0px

HTML

<div id="main1">
<div style="background-color:red;"></div>
<div style="background-color:blue;"></div>
<div style="background-color:orange;"></div>

How to get it to stick right up to the edge of the browser? (as in no gaps on the left right or top)

And also is there any easier / better way I could have done this Keep in mind I'm very much a novice

Your help is much appreciated! Thanks

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

Remove any margin and padding from html and body elements, then use a single div with a linear-gradient as a background

Example: http://codepen.io/anon/pen/rOxEgJ

html, body { margin: 0; padding: 0 }


#flag {
   height : 100px;
   width  : 100%;
   background: linear-gradient(to bottom, 
       red    0%, red  33.33%, 
       blue   0%, blue 66.66%,        
       orange 0%);
}

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...