问答题
1、行内样式、内联样式、链接式、导入式 标签选择器 class选择器 ID选择器 优先级：标签选择器<class<id
2、行内元素的宽度高度 不会单独占满一行
3、margin padding
4、margin:0px auto;
5、display:none; visibility:visible
6、/**/
7、list-style-type:square
8、margin:5px 2px;
9、兼容性
10、text-align:center line-heigt
11.content border padding margin
12绝对定位脱离了文档流，不受float影响 top left相对于整个页面 相对定位相对它的父元素
13clear：both
14z-index值 position：absolute
15target="_blank"
16background-color -image attchment size:over
17overflow:auto;
18lvha原则
19*{margin:0 padding:0}
20display:block inline inlie-block
操作题
示例1
<div id="main">
<div id="title"><h1>淘宝特色服务</h1></div>
<div class="con">
<div id="t1" class="contitle">主题市场</div>
<div class="conlist">
<ul>
<li class="w64"><a href="javascript:;">淘宝女人</a></li>
<li class="w54"><a href="javascript:;">运动派</a></li>
<li class="w38"><a href="javascript:;">情侣</a></li>
<li class="w64"><a href="javascript:;">淘宝女人</a></li>
<li class="w54"><a href="javascript:;">运动派</a></li>
<li class="w38"><a href="javascript:;">情侣</a></li>
<li class="w64"><a href="javascript:;">淘宝女人</a></li>
<li class="w54"><a href="javascript:;">运动派</a></li>
<li class="w38"><a href="javascript:;">情侣</a></li>
</ul>
</div>
</div>
</div>
*{ margin:0px; padding:0px; font-size:12px; font-family:微软雅黑;}
ul li{list-style-type:none;}
a{ text-decoration:none;}
#main{ width:190px; margin-left:9px; border:1px solid #FF4400;}
#title{ height:30px; background-color:#FF4400;}
#title h1{ color:#FFF; height:30px; line-height:30px; padding-left:16px; font-size:15px; font-weight:900;}
.con{ border-bottom:1px solid #e6e6e6; height:150px; margin:10px 15px 0px;}
#t1{ background-image:url(../image/bg_1.jpg); background-repeat:no-repeat;}
.contitle{ height:25px; padding-left:30px; font-size:15px; font-weight:900;}
.conlist li{float:left;}
.conlist li a{ color:#3c3c3c; display:block; height:25px;}
.conlist li a:hover{ color:#ff4401;}
.w64{ width:64px;}
.w54{ width:54px;}
.w38{ width:38px;}
#t2{ background:url(../image/bg_2.jpg) no-repeat;}
#t3{ background:url(../image/bg_3.jpg) no-repeat;}
总结：
1、写布局第一个div时，不写height。
2、文本用H1标签 注意语义化
3、写内容时注意高度，如果是相同的可以写，如果不是可以自动。
4、有相同点和不同点时，需要进行分析。第二级标题有图片时，加入id class两个属性值 id在css里加入图片 class控制标题其它样式
5、当div的宽度是固定时，ul里li是可以自动换行的。 li宽度不同时可以添加width加以区别 宽度包含右面LI的距离 不建议用padding
6、与父标签的距离用margin
7、代码的可读性一定要加强。要非常清晰,用div布局。
示例2
<div id="d1">
<div class="proitem">
<div class="proimage"><a href="#"><img src="image/pro.jpg" alt="商品图片" /></a></div>
<div class="proprice">
<div class="price">￥99.0</div>
<div class="freepostage">包邮</div>
<div class="bugnum">8520人付款</div>
</div>
<div class="protitle"><a href="#">最新款米薇儿女包包时尚潮女单肩包鳄鱼皮斜挎包超级可爱的</a></div>
<div class="addressinfor">
<div class="shopname"><a href="#">mivor米薇儿旗舰店</a></div>
<div class="address">河北保定</div>
</div>
<div class="logo">
<div class="logo1"><img src="image/logo_1.jpg" /></div>
<div class="logo2"><img src="image/logo_2.jpg" /></div>
</div>
</div>
</div>
body { font-size:12px; font-family:"微软雅黑";}
a{ text-decoration:none;}
img{ border:none;}
.proitem{ width:220px; height:360px; border:1px solid #EDEDED;}
.proprice{ height:17px; margin:10px 7px 0px;}
.price{ float:left;width:79px; font-size:20px; color:#ff4400; font-weight:bold; }
.freepostage{ float:left;width:28px; text-align:center; color:#fff; background-color:#fd4401; }
.bugnum{ float:right; color:#888;}
.protitle{ height:33px; margin:10px 7px 0px; line-height:16px;}
.protitle a{ color:#3d3d3d;}
.addressinfor{ height:16px; margin:10px 7px 0px; color:#888;}
.shopname{ float:left;}
.shopname a{ text-decoration:underline;}
.address{ float:right;}
.logo{ margin:10px 7px 0px;}
.logo1{ float:left;}
.logo2{ float:right;}
总结：1、布局用div，要清晰 2、class命名要规范 3、使用浮动 4、与兄弟和父亲的距离用margin
示例3：
<div id="header">
<div id="art_navtext">
<ul>
<li><a href="#">39健康网首页</a></li>
<li><a href="#">药品通</a></li>
<li><a href="#">疾病百科</a></li>
<li><a href="#">就医助手</a></li>
</ul>
</div>
<div id="navlogin">
<div id="login"><a href="#">登陆</a></div>
<div id="reg"><a href="#">注册</a></div>
</div>
</div>
<div id="mainbody">
<div id="logo"></div>
<div id="searchpart">
<div id="keyword"><input id="words" type="text" /></div>
<div id="btn"><input id="btnsearch" type="button" /></div>
</div>
<div id="keys">
<span>热门搜索:</span>
<ul>
<li><a href="#">子宫肌瘤</a></li>
<li><a href="#">子宫肌瘤</a></li>
<li><a href="#">子宫肌瘤</a></li>
<li><a href="#">子宫肌瘤</a></li>
<li><a href="#">子宫肌瘤</a></li>
<li><a href="#">子宫肌瘤</a></li>
<li><a href="#">子宫肌瘤</a></li>
</ul>
</div>
</div>
<div id="footer">
<p><a href="#">将39so设为首页</a> | <a href="#">关注39健康微信号</a></p>
<p><a href="#">39健康网</a>-中国健康门户网站 Copyright © 2000-2013 <a href="#">未经授权请勿转载</a></p>
</div>
* { font-size:14px; font-family:"微软雅黑"; margin:0px; padding:0px;}
a{ text-decoration:none;}
ul{ list-style-type:none; }
#header{ height:36px; line-height:36px; background-color:#0096a5;}
#art_navtext li{ float:left; background:url("../image/bg_1.png") no-repeat right 12px;}
#art_navtext li a{ color:#fff; display:block; padding-left:7px; padding-right:7px;}
#art_navtext li a:hover{ background-color:#008c9b;}
#navlogin{ float:right;}
#login,#reg{ float:left; width:35px;padding-left:15px;}
#navlogin a{ color:#fff;}
#login{ background:url("../image/bg_2.png") no-repeat 0px 12px;}
#reg{ background:url("../image/bg_3.png") no-repeat 0px 12px;}
#mainbody{ width:696px; margin:0px auto; margin-top:130px;}
#logo{ width:331px; height:68px; background:url("../image/bg_4.png") no-repeat; margin:0px auto;}
#searchpart{ height:50px; margin:50px 0px 10px; padding-left:12px; border:1px solid red;}
#keyword,#btn{float:left;}
#words{ width:540px; height:40px; border:1px solid #ccc; }
#btnsearch{ background:url("../image/bg_5.png"); width:129px; height:42px;border:none;}
#keys{ height:26px; color:#666; font-size:15px; margin-left:10px; border:1px solid red;}
#keys span{ float:left; width:80px; font-weight:bold; line-height:26px;}
#keys li{ float:left; line-height:26px;}
#keys li a{ color:#666; margin-right:20px;}
#footer{ position:absolute; left:0px; bottom:0px; width:100%; height:90px; padding-top:10px; border-top:1px solid #e9e9e9; background-color:#fff;}
#footer p{ width:100%; text-align:center; line-height:16px; color:#666;}
#footer p a{ color:#666;}
总结：1.父标签子标签都浮动时，直接写子标签的浮动。2、注意 <input type="text">时如果用标签定位input时，需要把*{margin:0px; padding:0px;}替换为body{margin:0px; padding:0px;} 还要在css中加ul{margin:0px; padding:0px;} 建议直接定义标签的id
3、底部用绝对定位，脱离文档流。
示例4：
<body>
<div id="d1">
<div id="header">
<div id="name"><a href="#">手机支付宝</a></div>
<div id="nav">
<ul>
<li><a href="#">支付宝首页</a><span>|</span></li>
<li><a href="#">服务大厅</a><span>|</span></li>
<li><a href="#">提建议</a></li>
</ul>
</div>
</div>
<div id="logo"></div>
<div id="loginpart">
<div id="ltitle">登录支付宝</div>
<div id="login">
<div id="luser" class="cuser"><input type="text" /></div>
<div id="lpassword" class="cuser"><input type="password" /></div>
<div id="forget"><a href="#">忘记登录密码</a></div>
<div id="btn"><a href="#">登录</a></div>
<div id="llogin"><a href="#">会员登录</a><a href="#">免费注册</a></div>
</div>
<div id="qrcode"></div>
</div>
<div id="footer">
<p>
<a href="#">关于支付宝</a> <span>| </span><a href="#">经销商体系</a><span> | </span>
<a href="#">官方博客</a><span> | </span> <a href="#">诚征英才</a><span> | </span>
<a href="#">联系我们</a><span> | </span><a href="#">International Business</a><span> | </span>
<a href="#">About Alipay</a>
</p>
<p>支付宝版权所有 2004-2015 ICP证：沪B2-20150087 </p>
</div>
</div>
</body>
body { background:#eee url("../image/bg_1.jpg") no-repeat; background-size:cover; }
*{ margin:0px; padding:0px; font-size:12px; color:#fff;}
ul{ list-style-type:none;}
a{ text-decoration:none;}
a:hover{ text-decoration:underline;}
#header{ height:28px; background:#000; padding:0px 20%; line-height:28px;}
#name{ float:left;}
#name a{color:#00aaee;}
#nav{ float:right;}
#nav li{float:left; }
#nav li a{padding:0px 12px; color:#ccc;}
#nav span{ font-size:10px; color:#ccc;}
#logo{ background:url("../image/bg_2.png") no-repeat 22% 0px; height:40px; margin:50px 0px 29px;}
#loginpart{ width:286px; height:auto; min-height:285px; position:relative; top:0px; left:60%; background:rgba(0, 0, 0,0.4) !important; background:#000;filter:alpha(opacity=40);z-index:100; }
#login{ width:221px; margin:0px auto;}
#ltitle{ text-align:center; font-size:18px; line-height:70px; }
.cuser{ height:40px; margin-bottom:10px; padding-left:40px; }
.cuser input{height:40px; width:180px; border-width:0px;}
#luser{background:url("../image/txtbg.png") no-repeat;}
#lpassword{background:url("../image/txtbg1.png") no-repeat;}
#forget{ float:right; height:20px; }
#btn{ clear:both; background:url("../image/txtbtn.png") no-repeat center center; height:42px;text-align:center; }
#btn a{ line-height:42px; font-size:16px; font-weight:900;}
#llogin{ height:20px; margin-top:10px; width:221px; }
/*css3支持的属性*/
#llogin a:first-child{color:#00aaee; float:left;}
#llogin a:last-child{ float:right; }
#qrcode{background:url("../image/bg_3.png") repeat 116px 306px; height:54px; width:54px; position:absolute; top:0px; right:0px; z-index:101;}
#footer{ height:90px; margin-top:105px;}
#footer p{ width:100%; text-align:center; line-height:28px;}
技术点：1、阴影的写法 2、背景拉伸平铺 3、相对定位与绝对定位
总结：1、注意命名规范 2、当所有的DIV与外面的DIV有间距时用margin 3、当父标签用相对定位时，子元素的绝对定位中影响的就是父元素，top right 0会定位到父元素的右上角。4、ul li a 标签使用时 li写浮动 a标签定义padding 5、写代码的速度要提升
<div id="list">
<p class="top"><a href="#">全部课程</a></p>
<div class="listitem">
<div class="item_1">
<div class="title"><a href="#">职业技能</a></div>
<div class="titleimg"></div>
</div>
<div class="item_2">
<ul>
<li><a href="#">职业技能</a></li>
<li><a href="#">SNS营销</a></li>
<li><a href="#">公务员</a></li>
</ul>
</div>
</div>
</div>
*{ font-family:"微软雅黑"; font-size:14px; margin:0px; padding:0px; color:White;}
ul{ list-style-type:none; }
a{ text-decoration:none; }
a:hover{ text-decoration:underline;}
#list{ width:220px; height:476px; background-color:#0477c0; margin:30px;}
.top{ width:180px; height:52px; background:#188eee url("../image/11.png") no-repeat 16px 19px; line-height:52px; padding-left:40px; }
.top a{ font-size:16px;}
.listitem{ width:204px; height:56px; border-bottom:1px solid #1681c4; padding-top:12px; padding-left:16px; }
.item_1{ height:25px; border:1px solid red; margin-bottom:6px;}
.title{ float:left; width:100px; }
.title a{font-size:16px;}
.titleimg{ float:right; background:url(../image/1.png) no-repeat -116px -42px; width:20px; height:10px; margin-top:5px;}
.item_2{}
.item_2 li{ float:left; margin-right:8px; }
.item_2 a{ color:#97d2f7; font-size:14px;}
1、如果用了多个图标的图片，backgroun-position只能用来定位图片的位置，不能相对于元素的位置时定位，只能用margin来定位与父元素的距离了，padding只对内容起作用，对元素背景是不起作用的。
2、把浮动写div的同级标签里，div标签的高度可以不加，但是浮动后的div标签必须加 空的clear:both标签 。
3、浮动的div如果没有其它div，要加入高度。IE7显示不正常。
4、平铺图片 快速定位正数的背景图标时，可以把右下角当作原点。
5、本示例.listitem中用了padding是因为，以后添加的JQuery 背景效果。
时间： 2024-08-27 04:56:56