时间：2023-05-03 00:03:02 | 来源：网站运营
时间：2023-05-03 00:03:02 来源：网站运营
企业网站布局样式要点难点汇总：
在线咨询
*{margin:0;padding:0;font-size:12px;}2. body的背景body{background-color:??;}.top{width:100%;}1.2 内容居中显示{width:??px; margin:0 auto;}`<ul><li><a href="#">首页</a><li><a href="#">首页</a><li><a href="#">首页</a><li><a href="#">首页</a></ul>`①利用`li{float:left/right;}`使各个`<li>`处于同一行 <form action="" method="post"> <input type="text" class="search_text"/> </form>①设置`input{margin-top:?px;}`使搜索框在导航条内居中 input{background:url(?) no-repeat right center;} 等价于 input{background-image:url(?);background-repeat:no-repeat;background-position:right center;}③防止搜索框中输入的文字遮挡上述小图标：设置内边距等于图表宽度`input{padding-right:?px}``<!--引入myFocus库文件--><script src="js/myfocus-2.0.1.min.js" type="text/javascript"></script><!--引入所使用的风格js文件--><script src="js/mf-pattern/mF_YSlider.js" type="text/javascript"></script><!--引入所使用的风格css文件--><link href="js/mf-pattern/mF_YSlider.css" rel="stylesheet" type="text/css"/>` 6.3 创建myFocus标准的html结构，并填充内容 <div class="ad" id="picBox"> <div class="loading"><img src="images/loading.gif" alt="图片加载中" /> </div> <div class="pic"> <ul> <li><img src="images/ad2.jpg" /></li> <li><img src="images/ad3.jpg" /></li> <li><img src="images/ad4.jpg" /></li> </ul> </div> </div>注意： .ad{height:?px;/*?等于图片高度*/ overflow:hidden;/*使超出div部分的被隐藏*/}--> .left{width:340px; } .mid{width:410px; margin:0 7px;} .right{width:230px;} .left,.mid,.right{float:left;} 7.2 两列布局 .content{height:350px; margin-top:10px;} .content_left{width:220px; /*height:350px;*/ /*不应该设置固定高度*/ min-height:350px; _height:350px; /* For IE6*/ float:left;} .content_right{width:770px; /*height:350px;*/ /*不应该设置固定高度*/min-height:350px; _height:350px; /* For IE6*/ float:right;} .page{height:40px; margin-top:10px; text-align:center;} .page a{display:inline-block; /*将a设置为既能在同一行显示，又能设置宽度 高度等*/ border:1px solid #E8E8E8; text-decoration:none; margin:5px; padding:5px 10px;} .page a:link,.page a:visited{color:#000;} .page a:hover,.page a:active{color:#FFF;background-color:#CC1B1B;}<ul> <li><a href="#">关于</a> <ul> <li><a href="#">品牌故事</a> <li><a href="#">联系我们</a> </ul> </li> <li><a href="#">留言</a> <ul> <li><a href="#">新浪微博</a> <li><a href="#">腾讯微博</a> </ul> </li> </ul> {text-align:center;}<!--设置文字水平居中--> {line-height:?px;}<!--设置文字垂直居中 行高等于盒子高--> img{vertical-align:middle;}<!--使文字旁的图片与文字对齐-->②链接格式： a{text-decoration:none;}<!--去除链接的默认样式--> a:link,a:visited{} a:hover,a:active{} a:focus{} a{display:inline-block;background-color:red;}<!--使a的整行背景色改变-->
关键词：难点,汇总,样式,布局,企业
