ʹÓÃĸ°æÒ³Ê±ÄÚÈÝÒ³ÈçºÎʹÓÃcssºÍjavascript
ÓÉÓÚÍøÕ¾µÄÖ÷ҪƵµÀÒ³ºÍÁбíÒ³µÄÍ·²¿ºÍµ×²¿¶¼ÊÇÒ»ÑùµÄ£¬Èç¹û½«Ã¿¸öÒ³Ãæ·ÅÔÚµ¥¶ÀµÄÒ³ÃæÖУ¬µ±Í·²¿ºÍµ×²¿ÐèÒª¸ü¸Äʱά»¤Á¿Ì«´ó¡£ÓÚÊÇÏë°ÑÍ·²¿ºÍµ×²¿×ö³Éĸ°æÒ³£¬ÆµµÀÒ³ºÍÁбíÒ³µÄ¾ßÌåÄÚÈݷŵ½ÄÚÈÝÒ³ÖС£ÕâÑùµ±Í·ºÍµ×ÐèÒª¸Ä¶¯Ê±£¬Ö»ÒªÐÞ¸ÄÒ»ÏÂĸ°æÒ³¾Í¿ÉÒÔÁË¡£
ºÃ´¦ÓÐÁË£¬ÎÊÌâÒ²½Ó×ÅÀ´ÁË¡£ÔÀ´ÔÚÆµµÀÒ³ºÍÁбíÒ³ÖÐÓÐÆä¸÷×ÔµÄcssÒýÈëºÍһЩjavascriptº¯Êý£¬µ±Ê¹ÓÃĸ°æÒ³Ê±£¬·ÅÔÚÄÚÈÝÒ³ÖÐÕâЩcssÑùʽºÍjavascriptº¯ÊýÔõô´¦ÀíÄØ£¿ÒòΪ´ó¼ÒÖªµÀ£¬Ê¹ÓÃĸ°æÒ³µÄÄÚÈÝÒ³ÊDz»Äܰüº¬<head></head>±ê¼ÇµÄ£¬¶øcssºÍjavascriptº¯ÊýµÄÉùÃ÷ÊÇÒª·Åµ½<head></head>ÖмäµÄ£¬ÕâЩcssÑùʽºÍjavascriptº¯ÊýÈçºÎ´¦ÀíÄØ£¿ÉÏÍø²éÁËһϣ¬´óÖÂÓÐÈýÖÖ½â¾ö·½°¸£º·½°¸Ò»£º°ÑËùÓеÄcssÑùʽºÍjavascriptº¯Êý·Åµ½Ä¸°æÒ³µÄ<head></head>ÖУ¬ÎÒ¾õµÃÕâÑù×öµÄ±×¶Ë¾ÍÊǵ¼ÖÂĸ°æÒ³µÄ<head></head>ÇøÌØ±ðÓ·Ö×£¬Í¬Ê±Èç¹ûÔÀ´Á½¸öƵµÀÒ³Öаüº¬Í¬ÃûµÄcssÉùÃ÷»òjavascriptº¯Êý£¬µ«È´ÊDz»Í¬Ñùʽ»òÖ´Ðв»Í¬²Ù×÷£¬Ôõô°ìÄØ£¿ËùÒÔÕâµÚÒ»ÖÖ·½°¸ºÜ¿ì±»ÎÒ·ñ¶¨ÁË¡£·½°¸¶þÊÇÔÚÄÚÈÝÒ³µÄPageLoadʼþÖÐͨ¹ý´úÂëÀ´Ö¸¶¨±¾ÄÚÈÝÒ³µÄcssÎļþ¡£¾ßÌå´úÂëÈçÏ£º
´úÂëÈçÏÂ:
static public class ControlHelper
{
static public void AddStyleSheet(Page page, string cssPath)
{
HtmlLink link = new HtmlLink();
link.Href = cssPath;
link.Attributes["rel"] = "stylesheet";
link.Attributes["type"] = "text/css";
page.Header.Controls.Add(link);
}
}
ÕâÑù£¬ÔÚ¾ßÌåÒ³Ãæ£¬ÎÒÃǾͿÉÒÔͨ¹ýÈçÏ´úÂëÌí¼Ó CSS ÒýÓãº
¸´ÖÆ´úÂë´úÂëÈçÏÂ:
protected void Page_Load(object sender, EventArgs e)
{
ControlHelper.AddStyleSheet(this.Page, "css/projectPage.css");
}
ÕâÖÖ½â¾ö·½°¸µÄºÃ´¦Ê±¿ÉÒÔÔÚ³ÌÐòÔËÐÐʱ¶¯Ì¬¸ü¸ÄËùÐèµÄcssÎļþ£¬µ«ÊǶÔjavascriptº¯Êý´¦ÀíÆðÀ´¸ÃÔõô×öÄØ£¿ÔÙ˵ÓбØÒª°Ñ±¾¸Ã¼ÓÔÚhtml´úÂëÖеÄcssºÍjavascriptͨ¹ýcs´úÂëÀ´¼ÓÈëÂð£¿Òò´Ë£¬ÕâÖÖ½â¾ö·½°¸Ò²ºÜ¿ì±»ÎÒ·ñ¶¨ÁË¡£Ê£ÏµĵÚÈýÖÖ½â¾ö·½°¸¾ÍÊÇÔÚĸ°æÒ³µÄ<head></head>ÖÐÌí¼ÓÒ»¸öÄÚÈݿؼþ£¬È»ºóÔÚÄÚÈÝÒ³ÖÐÔÚ¶ÔÓ¦µÄÄÚÈݿؼþÖÐдcssºÍjavascript´úÂë¡£ÌýÆðÀ´Õâ¸öÕâ¸ö½â¾ö·½°¸Ó¦¸ÃÊÇ×
Ïà¹ØÎĵµ£º
<style>
#enlarge {padding:0; margin:2em auto; list-style-type:none; width:240px;
height:40px;}
#enlarge li {display:block; float:left; width:40px; height:40px;
position:relative;}
#enlarge li a {display:block; width:40px; height:40px; background:transparent;
overflow:hidden; positio ......
ºÐ×Ó±êÇ©ºÍÊôÐÔ¶ÔÕÕ
CSSÓï·¨£¨²»Çø·Ö´óСд£©
JavaScriptÓï·¨£¨Çø·Ö´óСд£©
border
border
border-bottom
borderBottom
border-bottom-color
borderBottomColor
border-bottom-style
borderBottomStyle
border-bottom-width
borderBottomWidth
border-color
borderColor
border-left
borderLeft
border ......
½éÓÚ´¿´âCSSµÄÎÞͼƬԲ½ÇʵÔÚÊÇ´úÂëÌ«ÂÒ£¬»¹ÊÇÇãÏòÓÚÀûÓÃͼƬ½áºÏCSSÀ´×Ô×öÔ²½Ç£»
£¨1£©¸ß¿í½Ô×ÔÊÊÓ¦£º
.roundedcornr_box_510746 {
background: #dddddd url(roundedcornr_510746_grad.gif) repeat top left;width:300px;
}
.roundedcornr_top_510746 div {
background:transparent url(r ......
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> &nb ......
Í·£ºheader
¡¡¡¡ÄÚÈÝ£ºcontent/container
¡¡¡¡Î²£ºfooter
¡¡¡¡µ¼º½£ºnav
¡¡¡¡²àÀ¸£ºsidebar
¡¡¡¡À¸Ä¿£ºcolumn
¡¡¡¡Ò³ÃæÍâΧ¿ØÖÆÕûÌå²¼¾Ö¿í¶È£ºwrapper
¡¡¡¡×óÓÒÖУºleft right center
¡¡¡¡µÇ¼Ìõ£ºloginbar
¡¡¡¡±êÖ¾£ºlogo
¡¡¡¡¹ã¸æ£ºbanner
¡¡¡¡Ò³ÃæÖ÷Ì壺main
¡¡¡¡Èȵ㣺hot
¡¡¡¡ÐÂÎÅ£ºnews
¡¡¡¡ÏÂÔØ£ºdown ......