用HTML和CSS制作简单的静态网页

最新推荐文章于 2024-07-27 22:02:30 发布

qq_46015356

最新推荐文章于 2024-07-27 22:02:30 发布

阅读量1.5w

点赞数 44

分类专栏： 1.0 文章标签： html css

本文链接：https://blog.csdn.net/qq_46015356/article/details/111824339

版权

本文介绍如何使用HTML和CSS制作小米商城的简单静态网页，展示了网页效果，并提供了未分离的CSS和HTML代码示例。

摘要由CSDN通过智能技术生成

用HTML和CSS制作简单的静态网页（小米商城）

网页效果如下：
在这里插入图片描述

代码如下

（第一次写静态网页，中间css代码和html代码没有分离，所以代码可能有点乱还请见谅）
1、css代码

	/*--------------------------------------------01-----------------------------------------------------------*/
			*{
   
				margin: 0;
				padding: 0;
			}
			
			/*清除标志*/
			li{
   
				list-style: none;
				
			}
			
			/*清除下划线*/
			a{
   
				text-decoration: none;
				
				
			}
			.tp{
   
				height: 120px;
				width: 1360px;
			}
			
			/*把li向左浮动，然后设置一个右边的外边距（就是空格）*/
			.ul li{
   
			
				float: left;
				padding-right: 15px;
				
			}
			.ul li a{
   
				color: rgb(176,176,176);
			}
			.ul li a:hover{
   
				color: white;
			}
			
			/*------------------------------------------02-------------------------------------------------------------*/
			
			.shopping{
   
				
				float: right;
			}
			
			/*a是内联元素，先改成块元素，然后设置外边距*/
			.shopping a{
   
				display: block;
				padding: 0px 50px;
				color: rgb(176,176,176);
			}
			.shopping a:hover{
   
				background-color: saddlebrown;
			}
			
			.right{
   	
				float: right;				
			}
			.right a{
   
				padding-right: 10px;
				color: rgb(176,176,176);
			}
			.right a:hover{
   
				color: white;
			}
			
			
			
			.all{
   
				width: 90%;/* 只占父标签的百分之90的宽度 */
				margin: 0 auto;
				overflow: hidden;/*清除浮动*/
			}
			.top-boss{
   
				background-color: black;
				line-height: 40px;
			}
			
			
			
			
			/*-------------------------------------------03------------------------------------------------------------*/
			
			
			.img{
   
				float: left;
				margin: 23px 190px 0 0;
				
			}
			
			.second-ul li{
   
				float: left;
				padding-right: 25px;
			}
			.second-ul li a:hover{
   
				color: coral;
			}
			
			.input{
   
				float: right;
			}
			.input input{
   
				width: 249px;
				height: 45px;
				border:1px solid #dfdfdf;
			}
			
			.input input:focus{
   
				 background-color: whitesmoke;
				 
			}
			.ss{
   
				float: right;
				margin: 27px 0 0 0;
			}
			.all2{
   
				/*解决高度塌陷*/
				overflow: hidden;
				background-color: white;
				
				height: 100px;
				/*li高度居中*/
				line-height: 100px;
				width: 90%;
				/*宽度居中*/
				margin: 0 auto;
			}
			
			
			
			/*---------------------------------------------04----------------------------------------------------------*/
			
			.center-img{
   
				float: right;
			}
			.left0 ul{
   
				margin: 20px 0 ;
			}
			
			.left0 li a {
   
				display: block;
				line-height: 42px;
				background-color: rgb(114,135,157);
				color: white;
				
				
			}
			
			.left0 li a:hover{
   
				background-color: rgb(255,103,0);
			}
			
			.center-boss{
   
				overflow: hidden;
				width: 90%;
				height: 460px;
				/*宽度居中*/
				margin: 0 auto;
				background-color: rgb(114,135,157);
			}
			
			
			
			/*----------------------------------------------05---------------------------------------------------------*/
			
			
			
			.center-two{
   
				background-color: rgb(95,87,80);
				height: 170px;
				width: 220px;
				margin: 15px 15px 15px 0;
			}
			.center-two ul div li{
   
				font-size: 12px;
			}
			.center-two ul div {
   
				float: left;
				margin: 5px;
				
			}
			
			.center-two ul{
   
				overflow: hidden;
				margin: 0 0 0 15px;
			}
			
			
			
			
			.center-two-one ul li{
   
				float: right;
				margin: 15px 0 0 15px;
				
			}
			.center-two-one ul li img{
   
				height: 170px;
				width: 317px;
			}
			#a{
   
				overflow: hidden;
				width: 90%;
				/*height: 170px;*/
				margin: 0 auto;