【使用DIV+CSS重写网站首页案例】步骤分析与代码实现
使用DIV+CSS重写网站首页案例
步骤分析：
，选择要调整的元素；
，上下箭头按键进行调整；
调整效果ok，F11按键关闭，在html文件中调整相应的数值；
代码：
<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title>首页</title>
<style>
#father {
border: 1px solid red;
width: 1300px;
height: 2200px;
/*margin可以设置为自动*/
margin: auto;
}
/*方法一：加上这个框<div id="logo">，
把下面三个小div和menu隔离开*/
/*#logo {
border: 1px solid black;
width: 1299px;
height: 50px;
}*/ .top {
border: 1px solid blue;
width: 431px;
height: 50px;
float: left;
}
/*设置内边距,可根据页面F11做调整*/ #top {
padding-top: 12px;
/*注意取值:height=50px-12px*/
height: 38px;
} #menu {
border: 1px solid red;
width: 1300px;
height: 50px;
background-color: black;
}
/*设置列表的项*/ ul li {
/*将列表显示成一行
inline:内联(不单独成行)*/
display: inline;
color: white;
}
/*方法二：（消除浮动）
* 如果没有<div id="logo">的框，
* 三个小div（left浮动）和menu（不浮动）是并列关系，
* 会覆盖menu*/ #clear {
clear: both;
} #product {
border: 1px solid red;
width: 1300px;
height: 556px;
} #product_top {
border: 1px solid blue;
width: 100%;
height: 45px;
padding-top: 8px
} #product_bottom {
border: 1px solid green;
width: 1300px;
height: 500px;
}
/*要让product_bottom_left和product_bottom_right并列，
两个都要加上float: left*/ #product_bottom_left {
border: 1px solid red;
width: 200px;
height: 500px;
float: left;
} #product_bottom_right {
border: 1px solid blue;
width: 1096px;
height: 500px;
float: left;
} #big {
border: 1px solid red;
width: 544px;
height: 248px;
float: left;
} .small {
border: 1px solid blue;
width: 180px;
height: 248px;
float: left;
/*里面内容居中*/
text-align: center;
} #bottom {
text-align: center;
}
/*去除超链接的下划线*/ a {
text-decoration: none;
}
</style>
</head> <body>
<div id="father">
<!--1.logo--> <!--方法一：-->
<div id="logo">
<div class="top">
<img src="../../img/logo2.png" height="46px" />
</div>
<div class="top">
<img src="../../img/header.png" height="46px" />
</div>
<div class="top" id="top">
<a href="#">登录</a>
<a href="#">注册</a>
<a href="#">购物车</a>
</div>
</div> <!--方二：-->
<div id="clear"> </div>
<!--2.导航栏-->
<div id="menu">
<ul>
<a href="#">
<li style="font-size:20px;">首页</li>
</a>
<a href="#">
<li>手机数码</li>
</a>
<a href="#">
<li>家用电器</li>
</a>
<a href="#">
<li>鞋靴箱包</li>
</a>
<a href="#">
<li>孕婴保健</li>
</a>
</ul>
</div>
<!--3.轮播图片-->
<div id="">
<img src="../../img/1.jpg" width="100%" />
</div>
<!--4.最新商品-->
<div id="product">
<div id="product_top">
<span style="font-size:25px;">最新商品
<img src="../../img/title2.jpg" />
</span>
</div>
<div id="product_bottom">
<div id="product_bottom_left">
<img src="../../img/big01.jpg" width="100%" height="100%" />
</div>
<div id="product_bottom_right">
<div id="big">
<a href=#><img src="../../img/middle01.jpg" width="100%" height="100%" /> </a>
</div>
<div class="small">
<img src="../../img/small03.jpg" />
<a href="#">
<p style="color:grey;">电炖锅</p>
</a>
<p style="color: red;">$399</p>
</div>
<div class="small">
<img src="../../img/small03.jpg" />
<a href="#">
<p style="color:grey;">电炖锅</p>
</a>
<p style="color: red;">$399</p>
</div>
<div class="small">
<img src="../../img/small03.jpg" />
<a href="#">
<p style="color:grey;">电炖锅</p>
</a>
<p style="color: red;">$399</p>
</div>
<div class="small">
<img src="../../img/small03.jpg" />
<a href="#">
<p style="color:grey;">电炖锅</p>
</a>
<p style="color: red;">$399</p>
</div>
<div class="small">
<img src="../../img/small03.jpg" />
<a href="#">
<p style="color:grey;">电炖锅</p>
</a>
<p style="color: red;">$399</p>
</div>
<div class="small">
<img src="../../img/small03.jpg" />
<a href="#">
<p style="color:grey;">电炖锅</p>
</a>
<p style="color: red;">$399</p>
</div>
<div class="small">
<img src="../../img/small03.jpg" />
<a href="#">
<p style="color:grey;">电炖锅</p>
</a>
<p style="color: red;">$399</p>
</div>
<div class="small">
<img src="../../img/small03.jpg" />
<a href="#">
<p style="color:grey;">电炖锅</p>
</a>
<p style="color: red;">$399</p>
</div>
<div class="small">
<img src="../../img/small03.jpg" />
<a href="#">
<p style="color:grey;">电炖锅</p>
</a>
<p style="color: red;">$399</p>
</div>
</div>
</div>
</div>
<!--5.广告图片-->
<div id="">
<img src="../../img/ad.jpg" width="100%" />
</div>
<!--6.热门商品-->
<div id="">
<div id="product_top">
<span style="font-size:25px;">热门商品
<img src="../../img/title2.jpg" />
</span>
</div>
<div id="product_bottom">
<div id="product_bottom_left">
<img src="../../img/big01.jpg" width="100%" height="100%" />
</div>
<div id="product_bottom_right">
<div id="big">
<a href=#><img src="../../img/middle01.jpg" width="100%" height="100%" /> </a>
</div>
<div class="small">
<img src="../../img/small03.jpg" />
<a href="#">
<p style="color:grey;">电炖锅</p>
</a>
<p style="color: red;">$399</p>
</div>
<div class="small">
<img src="../../img/small03.jpg" />
<a href="#">
<p style="color:grey;">电炖锅</p>
</a>
<p style="color: red;">$399</p>
</div>
<div class="small">
<img src="../../img/small03.jpg" />
<a href="#">
<p style="color:grey;">电炖锅</p>
</a>
<p style="color: red;">$399</p>
</div>
<div class="small">
<img src="../../img/small03.jpg" />
<a href="#">
<p style="color:grey;">电炖锅</p>
</a>
<p style="color: red;">$399</p>
</div>
<div class="small">
<img src="../../img/small03.jpg" />
<a href="#">
<p style="color:grey;">电炖锅</p>
</a>
<p style="color: red;">$399</p>
</div>
<div class="small">
<img src="../../img/small03.jpg" />
<a href="#">
<p style="color:grey;">电炖锅</p>
</a>
<p style="color: red;">$399</p>
</div>
<div class="small">
<img src="../../img/small03.jpg" />
<a href="#">
<p style="color:grey;">电炖锅</p>
</a>
<p style="color: red;">$399</p>
</div>
<div class="small">
<img src="../../img/small03.jpg" />
<a href="#">
<p style="color:grey;">电炖锅</p>
</a>
<p style="color: red;">$399</p>
</div>
<div class="small">
<img src="../../img/small03.jpg" />
<a href="#">
<p style="color:grey;">电炖锅</p>
</a>
<p style="color: red;">$399</p>
</div>
</div>
</div>
</div>
<!--7.广告图片-->
<div id="">
<img src="../../img/footer.jpg" width="100%" />
</div>
<!--7.友情链接和版权信息-->
<div id="bottom">
<td align="center">
<a href="#">关于我们</a>
<a href="#">联系我们</a>
<a href="#">法律声明</a>
<a href="#">...</a> <p>
Copyright ...
</p>
</td>
</div>
</div>
</body> </html>
结果：（未细调）
用到的CSS内容：
- margin: auto;
- 注意盒子模型的取值计算
- 内联： display: inline;
- 内容居中：text-align: center;
- 去除超链接的下划线
【使用DIV+CSS重写网站首页案例】步骤分析与代码实现的更多相关文章
- 【使用DIV+CSS重写网站首页案例】CSS选择器
使用表格<table></table>对网站首页进行布局有缺陷,不能拖动版块,不灵活. DIV Div是一个html的标签,单独使用没有意义,必须结合CSS使用: 是一个块级元 ...
- 【使用DIV+CSS重写网站首页案例】CSS浮动
CSS浮动: 浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边缘为止 由于浮动框不在文件的普通流中,所以文档的普通流中的块框表现得就像浮动框不存在一样. 选择器之 float属性 ...
- 【使用DIV+CSS重写网站首页案例】CSS引入方式
CSS引入方式(3种) *就近原则:行内引入可以覆盖内部引入的效果 内部引入: * type="text/css" 为默认可以不写 例子: <!DOCTYPE h ...
- 【使用DIV+CSS重写网站首页案例】CSS盒子模型
CSS盒子模型 取值问题: 默认情况,padding.border.margin都为0: 设定区域内容的width和height,是区域内容框的尺寸: 如果设定padding/border/margi ...
- DIV+CSS布局网站基本框架
html代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www. ...
- PHP.5-DIV+CSS布局网站首页实例
DIV+CSS布局网站首页实例 网站页面布局 http://www.sj33.cn/digital/wyll/201501/42379.html[页头.页脚.侧边栏和内容区域] #避免各浏览器对CSS ...
- HTML&CSS——使用DIV和CSS完成网站首页重构
1.DIV 相关的技术 Div 它是一个 html 标签,一个块级元素(单独显示一行).它单独使用没有任何意义,必须结合CSS来使用.它主要用于页面的布局. Span 它是一个 html 标签,一个内 ...
- 使用DIV+CSS布局网站的优点和缺陷
随着WEB2.0标准化设计理念的普及,国内很多大型门户网站已经纷纷采用DIV+CSS制作方法,从实际应用情况来看,此种方法绝对好于表格制作页面的方法. 如今大部分网站仍然采用表格嵌套内容的方式来制作网 ...
- 对石家庄铁道大学网站首页进行UI分析
对石家庄铁道大学网站首页进行UI界面分析首先,铁道大学的网页首页分为图文热点,学校新闻,校内公告,媒体看铁大,学术咨询等等模块.通过分析这些模块,可以看出,学校网站首页针对的使用对象有很多,包括学校领 ...
随机推荐
- vue、element-ui开发技巧
1.vue下input文本框获得光标 html: <el-input size="mini" clearable v-model.trim="addOrEditDa ...
- centos7.2上安装CDH5.16.2及Spark2【原创】
背景:我自己的电脑配置太低,想在centos操作系统上安装CDH5.1.2并配置集群,我去阿里云上买了3台按流量计费的阿里云服务器. 大家一定要注意,配置,购买的阿里云服务器不要太低了.建议:3台2核 ...
- python实现队列结构
# -*- coding:utf-8 -*- # __author__ :kusy # __content__:文件说明 # __date__:2018/10/8 13:49 class MyQueu ...
- laravels 使用laravel-wechat 组件
一. laravels (5.4)使用 laravel-wechat (4.13),出现无法登陆的情况,显示没有code 错误,解决办法 前提:已经在laravels.php 的 cleaners 中 ...
- 解决：ElasticSearch ClusterBlockException[blocked by: [FORBIDDEN/12/index read-only / allow delete (api)];
简记 使用SkyWalking用ES做存储,发现运行一段时间会提示ElasticSearch ClusterBlockException[blocked by: [FORBIDDEN/12/index ...
- Prometheus 基于文件的服务发现
Prometheus 基于文件的服务发现 官方文档:https://github.com/prometheus/prometheus/tree/master/discovery 服务发现支持: end ...
- 记：使用IScroll.js 开发picker日历组件遇到的问题及经验总结
IScroll中文文档 第一个问题: 边界留白 就是这种,上边界(最小),下边界(最大)有两个列表的位置是不能选择的.解决的办法是: 在HTML中,添加空白节点就行了. 第二个问题:初始化之后的滚动停 ...
- Lambda表达式和函数式编程
Lambda表达式和函数式编程 https://www.cnblogs.com/bigbigbigo/p/8422579.html https://www.runoob.com/java/java8- ...
- 静下心来学jquery的用法
http://blog.csdn.net/xiaojun1288/article/details/6803552
- spring Boot 学习（八、Spring Boot与与监控管理）
一.监控管理通过引入spring-boot-starter-actuator,可以使用Spring Boot为我们提供的准 生产环境下的应用监控和管理功能.我们可以通过HTTP,JMX,SSH协议来进 ...