HTML之淘宝界面案例

最新推荐文章于 2024-05-08 10:17:29 发布

松鼠MaSaKi

最新推荐文章于 2024-05-08 10:17:29 发布

阅读量1.3w

点赞数 31

分类专栏： JAVA Basics 文章标签： html css web前端

本文链接：https://blog.csdn.net/qq_45337431/article/details/99951344

版权

特殊符号

&lt;<br/>	<!--<小于号-->
&gt;<br/>	<!-->大于号-->
&amp;<br/>	<!--&与-->
&reg;<br />	<!--®已注册商标-->
&copy;<br />	<!--©版权标记-->
&trade;<br />	<!--™包含注册商标R，亦包含直接使用未经商标局核准注册的未注册商标-->
&yen;<br/>	<!--¥人民币-->
&and;<br/>	<!--∧异或-->
百度&nbsp;&nbsp;&nbsp;&nbsp;京东<br />	<!--小空格-->
百度&emsp;京东<br />		<!--大空格-->
百度&ensp;&ensp;京东		<!--中空格-->

使用HTML和CSS编写淘宝界面（案例）

在这里插入图片描述
代码
注意里面的注释

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>淘宝页面</title>
		<style type="text/css">
			/*全局选择器，控制字体大小统一，方便排版*/
			* {
    
				font-size: 14px;
			}
			
			/*控制main和top的颜色及尺寸，方便调节，后面可以再将背景色去掉*/
			#top {
    
				width: 1000px;
				height: 220px;
				/* background-color: #87CEEB; */
				margin: 0 auto;/*上下外边距为0，左右自动对齐（居中）*/
			} 
			#main {
    
				width: 1000px;
				height: 500px;
				/* background-color: #DEB887; */
				margin: 0 auto;
			}
			
			/*a标签标示了超链接，这里采用鼠标Hover显示下划线的效果*/
			#top1 a{
    
				color: black;/*字体颜色黑色，由于文字都用a标签包裹，这里只能通过a标签精准调节，注意优先级*/
				text-decoration: none;/*下划线去掉*/
			}
			#top1 a:hover{
    
				text-decoration: underline;/*鼠标放上去显示下划线*/
			}
			
			/*top1的a与top3的a不同这里分别处理*/
			#top3 a{
    
				color: black;/*字体颜色黑色，由于文字都用a标签包裹，这里只能通过a标签精准调节，注意优先级*/
				text-decoration: none;/*下划线去掉*/
			}
			#top3 a:hover{
    
				text-decoration: underline;/*鼠标放上去显示下划线*/
			}
			
			/*分配top1、top2和top3全局*/
			#top1{
    
				height: 30px;
				border-radius: 5px;
				background-color: #888;
				text-indent: 2em;/*文字缩进2字符*/
				line-height: 30px;/*背景框高度是30px，所以这里也是写30，保证居中*/
			}
			#top2{
    
				height: 100px;
				margin-top: 10px;
			}
			#top3{
    
				height: 30px;
				border-radius: 5px;
				background-color: #888;
				text-indent: 2em;
				line-height: 30px;
			}
			#top4{
    
				height: 40px;
				border-radius: 5px;
				border: 1px solid gainsboro;/*实心框线*/
				line-height: 40px;
				text-indent: 2em;
			}
			
			/*主体部分全局控制*/
			#main table p{
    
				font-size: 12px;
				line-height: 5px; /*控制行间距，也可以直接控制p标签的margin*/
				margin-bottom: 0; /*p标签自带的有外边距，这里需要将底部的margin去除，将外框和该标签底部的间距消除*/
			}
			#main table td{
    
				border: 1px solid gainsboro;
				padding:10px;/*内边距，图片文字距离父容器的距离*/
				border-radius: 5px;
			}
		</style>
	</head>
	<body>
		<!--将淘宝页面分为头部和主体（商品展示）两部分，其中，顶部又拆分为四个子顶部部分-->
		<!--顶部-->
		<div id="top">
			
			<!--顶部第一部分，高度、圆角、背景色，此外，内部分两个div，一个左浮动，一个右浮动-->
			<div id="top1">
				<div style="float: left;">
					<!--三个部分都要设置超链接，可以使用a标签，添加href-->
					<a href="#" style="color: red;">亲，请登录</a