CodemySite_Web development

There is a manual slider called View Switcher. Although it is kinds of nude for users, the benefit is lasts as long as users like for each image manually.  The slider contains the four images and a list of click button. The point is that image's Id name is the same as the click href URL, which can be connected respectively.  The outer slider should be the box shown one image each time,using overflow:hidden.  When users target the the img,the opacity:1. When users leave the target, the opacity:0. Meanwhile, when first load the page, the target should be on slide-1 which means showing the first image.  Then style the list part. The ul position should be absolute and li background is the circle using border-radius. Float:left means the list is horizental.  You can look up in my codepen  Here

When you click a button,the message would pop out as a box. The message box lead me thinking about alert(), which is the ancestor of pop out methods. Here I choose no JavaScrit to accomplish it.  HTML part contained a button which will be shown at beginning of the screen and the div named box. The span is the close icon at the top-right corner using × .  Of course, you should link the css file inside the head.  The body and the box element should be in the center vertically and horizentally. Using display:flex and align-item,justify-content for center respectively. Firstly, the messsage box should be hidden using opacity and visibility,when focusing button, the box shows up in the fixed position. To smooth the animation of showing box, I apply the CSS3 transition.  The demo free download here. Download  

Actually I'm a new learner with JavaScript and always being frustrated by the mingle code. I prefer no JavaScript which means easier and more readable, thankful to CSS3 skills of animation. I think Slider is the first step when you begin to learn JavaScript and the result looks fantanstic and attractive. Now I'm trying to bulid a image sliders without JavaScript.  The result has been shown at the beginning. Here we go to the code part. HTML part is contained three DOM layer such as the ID called slider(the outer frame),the slide-holder(the content stored all images) and the slide (each image is a slide). Here I got three images in the holder. The slider div is the eara which can be shown in the grey border. CSS part is decorated the style. The holder width should be wide enough to contain all the images which is bigger than the total width of all images. The moving animation comes from the CSS3 which lasts 10s and works permanently. The keyframe called scroller i...