Dynamic conversion
Author: Unknown Source: En
By setting attributes in CSS, we can define a pattern of a page, such as color, font, border, etc. Now we have to talk about the CSS positioning is mainly defined on the layout and control of the page, making your page very perfect from these two aspects, more dynamic. In addition, before explaining, we first introduce two definitions: relative positioning and absolute positioning. The relative positioning is to allow offset at the original position of the document. And absolute positioning allows any positioning. Realizing the positioning of CSS is ultimately relying on attributes. Let's take a look at the detailed list of positioning properties (see below):
We will take an example in which we have a Script content. Let's take a look at how it is dynamically displayed. Before I explain, let's take a look at this example. Please click here. You have realized a dynamic effect by simple CSS positioning. The code for this effect is as follows:
dingwei css </ title> <style type = "text / css"> <! - # Container1 {position: absolute; top: 100} // * Definition Container1 is absolute position * / / # Container2 {Position: absolute; top: 100; Visibility: hidden;} // * Define Container2 is absolutely positioning, the initial visibility is hidden (hidden) * // p {font-size: 12pt;} // * definition P Font * // -> </ style> </ head> <body> <p style = "font-family: line book; font-size: 15pt; color: # cc33cc"> Please select a picture: < / p> // * Set font size, name, color * // <div id = "container1"> <dd> <img src = "ss01065.jpg" width = "185" height = "280"> // * Import a picture, identifier is container1 * // <p style = "font-family: line book; color: # cc9933; font-size: 12pt> Name: Deli </ p> // * Set the font name, Color, size * // <// <type = "185" Height = "280"> 185 "Height =" 280 "> // * Import in the <DIV =" SS01095.jpg " A picture, identifier is container2 * // <p style = "font-family: line book; color: # 3366cc; font-size: 12pt"> Name: Sea </ p> </ dd> </ div> <form name = "myform"> // * Defines two buttons * // <p> <input type = "button" value = "大" οN Click = "container1.style.visibility = 'visible'; container2.style.visibility = 'hidden'"> // * Defines the mouse click event picture 1 is visible, picture 2 is invisible * // <input type = "Button "Value =" 大海 "; container1.style.visibility = 'hidden'; οnclick =" Container2.style.visibility = 'visible';</p>
<p>Container1.style.visibility = 'hidden'> </ p> // * Define mouse click event picture 1 is invisible, picture 2 is visible * // </ form> </ body> </ html> code although long Some, but the structure is simple, you only need to read the annotation, it is easy to understand. The next section I will continue to introduce a CSS positioning example.</p>
<p>2. Space positioning</p>
<p>In this section, let's take a look at the example of Z-Index positioning, this example is here. We see the two pictures in the example and a paragraph in different spatial positions, the text covers the picture of the flower, while the waves of the waves are covered with the top of the text. So how is this effect realized? This Z-Index property of the CSS positioning is taken here, the code is as follows:</p>
<p><html> <head> <title> zindex </ title> <style type = "text / css"> <! - .pile {position: absolute; left: 2in; top: 2in; width: 3in; Height: 3in } // * Define class Pile, and its location * // .pile1 {position: absolute; left: 3in; Top: 2in; width: 1in; height: 1in;} // * Defined class Pile1, and Its location * // -> </ style> </ head> <body> <img src = "ss01010.jpg" class = "pile" id = "image" style = "z-index: 1"> / / * Import a picture, make it a PILE class, the z-index property is defined as 1, the location is at the bottom * // <div class = "Pile" id = "text1" style = "color: # fff33; z- INDEX: 2 "> This text will be overwritten on the picture. </ div> // * Defines the color of a piece of text and the z-index property of 2, in the intermediate position * // <img src = "075.gif" class = "Pile1" id = "image" style = "z- INDEX: 3 "> // * Import the second picture, make it" Pile1 "class, the z-index property is 3, the location is at the top * // </ body> </ html></p>
<p>Through the examples of these two sections, we can see that the CSS positioning has powerful features, as for some other positioning properties, you can try it yourself, very simple. Using the CSS positioning function, you will make your page more exquisite, more dynamic.</p></div><div class="text-center mt-3 text-grey">
转载请注明原文地址:https://www.9cbs.com/read-96558.html</div><div class="plugin d-flex justify-content-center mt-3"></div><hr><div class="row"><div class="col-lg-12 text-muted mt-2"><i class="icon-tags mr-2"></i><span class="badge border border-secondary mr-2"><h2 class="h6 mb-0 small"><a class="text-secondary" href="tag-2.html">9cbs</a></h2></span></div></div></div></div><div class="card card-postlist border-white shadow"><div class="card-body"><div class="card-title"><div class="d-flex justify-content-between"><div><b>New Post</b>(<span class="posts">0</span>)
</div><div></div></div></div><ul class="postlist list-unstyled">
</ul></div></div><div class="d-none threadlist"><input type="checkbox" name="modtid" value="96558" checked /></div></div></div></div></div><footer class="text-muted small bg-dark py-4 mt-3" id="footer"><div class="container"><div class="row"><div class="col">CopyRight © 2020 All Rights Reserved
</div><div class="col text-right">Processed:
<b>0.046</b>, SQL:
<b>9</b></div></div></div></footer><script src="./lang/en-us/lang.js?2.2.0"></script><script src="view/js/jquery.min.js?2.2.0"></script><script src="view/js/popper.min.js?2.2.0"></script><script src="view/js/bootstrap.min.js?2.2.0"></script><script src="view/js/xiuno.js?2.2.0"></script><script src="view/js/bootstrap-plugin.js?2.2.0"></script><script src="view/js/async.min.js?2.2.0"></script><script src="view/js/form.js?2.2.0"></script><script>
var debug = DEBUG = 0;
var url_rewrite_on = 1;
var url_path = './';
var forumarr = {"1":"Tech"};
var fid = 1;
var uid = 0;
var gid = 0;
xn.options.water_image_url = 'view/img/water-small.png';
</script><script src="view/js/wellcms.js?2.2.0"></script><a class="scroll-to-top rounded" href="javascript:void(0);"><i class="icon-angle-up"></i></a><a class="scroll-to-bottom rounded" href="javascript:void(0);" style="display: inline;"><i class="icon-angle-down"></i></a></body></html><script>
var forum_url = 'list-1.html';
var safe_token = 'Ex8KTKcye0L4oy0_2BF3PZ6YtDZbxVLuDgEVhtlm1G1vErQs6XDRWcdblYpn5aUCpZkbbynwJAjRakhMtpCcwWfw_3D_3D';
var body = $('body');
body.on('submit', '#form', function() {
var jthis = $(this);
var jsubmit = jthis.find('#submit');
jthis.reset();
jsubmit.button('loading');
var postdata = jthis.serializeObject();
$.xpost(jthis.attr('action'), postdata, function(code, message) {
if(code == 0) {
location.reload();
} else {
$.alert(message);
jsubmit.button('reset');
}
});
return false;
});
function resize_image() {
var jmessagelist = $('div.message');
var first_width = jmessagelist.width();
jmessagelist.each(function() {
var jdiv = $(this);
var maxwidth = jdiv.attr('isfirst') ? first_width : jdiv.width();
var jmessage_width = Math.min(jdiv.width(), maxwidth);
jdiv.find('img, embed, iframe, video').each(function() {
var jimg = $(this);
var img_width = this.org_width;
var img_height = this.org_height;
if(!img_width) {
var img_width = jimg.attr('width');
var img_height = jimg.attr('height');
this.org_width = img_width;
this.org_height = img_height;
}
if(img_width > jmessage_width) {
if(this.tagName == 'IMG') {
jimg.width(jmessage_width);
jimg.css('height', 'auto');
jimg.css('cursor', 'pointer');
jimg.on('click', function() {
});
} else {
jimg.width(jmessage_width);
var height = (img_height / img_width) * jimg.width();
jimg.height(height);
}
}
});
});
}
function resize_table() {
$('div.message').each(function() {
var jdiv = $(this);
jdiv.find('table').addClass('table').wrap('<div class="table-responsive"></div>');
});
}
$(function() {
resize_image();
resize_table();
$(window).on('resize', resize_image);
});
var jmessage = $('#message');
jmessage.on('focus', function() {if(jmessage.t) { clearTimeout(jmessage.t); jmessage.t = null; } jmessage.css('height', '6rem'); });
jmessage.on('blur', function() {jmessage.t = setTimeout(function() { jmessage.css('height', '2.5rem');}, 1000); });
$('#nav li[data-active="fid-1"]').addClass('active');
</script>
