使用CSS完成网站首页的优化
需求分析:
对之前博客中网站首页使用表格布局存在的缺陷,使用DIV+CSS来对页面进行优化
表格布局的缺陷:
1. 嵌套层级太多, 一旦出现嵌套顺序错乱, 整个页面达不到预期效果 2. 采用表格布局,页面不够灵活, 动其中某一块,整个表格布局的结构全都要变
技术分析
HTML的块标签:
div标签: 默认占一行,自动换行
span标签: 内容显示在同一行
CSS概述:
Cascading Style Sheets : 层叠样式表
主要作用:
用来美化我们的HTML页面的
HTML 决定网页的骨架 ,CSS 化妆
将页面的HTML和美化进行分离
CSS的简单语法:
在一个style标签中,去编写CSS内容,最好将style标签写在这个head标签中
<style> 选择器{ 属性名称:属性的值; 属性名称2: 属性的值2; } </style>CSS选择器: 帮助我们找到我们要修饰的标签或者元素
元素选择:
元素的名称{ 属性名称:属性的值; 属性名称:属性的值; }ID选择器:
以#号开头 ID在整个页面中必须是唯一的s #ID的名称{ 属性名称:属性的值; 属性名称:属性的值; }类选择器:
以 . 开头 .类的名称{ 属性名称:属性的值; 属性名称:属性的值; }
CSS的引入方式:
外部样式: 通过link标签引入一个外部的css文件
内部样式: 直接在style标签内编写CSS代码
行内样式: 直接在标签中添加一个style属性, 编写CSS样式
CSS浮动 : 浮动的元素会脱离正常的文档流,在正常的文档流中不占空间
float属性: left right clear属性: 清除浮动 both : 两边都不允许浮动 left: 左边不允许浮动 right : 右边不允许浮动 流式布局
步骤分析:
创一个最外层div
第一部份: LOGO部分: 嵌套三个div
第二部分: 导航栏部分 : 放置5个超链接
第三部分: 轮播图
第四部分:
第五部分: 直接放一张图片
第六部分: 抄第四部分的
第七部分: 放置一张图片
第八部分: 放一堆超链接
代码实现:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>网站首页</title>
<style>
.logo{
float: left;
width: 33%;
/*border-style:solid ;
border-color: red;*/
height: 60px;
/*border: 1px solid red;*/
line-height: 60px;
}
.amenu{
color: white;
text-decoration:none ;
height: 50px;
line-height: 50px;
}
.product{
float: left;
width: 16%;
height: 240px;
text-align: center;
}
</style>
</head>
<body>
<!--1. 创一个最外层div
2. 第一部份: LOGO部分: 嵌套三个div
3. 第二部分: 导航栏部分 : 放置5个超链接
4. 第三部分: 轮播图
5. 第四部分:
6. 第五部分: 直接放一张图片
7. 第六部分: 抄第四部分的
8. 第七部分: 放置一张图片
9. 第八部分: 放一堆超链接
-->
<!--1. 创一个最外层div-->
<div>
<!--2. 第一部份: LOGO部分: 嵌套三个div-->
<div>
<div class="logo">
<img src="../img/logo.jpg" width="100px" height="60px"/ >
</div>
<div class="logo">
<img src="../img/header.jpg" />
</div>
<div class="logo">
<a href="#">登陆</a>
<a href="#">注册</a>
<a href="#">购物车</a>
</div>
</div>
<!--清除浮动-->
<div style="clear: both;"></div>
<!--3. 第二部分: 导航栏部分 : 放置5个超链接-->
<div>
<div style="background-color: black;height: 50px;">
<a href="#" class="amenu">首页</a>
<a href="#" class="amenu">手机数码</a>
<a href="#" class="amenu">鞋靴箱包</a>
<a href="#" class="amenu">电脑办公</a>
<a href="#" class="amenu">香烟酒水</a>
</div>
</div>
<!--4. 第三部分: 轮播图 -->
<div>
<img src="../img/1.jpg" width="100%" />
</div>
<!--5. 第四部分: -->
<div>
<div>
<h2>最新商品<img src="../img/title2.jpg"/></h2>
</div>
<!--左侧广告图-->
<div style="width:15% ;height: 480px;border: 1px solid red;float: left;">
<img src="../ProductsImg/big01.jpg" width="100%" height="480px"/>
</div>
<!--右侧广告图-->
<div style="width:84% ;height: 480px;border: 1px solid blue;float: left;">
<div style="height: 240px; width: 50%;float: left;">
<img src="../ProductsImg/middle01.jpg" height="100%" width="100%"/>
</div>
<div class="product">
<img src="../ProductsImg/small01.jpg" />
<p>豆浆机</p>
<p style="color: red;">￥998</p>
</div>
<div class="product">
<img src="../ProductsImg/small01.jpg" />
<p>豆浆机</p>
<p style="color: red;">￥998</p>
</div>
<div class="product">
<img src="../ProductsImg/small01.jpg" />
<p>豆浆机</p>
<p style="color: red;">￥998</p>
</div>
<div class="product">
<img src="../ProductsImg/small01.jpg" />
<p>豆浆机</p>
<p style="color: red;">￥998</p>
</div>
<div class="product">
<img src="../ProductsImg/small01.jpg" />
<p>豆浆机</p>
<p style="color: red;">￥998</p>
</div>
<div class="product">
<img src="../ProductsImg/small01.jpg" />
<p>豆浆机</p>
<p style="color: red;">￥998</p>
</div>
<div class="product">
<img src="../ProductsImg/small01.jpg" />
<p>豆浆机</p>
<p style="color: red;">￥998</p>
</div>
<div class="product">
<img src="../ProductsImg/small01.jpg" />
<p>豆浆机</p>
<p style="color: red;">￥998</p>
</div>
<div class="product">
<img src="../ProductsImg/small01.jpg" />
<p>豆浆机</p>
<p style="color: red;">￥998</p>
</div>
</div>
</div>
<!--6. 第五部分: 直接放一张图片-->
<div>
<img src="../ProductsImg/ad.jpg" width="100%"/>
</div>
<!--7. 第六部分: 抄第四部分的-->
<div>
<div>
<h2>最新商品<img src="../img/title2.jpg"/></h2>
</div>
<!--左侧广告图-->
<div style="width:15% ;height: 480px;border: 1px solid red;float: left;">
<img src="../ProductsImg/big01.jpg" width="100%" height="480px"/>
</div>
<!--右侧广告图-->
<div style="width:84% ;height: 480px;border: 1px solid blue;float: left;">
<div style="height: 240px; width: 50%;float: left;">
<img src="../ProductsImg/middle01.jpg" height="100%" width="100%"/>
</div>
<div class="product">
<img src="../ProductsImg/small01.jpg" />
<p>豆浆机</p>
<p style="color: red;">￥998</p>
</div>
<div class="product">
<img src="../ProductsImg/small01.jpg" />
<p>豆浆机</p>
<p style="color: red;">￥998</p>
</div>
<div class="product">
<img src="../ProductsImg/small01.jpg" />
<p>豆浆机</p>
<p style="color: red;">￥998</p>
</div>
<div class="product">
<img src="../ProductsImg/small01.jpg" />
<p>豆浆机</p>
<p style="color: red;">￥998</p>
</div>
<div class="product">
<img src="../ProductsImg/small01.jpg" />
<p>豆浆机</p>
<p style="color: red;">￥998</p>
</div>
<div class="product">
<img src="../ProductsImg/small01.jpg" />
<p>豆浆机</p>
<p style="color: red;">￥998</p>
</div>
<div class="product">
<img src="../ProductsImg/small01.jpg" />
<p>豆浆机</p>
<p style="color: red;">￥998</p>
</div>
<div class="product">
<img src="../ProductsImg/small01.jpg" />
<p>豆浆机</p>
<p style="color: red;">￥998</p>
</div>
<div class="product">
<img src="../ProductsImg/small01.jpg" />
<p>豆浆机</p>
<p style="color: red;">￥998</p>
</div>
</div>
</div>
<!--8. 第七部分: 放置一张图片-->
<div>
<img src="../img/footer.jpg" width="100%" />
</div>
<!--9. 第八部分: 放一堆超链接-->
<div style="text-align: center;">
<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>
<p>Copyright © 2015-2016 网站商城 版权所有</font></p>
</div>
</div>
</body>
</html>
结果展示
扩展:
-
CSS的优先级
按照选择器搜索精确度来编写: 行内样式 > ID选择器 > 类选择器 > 元素选择器
就近原则: 哪个离得近,就选用哪个的样式
CSS: 层叠样式表
主要作用:
美化页面
将页面美化和HTML代码进行分离,提高代码的复用性
选择器:
元素选择器: 标签的名称{}
类选择器: 以. 开头 .类的名称
ID选择器: 以#开头 , #ID的名称 (ID必须是页面上面唯一)
CSS浮动:
float : left, right 不再占有正常文档流中的空间 , 流式布局
clear : both left right
CSS中的其它选择器
选择器分组: 选择器1,选择器2{ 属性的名称:属性的值}
属性选择器:
a[title] a[titile='aaa'] a[href][title] a[href][title='aaa']后代选择器: 爷爷选择器 孙子选择器 找出所有的后代
子元素选择器: 父选择器 > 儿子选择器
伪类选择器: 通常都是用在A标签上
扫一扫
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
