【无标题】

Lhabc789

于 2022-06-13 17:31:25 发布

阅读量66

点赞数

文章标签： webview android java

本文链接：https://blog.csdn.net/Lhabc789/article/details/125263634

版权

一、主题：完成首页

二、完成页面所需要的知识点（重难点）

1、连接头部和尾部：

2、盒子模型：

作用：可以更方便的进行布局

定义：我们把所有的标签看做一个盒子（div是一个自定义盒子），css就是用来修饰盒子外观的。

margin重合问题：上面盒子的margin-bottom，和下面的盒子margin-top，会重合，不会累加。左右同理。

盒子高宽问题box-sizing：默认情况下：盒子高度=边框线+边距+height；如果设置为box-sizing：border-box;盒子高度=height;

共同规范，常用属性：

padding:0;

margin:0;

box=sizing:border-box;

}

html{

font-family:"自定义字体颜色"；

font-size:16px;

background-color:#eeeee;

}

三、完成页面步骤

1、先在js写头部，

在创建css文件夹，写css样式。

	#tp1{
margin-left: 10px;
		height: 100px;		    		
	}
	#sy{
		height: 150px;
	}
	header>*{
text-align: center;
		float: left;				
	}
	#cs{
		font-size: 20px;
	margin-top: 35px;
	margin-left: 10px;
	text-decoration: none;
	width: 90px;
		line-height: 40px;
		color: white;
		display: block;
	background-color: #CCCCCC;	
	}
header>a{
		margin-top: 40px;
		margin-left: 40px;
		font-size: 20px;
		text-decoration: none;					
		line-height: 30px;
		color: black;
		display: block;		
	}
	#bg{
		margin-top: 40px;
	margin-left: 25px;
	border: 1px solid #3E2D23;
		height: 30px;
		width: 30px;
		background-repeat: no-repeat;
		background-image:url("../img/icon.gif");
		background-position: -125px 4px;
	}

2、在js里写尾部，

<footer>
					<div  style=" display: inline-block;margin-left: 20px;">
						<p>
							<a href="#">品牌动态</a>
							<span class="hx">|</span>
							<a href="#">生产经营资质</a>
							<span class="hx">|</span>
							<a href="#">企业合作</a>
							<span class="hx">|</span>
							<a href="#">发票申请</a>
							<span class="hx">|</span>
							<a href="#">平台规则</a>
							<span class="hx">|</span>
							<a href="#">帮助服务</a>
							<span class="hx">|</span>
							<a href="#">联系我们</a>
						</p>
					</div>
						
					<div id="log1" style=" display: inline-block;">
						<p>
							<span style="margin-left: 120px;">400-999-6665</span>
							<span>WEIBO</span>
							<span>WECHAT</span>
							<span>京东商城</span>
						</p>
					</div>
						
					<div id="log2">
					<p>	<span>深圳市幸福商城科技有限公司</span>
						<span>粤ICP备16541255号-6</span>
						<span>京公网安备44055436878452</span>
						<span>公司地址：深圳市龙蒋杠坂田街道布隆309工业厂</span></p>
					</div>
				</footer>

在css里修改样式。

3、最后写首页中间图片部分，

<body style="float: left;">
	<iframe src="top.html" class="top"></iframe>
				<div><img id="bj" src="img/bg1.jpg" alt="" style="display:block;"></div>
				<div id="" >
					<img src="img/cake_03.jpg" id="img1" alt="" style="width: 487px;">
					<img src="img/cake_05.jpg" id="img1" alt=""  style="width: 487px;">
					<img src="img/cake_07.jpg" id="img1" alt=""  style="width: 487px;">
				</div>		
<iframe src="bottom.html" class="bottom" style="display: block;"  scrolling="no"></iframe>
	</body>

接着写，css样式修改。


.wy{
	
	margin:auto;width:100%;
}
#img1{
	float: left;
	
}
	.top{width: 100%;border: 0;}

.bottom{width: 100%;border: 0;}
	#bj{
		width: 100%;
		height: 100%;
	}

四、碰到的问题，怎么解决的？

图片不会浮动。

用float：left:向左浮动。