【使用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界面分析首先,铁道大学的网页首页分为图文热点,学校新闻,校内公告,媒体看铁大,学术咨询等等模块.通过分析这些模块,可以看出,学校网站首页针对的使用对象有很多,包括学校领 ...
随机推荐
- LaTeX表格紧跟文字 (不影响下方文本对齐)
很多博客会让你用下面这行替换\\begin{table}和\\end{table},但是这样替换以后,表格下方所有文字都变成了居中对齐,section格式也都失效了. \makeatletter\de ...
- JavaScriptDOM编程学习笔记（一）DOM概述
首先介绍下DOM,一套对文档的内容进行抽象和概念化的方法.即Document Object Model,当创建了一个网页并加载到Web浏览器中时,DOM就把编写的网页转换为一个文档对象,而通过浏览器提 ...
- ZROI1119 【十一·联考】幸福
ZROI1119 [十一·联考]幸福 传送门 一道矩阵快速幂. #include<iostream> #include<cstdio> #include<algorith ...
- Java集合详解6：这次，从头到尾带你解读Java中的红黑树
<Java集合详解系列>是我在完成夯实Java基础篇的系列博客后准备开始写的新系列. 这些文章将整理到我在GitHub上的<Java面试指南>仓库,更多精彩内容请到我的仓库里查 ...
- 【Gamma】 Phylab 展示博客
目录 [Gamma] Phylab 展示博客 发布地址 网站:PhyLab GitHub Release: WhatAHardChoice/Phylab Gamma版本 一.团队简介 二.项目目标 2 ...
- Solr7.x学习（1）-安装
1.下载solr-7.7.2.tgz和jdk-8u221-linux-x64.tar.gz 2.将文件解压到/usr/local目录 cd /usr/local/ tar -zxvf jdk-8u22 ...
- Linux查看端口使用情况
1.netstat -tunlp,查看已使用的端口 2.netstat -tunlp | grep 8080,查询指定端口使用情况 3.netstat命令无法使用需要安装net-tools yum i ...
- WebStorm ------------ 调整字体大小和背景
WebStorm 一款前端编写工具,使用方式与idea 相似 如何调整字体大小 在设置里面找 设置编码背景 拷贝一个样式,,在此样式下进行更改 开始设置 设置好后 dd
- SQL Server ----- 生成sql 脚本
通过生成sql 脚本进行数据库转移 选中需要进行转移的数据库 点击生成脚本后出现 进入的是简介界面 直接点击下一步 进入到选择对象界面. 按照步骤进行设置 选择你需要的 架构和数据 ...
- fp-growth代码问题（Python）
网上的 python3 fp-growth代码每次在执行时可能会出现找出的频繁项集不一致的情况,这是因为每次执行代码时建的FP树可能不一致. 加了一行代码可以解决这个问题(第59行):先对 frequ ...