网页布局标签《1》

mac2024-04-15 39

一、标签及指令《1》颜色： red #f00 rgb(255,0,0) rgba(255,0,0,0.5) 带透明度的色彩值

opacity: 50%;透明度 border-radius:圆角

border-radius：值值：a 表示四角都为相同的圆角状态值：a b 表示左上，右下都为a，右上，左下都为b 值：a b c 表示左上为a 右上和左下为b 右下为c 值：a b c d 依次表示左上右上右下左下

值：50% 表示圆或椭圆

cursor: pointer; /鼠标图标成手状/ 定位所有的定位和top right bottom left 联和一起起作用 position: relative; relative 相对定位以默认位置为参考点进行移动， absolute 绝对定位以最近定位元素为参考点进行移动 fixed 固定定位对话框内固定位置不动 position: inherit;恢复默认，取消父级元素定位，向上找；

定位中水平居中： position: absolute; right:0; left:0; margin:auto;

盒子模型：

宽：内容宽+border+margin+padding

box-sizing: border-box;固定盒子大小

宽：width+margin (宽＝内容宽+border+padding)

图片格式： gif jpg png webp

overflow:hidden;溢出隐藏

<input type=“text” placeholder=""; 表示input文本框中添加文字

input type=“button” 按钮

input{ outline:none; /去掉表单元素外边框线/ }

body{ font:12px Microsoft YaHei,tahoma,arial,Hiragino Sans GB,sans-serif; }字体切换，微软雅黑

z-index:n;图层变换

clear:both;清除浮动

:first-of-type 第一个同类型对象

:nth-of-type(n) 第n个同类型对象 n=数字 odd（奇数行） even（偶数行）二、成果代码： html部分：

<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="css/commen.css"/> <link rel="stylesheet" href="css/index.css"/> <link rel="stylesheet" href="css/font/iconfont.css"/> </head> <body>  <div id="top-adv"> <div class="top-adv"> <a href=""><img src="images/top-0.jpg" alt=""/></a> <a href="" class="one"><img src="images/top-1.webp" alt=""/></a> <a href="" class="one"><img src="images/top-2.webp" alt=""/></a> <span class="iconfont icon-guanbi"></span> </div> </div>  <div id="top"> <div class="top"> <div class="top-left fl"> <span class="iconfont icon-dingwei red"></span> <a href="">陕西</a> <div> <dl> <dd> <a href="">上海</a> <a href="">上海</a> <a href="">上海</a> <a href="">上海</a> <a href="">上海</a> <a href="">上海</a> <a href="">上海</a> <a href="">上海</a> <a href="">上海</a> <a href="">上海</a> <a href="">上海</a> <a href="">上海</a> <a href="">上海</a> <a href="" class="active">陕西</a> <a href="">上海</a> <a href="">上海</a> <a href="">上海</a> <a href="">上海</a> <a href="">上海</a> <a href="">上海</a> <a href="">上海</a> <a href="">上海</a> <a href="">上海</a> <a href="">上海</a> <a href="">上海</a> <a href="">上海</a> <a href="">上海</a> <a href="">上海</a> <a href="">上海</a> <a href="">上海</a> <a href="">上海</a> <a href="">上海</a> <a href="">钓鱼岛</a> <a href="">上海</a> <a href="">上海</a> </dd> <dt>地区专享版本</dt> <dd> <a href="">中国港澳</a> </dd> <dt>Available Sites</dt> <dd> <a href=""><i class="i1"></i>Global Site</a> <a href=""><i class="i2"></i>Сайт России</a> <a href=""><i class="i3"></i>Situs Indonesia</a> <a href=""><i class="i4"></i>Sitio de España</a> <a href=""><i class="i5"></i>เว็บไซต์ประเทศไทย</a> </dd> </dl> </div> </div> <div class="top-right fr"> <ul> <li><a href="">您好，请登录</a>  <a href="" class="red">免费注册</a></li> <li>|</li> <li><a href="">我的订单</a></li> <li>|</li> <li class="active"><a href="">我的京东</a><span class="iconfont icon-xiangxia"></span> <div class="myjd"> <dl> <dd><table> <tr> <td><a href="">待处理订单</a></td> <td><a href="">消息</a></td> </tr> <tr> <td><a href="">返修退换货</a></td> <td><a href="">我的回答</a></td> </tr> <tr> <td><a href="">降价商品</a></td> <td><a href="">我的关注</a></td> </tr> </table> </dd> </dl> <dl> <dd> <table> <tr> <td><a href="">我的京豆</a></td> <td><a href="">我的优惠券</a></td> </tr> <tr> <td><a href="">我的白条</a></td> <td><a href="">我的理财</a></td> </tr> </table> </dd> </dl> </div> </li> <li>|</li> <li><a href="">京东会员</a></li> <li>|</li> <li class="active"><a href="" class="red">企业采购</a><span class="iconfont icon-xiangxia"></span> <div class="qycg"> <dl> <dd> <a href="">企业购</a> <a href="">商用场景管</a> <a href="">工业品</a> <a href="">礼品卡</a> </dd> </dl> </div> </li> <li>|</li> <li class="active"><a href="">客户服务</a><span class="iconfont icon-xiangxia"></span> <div class="khfw"> <dl> <dt>客户</dt> <dd><table> <tr> <td><a href="">帮助中心</a></td> <td><a href="">售后服务</a></td> </tr> <tr> <td><a href="">在线客服</a></td> <td><a href="">意见建议</a></td> </tr> <tr> <td><a href="">电话客服</a></td> <td><a href="">客服邮箱</a></td> </tr> <tr> <td><a href="">金融咨询</a></td> <td><a href="">全球售客服</a></td> </tr> </table></dd> <dt class="khfw2">商户</dt> <dd><table> <tr> <td><a href="">合作招商</a></td> <td><a href="">成长中心</a></td> </tr> <tr> <td><a href="">商家后台</a></td> <td><a href="">京麦工作台</a></td> </tr> <tr> <td><a href="">商家帮助</a></td> <td><a href="">工作平台</a></td> </tr> </table></dd> </dl> </div> </li> <li>|</li> <li class="active two"><a href="">网站导航</a><span class="iconfont icon-xiangxia"></span> <div class="wzdh"> <div> <dl> <dt class="wzdh11">特色主题</dt> <dd class="wzdh1"><table> <tr> <td><a href="">新品首发</a></td> <td><a href="">京东金融</a></td> <td><a href="">全球售</a></td> <td><a href="">国际站</a></td> </tr> <tr> <td><a href="">京东会员</a></td> <td><a href="">京东预售</a></td> <td><a href="">买什么</a></td> <td><a href="">俄语站</a></td> </tr> <tr> <td><a href="">装机大师</a></td> <td><a href="">0元测评</a></td> <td><a href="">港澳售</a></td> <td><a href="">优惠券</a></td> </tr> <tr> <td><a href="">秒杀</a></td> <td><a href="">闪购</a></td> <td><a href="">印尼站</a></td> <td><a href="">京东金融科技</a></td> </tr> <tr> <td><a href="">陪伴计划</a></td> <td><a href="">出海招商</a></td> <td><a href="">拍拍二手</a></td> </tr> </table></dd> </dl> </div> <div> <dl> <dt>特色主题</dt> <dd class="wzdh2"><table> <tr> <td><a href="">新品首发</a></td> <td><a href="">京东金融</a></td> <td><a href="">全球售</a></td> <td><a href="">国际站</a></td> </tr> <tr> <td><a href="">京东会员</a></td> <td><a href="">京东预售</a></td> <td><a href="">买什么</a></td> <td><a href="">俄语站</a></td> </tr> <tr> <td><a href="">装机大师</a></td> <td><a href="">0元测评</a></td> <td><a href="">港澳售</a></td> <td><a href="">优惠券</a></td> </tr> <tr> <td><a href="">秒杀</a></td> <td><a href="">闪购</a></td> <td><a href="">印尼站</a></td> <td><a href="">京东金融科技</a></td> </tr> <tr> <td><a href="">陪伴计划</a></td> <td><a href="">出海招商</a></td> <td><a href="">拍拍二手</a></td> </tr> </table></dd> </dl> </div> <div> <dl> <dt>特色主题</dt> <dd class="wzdh3"><table> <tr> <td><a href="">新品首发</a></td> <td><a href="">京东金融</a></td> <td><a href="">全球售</a></td> <td><a href="">国际站</a></td> </tr> <tr> <td><a href="">京东会员</a></td> <td><a href="">京东预售</a></td> <td><a href="">买什么</a></td> <td><a href="">俄语站</a></td> </tr> <tr> <td><a href="">装机大师</a></td> <td><a href="">0元测评</a></td> <td><a href="">港澳售</a></td> <td><a href="">优惠券</a></td> </tr> <tr> <td><a href="">秒杀</a></td> <td><a href="">闪购</a></td> <td><a href="">印尼站</a></td> <td><a href="">京东金融科技</a></td> </tr> <tr> <td><a href="">陪伴计划</a></td> <td><a href="">出海招商</a></td> <td><a href="">拍拍二手</a></td> </tr> </table></dd> </dl> </div> <div> <dl> <dt>特色主题</dt> <dd class="wzdh4"><table> <tr> <td><a href="">新品首发</a></td> <td><a href="">京东金融</a></td> <td><a href="">全球售</a></td> <td><a href="">国际站</a></td> </tr> <tr> <td><a href="">京东会员</a></td> <td><a href="">京东预售</a></td> <td><a href="">买什么</a></td> <td><a href="">俄语站</a></td> </tr> <tr> <td><a href="">装机大师</a></td> <td><a href="">0元测评</a></td> <td><a href="">港澳售</a></td> <td><a href="">优惠券</a></td> </tr> <tr> <td><a href="">秒杀</a></td> <td><a href="">闪购</a></td> <td><a href="">印尼站</a></td> <td><a href="">京东金融科技</a></td> </tr> <tr> <td><a href="">陪伴计划</a></td> <td><a href="">出海招商</a></td> <td><a href="">拍拍二手</a></td> </tr> </table></dd> </dl> </div> </div> </li> <li>|</li> <li><a href="">手机京东</a></li> </ul> </div> </div> </div>  <div id="header"> <div class="header"> <div class="logo fl"> <a href=""><img src="images/logo.gif" alt=""/></a> </div> <div class="search fl"> <div class="searchbox"> <form action=""> <span class="fl"> <input type="text" placeholder="行车记录仪"/> <i class="iconfont icon-xiangji"></i> <input type="button"/> <em class="iconfont icon-sousuokuang"></em> </span> </form> <div class="fl"> <span class="iconfont icon-gouwuche"></span> <i>0</i> <a href="">我的购物车</a> </div> <p> <a href="" class="red">王者周年庆</a> <a href="">5折秒杀</a> <a href="">5折秒杀</a> <a href="">5折秒杀</a> <a href="">5折秒杀</a> <a href="">5折秒杀</a> <a href="">5折秒杀</a> <a href="">5折秒杀</a> <a href="">5折秒杀</a> <a href="">5折秒杀</a> </p> </div> <div class="nav"> <a href="" class="red">秒杀</a> <a href="" class="red">优惠券</a> <a href="">PLUS会员</a> <a href="">PLUS会员</a> <a href="">PLUS会员</a> <a href="">会员</a> <a href="">PLUS会员</a> <a href="">PLUS会员</a> <a href="">PLUS会员</a> <a href="">PLUS会员</a> </div> </div> <div class="header-adv fr"> <a href=""><img src="images/head-right.webp" alt=""/></a> </div> </div> </div>  <div class="banner"> <div class="ban-left fl"> <ul> <li><a href="">家用电器</a> <div> <dl> <dt class="bann1"> <a>家电管></a> <a>专卖店></a> <a>家电服务></a> <a>企业采购></a> <a>商用电器></a> <a>以旧换新></a> <a>商用></a> </dt> <dd> <a href="" class="bann2">冰箱></a> <a href="">多门</a> <a href="">对开门</a> <a href="">双门</a> <a href="">冷柜/冰吧</a> <a href="">酒柜</a> <a href="">吸顶灯</a> <a href="">吊灯</a> <a href="">台灯</a> <a href="">大众</a> <a href="">日产</a> <a href="">丰田</a> <a href="">别克</a> </dd> <dd> <a href="" class="bann2">冰箱></a> <a href="">多门</a> <a href="">对开门</a> <a href="">双门</a> <a href="">冷柜/冰吧</a> <a href="">酒柜</a> <a href="">吸顶灯</a> <a href="">吊灯</a> <a href="">台灯</a> <a href="">大众</a> <a href="">日产</a> <a href="">丰田</a> <a href="">别克</a> </dd> <dd> <a href="" class="bann2">冰箱></a> <a href="">多门</a> <a href="">对开门</a> <a href="">双门</a> <a href="">冷柜/冰吧</a> <a href="">酒柜</a> <a href="">吸顶灯</a> <a href="">吊灯</a> <a href="">台灯</a> <a href="">大众</a> <a href="">日产</a> <a href="">丰田</a> <a href="">别克</a> </dd> <dd> <a href="" class="bann2">冰箱></a> <a href="">多门</a> <a href="">对开门</a> <a href="">双门</a> <a href="">冷柜/冰吧</a> <a href="">酒柜</a> <a href="">吸顶灯</a> <a href="">吊灯</a> <a href="">台灯</a> <a href="">大众</a> <a href="">日产</a> <a href="">丰田</a> <a href="">别克</a> </dd> <dd> <a href="" class="bann2">冰箱></a> <a href="">多门</a> <a href="">对开门</a> <a href="">双门</a> <a href="">冷柜/冰吧</a> <a href="">酒柜</a> <a href="">吸顶灯</a> <a href="">吊灯</a> <a href="">台灯</a> <a href="">大众</a> <a href="">日产</a> <a href="">丰田</a> <a href="">别克</a> </dd> <dd> <a href="" class="bann2">冰箱></a> <a href="">多门</a> <a href="">对开门</a> <a href="">双门</a> <a href="">冷柜/冰吧</a> <a href="">酒柜</a> <a href="">吸顶灯</a> <a href="">吊灯</a> <a href="">台灯</a> <a href="">大众</a> <a href="">日产</a> <a href="">丰田</a> <a href="">别克</a> </dd> <dd> <a href="" class="bann2">冰箱></a> <a href="">多门</a> <a href="">对开门</a> <a href="">双门</a> <a href="">冷柜/冰吧</a> <a href="">酒柜</a> <a href="">吸顶灯</a> <a href="">吊灯</a> <a href="">台灯</a> <a href="">大众</a> <a href="">日产</a> <a href="">丰田</a> <a href="">别克</a> </dd> <dd> <a href="" class="bann2">冰箱></a> <a href="">多门</a> <a href="">对开门</a> <a href="">双门</a> <a href="">冷柜/冰吧</a> <a href="">酒柜</a> <a href="">吸顶灯</a> <a href="">吊灯</a> <a href="">台灯</a> <a href="">大众</a> <a href="">日产</a> <a href="">丰田</a> <a href="">别克</a> </dd> <dd> <a href="" class="bann2">冰箱></a> <a href="">多门</a> <a href="">对开门</a> <a href="">双门</a> <a href="">冷柜/冰吧</a> <a href="">酒柜</a> <a href="">吸顶灯</a> <a href="">吊灯</a> <a href="">台灯</a> <a href="">大众</a> <a href="">日产</a> <a href="">丰田</a> <a href="">别克</a> </dd> <dd> <a href="" class="bann2">冰箱></a> <a href="">多门</a> <a href="">对开门</a> <a href="">双门</a> <a href="">冷柜/冰吧</a> <a href="">酒柜</a> <a href="">吸顶灯</a> <a href="">吊灯</a> <a href="">台灯</a> <a href="">大众</a> <a href="">日产</a> <a href="">丰田</a> <a href="">别克</a> </dd> </dl> </div> </li> <li><a href="">手机</a>/<a href="">运营商</a>/<a href="">数码</a><div> </div></li> <li><a href="">电脑</a>/<a href="">办公</a><div></div></li> <li><a href="">家居</a>/<a href="">家具</a>/<a href="">家装</a>/<a href="">厨具</a><div></div></li> <li><a href="">男装</a>/<a href="">女装</a>/<a href="">童装</a>/<a href="">内衣</a><div></div></li> <li><a href="">美妆</a>/<a href="">个护清洁</a>/<a href="">宠物</a><div></div></li> <li><a href="">女鞋</a>/<a href="">箱包</a>/<a href="">钟表</a>/<a href="">珠宝</a><div></div></li> <2li><a href="">男鞋</a>/<a href="">运动</a>/<a href="">户外</a><div></div></li> <li><a href="">房产</a>/<a href="">汽车</a>/<a href="">汽车用品</a><div></div></li> <li><a href="">母婴</a>/<a href="">玩具乐器</a><div></div></li> <li><a href="">食品</a>/<a href="">酒类</a>/<a href="">生鲜</a>/<a href="">特产</a><div></div></li> <li><a href="">艺术</a>/<a href="">礼品鲜花</a>/<a href="">农资绿植</a><div></div></li> <li><a href="">医药保健</a>/<a href="">计生情趣</a><div></div></li> <li><a href="">图书</a>/<a href="">文娱</a>/<a href="">教育</a>/<a href="">电子书</a><div></div></li> <li><a href="">机票</a>/<a href="">酒店</a>/<a href="">旅游</a>/<a href="">生活</a><div></div></li> <li><a href="">理财</a>/<a href="">众筹</a>/<a href="">白条</a>/<a href="">保险</a><div></div></li> <li><a href="">安装</a>/<a href="">维修</a>/<a href="">清洗</a>/<a href="">二手</a><div></div></li> <li><a href="">工业品</a><div></div></li> </ul> </div> <div class="ban-main fl"> </div> <div class="ban-right fr"> </div> </div> </body> </html>

2:css部分

#top-adv{ height:80px; background: rgb(180, 0, 27); } .top-adv,.top,.header,.banner{ width:1190px; margin:auto; } .top-adv{ height:80px; background: url(../images/top-bg.webp); position: relative; padding-right: 15px; cursor: pointer; } .top-adv>a.one{ float:right; margin-top: 15px; margin-right: 10px; } .top-adv span{ position: absolute; right:0; top:5px; width:20px; height:20px; background:rgba(45,45,45,.3); color:rgba(255,255,255,.3); display: inline-block; text-align: center; line-height: 20px; } /*头部导航*/ #top{ height:30px; background: #e3e4e5; border-bottom:solid 1px #ddd; } .top{ height:30px; line-height: 30px; position: relative; } .top-left{ width:52px; height:30px; border:solid 1px #e3e4e5; position: relative; } .top-left:hover,.top-right ul li.active:hover{ background: #fff; border-left-color:#ccc; border-right-color:#ccc; border-bottom-color:#fff; } .top-left>span{ display: inline-block; width:20px; height:30px; float:left; } .top-left>a{ display:inline-block; width:30px; height:30px; float:left; line-height: 30px; } .top-left>div{ display: none; width:300px; height:420px; border:solid 1px #e3e4e5; border-top-color:white; position: absolute; left:0; top:29px; z-index: 1; background: #fff; } .top-left:hover>div{ display: block; } .red{ color:#f10215 !important; } .top a{ color:#999; } .top a:hover{ color:#c81623; } .top-right .red:hover{ opacity: 0.5; } .top-right ul li{ float:left; padding:0 5px; position: relative; } .top-right ul li span{ font-size: 8px; font-weight: bold; color:#999; margin-left: 3px; } .top-right ul li>div{ display: none; position: absolute; top:29px; border:solid 1px #e3e4e5; border-top-color:white; background: #fff; z-index: 1; } .top-right ul li:hover>div{ display:block; } .top-right ul li.active:hover{ background: #fff; } .myjd{ width:280px; height:150px; left:0; } .qycg{ width:150px; height:70px; left:0; } .khfw{ width:170px; height:240px; right:0; } .wzdh{ width:1190px; height:165px; left:0; } .top-right li.two{ position: inherit; /*默认的定位值*/ } /*top二级内容*/ .top-left>div dl{ padding:20px; } .top-left>div dl dt{ border-top:solid 1px #e3e4e5; } .top-left>div dl dd:first-of-type>a{ width:40px; height:20px; margin:0 4px; display: inline-block; text-align: center; line-height: 20px; } .top-left>div dl dd:first-of-type>a:hover{ background: #e3e4e5; } .top-left dl dd .active{ color:#fff; background: #f10215; } .top-left>div dl dt{ color:#999; } .top-left>div dl dd i{ width:15px; height:12px; display: inline-block; background: #f00; margin-right: 5px; } .top-left dl dd:nth-of-type(3) a{ width:128px; height:30px; display: inline-block; float:left; } .top-left .i1{ background:url(../images/areamini.png) no-repeat left top; } .top-left .i2{ background:url(../images/areamini.png) no-repeat -20px top; } .top-left .i3{ background:url(../images/areamini.png) no-repeat -40px top; } .top-left .i4{ background:url(../images/areamini.png) no-repeat left -16px; } .top-left .i5{ background:url(../images/areamini.png) no-repeat -20px -15px; } .myjd dl:nth-of-type(1){ width:280px; height:90px; display:inline-block; float:left; padding:0 20px; padding-top:10px; line-height: 20px; border-bottom: solid 1px #dddddd; } .myjd dl:nth-of-type(1) dd a{ margin-right:60px; } .myjd dl:nth-of-type(2){ width:280px; height:49px; display:inline-block; float:left; padding:0 20px; padding-top:5px; line-height: 20px; } .myjd dl:nth-of-type(2) dd a{ margin-right:60px; } .qycg dl{ width:150px; height:70px; padding-top:10px; } .qycg dl dd a{ line-height: 20px; margin:0 10px; float:left; } .khfw dl:nth-of-type(1){ width:280px; height:120px; display:inline-block; float:left; padding:0 20px; padding-top:10px; line-height: 20px; border-bottom: solid 1px #dddddd; } .khfw dl:nth-of-type(1) dd a{ margin-right:15px; } .khfw2{ padding-top:15px; } .wzdh{ padding:20px; } .wzdh dl dt{ margin-bottom: 5px; padding-left:20px; } .wzdh dl{ width:287px; height:150px; display:inline-block; float:left; line-height: 20px; } .wzdh tr td a{ margin-right:10px; } .wzdh2,.wzdh3,.wzdh4{ border-left:solid 1px #ddd; padding-left:20px; } /*header模块*/ #header{ height:140px; background: #fff; border-bottom: solid 1px #ddd; } .header{ height:140px; padding-top: 10px; } .header .logo,.header .header-adv{ width:190px; height:140px; } .header .search{ width:810px; } .logo img{ height:120px; } .searchbox{ height:60px; margin-top: 30px; margin-left: 50px; } .searchbox form>span{ width:550px; height:36px; border:solid 2px #e2231a; display: inline-block; position: relative; line-height: 32px; } .searchbox>div{ width:132px; height:36px; border:solid 1px #eee; margin-left: 20px; } .searchbox input{ border:none; float:left; } .searchbox input[type="text"]{ width:488px; height:32px; padding-left:10px ; } .searchbox input[type="button"]{ width:58px; height:32px; background: #e1251b; } .searchbox span i{ position: absolute; right:70px; width:20px; height:20px; color:#9f9f9f; } .searchbox span i:hover{ color:#e1251b; } .searchbox span em{ position: absolute; right:19px; width:20px; height:22px; color:#fff; font-size: 20px; } .searchbox>div{ color:#e1251b; line-height: 34px; position: relative; } .searchbox>div>span{ font-weight: bold; margin:0 15px 0 20px; } .searchbox>div a{ color:#e1251b; } .searchbox>div i{ background: #e1251b; color:#fff; display: inline-block; padding:0 3px; border-radius: 5px; line-height: 12px; font-style: normal; position: absolute; left:32px; top:2px; } .searchbox>p{ clear:both; line-height: 20px; } .searchbox>p a{ color:#999; margin-right: 5px; } .searchbox>p a:hover{ color:#e1251b; } .nav{ height:40px; line-height: 40px; font-size: 15px; } .nav .red{ font-weight: 700; } .nav a{ color:#333; margin-right: 16px; } .nav a:hover{ color:#e1251b; } /*banner模块*/ .banner{ margin-top: 10px; } .ban-left,.ban-right{ width:190px; height:470px; } .ban-main{ width:790px; margin:0 10px; height:470px; background: pink; } .ban-left{ background: #fff; padding:10px 0; font-size: 14px; position: relative; } .ban-left ul li{ padding-left:20px; line-height: 25px; color:#333; } .ban-left ul li:hover{ background: #ddd; } .ban-left ul li a{ color:#333; } .ban-left ul li a:hover{ color:#e1251b; } .ban-left ul li>div{ width:800px; height:500px; position: absolute; left:190px; top:0; display: none;} .ban-left ul li:hover>div{ display: block; background: #fff; border:solid 2px #eee; } .bann1{ height:40px; margin-top: 12px; width:730px; line-height: 24px } .bann1 a{ color:#fff !important; font-size: 12px; margin-left:15px; padding:0 13px; display: inline-block; height:24px; float:left; background: #000000; } .bann1 a:hover{ background:#f10215; color:#fff !important; } .ban-left ul li>div dl dd a{ font-size: 12px; margin-top:30px; margin-left:10px; } .ban-left ul li>div dl dd{ margin-left:30px; } .bann2{ font-weight: bold; } /*通用样式*/ *{ margin:0; padding:0; box-sizing: border-box; } body{ font:12px Microsoft YaHei,tahoma,arial,Hiragino Sans GB,sans-serif; background: #f4f4f4 url(../images/ban-bg.webp) no-repeat center 250px; } .fl{ float:left; } .fr{ float:right; } a{ text-decoration: none; } .clear{ clear:both; } ul,li{ list-style: none; } input{ outline:none; /*去掉表单元素外边框线*/ } @font-face {font-family: "iconfont"; src: url('iconfont.eot?t=1572068884503'); /* IE9 */ src: url('iconfont.eot?t=1572068884503#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('data:application/x-font-woff2;charset=utf-8;base64,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') format('woff2'), url('iconfont.woff?t=1572068884503') format('woff'), url('iconfont.ttf?t=1572068884503') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */ url('iconfont.svg?t=1572068884503#iconfont') format('svg'); /* iOS 4.1- */ } .iconfont { font-family: "iconfont" !important; font-size: 16px; font-style: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .icon-xiangshang:before { content: "\e81b"; } .icon-xiangxia:before { content: "\e81c"; } .icon-dingwei:before { content: "\e60d"; } .icon-sousuokuang:before { content: "\e644"; } .icon-yanjing:before { content: "\e681"; } .icon-kefu1:before { content: "\e60b"; } .icon-kefu:before { content: "\e70c"; } .icon-bianji:before { content: "\e600"; } .icon-gouwuche:before { content: "\e60c"; } .icon-xiangji:before { content: "\e6d3"; } .icon-guanbi:before { content: "\e608"; } .icon-xiangyou:before { content: "\e68b"; } .icon-address:before { content: "\e697"; }

三、总结在网页布局方面有许多要考虑的问题，如行列块浮动和div大小的定义等等，都需要提前计算和规划好。往后要继续熟悉定位功能的使用，这样会使搭建网页更加得心应手。

最新回复(0)