2022.6.13项目日志

最新推荐文章于 2024-09-02 20:34:02 发布

m0_71811747

最新推荐文章于 2024-09-02 20:34:02 发布

阅读量88

点赞数

文章标签： css3 css html

本文链接：https://blog.csdn.net/m0_71811747/article/details/125263674

版权

一.今日笔记和知识点总结：

一.知识点：盒子模型
1、why：可以更方便的进行页面布局
2、how：
我们把所有的标签都可以看作是一个盒子(div是一个自定义的盒子)，css就是用来修饰盒子外观的
3、div：用来配合盒子模型来完成布局的，
4.特殊属性
(1):margin重合问题：上面盒子的margin-bottom，和下面盒子的margin-top，会重合，不会累加；
(2):盒子高宽问题box-sizing：默认情况下，盒子高度=height+padding+border；如果设置box-sizing；border-box；那么合照的=height。
二.网页的布局
1.分析页面结构:上中下
2.从整体到部分分解结构
3.整个页面高宽
三.网站的整体设计规范
1、共通规范(常用属性效果)

*{
padding:0;
margin:0;
-webkit-box-sizing:border-box;
box-sizing:border-box;
}
html{
font-family:"Microsoft Yahei";
font-size:16px;
background-colcr:#eeeee;
}

四.今日作业

首页

1.页头

<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="css/top.css">
	</head>
	<body>
	<header>
			<img src="img/logo_big01.png" id="tp1" alt="" style="margin-left: 50px;">
			<img src="img/icon-address.png" style="margin-top: 45px;">
			<span style="margin-top: 40px;font-size: 20px; ">武汉市</span>
			<a href="#" id="cs" >切换城市</a>
			<a href="#" style="">全部</a>
			<a href="#">蛋糕</a>
			<a href="#">下午茶</a>
			<a href="#">手信</a>
			<a href="#">团队预约</a>
			<a href="#">关于我们</a>
			<div id="bg"></div>
			<a href="https://www.4399.com/"><img src="img/i-search.jpg" style="margin-top: 5px;"></a>
			<a href="#"><img src="img/i-cart.jpg" style="margin-top: 5px;"></a>
			<a href="#"><img src="img/i-user.jpg" style="margin-top: 5px;"></a>
			<a href="#" style="font-size: 20px;border: 1px solid #2F2E2D;width: 90px; line-height: 35px;">联系我们</a>
		</header>
	</body>

添加css样式，美化调整页头22

#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;
		height: 30px;
		width: 30px;
		background-repeat: no-repeat;
		background-image:url("../img/icon.gif");
		background-position: -125px 0px;
	}

2.页尾的创建与css样式美化

<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="css/bottom.css">
	</head>
	
	<body>


				<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>
	</body>

footer{
	margin: auto;
font-size: 10px;
	
	  position: absolute;
	                     
	    line-height: 40px;
	width: 100%	;
		  
		
color: white;
	background-color: #3E2D23;
	}
	footer a{
		
		margin-left: 10px;
		text-decoration: none;
		font-size: 20px;
		color: white;
		
	}
	#log1 span{
	
		font-size: 20px;	
			margin-left: 10px;
			
		}
	footer #log2 span{
		
		
		font-size: 20px;
		margin-left: 70px;
		
	}
	footer .hx{
		margin-left: 10px;
	}

3.整个首页合并，并加css美化修饰

<head>
		<meta charset="utf-8" />
		<title></title>
		<link rel="stylesheet" href="css/Index.css">
		
	</head>
	<body>
	<iframe src="top.html" class="top"></iframe>
			
				<img id="bj" src="img/bg1.jpg" alt="">
				<div id="" >
					<img src="img/cake_03.jpg" id="img1" alt="" style="width: 500px;">
					<img src="img/cake_05.jpg" id="img1" alt=""  style="width: 500px;">
					<img src="img/cake_07.jpg" id="img1" alt=""  style="width: 500px;">
				</div>
			
			
<iframe src="bottom.html" class="bottom"></iframe>
	</body>

.wy{
	
	margin:auto;width:100%;

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

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

五.今日难点

中间三个图片的浮动排列，

利用浮动特点，使图片进行排版，并设置图片大小来修饰页面

#img1{
	float: left;
}

<iframe src="top.html" class="top"></iframe>
			
				<img id="bj" src="img/bg1.jpg" alt="">
				<div id="" >
					<img src="img/cake_03.jpg" id="img1" alt="" style="width: 500px;">
					<img src="img/cake_05.jpg" id="img1" alt=""  style="width: 500px;">
					<img src="img/cake_07.jpg" id="img1" alt=""  style="width: 500px;">
				</div>
<iframe src="bottom.html" class="bottom"></iframe>