欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

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

程序员文章站 2022-06-17 08:12:35
使用CSS完成网站首页的优化 需求分析 由于我们昨天使用表格布局存在缺陷,那么我们要来考虑使用DIV+CSS来对页面进行优化 表格布局的缺陷 1. 嵌套层级太多, 一旦出现嵌套顺序错乱, 整个页面达不到预期效果 2. 采用表格布局,页面不够灵活, 动其中某一块,整个表格布局的结构全都要变 技术分析 ......

使用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}	/* 选定的链接 */  ​

上一篇： Python文件IO(普通文件读写)

下一篇： Tkinter的Radiobutton组件

推荐阅读