1、DIV 相关的技术
  Div 它是一个 html 标签,一个块级元素(单独显示一行)。它单独使用没有任何意义,必须结合CSS来使用。它主要用于页面的布局。

  Span 它是一个 html 标签,一个内联元素(显示一行)。它单独使用没有任何意义,必须结合CSS 来使用。它主要用于对括起来的内容进行样式的修饰。

2、CSS 的作用

  HTML:它是整个网站的骨架。

  CSS:它是对整个网站骨架的内容进行美化(修饰)。

3、CSS 如何使用

  语法和规范

  选择器{

       属性名 1:属性值 1;

          属性名 2:属性值 2;

         属性名 3:属性值 3;

  }

  基本选择器有三种:元素选择器、类选择器、id 选择器

  1)如果多个相同的元素设置相同的样式,使用元素选择器最为合适

   把选择器改成元素名即可。

  2)对多个元素设置相同的样式,使用类选择器比较合适

   把选择器改成”.类名“即可

  3)Id 保证唯一,使用id选择器

   把选择器改成”#id“即可。

4、CSS的引入方式

  第一种:行内引入

  <div style="color:red;font-size: 100px;">

    你好,疯子

  </div>

  第二种:内部引入方式

  <style type="text/css">

    div{

      color:red;   font-size: 100px;

     }

  </style>

  第三种:外部引入方式

5、CSS的浮动

浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为 止。由于浮动框不在文档的普通流中,所以文档的普通流中的块框表现得就像浮动框不存在 一样。

详情查看CSS简介。

6、使用DIV和CSS完成首页重新布局,效果和前几篇的HTML基础——网站首页显示页面一样。

步骤分析:

第一步:先定义个大的 div,然后嵌套 8 个小的 div

第二步:(第一行)在第一个 div 里面嵌套 3 个小的 div

第三步: (第二行)在小 div里面写一个列表标签(需要使用 css的 display属性的 inline)

第四步:(第三行)在小 div 里面放置一张图片

第五步:(第四行)在小 div 里面嵌套 2 个 div(在下面的 div 再嵌套 2 个 div,最后一在右 边的 div 里面嵌套 10 个 div)

第六步:(第五行)在小 div 里面放置一张广告图片

第七步:(第七行)在小 div 里面放置一张广告图片

第八步:(第八行) 在小 div 里面放置超链接和文字内容。

7、最终实现代码如下:

此案例使用了CSS的其他内容:

1)去掉超链接的下划线:

  a{

    text-decoration: none;

  }
2)让 div 居中

  margin:0px auto;
3)让块级元素成为内联元素

  display:inline;
4)块级元素内容居中

  text-align:center;

 <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>首页</title>
<style>
#father{
border: 1px solid black;
width: 1300px;
height: 1600px;
margin: auto;
}
#logo{
border: 1px solid black;
width: 1300px;
height: 50px;
}
.top{
border: 1px solid blue;
width: 431px;
height: 50px;
float: left;
}
#top{
padding-top: 12px;
height: 38px;
} #menu{
border: 1px solid red;
width:1300px;
height: 50px;
background: black;
}
ul li{
display: inline;
color: white;
}
#product{
border: 1px solid goldenrod;
width: 1300px;
height: 550px;
}
#product_top{
border: 1px solid blue;
width: 100%;
height: 43px;
padding-top: 5px;
}
#product_bottom{
border: 1px solid green;
width: 100%;
height: 498px;
} #product_bottom_left{
border: 1px solid red;
width: 200px;
height: 498px;
float: left;
}
#product_bottom_right{
border: 1px solid saddlebrown;
width: 1094px;
height: 498px;
float: left;
}
#big{
border: 1px solid hotpink;
width: 545px;
height: 247px;
float: left;
}
.small{
border: 1px solid blue;
width: 180px;
height: 247px;
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> <!--2.导航栏部分-->
<div id="menu">
<ul>
<a href="#"><li style="font-size: large;">首页</li></a>&nbsp;&nbsp;&nbsp;&nbsp;
<a href="#"><li>手机数码</li></a>&nbsp;&nbsp;&nbsp;&nbsp;
<a href="#"><li>家用电器</li></a>&nbsp;&nbsp;&nbsp;&nbsp;
<a href="#"><li>鞋靴箱包</li></a>&nbsp;&nbsp;&nbsp;&nbsp;
</ul>
</div> <!--3.轮播图部分-->
<div id="">
<img src="../img/1.jpg" width="100%" height="100%"/>
</div> <!--4.最新商品-->
<div id="product"> <div id="product_top">
<span style="font-size: 25px">最新商品</span>&nbsp;&nbsp;&nbsp;
<img src="../img/title2.jpg"/>
</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">
<a href="#"><img src="../img/small01.jpg" ></a>
<a href="#"><p style="color: gray;">榨汁机</p></a>
<p style="color: red;">599</p>
</div>
<div class="small">
<a href="#"><img src="../img/small02.jpg" ></a>
<a href="#"><p style="color: gray;">电视机</p></a>
<p style="color: red;">1599</p>
</div>
<div class="small">
<a href="#"><img src="../img/small03.jpg" ></a>
<a href="#"><p style="color: gray;">锅</p></a>
<p style="color: red;">399</p>
</div>
<div class="small">
<a href="#"><img src="../img/small04.jpg" ></a>
<a href="#"><p style="color: gray;">面包机</p></a>
<p style="color: red;">799</p>
</div>
<div class="small">
<a href="#"><img src="../img/small05.jpg" ></a>
<a href="#"><p style="color: gray;">咖啡机</p></a>
<p style="color: red;">899</p>
</div>
<div class="small">
<a href="#"><img src="../img/small06.jpg" ></a>
<a href="#"><p style="color: gray;">洗衣机</p></a>
<p style="color: red;">999</p>
</div>
<div class="small">
<a href="#"><img src="../img/small07.jpg" ></a>
<a href="#"><p style="color: gray;">扫地机器人</p></a>
<p style="color: red;">1599</p>
</div>
<div class="small">
<a href="#"><img src="../img/small09.jpg" ></a>
<a href="#"><p style="color: gray;">微波炉</p></a>
<p style="color: red;">1099</p>
</div>
<div class="small">
<a href="#"><img src="../img/small08.jpg" ></a>
<a href="#"><p style="color: gray;">压力锅</p></a>
<p style="color: red;">799</p>
</div>
</div>
</div>
</div> <!--5.广告图片-->
<div id="">
<img src="../img/ad.jpg" width="100%"/>
</div> <!--6.广告图片-->
<div id="">
<img src="../img/footer.jpg" width="100%"/>
</div> <!--7.友情链接和版权信息-->
<div id="bottom">
<a href="#"><font>关于我们</font></a>
<a href="#"><font>联系我们</font></a>
<a href="#"><font>招贤纳士</font></a>
<a href="#"><font>法律声明</font></a>
<a href="#"><font>友情链接</font></a>
<a href="#"><font>支付方式</font></a>
<a href="#"><font>配送方式</font></a>
<a href="#"><font>服务声明</font></a>
<a href="#"><font>广告声明</font></a>
<p>
Copyright © 2005-2016 hh商城 版权所有
</p>
</div>
</div>
</body>
</html>

在浏览器内运行,就可以得到网站首页效果。

HTML&CSS——使用DIV和CSS完成网站首页重构的更多相关文章

  1. 用HTML+CSS编写一个计科院网站首页的静态网页

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. 用HTML+CSS实现一个计科院网站首页静态页面

    链接:https://pan.baidu.com/s/1akwyc89q3nzKDQQulaFelQ 提取码:s6ys

  3. IT兄弟连 HTML5教程 DIV+CSS网站首页布局示例

    首页的设计直接影响网站的整体形象,虽然没有一个统一的规范,但最好将其设计为大众化的,只要信息内容能够合理地编排即可,使用户可以方便地找到需要的信息.另外,首页的高度最好不要超过三个屏幕,页面中使用的颜 ...

  4. 【使用DIV+CSS重写网站首页案例】步骤分析与代码实现

    使用DIV+CSS重写网站首页案例 步骤分析: 第一步:先定义一个大的 div(整个页面),然后嵌套 8 个小的 div(共八行): 第二步:(第一行)在第一个 div 里面嵌套 3 个小的 div: ...

  5. 【使用DIV+CSS重写网站首页案例】CSS选择器

    使用表格<table></table>对网站首页进行布局有缺陷,不能拖动版块,不灵活. DIV Div是一个html的标签,单独使用没有意义,必须结合CSS使用: 是一个块级元 ...

  6. 【使用DIV+CSS重写网站首页案例】CSS引入方式

    CSS引入方式(3种) *就近原则:行内引入可以覆盖内部引入的效果 内部引入: *  type="text/css"      为默认可以不写 例子: <!DOCTYPE h ...

  7. html页面的CSS、DIV命名规则

    CSS命名规则 头:header 内容:content/containe 尾:footer 导航:nav 侧栏:sidebar 栏目:column 页面外围控制整体布局宽度:wrapper 左右中:l ...

  8. PHP.5-DIV+CSS布局网站首页实例

    DIV+CSS布局网站首页实例 网站页面布局 http://www.sj33.cn/digital/wyll/201501/42379.html[页头.页脚.侧边栏和内容区域] #避免各浏览器对CSS ...

  9. 《Two Days DIV + CSS》读书笔记——CSS控制页面方式

    1.1 你必须知道的知识 (其中包括1.1.1 DIV + CSS的叫法解释:1.1.2 DIV + CSS 名字的误区:以及1.1.3 W3C简介.由于只是背景知识,跳过该章.) 1.2 你必须掌握 ...

随机推荐

  1. BottomSheetBehavior 结合CoordinatorLayout实现底部栏

    1.xml <?xml version="1.0" encoding="utf-8"?> <android.support.design.wi ...

  2. VB入门在线视频教程大全学习

    课程目录 9分钟47秒 课时1第一课:怎么编写程序 14分钟1秒 课时1第十七课第1节:文件读写的几种方式 14分钟14秒 课时2第二课:什么是变量和变量类型 19分钟24秒 课时3第三课:变量的声明 ...

  3. 互联网时代: 从Uber的供需匹配看开发需求

    每次看电影中的有钱人都有专属司机接送,只要坐在车里,就有人帮忙开车门.提行李及关车门.感觉是非现实的遥远画面,现在却有机会可以在日常生活中成真! 2009年Travis Kalanick及Garret ...

  4. 自定义一个简单的web框架

    from wsgiref.simple_server import make_server def book(request):     #视图函数 return [b'<h1> book ...

  5. poj1050查找最大子矩阵和

    题目: To the Max   Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 48507   Accepted: 2566 ...

  6. luoguP2742 【模板】二维凸包 / [USACO5.1]圈奶牛 二维凸包

    我们知道,纵坐标最小的点一定在凸包上(如果有多个,那它们都会被取到) 随便找一个纵坐标最小的点,将其他所有点按照这个点为原点极角排序,我们发现极角大的会在极角小的后面加入(感性认知一下) 考虑新(加入 ...

  7. Pyhton二级操作题练习

    # 1.编写一个python程序,输入两个数,比较它们的大小并输出其中较大者. num1 = input('请输入数字X:') num2 = input('请输入数字Y:') if num1.isde ...

  8. jupyter的安装

    3.6:\Lib\site-packages\pip\models\index.py # PyPI = Index('https://pypi.python.org/') # 替换成 PyPI = I ...

  9. BZOJ 1492 [NOI2007]货币兑换Cash (CDQ分治/splay 维护凸包)

    题目大意:太长了略 splay调了两天一直WA弃疗了 首先,我们可以猜一个贪心,如果买/卖,就一定都买/卖掉,否则不买/卖 反正货币的行情都是已知的,没有任何风险,所以肯定要选择最最最优的方案了 容易 ...

  10. 使用python备份数据库并删除备份超过一定时长的文件

    #!/usr/bin/env python #-*- coding: utf-8 -*- """ @Project:Py @author:sandu @Email: sa ...