首页 > > 网页制作 > css >

使用CSS完成商城首页的优化

2020-05-05 16:00:42来源：博客园 阅读 ()

新老客户大回馈,云服务器低至5折

使用CSS完成商城首页的优化

使用CSS完成网站首页的优化

需求分析

由于我们昨天使用表格布局存在缺陷,那么我们要来考虑使用DIV+CSS来对页面进行优化

表格布局的缺陷

  1. 嵌套层级太多, 一旦出现嵌套顺序错乱, 整个页面达不到预期效果
  2. 采用表格布局,页面不够灵活, 动其中某一块,整个表格布局的结构全都要变

技术分析

HTML的块标签:

  • div标签: 默认占一行,自动换行
  • span标签: 内容显示在同一行

步骤分析

  1. 创一个最外层div
  2. 第一部份: LOGO部分: 嵌套三个div
  3. 第二部分: 导航栏部分 : 放置5个超链接
  4. 第三部分: 轮播图
  5. 第四部分:
  6. 第五部分: 直接放一张图片
  7. 第六部分: 抄第四部分的
  8. 第七部分: 放置一张图片
  9. 第八部分: 放一堆超链接

代码实现

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			
			.logo{
				float: left;
				width: 33%;
				/*border-width: 1px;
				border-style: solid;
				border-color: red;*/
				height: 60px;
				line-height: 60px;
		/*		border: 1px solid red;*/
			}
			
			
			.amenu{
				color: white;
				text-decoration: none;
				height: 50px;
				line-height: 50px;
			}
			
			.product{
				float: left; text-align: center; width: 16%; height: 240px;
			}
			
		</style>
	</head>
	<body>
		<!--
			1. 创一个最外层div
			2. 第一部份: LOGO部分: 嵌套三个div
			3. 第二部分: 导航栏部分 : 放置5个超链接
			4. 第三部分: 轮播图 
			5. 第四部分: 
			6. 第五部分: 直接放一张图片
			7. 第六部分: 抄第四部分的
			8. 第七部分: 放置一张图片
			9. 第八部分: 放一堆超链接
		-->
		<div>
			<!--2. 第一部份: LOGO部分: 嵌套三个div-->
			<div>
				<div class="logo">
					<img src="../img/logo2.png"/>
				</div>
				<div class="logo">
					<img src="../img/header.png"/>
				</div>
				<div class="logo">
					<a href="#">登录</a>
					<a href="#">注册</a>
					<a href="#">购物车</a>
				</div>
			</div>
			
				
			<!--清除浮动-->
			<div style="clear: both;"></div>
			
			
			<!--3. 第二部分: 导航栏部分 : 放置5个超链接-->
			<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>
			
				
			<!--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;  float: left;">
					<img src="../products/hao/big01.jpg" width="100%" height="100%"/>
				</div>
				<!--
                	右侧商品
                -->
                <div style="width: 84%; height: 480px;float: left;">
                	<div style="height: 240px; width: 50%; float: left;">
                		<img src="../products/hao/middle01.jpg" height="100%" width="100%" />
                	</div>
					<div class="product">
                		<img src="../products/hao/small08.jpg" />
                		<p>高压锅</p>
                		<p style="color: red;">$998</p>
                	</div>
					<div class="product">
                		<img src="../products/hao/small08.jpg" />
                		<p>高压锅</p>
                		<p style="color: red;">$998</p>
                	</div>
					<div class="product">
                		<img src="../products/hao/small08.jpg" />
                		<p>高压锅</p>
                		<p style="color: red;">$998</p>
                	</div>
					<div class="product">
                		<img src="../products/hao/small08.jpg" />
                		<p>高压锅</p>
                		<p style="color: red;">$998</p>
                	</div>
					<div class="product">
                		<img src="../products/hao/small08.jpg" />
                		<p>高压锅</p>
                		<p style="color: red;">$998</p>
                	</div>
					<div class="product">
                		<img src="../products/hao/small08.jpg" />
                		<p>高压锅</p>
                		<p style="color: red;">$998</p>
                	</div>
					<div class="product">
                		<img src="../products/hao/small08.jpg" />
                		<p>高压锅</p>
                		<p style="color: red;">$998</p>
                	</div>
					<div class="product">
                		<img src="../products/hao/small08.jpg" />
                		<p>高压锅</p>
                		<p style="color: red;">$998</p>
                	</div>
					<div class="product">
                		<img src="../products/hao/small08.jpg" />
                		<p>高压锅</p>
                		<p style="color: red;">$998</p>
                	</div>
					
                </div>
			</div>
			
			<!--6. 第五部分: 直接放一张图片-->
			<div>
				<img src="../products/hao/ad.jpg" width="100%"/>
			</div>
			<!--7. 第六部分: 抄第四部分的-->
			<div>
				<div><h2>最新商品<img src="../img/title2.jpg"/></h2></div>
				
				<!--左侧广告图-->
				<div style="width: 15%; height: 480px;  float: left;">
					<img src="../products/hao/big01.jpg" width="100%" height="100%"/>
				</div>
				<!--
                	右侧商品
                -->
                <div style="width: 84%; height: 480px;float: left;">
                	<div style="height: 240px; width: 50%; float: left;">
                		<img src="../products/hao/middle01.jpg" height="100%" width="100%" />
                	</div>
					<div class="product">
                		<img src="../products/hao/small08.jpg" />
                		<p>高压锅</p>
                		<p style="color: red;">$998</p>
                	</div>
					<div class="product">
                		<img src="../products/hao/small08.jpg" />
                		<p>高压锅</p>
                		<p style="color: red;">$998</p>
                	</div>
					<div class="product">
                		<img src="../products/hao/small08.jpg" />
                		<p>高压锅</p>
                		<p style="color: red;">$998</p>
                	</div>
					<div class="product">
                		<img src="../products/hao/small08.jpg" />
                		<p>高压锅</p>
                		<p style="color: red;">$998</p>
                	</div>
					<div class="product">
                		<img src="../products/hao/small08.jpg" />
                		<p>高压锅</p>
                		<p style="color: red;">$998</p>
                	</div>
					<div class="product">
                		<img src="../products/hao/small08.jpg" />
                		<p>高压锅</p>
                		<p style="color: red;">$998</p>
                	</div>
					<div class="product">
                		<img src="../products/hao/small08.jpg" />
                		<p>高压锅</p>
                		<p style="color: red;">$998</p>
                	</div>
					<div class="product">
                		<img src="../products/hao/small08.jpg" />
                		<p>高压锅</p>
                		<p style="color: red;">$998</p>
                	</div>
					<div class="product">
                		<img src="../products/hao/small08.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>
					
					<br />
					
					Copyright ? 2005-2016 传智商城 版权所有
			</div>
		</div>
	</body>
</html>

扩展

  • CSS的优先级

    按照选择器搜索精确度来编写: 行内样式 > ID选择器 > 类选择器 > 元素选择器
    就近原则: 哪个离得近,就选用哪个的样式

  • CSS中的其它选择器

    • 元素选择器: 标签的名称{}

    • 类选择器: 以. 开头 .类的名称

    • ID选择器: 以#开头 , #ID的名称 (ID必须是页面上面唯一)

    • 选择器分组: 选择器1,选择器2{ 属性的名称:属性的值}

    • 属性选择器:

      a[title]
a[titile='aaa']
a[href][title]
a[href][title='aaa']

    • 后代选择器: 爷爷选择器 孙子选择器 找出所有的后代

    • 子元素选择器: 父选择器 > 儿子选择器

    <!DOCTYPE html>
<html>
  <head>
  	<meta charset="UTF-8">
  	<title></title>
  	<style>
  		/*请将H1下面的所有 em 元素 的内容颜色改成 红色*/
  		/*中间以空格隔开的是后代选择器*/

          /*后代选择器
            h1 em{
  			color: red;
  		}*/
  		h1 > em{
  			color: red;
  		}
  	</style>
  </head>
  <body>
  	<h1>
  		This is a 
  		<em>儿子</em>
  		<strong>
  			<em>孙子</em>
  		</strong>
  	 heading
  	</h1>
  </body>
</html>
    • 伪类选择器: 通常都是用在A标签上
    a:link {color: red}		/* 未访问的链接 */
a:visited {color: #00FF00}	/* 已访问的链接 */
a:hover {color: #FF00FF}	/* 鼠标移动到链接上 */
a:active {color: #0000FF}	/* 选定的链接 */  ?

原文链接:https://www.cnblogs.com/zllk/p/12833732.html
如有疑问请与原作者联系

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有

上一篇：CSS入门

下一篇：HTML连载86-添加视频、伸缩布局

相关文章

IDC资讯： 主机资讯 注册资讯 托管资讯 vps资讯 网站建设

网站运营： 建站经验 策划盈利 搜索优化 网站推广 免费资源

网站联盟： 联盟新闻 联盟介绍 联盟点评 网赚技巧

行业资讯： 搜索引擎 网络游戏 电子商务 广告传媒

网络编程： Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它

服务器技术： Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护

软件技巧： 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷

网页制作： FrontPages Dreamweaver Javascript css photoshop fireworks Flash

程序设计： Java技术 C/C++ VB delphi

网络知识： 网络协议 网络安全 网络管理 组网方案 Cisco技术

操作系统： Win2000 WinXP Win2003 Mac OS Linux FreeBSD

热门词条
最新资讯
热门关注
热门标签