HTML foundation seventh lecture --- framework

xiaoxiao2021-03-06  20

HTML foundation seventh lecture -

Original code rendering result box window is actually </ Title> </ head> </ html></p> <p>2. Everyone will find, strange, in the above grammatical, I haven't seen <body> </ body> familiar figure? Oh ... Yes, it has been replaced by the <frameset> </ frameset> volume label you have to add! That is, if we want to divide the picture, you must tell the computer with the <frameset> volume label: "Hey! I have to start dividing! "At this time, <body> is a devaluation, so he is hiding to cool! 3. Now start hand cutting! Let's first divide the picture into the left and right sides (left is the box window 1, and the right side is scheduled to be 2 and other)!), As shown below:</p> <p>Original code rendering result <html> <head> <title> box window is actually </ title> </ head> <frameset cols = "120, *"> <frame src = "a.htm" name = "1"> <Frame src = "b.htm" Name = "2"> </ frameset> </ html></p> <p>4. In <frameset>, we have to tell the computer to the left and right points (cols)? Still up and down (ROWS). At first we were left and right, so we wrote <frameset cols = "120, *">. COLS = "120, *" That is to say, the column on the left is 120 points, and the right side changes with the window size. In addition to the direct write points, we can also use percentage, such as COLS = "20%, 80%". 5. Then, then then cut the window window on the right into the upper and lower screens (that is, blocks 2 and 3). As shown below: Original code Rendering Results <HTML> <head> <title> box window is actually </ title> </ head> <frameset cols = "120, *"> <frame src = "a.htm" name = " 1> <frameset rows = "100, *"> <frame src = "b.htm" name = "2"> <frame src = "c.htm" name = "3"> </ frameset> </ frameset > </ Html></p> <p>6. Didn't see it? Original <frame src = "b.htm" name = "2"> (in the grammar of 3rd points) is replaced by another group of <frameset rows = "100, *">> So pay attention to you! The second group <frameset rows = "100, *"> is surrounded by the first group <frameset cols = "120, *">! (The mess is wrong?) 7. Oh ... Unconsciously, it is very good, in fact, as long as the last grammar is index.htm, then prepare three files A.htm, B.HTM, C. HTM is then completed! Of course, this is the simplest segmentation method, we will explain some advanced volume labels below. [Other Badker Parameter Description] <frameset cols = "120, *" frameborder = 0 frameespacing = 5> 1. COLS = "120, *" is a vertical cutting screen! You can cut the two pictures at a time. Of course, you can cut into three. It is very simple to write into cols = "30, *, 50" (numbers will be adjusted!) Four sets of numbers! 2. Rows = "120, *" is the horizontal cutting screen, that is, separate the screen, and cut the same. 3. FrameBorder = 0 Sets the frame of the frame, its value is only 0 and 1, 0 is not the border, 1 is to display the border. The border cannot be adjusted. 4. Framespacing = 5 Indicates the distance between the frame and the framework to avoid it is too squeezed. <Frame src = "a.htm" name = "1" frameborder = 0 scrolling = "no" nORESize marginhight = 2 marginwidth = 2> 1. SRC = "a.htm" Set the web name to display in this frame, Each framework must correspond to a web page, otherwise it will generate an error, here is to fill in the name of the corresponding web page. (If the page is in different directories, remember the path to write clearly) 2. Name = "1" Set the name of this framework, so that the framework can be specified to make a link, so be sure to set! Of course, the name is pleased with you. 3. FrameBorder = 0 Sets the frame of the frame, its value is only 0 and 1, 0 is not the border, 1 is to display the border. The border cannot be adjusted. 4. Scrolling = "no" setting whether you want to display the scroll bar, yes is to display the scroll bar, and NO is not displayed anyway, Auto is displayed as appropriate. 5. NORSIZE settings Do not allow the user to change the size of this frame, if this parameter is not set, the user can easily pull the frame and change its size. 6. Marginhight = 2 indicates the space reserved by the frame height part of the frame. 7. MarginWidth = 2 Indicates the space preserved by the edge width portion edge.</p></div><div class="text-center mt-3 text-grey"> 转载请注明原文地址:https://www.9cbs.com/read-44118.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="44118" 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.063</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 = 'huAqENVcZnmjZOFMxllPMkyVlbj_2FTYWCGmQ_2B2RQj872P9fYB44mOqgX8WGg_2B9dIuu9z3hYmQedINO_2FbP15miDA_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>