my blog Graphic Design

Question: No matter how the page changes, the size of the constrained picture always accounts for a percentage of the total width of the page ~ assuming 32% for example

Solve:

1. Add a parent element to the picture ~ Set the width of the parent element to the 32%~ of the entire screen

2, the picture width is set to 100% (this step is very important ~ only add this sentence ~ The picture will be constrained in the parent element ~)

HTML code:

< Sectionclass= "Gray-section">        <Divclass= "Article-preview">            <Divclass= "Image-section">                <imgsrc= "Imgs/pic01.jpg"alt= "Picture 1"/>            </Div>            <Divclass= "Text-section">                <H2>Have a title</H2>                <P>Lorem ipsum dolor sit amet, consectetur adipisicing elit.                Accusamus quo ratione rem, rerum Ullam. </P>            </Div>        </Div>    </ Section>

CSS code: (written in less)

{  . image-section {    width: 32%;     img {      width: 100%;    }   }}

Problem: All the elements inside the div are floating ~ the height of the div as the parent element becomes 0 ~

Cause: Div is a block-level element ~ Its height is not set to the height of the child element content is propped up ~ when all the children are floating ~ the height of the parent div is 0.

FIX: The parent div does clear floating manipulation ~ The specific code is as follows:

HTML code:

<Divclass= "Article-preview">            <Divclass= "Image-section">                <imgsrc= "Imgs/image1.jpg"alt= "Picture 1"/>            </Div>            <Divclass= "Text-section">                <H2>Have a title</H2>                <P>Lorem ipsum dolor sit amet, consectetur adipisicing elit.                Accusamus quo ratione rem, rerum Ullam. </P>            </Div>        </Div>

CSS code: (written in less)

{    > div {//child elements all floating      float: Left ;    } {content: ';                  Display: block;       Clear: both;    }   }

Problem: Picture has clearance (below)

FIX: If not margin and padding reason ~ that may be due to the different font size causes the row height problem ~ Resolution to reset the font size to 0~ on the immediate parent element and then set the size of the child element as needed

HTML code:

<Divclass= "Article-preview">            <Divclass= "Image-section">                <imgsrc= "Imgs/image1.jpg"alt= "Picture 1"/>            </Div>            <Divclass= "Text-section">                <H2>Have a title</H2>                <P>Lorem ipsum dolor sit amet, consectetur adipisicing elit.                Accusamus quo ratione rem, rerum Ullam. </P>            </Div>        </Div>

CSS code:

. Article-preview{font-size:0;//-------------------font size reset to 0 > div {//child element all floats float: Left; }&:after{content:"';Display:Block;Clear:both; }. Text-section{width:45%;position:relative;Top:68px; Left:50px;H2 {Margin-bottom:20px;font-size:20px;//-------------------reset and then set the font size}P{width:100%;font-size:18px;//-------------------reset and then set the font size letter-spacing:1px; }    }  }

Problem: Fix the navigation bar to the top

HTML code:

<nav>    <Divclass= "logo"><ahref="#">Liu Xiao X</a></Div>         <Divclass= "Menu">              <ahref= "javascript:void (0);">                  <HR/>                  <HR/>                  <HR/>              </a>           <DivID= "Myhover"></Div>    </Div>
</nav>

CSS code:

{  background:rgba (100,100,100,0.7);   width:100%;   position:fixed;   height:@navHeight;   top:0;   z-index:+;}

If you want the page to slide to not see the navigation bar when the navigation bar fixed at the top of the effect ~ to use JS real-time processing scrolling Events ~ When the scroll length is greater than the top navigation bar height, add the Newnav class to the Nav label

JS Code:

$ (window). Scroll (function() {    if(Document.body.scrollTop >) {        $ ( "Nav"). AddClass ("Newnav");    }     Else {        $ ("NAV"). Removeclass ("Newnav");}    );

my blog Graphic Design