XHTM + CSS standard website production

xiaoxiao2021-03-06  38

Author: Peng Fei screen name: roc roc wings BLOG: http: //blog.9cbs.net/tcrazyalways/ yesterday, fight, and not to test four, in order to make research XHTM CSS standard site, little changed A small part of the classroom made by the teacher, the code is as follows, hey, very hard, but go back to see, it is also very simple, the web standard does reduce the redundant code, relative to the previous ordinary website, XHTM CSS The transitional standard production will be separated by performance, framework and behavior. It is indeed very clear. It is recommended to watch: http://www.w3cn.org, a very good website. The following code has been tested by W3C, in line with standards.

Course.html code: < HTML XMLNS = "http://www.w3.org/1999/xhtml" lang = "gb2312"> TV camera network course - wonderful class </ title> </ head> <body id = "xmkt" > <! - logo bar -> <div id = "up"> <img src = "images / logo.jpg" alt = "024" height = "30" border = "0" UseMap = "# map" /> <map name = "map" id = "map"> <area shape = "Coords =" 840, 7, 873, 25 "href =" ../ index.htm "alt = "Index" /> <Area Shape = "RECT" Coords = "892, 6, 9 43, 26 "HREF =" ../ index.htm "alt =" index "/> </ map> </ div> <! -> <div id =" left "> <</p> <p>Object classid = "CLSID: D27CDB6E-AE6D-11CF-96B8-444553540000" Codebase = "http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6, 0, 29, 0 "width =" 760 "Height =" 400 "> <param name =" movie "value =" images / test.swf "/> <param name =" quality "value =" high "/> </ object> </> </> </ Object> </ Div> <! -> <div id = "rightup"> Station Navigation </ div> <div id = "right"> <form name = "method =" POST "Action =">> <select name = "select" size = "1"> <option = "color: # c0c0c0;"> Intro) </ option> <option = "Color: # c0c0c0;"> Video Appreciation (Video </ option> <option = "Color: # c0c0;"> electronic document (document) </ option> <option = "Color: # c0c0c0;"> Troubleshooting (FAQ) </ option> <option STYLELELELELELELE = "Color: # c0c0;"> FORUM </ option> </ select> </ form> </ div> <! - Knowledge point -> <div id = "dleft"> </ div > <div ID = "dmid"> </ div> <div id = "dright"> <ul> <li> <a href="#"> (2004.11.27) website is under construction </A> </ Li> <li> <a href="#"> (2004.11.27) Website is under construction </a> </ li> <li> <a href="#"> (2004.11.27) website is under construction </a> </ li> <li> <a href="#"> (2004.11.27) Website is under construction </a> </ li> </ u L> </ div> <div ID = "bot"> </ div> <div id = "rzs"> <a href = "</p> <p>http://validator.w3.org/check?uri=referer "> <img style =" Border: 0; width: 88px; height: 31px "src =" http://www.w3.org/ICONS/Valid -xhtml10 "alt =" Valid XHTML 1.0! "/> </a> </ div> <div ID =" rz "> <a href="http://jigsaw.w3.org/css-validator/"> <img style = "Border: 0; width: 88px; height: 31px" src = "http://jigsaw.w3.org/css-validator/images/vcss" alt = "Valid CSS!" /> </ a > </ div> </ body> </ html> style: #xmkt {margin: 0px; padding: 0px; font-family: 'lucida grande', 'lucida sans uncode', 'Song Body', 'New Song Body ', Arial, Verdana, Sans-Serif; Font-Size: 12px; Line-Height: 150%; } / * Define the left column * / # left {margin: 0px; width: 760px; margin: 0px; padding: 0px;} / * Define the right upper column * / # Rightup {Position: absolute; text-align: center; TOP : 90px; Left: 760px; Height: 70px; width: 264px; margin: 0px; padding: 0px; font-size: 12pt; font-weight: bold; color: # 999999;} / * Define Right Head * / # Right {Position: Absolute; Text-Align: Center; Top: 130px; Left: 760px; Height: 30px; Width: 264px; Margin: 0px; Padd ING: 0PX;} / * Define left column * / # DLEFT {margin: 0px; width: 21px; margin: 0px; padding: 0px; background: URL (images / tiao1.gif) No-repeat top;} / * Define the middle bar * / # dmid {position: absolute; top: 400px; Left: 21px; margin: 0px; width: 1px; height: 250px; padding: 0px; Background: URL (images / dot_line01.gif) REPEAT-Y } / * Define the right bar * / # dright {position: absolute; top: 440px; Left: 22px; width: 738px; height: 250px; padding: 0px; background: URL (images / tu.jpg) no-repeat TOP 30PX;</p> <p>#dright ul {position: absolute; top: 60px; Left: 22px; margin: 0px; padding: 0px;} # dright li {background: URL (images / new.gif) No-repeat left 0px;} #dright li a {Left: 10px;} / * Define the base bar * / # bot {position: absolute; Top: 660px; Width: 1024px; Height: 30px; Background: URL (images / bg.jpg) no-repeat;} # rzs { Position: Absolute; Top: 690px; Height: 31px; Width: 88px} # rz {position: absolute; top: 690px; Left: 90px; height: 31px; width: 88px} style.css code: A: link {text- Decoration: none; font-size: 9pt; color: # 999999} A: visited {text-decoration: None; font-size: 9pt; color: # 999999} a: hover {text-decoration: none; font-size: 9pt; color: # 499300} A: Active {text-decoration: none; font-size: 9pt; color: # 999999}</p></div><div class="text-center mt-3 text-grey"> 转载请注明原文地址:https://www.9cbs.com/read-71854.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="71854" 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.039</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 = 'bo3LHWdeei9ic7uy6AD1OGmfh7wXoFPuCLBEpB3jxOOmvLsXNoz8HR_2BL7GdBD9or7wmW1Dvxdqgd_2FyY4'; 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>