DIV+CSS网页布局（一）！
时间：2023-09-25 15:42:01 | 来源：网站运营
时间：2023-09-25 15:42:01 来源：网站运营
DIV+CSS网页布局（一）！：——零基础自学留存，仅作笔记使用，2019.3.22更！
1，head头部逻辑规范：
京东商城为例！<head><meta charset="utf-8"> <!--国际标准编码 -->
<title>京东(http://JD.COM)-正品低价、品质保障、配送及时、轻松购物!</title><!--网页title标题，第一个重要标题，是搜索引擎了解网页的入口和对网页主题归属的最佳判断点。最先出现的词语权重越高，建议写法：网站名（网址）— 网站介绍。 -->
<meta name="description" content="京东JD.COM-专业的综合网上购物商城，为您提供正品低价的购物选择、优质便捷的服务体验。商品来自全球数十万品牌商家，囊括家电、手机、电脑、服装、居家、母婴、美妆、个护、食品、生鲜等丰富品类，满足各种购物需求。
"><!--
Description 网站说明： 采用网页的MATA标签中描述部分作为搜索结果的“内容摘要”，建议Description作为网站的总体业务和主题概括，多采用“我们是…”“我们提供…”“×××网作为…”“电话：010…”之类语句。 -->
<meta name="keywords" content="网上购物,网上商城,家电,手机,电脑,服装,居家,母婴,美妆,个护,食品,生鲜,京东
"> <!--
Keywords 关键字：是搜索引擎关注点之一，限制在6-8个关键词左右。 -->
<link rel="stylesheet" href="css/base .css"/><!--引用CSS外部样式表 -->
</head>2，top广告 ：先添加div通栏盒子（设置height与background-color），然后版心居中（width：1200px ; 与margin：auto；） 最后添加a链接 （设置height 与background：url（images/bg.png）no-repeat ; ）
3，top导航栏模块：先添加div通栏盒子（设置height与background-color），然后版心居中（width：1200px ; 与margin：auto；） ，版心分为两个部分，左边和右边，用两个ul 设置（float；left ；与float：right；）浮动设置 ，在每个li 标签里面添加a链接，分割线用一像素的小盒子隔开 ，给小盒子设置外边距，给右边距的ul 再添加一个float：left，完成效果。
4，logo，搜索，购物栏 全部用定位制作，以版心为相对定位。先添加div通栏盒子（设置height与background-color），然后版心居中（width：1200px ; 与margin：auto；），最后开始设置各个栏目。
在线咨询
